Сursor:pointer и "принцип наименьшего удивления"

[SelenIT]

В связи с обсуждением верстки форм вспомнился старый холивор. Интересно узнать мнение профессионалов в 2011 году. Как всегда, рассчитываю как минимум на обогащение моей head { content: '' } чем-то новым, а как максимум — на рождение той самой истины (которая "где-то там")...

[Svatov]

На кликабельных элементах неочевидного дизайна ответил. Дело в том, что хороший тон делать на интерактивных элементах 1. Подсветку (или аналоги) 2. Курсор поинтер. Или хотя бы, что-то из двух.

П.с не профессионал, но кучку навалил)

Edited September 27, 2011 by Svatov

[Great Rash]

Для любых интерактивных эл-тов (кнопок, флажков...)

Вот так проголовосал. Если на элемент можно кликнуть, то на нем должен быть pointer. Это мое глубокое убеждение. Не понимаю почему на <button> стоит default...

[s0rr0w]

Для любых интерактивных эл-тов (кнопок, флажков...)

Вот так проголовосал. Если на элемент можно кликнуть, то на нем должен быть pointer. Это мое глубокое убеждение. Не понимаю почему на <button> стоит default...

+1

[zSpx]

Для любых интерактивных эл-тов (кнопок, флажков...)

У меня когнитивный диссонанс возникает видя дефолтный курсор над кнопкой (или другим интерактивным элементом). Как если бы на дверь открывающуюся от себя, приклеили табличку "на себя".

[rash]

Пока не голосовал, тоже нет твердого убеждения.

На ссылках понятно почему pointer должен быть обязательно: одна только привычка пользователей — уже веский аргумент. По поводу других элементов для меня все не так очевидно.

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

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

Ну и для кликабельных элементов неочевидного дизайна подсказка указателем просто необходима.

[SelenIT]

А вот у меня когнитивный диссонанс возникает, когда я вижу "ссылочный" курсор и не могу применить к этому объекту никаких ссылочных действий (подсмотреть в статусе, куда эта ссылка ведет, открыть ее в новой вкладке мидл-кликом, скопировать адрес и т.п.). К тому же нигде за пределами веба ссылочный курсор для кликабельных элементов не встречается (припоминаю только вариант настройки какой-то редакции Win98, отображавшей ярлыки ссылками — с "пальцем", синим подчеркиванием и открытием одиночным кликом — но это было жутко непривычно и неудобно, потому и не прижилось). У кнопок на панели браузера — дефолтный курсор, у системного меню — дефолтный, почему же в окне браузера правила меняются? Откуда вообще пошла эта традиция?

В спецификации (что CSS 2.1, что CSS 3 Basic UI в статусе CR) вроде бы четко написано, что

pointer

The cursor is a pointer that indicates a link.

То, что кликабельные элементы должны как-то визуально реагировать на :hover и :focus/:active — это само собой. В нетривиальных случаях, имхо, нелишним будет тултип (title). Согласен, что изменение курсора тоже своего рода подсказка. Но почему именно тот вид курсора, от которого ждешь вполне определенного поведения — и эти ожидания обманываются?

Для себя я вижу лишь две причины, почему веб стал "тыкать пальцем" везде, где кликабельно. Главная — то, что из-за убогой реализации кнопок в HTML, не позволявшей толком их стилизовать, вебмастера долго были вынуждены реализовывать чуть ли не все дизайнерские фантазии "про интерактивность" через ссылки (обычно с href="#" onclick="...", или, того хлеще, href="javascript:..."), а сменой курсора никто не заморачивался — вот и выработалась привычка. И мелочь — Flash, в которой почему-то курсор "пальчиком" изначально был сделан признаком "нажимабельной" кнопки. Имхо, этого явно мало, чтобы повально использовать этот курсор вразрез со спецификацией и устоявшимися стереотипами системных GUI (что мы наблюдаем). Какая же еще причина упорно ускользает от моего внимания?

А теперь, в эпоху наступления тач-скринов, роль курсора как "признака нажимабельности", имхо, вообще должна круто пойти на спад, настоящему пальцу ведь нарисованный не покажешь, там кликабельность должна быть очевидна из общих соображений. А раз такое в принципе возможно, надо ли плодить путаницу с курсорами?

[Great Rash]

И все равно я считаю, что надо Я евангелист курсора-пальца

[SelenIT]

Но всё-таки, почему? Причем, AFAIK, только в вебе, что характерно...

