Состояние hover: как должна вести себя ссылка при наведении

    Данное рассуждение явилось разросшимся комментом на публикацию dezmasterdezmaster, опубликовавшему сегодня статью под заголовком "Ссылки при наведении курсора: нужна ли реакция?". Честно говоря, меня давно мучают схожие вопросы (= И вот, наконец, удалось немного понаводить порядок в своей голове.

    Основной смысл всего мною сказанного: сила реакции ссылки на курсор мыши уменьшает время прицеливания (точно также как и размер ссылки, и ее расстояние от курсора), а значит уменьшает время между нашим желанием и его реализацией. Однако, вместе с тем, слишком сильная реакция может угнетает наши органы чувств и вызывать раздражение.

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


    Издержки прицеливания

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

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

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

    Чем отчетливее ссылка, и чем она ярче среагирует на наведение, тем быстрее мы сообразим, что нацеливание завершено и работа закончена.

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

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

    Контраст и контекст

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

    Значит универсального решения быть не может, нужно искать золотую середину: сделать реакцию ссылки довольно отчетливой, но в то же самое время не переборщить. Говоря по-другому, мы должны правильно подобрать конраст между активным и неактивным состоянием ссылки. Конраст же этот сильно завязан на окружающем ссылку контексте.

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

    Ссылка среди картинок

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

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

    Вывод: для ссылок из указанного контекста следует усилить контраст, изменяя состояние самих ссылок при наведении.

    Ссылка в тексте

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

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

    Ссылка среди ссылок

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

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

    Ссылки в меню

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

    Ссылки в повторе

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

    Для таких ссылок лучше не усиливать контраст состояний.

    Ссылки в изменении контента

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

    Подробнее
    Реклама

    Комментарии 35

      +2
      Полностью согласен с основной мыслью. ;)
      Поведение и вид ссылки должно зависеть от контекста тоже. Но вид ссылки и её поседение должны быть как можно более консистентными на одном ресурсе.

      Что же мы видем на любимой Хабре? ;)


      8 разных видов ссылок по цвету, размеру, фону и поведению... и это не считая ещё подвала публикации и комментариев, где можно насчитать ещё 3-4 вида ссылок.
      Повод помыслить... ;)
        0
        Но вид ссылки и её поседение...
        Хе-хе, очепяточка: поседение > поведение!.. :)
        Ссылки седеть пока не умеют...
          0
          Можно седеть при наведении. ;)
          +1
          хм. ещё большим поводом помыслить будет, если сделать такой же скриншот, только с одинаковым внешним видом ссылок.
          и посмотреть что из этого будет более юзабилительно :)

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

            Можно подойти к проблеме с другого краю: возможно что-то стоит спрятать?
              0
              Выделить различные области можно и по-другому, необязательно менять стиль самих ссылок. Можно, например поменять цвет фона всего блока.
            0
            Когда ссылкой является сразу несколько слов, либо две ссылки в тексте примыкают друг к другу, подчеркивание просто необходимо для выделения ссылок еще до подвода мышки.
              –2
              Ага, а лучше уволить контент-менеджера.
              0
              Моё имхо. Подчёркивание должно быть 50% прозрачности от цвета ссылки. CSS вам в помощь.
                0
                Также согласен с мыслью автора и позволю немного дополнить. Зачастую, перед тем как перейти по ссылке, в голову лезет вопрос, откроется ли страница в новом окне, либо в текущем? Хуже того, когда находишься на проекте насыщенным ajax, то ситуация куда более плачевная, поэтому можно было бы выделить еще тип перехода по ссылке, к примеру подчеркиванием
                  0
                  А как быстро пользователь соотнесёт одно с другим? Хотя, тут может подсознание сработать, но это уже предмет тонкой работы.

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

                    В некоторых браузерах (не будем показывать пальцем) псевдокласс :hover применим только к тегам <a>. Для остальных же тегов он тупо игнорируется. Так вот, родилось кроссбраузерное решение сей проблемки. Только теперь указывать нужно не псевдокласс, а нормальный класс элемента. Пример

                    #content h1.hover {
                        color: #888;
                        text-decoration: none;
                    }


                    Собственно скрипт.

                    function addprops(root) {
                        if(root=='') root = document.getElementsByTagName("BODY")['0'];
                        for(var i=0; i<root.childNodes.length; i++) {
                            node = root.childNodes[i];
                            if (!node.tagName) continue;

                            node.onmouseover=function() {this.className+=" hover";}
                            node.onmouseout=function() {
                                this.className=this.className.replace(" hover", "");
                                this.className=this.className.replace("hover", "");
                            }

                            if(node.hasChildNodes()) addprops(node);
                        }
                        return 0;
                    }

                    Вставляю в документ я это вот так

                    window.onLoad = init();
                    function init() {
                        addprops('');

                        //сюда можно воткнуть ещё какие-нибудь функции
                        //чтоб исполнялись при загрузке
                    }
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Это конечно же решение кроссбраузерности, однако очень громоздкое решение (= На крупных проектах типа Хабра не допустимо в принципе. Т.к. при большом числе ссылок на странице браузер будет откровенно "подвисать" при загрузке (на onload) - бегая по всем ссылкам и расставляя ховеры (=
                          0
                          Ой черт! у вас же скрипт вообще парсит весь дом! кошмар (=
                            0
                            кошмар-то кошмар. Но можно дописать ещё одну строчку и указав root, пройтись только по одной ветке дома.
                            if(root=='') root = document.getElementsByTagName("BODY")['0'];
                            else root = document.getElementsById(root);
                              0
                              а если я АЖКСом подгружаю контент?
                              не, не покатит — слишком узкое решение проблемы.
                                0
                                да и вообще. Если верстать дивами, то максимальная "глубина залегания" нодов будет не больше 5-6. Соответственно, выделение памяти при рекурсии гораздо меньше.

                                Для сравнения в табличной верстке table->tbody->tr->td->p. А я часто видел и до трёх таблиц друг в друге.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                0
                                ага. если я правильно понимаю, вы предлагаете по onmouseover тега (допустим) body вызывать обработчик, который будет спускаться по (опять же) всему дому и искать последний элемент в иерархии и что-то с ним делать.

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

                                Вот это, я считаю, уже совсем нерациональное решение.
                                • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              Этому решению уже в обед сто лет... Ну, а если в комплексе лечить IE 6, то лучше уж воспользоваться библиотечкой IE7 от Дена Едвардса, и, тогда можно использовать и псевдо классы и даже почти все CSS 3 селекторы.
                              Я думаю, что можно потихоньку забивать на IE 6 в этом случае, а IE 7 уже умеет подсвечивать любые элементы.
                              Но, опять же, как сказали выше, лучше такое решение не использовать для страниц с большим количеством ссылок — будут тормоза.
                                0
                                круть! за ссылку спасибо невероятное!!!
                              0
                              не плохо было бы для описания выложить пример,например как http://habrahabr.ru/blog/ui_design_and_usability/30759.html
                              и еще - текста очень много и трудно усваиваемый
                                0
                                ага, спасибо - попробую доработать (=
                                  0
                                  текста в меру
                                0
                                Свежая статейка по поводу ссылок: Don't Click Here: The Art of Hyperlinking.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Посмотрите как здесь реализовано http://beta.bobrdobr.ru
                                    У залогиненного пользователя очень сильные тормоза в ИЕ6 и Опере наблюдаются.
                                    Есть идеи как ускорить?
                                      0
                                      спасибо

                                      никогда не думал о подобной категоризации, воспринимал ссылки вообщем-то как единое целое; теперь вижу между ними разницу :-)
                                        0
                                        Все интересно, но сильно затяный рассказ.
                                        Но спасибо за материал, возмем на заметку.

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

                                        Самое читаемое