Курсор с рукой
Курсор в виде руки с указательным пальцем, насколько я понимаю, впервые появился в браузере. Подчёркнутый текст не давал достаточного аффорданса, поэтому пользователю нужно было как-то намекнуть, что «слово кликабельно».
В какой-то момент ЦСС дал возможность указать форму курсора для любого элемента на странице, и многие стали лепить эту руку над чекбоксами и другими элементами, на которые можно нажать. Я был противником этого: у меня была уже устойчивая привычка, что рука означает ссылку, и, следовательно, кликнув, я уйду со страницы. Мне было некомфортно нажимать на чекбокс «пальцем», я хотел надёжную стрелочку.
На кнопках рука смотрелась совсем бредово: я и так вижу, что могу нажать («не лохи летят»).
Сейчас на дворе веб 2.0 («Javascript now works», как говорит Джефф Этвуд), и кругом стоят пунктирные ссылки, которые никуда не ведут, а что-то делают на текущей странице. Естественно, что такие ссылки нуждаются в курсоре-руке, никакого дискомфорта это не вызывают.
Проблема теперь в том, что я не знаю, как сформулировать правило, по которому выбирается курсор между рукой и стрелкой. Делать руку у всех «кликабельных» элементов — западло. Пока лучшее, что мне приходит в голову — довериться браузеру (тогда у всех ахрефов будет рука).
я считаю, что нужно просто оставлять нативные курсоры, чтобы не ломать ментальную карту:
Все
Иногда кнопка (та, которая button) бывает так застилизована, что подсказка в виде руки совсем не лишняя. Для кнопок лучше оставлять указатель по умолчанию если оформление самой кнопки оставлено по умолчанию.
А иногда ссылки стилизуют под внешний вид кнопок (это мне не совсем понятно, но тем не менее), и тогда вообще попытка сформулировать какое-то правило заводит в тупик.
Делать руку у всех «кликабельных» элементов — правильный выбор.
А как же «не лохи летят»?
«Делать руку у всех „кликабельных“ элементов — западло» — охерительный довод!
Я, как понимаете, думаю прямо наоборот, так как логическая связка: рука — можно кликнуть и что-то случиться вполне естественна для всех, кроме, почему-то, дизайнеров интерфейсов.
Узнал новое слово, спасибо! Правда не понял зачем его нужно было применять.
По-моему все просто: если клик по чему-то приведет к изменению внешнего вида страницы, то при наведении на это что-то должна быть рука.
А лохи тут не при чем. Рука — это как ховер у ссылки — она дает понять, что уже можно нажимать. Удобнее так.
Кстати, насчет комментов. Ты как-то писал, что на одном сайте плохая форма. Со своей тоже не мешало бы разобраться. Например, мне очень интересно, кто такие комментаторы, какие их сайты. А у тебя только имена и фамилии.
Я стараюсь делать так:
Как вам такой подход?
Cознательные и интуитивные усилия по созданию значимого порядка — будет решением выбора руки или стрелки.
Я все кликабельное делаю рукой, не западло :)
Точнее, правильно заметил Roman выше. Не просто кликабельное, но и функциональное.
input type=«text» тоже?..
Курсор над кнопкой, как мне кажется, тоже должен быть рукой. Потому что кнопка может быть в режиме disable, а если её вид отличается от стандартного и не прорисованы все состояния кнопки, то пока не попробуешь нажать — не поймёшь.
Конечно состояние hover тоже должно быть у кнопок, но различия и в виде курсора тут не помешают.
В интерфейсе ОС элементы управления выглядят одинаково во всех приложениях, сравнительно легко к ним привыкаешь и лапка не нужна. На вебе значительно большее разнообразие элементов управления, и они на всех сайтах выглядят по разному, там сложнее выработать такую же узнаваемость как в ОС, поэтому лапка для всех нажимаемых элементов не помешает, пример — кнопка поиска на этом сайте.
Для тех кому западло тоже есть решение, они могут петь песни, танцевать танцы, и рассказывать что лапку в Firefox 3 на стандартной кнопке не сделаешь даже при желании.
Кстати, только что обратил внимание, что для label все-таки курсор с рукой имеет смысл — он подсказывает, что это часть контрола, а не просто текст. Ведь часто бывает, когда жмешь на подпись к чекбоксу, а он не меняет своего состояния, и приходится целиться в маленький квадратик, а тут курсор у подписи сразу помогает не сомневаться: сработает или нет?
Да, это соображение мне в голову тоже приходило.
// input type=«text» тоже?.. //
Так это не функциональный элемент, в том смысле, что при клике ничего не изменяется на странице.
То, что после клика можно вводить текст в поле — с этим и браузеры справляются, изменяя курсор на символ ввода текста.
Как не изменяется? В поле начинает курсор мигать, а на маке оно ещё и обводится рамочкой.
Илья, а как насчет кнопки, которую я сейчас нажму, чтобы отправить этот комментарий? :)
Наверное, шаблоны эти я верстал исходя из принципа, что всё, что нажимается, должно быть с рукой. Я вот Контроль+Энтер жму всегда, даже не замечал, что у меня такая хрень :-)
В спецификации CSS2 про свойство cursor всё написано — какие курсоры когда использовать.
В частности, когда курсор над текстом, который можно выделить — курсор должен быть text.
Наверное, изначально была логика: «рука = действие», а «стрелка = локализация» (сама стрелка ничего не делает, она только помогает локализовать место где будет сделано следующее действие, например при mousedown на текcте курсор станет текстовым и позволит выделять текст, при right-click-e на картинке предложит что-то с ней сделать и т. д. ). Если это предположение правильно, то логично использовать руку для всех действий, изменяющих состояние странцы (нажимания на ссылки и кнопки, JS раскрывание-схлопывание в аккардеонах и табах, дозагрузка и т. д.). Веб-то уже не из страниц состоит :-).
Можно даже еретически продолжать: когда «JS really works» то стандартных курсоров в браузере даже маловато! Потому что части страниц стали «контролами», иначе говоря рубильниками, переключателями и микшерами-ползунками отражающими состояние одновременно. А браузеры дефолтно дают практически только 3 курсора на все многообразие управления, которое наворачивают web-2-нольщики. А как же текст-как-интерфейс? Или даже шире: объект как естественный интерфейс?
В адобовских программах, например в индизе, курсоры действительно отражают состояние и помогают работать эффективнее. Их там не менее двух десятков. Использовать же свои, загружаемые курсоры — как-то боязно, из-за браузерной и платформенной разноголосицы (Кстати кто-то в реальных веб-проектах использовал свои курсоры?).
Чекбоксы и прочая — это стандартный и устоявшийся элемент интерфейса, по которому понятное дело что надо кликать. И для них курсор в виде руки сыграет скорее злую шутку: если на форме много элементов и они стоят плотно, то она сразу станет похожа на рекламный баннер с нарисованными фальшивыми элементами интерфейса.
Текст, даже подчеркнутый, таковым не является. Там рука уместна.
Пунктирное подчеркивание для ссылок, которые просто что-то делают на странице — это хорошо и правильно.
Вот кстати вопрос. В каком-нибудь браузере наконец догадались сделать удобным выделение текста ссылки мышкой? Ну например с зажатым альт+шифт?
Почему «наконец», в Опере это работало всю жизнь безо всяких альт+шифт.
Олежик, в «Опере» текст ссылки выделяется мышкой безо всяких «альт-шифтов».
Курсор в виде руки с пальцем впервые появился в HyperCard в 1987 году. HyperCard, a graphical hypermedia database tool, released with System 6, introducing the pointing-finger cursor [ http://www.granneman.com/techinfo/background/history/ ]. HyperCard had a significant impact on the web as it inspired the creation of both HTTP itself (through its influence on Tim Berners-Lee’s colleague Robert Cailliau), and JavaScript (whose creator, Brendan Eich, was inspired by HyperTalk). It was also a key inspiration for ViolaWWW, an early web browser [это уже википедия].
Олежик, как уже сказали, в Опере ссылки выделяются. Хочется только добавить, что это особенно полезно с функцией «Перейти по ссылке», когда какой-нибудь форумный движек или хабр не правильно автоматически определяет ссылку, обрезая части, например, после запятой и половина ссылки становится текстом.
Эдзо Хогусава, спецификация стилей также упоминает возможность задавать внесистемные курсоры (как рисунки), описывать курсоры можно с помощью масштабируемой графики.
А кое-какие браузеры уже поддерживают такую возможность; можно посмотреть тест:
http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-interact-cursor-01-f.html
смотреть в последних сборках вебкитовских оборзевателей интернета.
Илья, не все ссылки уводят со строницы. И нормальными ссылками они были ещё до того, как джаваскрипт стал работать.
http://ilyabirman.ru/meanwhile/2009/07/15/1/comments/#22
http://ilyabirman.ru/meanwhile/2009/07/15/1/comments/#23
http://ilyabirman.ru/meanwhile/2009/07/15/1/comments/#1
http://ilyabirman.ru/meanwhile/2009/07/15/1/comments/#9
Рука — это знак того, что уже можно кликать, именно так. Кнопки, чекбоксы и текстовые поля, разумеется, не нуждаются в курсоре-руке, потому что и так понятно, что что-то произойдёт, если мы кликнем.
Что нельзя сказать про ссылки, какими бы они ни были — подчёркнутыми сплошной линией или пунктирной.
Таким образом, рука — это указатель на то, что именно произойдёт после нашего клика, а лишь индикатор того, что клик к чему-то да приведёт.
В предыдущем комментарии: «это НЕ указатель на то»
Стандарты де-факто, которые есть на данный момент, сложились исторически, в них никакой системности нет, и искать ее бесполезно. Мы можем придумать сколь угодно логичное правило, но использовать его будет трудно, если оно будет противоречить сложившимся традициям.
У меня есть два варианта такого правила, какое из них лучше, я пока затрудняюсь сказать.
Правило №1. «Рука» должна быть только над ссылками. Если при клике по элементу происходит любое действие, кроме перехода на другую страницу (якоря считаются), курсор должен быть стандартным — т. е.стрелкой. Показывать активность такого элемента нужно изменением его внешнего вида, например, менять цвет у текста, подчеркнутого пунктиром. Если следовать этому правилу, веб-интерфейсы максимально приблизятся к настольным, и это нормально, ведь функционал у современных веб-приложений почти такой же. При этом решается проблема когда, когда курсор, превратившись в руку, сигнализирует о наличии ссылки, при этом открыть эту ссылку в новом окне не получается.
Правило №2. У стандартных элементов, отрисовкой которых занимается сам браузер (или ОС с его подачи), вид курсора оставлять дефолтным. У всех остальных активных элементов на странице рисовать руку.
Все таки на большинстве сайтов у стандартных контролов курсор не переопределен, а значит к этому привыкло большинство пользователей. Кроме того, если я не ошибаюсь, все браузеры в этом плане ведут себя одинаково.
Мне больше нравится правило №1, оно более логичное и последовательное. Но в его применимость верится с трудом.