Как управлять вниманием пользователя: 5 советов от UX/UI дизайнера
Рассказываем, как создать интерфейс, который не вызовет у пользователя когнитивный диссонанс
Привет! Это Heads and Hands.
Помогаем создавать сервисы, которые нравятся пользователям и приносят прибыль бизнесу.
👉🏻 В блоге анализируем UX/UI и рассказываем, как сделать круто.
👉🏻 В Telegram разбираем супераппы и их обновления.
Пользователи не любят регистрироваться — они хотят быстро оформить и получить заказ или услугу. 25% клиентов уходят из-за обязательной регистрации — данные Baymard Institute.
Зная это, сервисы стараются убрать регистрацию или максимально упростить ее. Например, Whoosh сделал кнопку «Войти через Apple» акцентной, чтобы подсказать пользователю оптимальный вариант.
Визуальные подсказки в интерфейсе — один из способов убедить пользователя совершить нужное действие. UX/UI-дизайнер Heads and Hands Анна Байда рассказывает, как еще можно управлять вниманием пользователя.
Способ №1 Использовать доминанты и точки фокуса
Доминанты — самые крупные и привлекательные элементы в интерфейсе, их используют, чтобы выделить важную информацию. Обычно доминанты располагают ближе к центру экрана.
Точки фокуса — это иконки, кнопки и другие элементы, которые пользователь замечает после доминанты. Они отвечают за зоны интереса и удерживают внимание пользователя. Точки фокуса обычно находятся по краям экрана.
Пример. Яндекс разместил поле поиска в центре экрана — это доминанта и первое, за что цепляется взгляд. Потом пользователь фокусирует внимание на других ключевых функциях: в верхнем углу экрана находятся профиль и почта, а в нижнем — кнопка голосового ассистента Алисы.
Способ № 2. Учитывать правило внутреннего и внешнего
Правило внутреннего и внешнего гласит: близкие друг к другу элементы кажутся связанными по смыслу. А объекты на расстоянии друг от друга выглядят обособленными. Зная это правило, мы можем помочь пользователю структурировать информацию.
Пример. В корзине Яндекс Лавки карточки товаров отделены друг от друга с помощью горизонтальной линии — дивайдера. Поэтому пользователь может легко соотнести цену и количество товаров. А также быстро поменять количество товаров или удалить их из корзины.
Нарушение правила внутреннего и внешнего вызовет у пользователя когнитивный диссонанс. Даже с правильными расстояниями композиция не будет считываться, если элементы в ней сгруппированы некорректно.
Пример. Додо Пицца учла правило внутреннего и внешнего, но визуально отделила цену и количество от изображения товара. В результате, если в корзине много товаров, дивайдеры с двух сторон образуют ложную карточку. Поэтому, когда пользователь захочет убрать из корзины один товар, то может удалить совершенно другой.
В полной версии статьи рассказали, когда имеет смысл ломать привычные шаблоны и как проверить, что дизайн ведет себя предсказуемо.
Спасибо за внимание!