Состояния наведения: руководство

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

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

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

Взаимодействие с помощью курсора

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

Вот несколько базовых принципов, о которых нужно помнить при проектировании таких взаимодействий:

• Четкое обозначение функции: При наведении на объект или конкретную область интерфейса на экране должен появляться один из стандартных курсоров, предопределенных операционной системой.

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

• Последовательность: Не усложняйте взаимодействия на разных устройствах. Будьте последовательны и не меняйте внешний вид курсора от одной платформы к другой.

Взаимодействие посредством касаний

Взаимодействие посредством касаний — это взаимодействие с устройством при помощи пальцев. В академических кругах оно известно как NUI (Natural User Interface / естественный пользовательский интерфейс). Но почему «естественный»? Потому что такое взаимодействие происходит напрямую, без использования периферийных устройств ввода вроде мыши, джойстики или стилуса.

Вот три ключевых принципа, которые лежат в основе естественных взаимодействий:

• Незаметность: Сенсорные взаимодействия должны быть естественными и интуитивными. Наша цель — сделать их как можно более плавными и незаметными, используя привычные жесты, например, касание, смахивание, сведение/разведение пальцев (жест масштабирования).

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

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

Виды курсоров

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

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

Изменение внешнего вида курсора и выделение элементов — естественный способ обеспечить немедленную визуальную обратную связь.

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

Важная роль состояний наведения в UI

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

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

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

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

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

• 0,1 секунды — это время ответа, которое дает пользователю ощущение, что система реагирует мгновенно.

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

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

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

Состояния наведения улучшают юзабилити и повышают удовлетворенность аудитории за счет:

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

• Усиления визуальной иерархии: Состояния наведения — эффективный способ привлечь внимание к определенным элементам и сделать важные функции наиболее заметными.

• Предоставления обратной связи: Пользователи чувствуют себя более комфортно, когда получают мгновенную визуальную обратную связь.

• Повышения уверенности: Состояния наведения помогают пользователям понять, как эффективно взаимодействовать с интерфейсом.

Лучшие практики в проектировании состояний наведения

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

• Последовательность: Используйте одинаковые эффекты наведения во всем интерфейсе, чтобы сформировать единое впечатление. Например, все кнопки могут слегка менять цвет, а ссылки — подчеркиваться при наведении.

• Четкая обратная связь: Состояние наведения должно четко указывать на предполагаемое действие.

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

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

О чем следует помнить:

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

• Аффордансы (свойства объектов, которые подсказывают, как с ними можно взаимодействовать): Когда пользователи видят прямоугольник со слегка скругленными углами и цветной заливкой, они распознают его как кнопку. Аналогичным образом они воспринимают и другие элементы интерфейса.

Типы состояний наведения

«Всплытие»

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

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

Выделение

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

Изменение непрозрачности

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

Изменение размера

Мы можем сделать основной элемент более заметным, немного уменьшив размер второстепенных элементов. Дополнительно можно изменить его цвет.

Изменение перспективы

Такая обратная связь создает ощущение глубины. Мы можем плавно вращать элемент или регулировать его масштабирование по различным осям.

Анимационные эффекты

При проектировании состояний наведения мы также можем анимировать различные элементы — ссылки, кнопки, карточки — чтобы привлечь внимание пользователей. Такая обратная связь должна быть не просто декоративной, но и информативной.

Отображение дополнительной информации

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

Вот несколько распространенных сценариев:

• Интернет-магазин: При наведении курсора на карточку товара на экране отображаются дополнительные сведения о нем, например цена, рейтинг, кнопки «Добавить в корзину» или «Посмотреть подробнее».

• Интерфейс Smart TV: При наведении курсора на карточку фильма или сериала на экране отображается краткое описание, «возрастной рейтинг», кнопки «Смотреть сейчас» или «Добавить в Избранное».

• Календарь: При наведении курсора на событие в интерфейсе календаря на экране отображается подробная информация, например, о запланированном визите к врачу, как в примере ниже.

• Дашборд: При наведении курсора на точку данных или элемент графика на экране отображаются дополнительные сведения или инсайты.

Уроки Metro UI

Язык дизайна Windows 8 — Metro UI — преподал нам всем важный урок: отсутствие обратной связи может стоить продукту жизни.

В Metro UI привычные всем пользователям меню «Пуск» и интерфейс Windows Aero были заменены полноэкранным плиточным лейаутом. Цель Microsoft заключалась в создании «чистого» модульного интерфейса, который работал бы как на сенсорных устройствах, так и на настольных компьютерах.

Хотя в Windows 8 использовались карточки (так называемые «живые плитки» или Live Tiles), им не хватало четких визуальных подсказок, что в конечном итоге негативно сказалось на опыте взаимодействия.

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

А ведь Microsoft мог бы спасти интерфейс с помощью простого решения: добавив карточкам состояния наведения. Эта проблема была решена в 2017 году, когда технологический гигант представил новую дизайн-систему Fluent. И хотя она сохраняет основные принципы Metro UI, это значительный шаг вперед с точки зрения внедрения эффективной обратной связи.

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

Итак, существуют ли состояния наведения на мобильных устройствах? 📱

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

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

Один из способов добавить в мобильный интерфейс нечто похожее на состояние наведения — так называемый «ripple effect» (эффект пульсации в Android). Когда вы касаетесь элемента пальцем, по нему будто расходится рябь. Другой метод — жест удержания в iOS. Если пользователь задержит палец на иконке приложения на несколько секунд, откроется подменю.

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

Тестирование и итерации — залог успеха

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

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