Спорное оформление вкладок и кнопок

Иллюстрация к статье «Спорное оформление вкладок и кнопок»

Есть один вопрос, поиском ответа на который я занимаюсь уже некоторое время: «Стоит ли подчеркивать ссылки, когда они стилизованы под меню-закладки или кнопки?» То есть, тот самый текст, который пишется на элементах управления.

Не нашёл ответов на этот вопрос в книгах и трудах от гуру юзабилити, там больше о реализации и состояниях этих самых кнопок и табов. Поэтому пришлось побродить по сети, посмотреть наглядные примеры и сделать собственные выводы.

Ход мыслей

Чтобы всем стало понятно, о чём идёт речь, небольшой пример оформления кнопки.

Моё мнение — подчёркнутый текст вызывает ощущение, что текст и фон на кнопке не единый элемент. Неподчёркнутые ссылки, в этом плане, смотрятся более цельно, а не как текстовая ссылка с фоном-подложкой.

И, как это часто бывает, одни неправильные решения влекут за собой другие:

1. часто не соблюдаются принципы нескольких состояний для кнопки (фона): обычное, при наведении и активное (как в примере с неправильной кнопкой). Они просто отсутствуют.

2. область реагирования значительно меньше чем размер элемента:

Пример правильной и неправильной области реагирования кнопок

В принципе, всё что описано выше, также относится и к оформлению меню-закладок. В них тоже часто встречаются точно такие же ошибки.

Кроме того, у вкладок ещё может быть одно состояние — открытая, указывающая на текущую страницу.

Надуманная проблема?

Тем, кто сомневается в том, что разница в оформлении таких привычных пользователям элементов существует, предлагаю самостоятельно попутешествовать по сети и присмотреться к реализации кнопок и закладок. Думаю, результаты вас удивят.

Ну а это первое, что попалось мне на глаза:

Пример оформления закладок на сайте sape.ru

Пример оформления закладок на сайте nytimes.com

Открытый вопрос

Вряд ли это грубые ошибки в дизайне, скорее правила хорошего тона, но я стараюсь придерживаться в работе тех принципов, которые описал в этой статье как «правильные».

А ваше мнение?

* * *

Сканер блогов:

