Как захватить внимание пользователя: 7 законов удачного построения интерфейсов

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

***

Почти 90% информации человек получает с помощью зрения, около 9% — с помощью слуха и только 1% — с помощью вкуса, осязания и обоняния. Этим фактом часто пренебрегают многие заказчики, а зря. Знание можно обернуть в свою сторону, создав классный интерфейс, который будет легко считываться человеческим глазом. С его помощью продукт получится максимально удобным и эффективным.

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

1. Магическое правило 7 ± 2

Или закон Миллера. Число 7 ± 2 — закономерность, согласно которой кратковременная память не может запомнить и повторить больше 7 ± 2 элементов.

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

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

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

2. Геометрическая память

Это свойство памяти, основанное на работе клеток мозга, которые позволяют определять местоположение, запоминать и прокладывать маршруты. Когда человек вспоминает определенное место в пространстве, у него активируется геометрическая память — «внутренний GPS».

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

3. Закон памяти: эффект края

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

4. Группировки объектов

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

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

5. Контраст формы

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

А есть понятие обратного контраст форм: когда на фоне сложные элементы, а на переднем плане что-то простое.

Нужно быть готовым, что пользователь все равно будет отвлекаться на более сложные формы.

6. Контраст размера

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

Исторически сложилось, что для человека все большое — опасное. В интерфейсе это тоже прижилось. Дизайнеры акцентируют внимание на больших кнопках, управляя таким образом фокусом: кнопка «купить» — большая. Кнопка «нет, спасибо» — поменьше.

И это работает — пользователь может ввести свою почту, даже если он изначально не хотел. Лишь бы окно уже закрылось ¯\_(ツ)_/¯ Использовать такие приемы или нет — личный выбор дизайнера. Но очевидно, что такой подход не ориентирован на пользователя.

7. Контраст движения

Движущиеся объекты игнорировать сложно. Для управления фокусом пользователя, анимация — незаменимая вещь. Сиюминутная фокусировка на движущимся объекте досталась нам от далеких предков. Двигается? Значит это или еда, или опасность. Поэтому когда в визуальном поле появляется какое-то движение, глаз к нему приковывается автоматически.

Но анимация должна вести себя естественно (как на примере). Не двигаться слишком быстро или медленно. Иначе ее будет тяжело воспринимать.

***

Спасибо за прочтение! С вами была Веб-студия Pyrobyte. Надеемся, вы почерпнули для себя что-то полезное :)

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

Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen

Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ

Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT

Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov

Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot