Неправильно ли использовать курсор в виде руки для интерактивных элементов, таких как кнопки?

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

alt text

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

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

Но, как разработчики, мы должны думать о пользователях children и иногда делать что-то не так, как нам нравится, а так, как они нравятся пользователю. Проблема в том, что я так нечетко отношусь к курсору в виде руки на кнопках, что не замечаю возможности его несоответствия. Многие ошибки дизайна вызваны такими личными решениями.

введите описание изображения здесь

Что вы об этом думаете?

Изменить: Недавно я обратил внимание на использование курсора в виде руки в Photoshop (CS3 в XP), но, вероятно, только потому, что я использовал его более широко. Снимок экрана:

введите описание изображения здесь

Обратите внимание, что во многих местах, где использовалась рука, очевидно, можно нажимать.
РЕДАКТИРОВАТЬ2: Также обратите внимание, что они даже использовали настраиваемый курсор, который честно говоря, я бы никогда этого не сделал, особенно для чего-то тривиального, как курсор в виде руки, который настолько вездесущ. И это даже не красиво.


person Camilo Martin    schedule 08.11.2010    source источник
comment
Я меняю свой. Я не вижу в этом проблемы.   -  person jcolebrand    schedule 08.11.2010
comment
Рад видеть, что я не единственный круглый колышек.   -  person Camilo Martin    schedule 08.11.2010
comment
Вы перекрестно публикуете это на UI.stackexchange для, возможно, лучших ответов   -  person Yi Jiang    schedule 21.12.2010


Ответы (7)


Причина, по которой курсор меняет форму при переходе по гиперссылке, вероятно, связана со следующим:

  • гиперссылки начинались с блоков текста, и поэтому было не очевидно, что можно щелкнуть по ним, чтобы открыть другую страницу.
  • Само по себе изменение стиля отображения ссылок, вероятно, было недостаточно, чтобы сообщить о «кликабельности» ссылки. Возможно также потому, что изменения в стиле отображения не совсем стандартизированы, в то время как курсор в виде руки.
  • кнопки на веб-страницах были «обычно» кликабельными, я думаю, хотя я не могу вспомнить, вызывали ли они изменение формы курсора. В настоящее время «кнопки» часто «подделываются» с помощью css, и вам нужен другой способ сообщить пользователю, что он может щелкнуть по нему => курсор в форме руки стал для этого по умолчанию.

Однако все вышеперечисленное направлено на передачу «кликабельности» содержания веб-страницы. Кнопки, кнопки на панелях инструментов, пункты меню и т. Д. Всегда можно было щелкнуть без изменения формы курсора. И вы не видите, как браузеры меняют форму курсора, когда вы наводите курсор на пункт меню или кнопку панели инструментов.

В настольном приложении вы, вероятно, не стали бы перемещать курсор над каждым элементом в дереве, даже если это приводит к появлению другой информации на панели сбоку от дерева? Или для каждого элемента вы можете выбрать его в списке? Или для радиокнопок или флажков в форме? Так зачем же это делать для кнопок формы, которые в настольном приложении всегда легко идентифицировать и которые по своей природе являются интерактивными.

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


обновить в ответ на комментарии

@Camilo: Я понимаю ваше различие "команда" и "выбор". Я бы даже добавил к этому миксу «навигацию». Однако я до сих пор не вижу необходимости изменять форму курсора в ui-элементе команды.

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

В общем: если вы отправите форму в Интернете с помощью «POST» (или «DELETE»), это, вероятно, будет команда, тогда как все остальное будет навигацией.

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

Таким образом, дерево возможных серверов для подключения для меня все еще является элементом выбора. Я надеюсь, что фактическое соединение выполняется не одним щелчком мыши, а только при двойном щелчке по элементу или после того, как элемент был выбран при нажатии кнопки «Подключить». И поэтому в этом конкретном случае я бы по-прежнему не использовал курсор в форме руки на дереве.

person Marjan Venema    schedule 08.11.2010
comment
+1 за упоминание о том, что исторически курсор в виде руки был необходим, но в настоящее время большинство случайных пользователей (следовательно, наиболее нуждающихся в визуальных подсказках) проводят значительную часть своего компьютерного времени на веб-сайтах. И Possibly also because the changes in display style aren't exactly standardised, while the handshape cursor is. - это не так, это просто другой стиль, который вы можете изменить, например, color или text-decoration. См. Здесь: w3schools.com/css/pr_class_cursor.asp (но веб-мастера использовали color и text-decoration другие в тегах <a>). - person Camilo Martin; 08.11.2010
comment
И я бы изменил курсор в древовидной структуре, если он передает команду (например, дерево возможных серверов для подключения) 9, но я бы не стал, если бы он передает выбор (например, список папок). На мой взгляд, стрелка ассоциируется с выбором, а рука - с командой. Но, возможно, я просто не похож на других пользователей. Беспокойство по поводу шума, безусловно, справедливо, но у меня есть сильные чувства по поводу курсора в виде руки на кнопках, и я также хотел бы позаимствовать легкое ощущение веб-страниц. - person Camilo Martin; 08.11.2010
comment
Что, если при нажатии на один из узлов такого дерева произойдет подключение к выбранному серверу? Я бы заметил, что что-то произойдет, если я щелкну по нему, сначала из-за изменения курсора, а затем из-за того, что я увижу всплывающую подсказку в строках Click to connect to http:/server.com/, но если бы курсор не изменился, я бы подумал, что ничего не произойдет ( помимо выбора) с первого раза. Обратите внимание, что это все равно будет тривиальная связь, такая как Imgur против Tweetpic, а не Visa против Paypal. И в свою защиту все веб-кнопки, даже самые очевидные (например, Google), используют курсор в виде руки. - person Camilo Martin; 08.11.2010
comment
@Camilo: Я полагаю, люди это заметят, но это просто идет вразрез с тем, что, я думаю, люди привыкли ожидать от таких элементов пользовательского интерфейса, как treeviews. И да, я знаю, что большинство веб-кнопок используют курсор в виде руки. Просто мое мнение, что это лишнее ... :) - person Marjan Venema; 08.11.2010
comment
Я ценю ваше мнение и обдумываю его, но если я использую курсор в виде руки, я должен использовать его постоянно, так что это своего рода важное решение UX. Я полагаю, это во многом связано с имитацией Интернета. - person Camilo Martin; 09.11.2010
comment
@Camilo: Я согласен, последовательность очень важна, важнее, чем выбор формы курсора. Если вы выберете другую форму курсора, я бы рекомендовал создать свою собственную версию кнопок (и других) элементов управления, чтобы вам не пришлось забывать об изменении формы курсора для каждой кнопки (...) в вашем приложении. - person Marjan Venema; 09.11.2010
comment
Да, я уже создаю свои собственные версии каждого элемента управления, который использую. Например, если вы измените размер обычного древовидного представления .NET, оно будет сильно мерцать, и решение для его двойной буферизации будет сложным, как и представление списка (это мне очень помогло: dev.nomad-net.info/articles/double-buffered-tree-and-list-views ) Кроме того, я унаследовал класс form, чтобы добавить определенную функциональность, и я очень доволен результатом - я настоятельно рекомендую наследовать каждый класс .NET, который вас не полностью устраивает. - person Camilo Martin; 09.11.2010
comment
Ответ выбран, потому что вопрос был открытым достаточно долго и получил наибольшее количество голосов. - person Camilo Martin; 30.12.2011

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

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

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

Лично я придерживаюсь следующего правила:

Стрелки предназначены для элементов, на которые можно щелкнуть, например, для таких вещей, как кнопки, переключатели, раскрывающиеся меню и т. Д. Рука полезна, когда вам нужно уделить чему-то, что может или не может выглядеть как кнопка, немного дополнительного внимания. Он действительно усиливает призыв к действию «кликни меня!», «Кликни меня!».

Кроме того, в Интернете я заметил, что рука имеет тенденцию указывать элементы, при нажатии на которые будет отображаться БОЛЬШЕ релевантного контента относительно того, что вы только что щелкнули, в то время как стрелка, похоже, больше управляется «командой», то есть «сделай это сейчас» .

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

ИМХО - нет ничего "интуитивно понятного" по своей сути. Интуитивный - это просто еще один способ сказать «более знакомый» или «менее знакомый».

person exoboy    schedule 19.11.2010
comment
Что ж, если честно, я бы воспользовался вашими рекомендациями, если бы мог различать явно кликабельные и требуемые подсказки, потому что я склонен думать о большинстве кнопок в Интернете как о кликабельных, прежде чем перемещать на них курсор. Но у меня также есть ощущение, что начинающие пользователи успокаиваются, видя курсор в виде руки перед тем, как щелкнуть, и я думаю, что это также более дружелюбно. Я обновил вопрос, добавив в Photoshop изображение курсора в виде руки, которое я не осознавал еще несколько дней назад. В принципе, я думаю, что легче добиться согласованности между командами и выбором, чем с кликабельностью. - person Camilo Martin; 20.11.2010
comment
Кнопки могут быть непростыми вещами. Кнопки не всегда выглядят как кнопки, и не все вещи, похожие на кнопки, являются кнопками ... так что. Вот где появляется опыт. Вам просто нужно определить, каковы ваши собственные интерпретации для очевидного кликабельности, и необходимы некоторые подсказки. Вот в чем суть. Если бы это было легко, мы бы все уже поняли, что это наука. То, что мы воспринимаем как пуговицу сегодня, завтра может сильно отличаться. Вот почему я упоминаю свою философию об интуитивном. Вещи текут и никогда не остаются прежними. Так что то, что сегодня более привычно, завтра может устареть. - person exoboy; 20.11.2010
comment
Вы только посмотрите на английский язык. Есть множество фраз, слов и сленгов, которые когда-то были совершенно обычным явлением, а теперь, если бы вы говорили таким образом, людям было бы трудно вас понять. UI / UX-дизайн - то же самое ... только с компьютерами, взаимодействием и дизайном. - person exoboy; 20.11.2010

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