Маленькая сага про кавычки «ёлочкой». Продвижение сайтов, часть 5-я.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 10

  1. 40a, 15.03.2009 в 20:50

    Полностью поддерживаю. В примере у неправильной ссылки область реагирования занимает весь элемент, а должна бать только текстом.

    Ответить

  2. rotor, 15.03.2009 в 23:48

    Да, я знаю, спасибо за замечание. Просто не пытался показать область реагирования на живом примере, для этого есть рисунок далее по тексту.

    Ответить

  3. sordes, 16.03.2009 в 10:00

    Тут, имхо, кому как больше нравится. Я вот считаю, что у каждой кнопки и вкладки должны быть минимум три состояния: нормал, ховер и пресс.

    Подчеркивать ссылки, когда они стилизованы под кнопки считаю излишним, так как кнопка у каждого человека ассоциируется с активным элементом, с которым можно взаимодействовать. А подчеркивание изначально призвано выделить ссылку (активный элемент) из остального текста. Зачем выделять дополнительно то, что изначально идентифицируется как активный элемент? Другое дело, что не все удосуживаются ссылки, стилизованные под кнопки правильно оформить. Очень часто лепят только одно состояние.

    Ответить

  4. rotor, 16.03.2009 в 11:03

    @sordes даже не знаю чем возразить, именно об этом и пост :)

    Согласен с каждой буквой.

    Ответить

  5. Юзабилист, 16.03.2009 в 11:37

    Мне кажеьтся, что проблема с вкладками надумана.

    Поддерживаю sorders, закладка больше похожа на кнопку.

    Писал о этом в статье

    Ответить

  6. Юзабилист, 16.03.2009 в 11:49

    Название статьи «Кнопка или ссылка?»

    Ответить

  7. Сергей М., 17.03.2009 в 23:07

    Проще будьте — ищите исток проблемы в том, откуда пришли элементы. Кнопки и вкладки — элементы ОС, в вебе они создаются с помощью других инструментов (кнопки — все чаще). Плюс к привычности добавляем удобство (и просто рационализм) — и получаем, что, действительно, область реагирования и у тех, и у других должна быть заполняющей.

    По ссылке от «юзабилиста», кстати, является неплохой проблемой — решение, когда нужна кнопка, а когда ссылка — довольно интересный момент. Но тоже простой — полностью подчеркнутая ссылка для не передающих значения формы управляющих элементов, с прерывистым — которые еще и не перегружают страницу (аякс, джеэс — как в случае с «добавить аттач», «удалить» в интерфейсе, например, почты).

    Еще одна интересная проблема, которую, к сожалению, не упоминают часто — это использование в качестве кнопки изображений (input type="image"). Например, для визуального оформления поиска или подобного. Тут по идее, элемент — вроде и кнопка, и пиктограмма, и бог знает что еще. И получается сплав области реагирования от кнопки с внешним видом пиктограммы, да еще и реакцией на нажатие энтера в строке ввода (считай, автосабмита).

    Ну и псевдокнопки — реализованные на теге a от ссылок. Если они используются как кнопки — все требования идут полностью от этого типа элемента. Но при этом стоит учитывать, как и в случае с обычными кнопками состояния неактивная-выделенная-нажатая. И аксессибилити тоже не забывать — т.е. перемещения по табу. Тут помогут селекторы :hover, :focus, :active.

    И опять же, в некоторых браузерах ссылки-псевдокнопки по табу (и при нажатии и удерживани икнопки мыши) дополнительно выделяются пунктирными рамками по бордеру, что для кнопок недопустимо — не забываем сбрасывать это с помощью outline:0.

    И так много написал :) но еще по вкладкам — там тоже не все так просто. Настоящие вкладки дополнительно, как на примере в посте, указывают не только какая из них нажата, но и показывают, что вся страничка ниже как будто вытащена из папки — т.е. этот кусок относится именно к вкладкам. Вот эта связь здесь самое важное.

    Но при этом, к счастью, веб дает большие возможности по конкретным реализациям, так что существует слишком много возможностей сделать псевдовкладки — и это хорошо. Надо следить только за прозрачностью метафоры.

    Вот как-то я от тебя жду в своем ридере рассуждений и логических построений, а не в блоггерско-юзабилити стиле «так надо, смотрите на картинки» :)

    Ответить

  8. rotor, 18.03.2009 в 11:50

    @ Сергей М.

    За что обожаю твои комментарии — то, что масса дополнений и все по теме. Даже сразу и не знаю, где возразить, а где согласиться... :)

    Замечание по поводу кнопок и вкладок, как элементов ОС и софта — отличное. Только переносится всё это в сеть умельцами по-разному. Поэтому, в статье, я больше сконцентрировался на внешнем виде и отличиях реализации этих элементов в веб, не описывал проблемы их вёрстки. Но тема довольно обширная.

    Как продолжение, можно ещё вспомнить, что вкладки бывают многоуровневыми, и тогда начинается настоящая неразбериха в реализации, и как следствие, полная потеря метафоры и ассоциации с физическими вкладками.

    Кроме рассуждений и логических построений (принял к сведению ;), люблю проводить различные тестирования, но жаль, что подопытные кролики не всегда понимают всю важность момента и часто срывают эксперименты :)

    Ответить

  9. Сергей М., 18.03.2009 в 12:31

    Многоуровневые вкладки как таковые (блоггеры, например, видели это в квазиблогуне — Профите) — это в большинстве случаев — это ошибка на уровне проектирования, знаешь ли :). Скажем, если брать аналогию из шкафа картотеки, то может быть только два уровня — папки и вкладки, все что больше — уже ведет к запутыванию. Ну вот у папок могуть быть отдельные «вложения» и так далее. Так что физическая метафора есть всегда :) — просто когда кажется, что она теряется, это уже этакий звоночек ))

    Но да, тут монографии писать можно и заделываться Якобом. А вот тестирование — это интересно, и еще интереснее срывы экспериментов — можно поанализировать причины и даже найти ошибки не только в ДНК тестеров ;)

    Ответить

  10. nvs, 03.04.2009 в 13:15

    оО полезные советы, у меня тож такие ошибки встречаются, обязательно исправлю. Ну и на ленту подпишусь=))

    Ответить

Есть что сказать?