Не обращая внимания на то, что гиперссылки кроме этого содержат текст, их неизменно необходимо отделять от другого текстового контента. При чтении веб-страницы ваши пользователи должны с легкостью распознавать все кликабельные элементы. И в случае если ваши ссылки не будут прекрасно контрастировать с фоном, люди попросту не увидят их.
На большинстве сайтов ссылки выделяют при помощи цвета, но для пользователей, страдающих дальтонизмом, для того чтобы контраста не хватает. Эти люди фактически не подмечают отличия в цвете, исходя из этого делать выводы о наличии ссылки они смогут, лишь глядя на курсор:
Отличие в восприятии цвета простым человеком и страдающим дальтонизмом
Применив hover-эффект, вы помогаете пользователям осознать, какие конкретно элементы являются кликабельными. Курсор, наведенный на ссылку, которой задан соответствующий псевдоэлемент, изменяет оформление текста, что сигнализирует о возможности нажатия и сокращает риск не подметить ссылку.
- 6 обстоятельств применять сокращенные URL в маркетинге
Уменьшите сосредоточенность на курсоре
Отсутствие hover-эффекта отражается не только на дальтониках, но и на простых визитёрах. Не смотря на то, что пользователи, в большинстве случаев, без неприятностей различают ссылки, им все равно приходится прикладывать упрочнения, дабы по ним попасть:
Слева: ссылка без hover-эффекта, вынуждающая пользователя наблюдать на курсор и на текст, чтобы выяснить, в то время, когда кликать.
Справа: достаточно дождаться трансформации оформления
Видя ссылку, пользователь перемещает мышь в ее направлении, но перед тем как надавить на нее, необходимо убедиться в том, что курсор находится конкретно над ссылкой, поскольку в другом случае перехода не случится.
Благодаря hover-эффекту пользователи смогут кликать по ссылкам, когда они увидят соответствующее выделение. Это разрешает им наводиться на элементы и кликать по ним намного стремительнее, не сосредотачиваясь на курсоре. В следствии, визитёры больше фокусируются на контенте страницы.
Применяйте псевдоэлемент ::hover, дабы повысить видимость и кликабельность ссылок
Твитнуть цитату
Совершенный hover-эффект
Как правило совершенным возможно назвать тот hover-эффект, что превосходно контрастирует с фоном страницы. Дабы добиться этого, вам необходимо применять более утепленные цветовые оттенки, и выделять ссылки подчеркиванием либо фоновой подсветкой:
Совершенный hover-эффект — большой контраст, форма и цвет
В смартфонах hover-эффекты трудиться не будут, потому, что при просмотре веб-контента тут не задействован курсор. Это значит, что ваши мобильные ссылки должны выделяться на фоне страницы еще перед тем, как человек надавит на них. Оформите их так, как будто бы hover-эффект уже сработал — применяйте стрелки, подчеркивания и фоновую подсветку, дабы привлечь интерес визитёров:
- Секреты юзабилити: анимация для понимания и внимания
Заключение
Независимо от того, как ваши пользователи различают цвета, не забывайте, что они должны с легкостью распознавать кликабельные элементы сайта, в особенности в случае если речь заходит о внутренних ссылках. Hover-эффект — это несложный и действенный метод, за счет которого вы сможете не только удовлетворить потребности визитёров, но и существенно улучшить их пользовательский опыт.
Высоких вам конверсий!
По данным: uxmovement.com
Случайные статьи:
CSS анимация элементов при наведении
Подборка похожих статей:
-
Почему гиперссылки синего цвета — и другие необычные истории из мира интернета
В апреле 1969 было создано то, что сейчас известно как Интернет. Но тогда у него было второе имя — ARPAnet, и он был доступен лишь ученым…
-
Секреты юзабилити: почему пользователи винят себя в ошибках дизайнеров?
Мы ненавидим неопределенность. В случае если что-то идет не так, мы как возможно скорее желаем разобраться, в чем же обстоятельство. Но в то время, когда…
-
Идентифицировать конверсионную цель визитёров и содействовать ее достижению через интеракцию с web-интерфейсом — не сущность принципиально важно, на…
-
Почему простой интерфейс ведет к плохому юзабилити?
С позиций юзабилити, эргономичный ресурс не требует от пользователей громадных либо значимых когнитивных упрочнений, т.е. его «цена интеракции»…