Как захватить внимание пользователя: 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
Интересная статья. Меня лично всегда очень сильно смущали навигационные иконки без текстового обозначения. При проектировании интерфейсов, я представляю, смогли бы мои пожилые родственники пользоваться этим продуктом.
Как правило, иконки без текста всегда вызывают ступор у большинства людей, которые не проводят много времени за использованием сайтов или приложений.
В вашем примере с аккордеоном, абсолютно не очевидно что там прячется меню, если ты такую иконку видишь впервые. Т.е. часть пользователей этого сайта, даже не узнают что там есть пункты меню.
Ещё отличный пример для меня, это приложение озон. Если вы откроете главную страницу приложения, внизу будет навигация с иконками, и вот когда я объясняю свой маме как ей попасть в настройки профиля, я говорю ей - «нажми на лицо внизу». Для дизайнера озона очевидно, что лицо это меню профиля, но для некоторых людей, это просто набор иконок и они ничего для них не значат.
Озон как раз-таки и подписывает свои иконки. Например, "на лице внизу" написано "Мой Ozon". А многие приложения предлагают пройти краткое обучение по основному функционалу после их установки.
У меня на ios нет текста под иконками в главном меню.
Если для того чтобы разобраться в приложении нужно проходить обучение или пользоваться гуглом, то это пример плохого интерфейса. Вы зашли на сайт, чтобы заказать себе товар, а вам предлагают пройти обучение, это сто процентов снизит конверсию
сайты и не предполагают никакого обучения, речь о приложениях) взять тот же озон: после его установки, помнится, был какой-то краткий экскурс по навигации) не думаю, что кто-то после этого психанул и в ужжосе побежал от него избавляться, так ничего и не купив 🤷🏼♀️
Понял почему вы написали про приложение. Прошу прощения, я криво выразился про сайт выше)
Статья вроде про удачное построение интерфейсов, интерфейсы не только в приложениях бывают.
Я уверен, что для кого-то все таки это обучение может вызвать желание закрыть приложение. Или у меня как минимум, обучение всегда вызывает раздражение. Я зашёл в ваше приложение купить коту корм, не нужно меня учить как пользоваться настройками - вот примерно так я мыслю.
Если в дизайне не разобраться без обучения, то это однозначно минус.
Предположим ситуацию, я скачал приложение, пропустил обучение, вновь открыл приложение через месяц, а обучения уже нету, вот и как тут быть? Месяц хранить в памяти куда разработчики спрятали кнопку?
И если следовать логике. То цель приложения озона, это заставить вас как можно быстрее сделать заказ товара. Если на пути к этому целевому действию будет возникать попапы с обучением, это сто процентов снизит конверсию, ибо все это дополнительные шаги на пути к цели. Не важно приложение это или сайт