LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Юзабилити: Почему гиперссылки нужно выделять hover-эффектом?

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

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

Юзабилити: Почему гиперссылки нужно выделять hover-эффектом

Разница в восприятии цвета обычным человеком и страдающим дальтонизмом

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

Уменьшите сосредоточенность на курсоре

Отсутствие hover-эффекта сказывается не только на дальтониках, но и на обычных посетителях. Хотя пользователи, как правило, без проблем различают ссылки, им все равно приходится прикладывать усилия, чтобы по ним попасть:

hover-эффект

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

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

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

quote
Используйте псевдоэлемент ::hover, чтобы повысить видимость и кликабельность ссылок
 

Идеальный hover-эффект

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

Идеальный hover-эффект

Идеальный hover-эффект — высокий контраст, цвет и форма

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

Идеальный hover-эффект

Заключение

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

Высоких вам конверсий!

По материалам: uxmovement.com 

23-12-2015

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".