[s0rr0w]

Меньше мозговых затрат на распознавание элемента и предсказания его реакции и поведения. А это, брат мой, первая притча юзабилити. Срабатывает стандартный паттерн и все.

[SelenIT]

В том-то и дело, что у меня, когда я натыкаюсь на ссылочный курсор у нессылки, стандартный паттерн рвется...

Напротив, когда я вижу элемент, который выглядит как кнопка и при наведении подсвечивается как кнопка, у меня срабатывает стандартный паттерн для кнопки и мне плевать, какой у нее курсор (хотя "некнопочный" курсор чуть-чуть прибавляет сомнений).

Это я один такой ненормальный, что ли?

[Nanto]

А я по привычке на ссылку (читай в момент cursor:pointer) правой кнопкой давлю: или в новой вкладке, или копировать ссылку.

Так что я за неочевидный дизайн, ибо там иногда такого наваляют - сиди и думай, то ли это кнопка, то ли декоративная графика...

[SelenIT]

А я по привычке на ссылку (читай в момент cursor:pointer) правой кнопкой давлю

Фух, выходит, я не один

[Great Rash]

Я давлю колесом, чтобы открыть в новой вкладке. Через контекстное меню неудобно.

[Nanto]

Я про колесо только сегодня здесь узнал... Но ПКМ привычнее, сразу видно - ссылка или другой элемент (контекстное меню совершенно другое), ну и иногда (хотя, конечно, не часто) надо ссылку скопировать...

[Nekromancer]

В данном случае больше согласен с SelenIT, так как я по сложившейся привычке открываю большинство ссылок в новой вкладке и автоматически когда вижу подобие ссылки (да ещё и pointer) жму ролик/ctrl+click, а в итоге оказывается что ничего не происходит, а бывает и хуже - открывается пустая страница со строкой - javascript: someStupidMethod();. Так же, почти весь интерфейс операционных систем использует стандартный курсор для большинства кнопок. В том же скролл баре всё предельно просто, не нужны никакие поинтеры, однако некоторые умельцы умудряются на искусственных селектах и скрол барах ставить - cursor: pointer; Давайте тогда и при выводе хинта вешать курсор - help, а чё, не понятно же что это подсказка.

А если брать в расчёт обычных юзеров то им глубоко пофиг открывается эта кнопка в новом окне или нет, есть на ней поинтер или нет. Если она похожа хоть на что то кликабельное - они обязательно кликнут.

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

По этому проголосовал за третий пункт.

[s0rr0w]

В том-то и дело, что у меня, когда я натыкаюсь на ссылочный курсор у нессылки, стандартный паттерн рвется...

Возвращаемся к системным интерфейсам и веб-интерфейсам. Почему в системе не меняется курсор? Потому что плотность элементов очень высокая, элементы имеют строгое местоположение, догадываться о их предназначении не нужно. Фактически можно сказать, что любой интерфейс любой программы в среднем на 90% состоит из кнопок и управляющих элементов.

В вебе ситуация наоборот, управляющих кнопок всего 10%, остальное - контент. Поэтому требуются дополнительные акценты в виде цветовой дифференциации, стилизированных курсоров, смены визуального стиля управляющих элементов и так далее.

Нельзя смешивать системные интерфейсы и веб-интерфейсы. Тут работают разные паттерны и преследовалась разная цель.

Из собственного опыта. Во всех наших продуктах весь интерфейс строится на одной странице. Кроме этого мы вообще отказались от кнопки "Back" и не храним историю комманд и не даем ходить по ней. Сперва это вызывает диссонанс, но через время все становится на свои места. Весь интерфейс теперь работает по принципу "двигаемся только вперед". Результат - интерфейсом пользуются совсем "домохозяйки" вообще без подготовки и изучения документации.

[Анна]

Из собственного опыта. Во всех наших продуктах весь интерфейс строится на одной странице. Кроме этого мы вообще отказались от кнопки "Back" и не храним историю комманд и не даем ходить по ней. Сперва это вызывает диссонанс, но через время все становится на свои места. Весь интерфейс теперь работает по принципу "двигаемся только вперед". Результат - интерфейсом пользуются совсем "домохозяйки" вообще без подготовки и изучения документации.

Можно посмотреть на один какой-нибудь такой пример?

[s0rr0w]

Можно посмотреть на один какой-нибудь такой пример?

Вскоре, думаю, да.