Оставайтесь с курсором в виде руки ТОЛЬКО, если вы хотите имитировать внешний вид веб-приложения.

person Daniel Mošmondor    schedule 08.11.2010
comment
Я хочу имитировать внешний вид веб-приложения! Большинство приложений выглядят коренастыми и тяжелыми, я хочу вдохнуть немного воздуха в рабочий стол с более утонченным внешним видом и ощущениями, как то, что Google сделал с Chrome, и рука - это то, что я считаю важным штрихом для достижения этой цели. - person Camilo Martin; 08.11.2010
comment
@Camilo: но Google Chrome не использует ручные курсоры на кнопках панели инструментов или на любых других кнопках своих форм / диалогов ... - person Marjan Venema; 08.11.2010
comment
@MarjanVenema ~ Эти элементы взяты из Интернета, но в другом формате. Они используют эффект наведения, чтобы выделить наведение. - person jcolebrand; 08.11.2010
comment
Что ж, когда я нахожу курсор на кнопки Chrome, я не чувствую необходимости иметь такой курсор в виде руки, но, возможно, потому, что большинство из них представляют собой выбор и навигацию, а не собственно команды (как я считаю кнопку закладки). - person Camilo Martin; 09.11.2010

интересный момент .. позвольте мне попытаться упростить.

Стрелки - подсказки для настольных приложений + интерфейсы, которые очень интуитивно понятны.

Рука - обязательно для ГИПЕРТЕКСТА, для обычного пользователя важно знать, какой текст доступен для нажатия.

person Rajesh R. Nair    schedule 09.11.2010
comment
Курсор в виде руки в настоящее время используется не только для текста, он используется для любого интерактивного элемента на веб-страницах, даже если эти веб-страницы могут изменить курсор на стрелку для кнопок. В сети пользователь ожидает, что каждый интерактивный элемент будет интерактивным. Зачем делать другое на рабочем столе? Особенно, если я настраиваю кнопки или другие элементы управления. - person Camilo Martin; 10.11.2010

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

Я не думаю, что есть четкий ответ, но для меня, если платформа, для которой я кодирую (Windows), я просто буду следовать примерам базовой ОС, чтобы она была согласованной, что означает отсутствие значков рук для кнопок в Windows.

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

person dr. evil    schedule 21.12.2010
comment
Что насчет, например, графика. Таким образом, если указатель изменится на руку в узлах графика, это будет очевидным индикатором кликабельности. - person Camilo Martin; 21.12.2010
comment
Звучит разумно, но лично я предпочитаю изменить точку обзора (точно так же, как кнопки управления) (предположительно, вы щелкаете точку на графике) - person dr. evil; 22.12.2010

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

Раньше ... настольные клиенты почти всегда использовали один курсор, и при наведении курсора кнопка изменяла видимое состояние, указывая на область кликабельности. На веб-страницах курсор менялся на ссылках, и не было последовательного поведения, когда действие было обработано javascript.

Зайдя на некоторые из наиболее часто используемых веб-сайтов и приложений, я нахожу ... Как пользователя меня это не волнует так сильно, как я думал. Клиенты Deskstop в основном просто меняют кнопку, и если курсор меняется, я не замечаю. Веб-клиенты обычно меняют курсор И часто применяют визуальное состояние наведения кнопки, и я редко замечаю, когда они этого не делают.

Пока кто-то не убедительно аргументирует обратное, я буду придерживаться простейшего правила для нашего дизайна: всегда менять курсор на действиях и применять наведение курсора на регулярно используемые кнопки.

person Will Budreau    schedule 03.04.2013
comment
Ну, я, например, считаю, что у каждой кнопки должно быть состояние наведения, независимо от того, используется она регулярно или нет. В противном случае вы получите эффект Windows 8 - интерфейс будет выглядеть так, как будто он не был рассчитан на мышь (в случае Windows 8 похоже, что это не так ...). - person Camilo Martin; 04.04.2013

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

Посмотрите определение гиперссылки для получения дополнительной информации.

Пример: Google Диск

person user3018646    schedule 16.09.2014