{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

Как управлять вниманием пользователя: 5 советов от UX/UI дизайнера

Рассказываем, как создать интерфейс, который не вызовет у пользователя когнитивный диссонанс

Привет! Это Heads and Hands.

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

👉🏻 В блоге анализируем UX/UI и рассказываем, как сделать круто.

👉🏻 В Telegram разбираем супераппы и их обновления.

Пользователи не любят регистрироваться — они хотят быстро оформить и получить заказ или услугу. 25% клиентов уходят из-за обязательной регистрации — данные Baymard Institute.

Зная это, сервисы стараются убрать регистрацию или максимально упростить ее. Например, Whoosh сделал кнопку «Войти через Apple» акцентной, чтобы подсказать пользователю оптимальный вариант.

Визуальные подсказки в интерфейсе — один из способов убедить пользователя совершить нужное действие. UX/UI-дизайнер Heads and Hands Анна Байда рассказывает, как еще можно управлять вниманием пользователя.

Способ №1 Использовать доминанты и точки фокуса

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

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

Пример. Яндекс разместил поле поиска в центре экрана — это доминанта и первое, за что цепляется взгляд. Потом пользователь фокусирует внимание на других ключевых функциях: в верхнем углу экрана находятся профиль и почта, а в нижнем — кнопка голосового ассистента Алисы.

Способ № 2. Учитывать правило внутреннего и внешнего

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

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

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

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

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

Спасибо за внимание!

0
Комментарии
-3 комментариев
Раскрывать всегда