[Nanto]

Диссонас и отход от привычек - это зло! Я, например, из-за этого не могу перейти на семёрку - как представлю сколько предстоит разбираться, отрубать всякой дряни, да просто привыкать к тому, что некоторое время будешь елозить мышкой по монитору в поисках кликабельных элементов! И если с Windows 7 подобные нововведения как-то оправданы, то для небольшого проекта это бессмысленно, пользователи не будут жить одним этим проектом; они будут пользоваться и другими - как следствие, привычка не выработается!

[SelenIT]

В вебе ситуация наоборот, управляющих кнопок всего 10%, остальное - контент. Поэтому требуются дополнительные акценты в виде цветовой дифференциации, стилизированных курсоров, смены визуального стиля управляющих элементов и так далее.

Нельзя смешивать системные интерфейсы и веб-интерфейсы. Тут работают разные паттерны и преследовалась разная цель.

Полностью согласен насчет сайтов, вынужден поспорить насчет интерфейсов веб-приложений. Для традиционных сайтов, да, ссылки — чуть ли не единственная доступная интерактивность. Но вот, например, панель WYSIWYG-редактора — там кликабельных элементов не то что 90%, а чуть не 98:) И это очевидно без всяких выкрутасов (другое дело, часто нужна подсказка, что именно делает та или иная кнопка, но такие подсказки есть в тултипах).

Еще пример — phpmyadmin. Казалось бы, везде "пальчики": что в списке таблиц в левом фрейме, что в заголовках для сортировки, что в верхнем меню. Но практически все эти элементы — настоящие ссылки (можно открыть, скажем, структуру таблицы в новой вкладке, не теряя вкладки с ее содержимым, то же самое можно делать с заголовками столбцов для сортировки и т.д.). Хотя львиная доля площади занята управляющими элементами, эти элементы не ломают стереотипы веб-юзера, а напротив, используют эти стереотипы для дополнительных возможностей.

Как пример эталонного интерфейса веб-приложения нередко приводят GMail. Смотрю сейчас на свой корпоративный — в целом и впрямь логично: объекты (напр. папки в почте) — ссылки (можно перейти в папку в этом же окне, а можно открыть ее в новой вкладке), а действия с объектами (написать письмо, пометить как спам, удалить и т.п.) — кнопки, реализованы на дивах, на наведение откликаются подсветкой, но под ссылки не мимикрируют и паттерн не ломают . Вот то, что отдельное письмо я почему-то не могу открыть в новой вкладке/окне (ссылка же вроде!), не теряя из вида списка, несколько напрягает. Кстати, ЕМНИП, какое-то время GMail-овцы экспериментировали, делая все кнопки с "пальчиком", но в итоге, судя по всему, от этого отказались. Мне кажется, уж где-где, а в Гугле юзабилити-тестирование должно быть на уровне...

Диссонас и отход от привычек - это зло!

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

[s0rr0w]

Но вот, например, панель WYSIWYG-редактора

Это жалкая попытка перенести интерфейсное решение в веб. Соответственно подходить к нему нужно было не как к веб-приложению

Еще пример — phpmyadmin. Казалось бы, везде "пальчики": что в списке таблиц в левом фрейме, что в заголовках для сортировки, что в верхнем меню. Но практически все эти элементы — настоящие ссылки (можно открыть, скажем, структуру таблицы в новой вкладке, не теряя вкладки с ее содержимым, то же самое можно делать с заголовками столбцов для сортировки и т.д.). Хотя львиная доля площади занята управляющими элементами, эти элементы не ломают стереотипы веб-юзера, а напротив, используют эти стереотипы для дополнительных возможностей.

Это пример того, как не надо делать. Там столько ошибок в проектировании самого интерфейса, что не счесть. И приятные мелочи являются каплей в море.

Как пример эталонного интерфейса веб-приложения нередко приводят GMail.

Неудобный во многих моментах. И стала хромать простота понимания от версии к версии

[SelenIT]

жалкая попытка перенести

Почему жалкая-то? Одна задача — одно решение...

Про неидеальность PMA и ГМыла не спорю, но здесь упомянул их исключительно в плане (не)уместности и (не)ожидаемости ссылочного курсора на их элементах (мой личный user experience по этой части).

А какая версия ГМыла была самой простой для понимания?

[s0rr0w]

А какая версия ГМыла была самой простой для понимания?

Три апдейта назад было проще и понятнее