Как захватить внимание пользователя: 7 законов удачного построения интерфейсов
У вас есть РОВНО 3 секунды на то, чтобы зацепить внимание пользователя, заставив его остаться на вашем сайте/приложении. Ни больше ни меньше. Рассказываем, как удержать внимание посетителя с помощью грамотно отрисованного интерфейса.
***
Почти 90% информации человек получает с помощью зрения, около 9% — с помощью слуха и только 1% — с помощью вкуса, осязания и обоняния. Этим фактом часто пренебрегают многие заказчики, а зря. Знание можно обернуть в свою сторону, создав классный интерфейс, который будет легко считываться человеческим глазом. С его помощью продукт получится максимально удобным и эффективным.
В предыдущих статьях рассказали о том, что такое триггеры и мотиваторы, и как с их помощью захватить внимание пользователя. В новой статье рассказываем о базовых правилах построения интерфейса, которые помогают управлять вниманием пользователя.
1. Магическое правило 7 ± 2
Или закон Миллера. Число 7 ± 2 — закономерность, согласно которой кратковременная память не может запомнить и повторить больше 7 ± 2 элементов.
Лишние предметы, элементы и стили могут вызвать напряжение, и человек может почувствовать дискомфорт. Не стоит повышать порог его когнитивной нагрузки, иначе мозг будет чувствовать себя не очень.
Если объектов становится больше, мозг впадает в ступор
С точки зрения эволюции, мозг — самый ленивый орган, который стремится экономить силы. Перегружая интерфейс, мы перегружаем мозг пользователя, а он этого не любит.
Это можно сравнить с запуском приложений на телефон: люди стараются включать меньше приложений одновременно, чтобы сэкономить батарейку.
Пример тяжелого интерфейса. Элементов меню много, пользователю легко потеряться
Пример удачного интерфейса. Дизайнер оставил в меню только 2 элемента, а остальные убрал в «бургер»
2. Геометрическая память
Это свойство памяти, основанное на работе клеток мозга, которые позволяют определять местоположение, запоминать и прокладывать маршруты. Когда человек вспоминает определенное место в пространстве, у него активируется геометрическая память — «внутренний GPS».
Когда человек взаимодействует с интерфейсом, у него срабатывает геометрическая память точно так же, как при взаимодействии с объектами дома или на улице.
Пример неудачного интерфейса. Чтобы что-то найти, приходится прикладывать усилия, потому что элементов много, они хаотичны. Это ненужные сложности
3. Закон памяти: эффект края
Середину и края человек различает лучше всего. Промежуточные положения тоже нормально запоминаются, а вот промежуточные между промежуточными работают слабо. Учитывайте это при разработке своих проектов.
В последнюю очередь пользователь обращает внимание на промежуточные варианты между промежуточными
4. Группировки объектов
Пользователь легко группирует геометрические объекты визуально, если ему не мешать. Если группировка слабая, ему приходится тратить дополнительные ресурсы, чтобы обобщить и абстрагировать признаки предмета.
Очень важное правило. Особенно в верстке, где пользователю нужно быстро поглощать контент.
5. Контраст формы
На сложных объектах мы фокусируемся в первую очередь. Для жизни важно отличать объект от фона, поэтому фокусировка происходит быстро и неосознанно. Мозг делает всю работу за нас.
А есть понятие обратного контраст форм: когда на фоне сложные элементы, а на переднем плане что-то простое.
Очень сложно найти простой объект (розовый кружочек) среди сложных — это как выделиться на Хэллоуине в костюме обычного человека
Нужно быть готовым, что пользователь все равно будет отвлекаться на более сложные формы.
6. Контраст размера
Этот прием дизайнеры используют для того, чтобы подчеркнуть важность объекта, обратить на него внимание в первую очередь.
Объект бОльшего размера кажется важнее, потому что есть иллюзия, что он либо ближе, либо опаснее
Исторически сложилось, что для человека все большое — опасное. В интерфейсе это тоже прижилось. Дизайнеры акцентируют внимание на больших кнопках, управляя таким образом фокусом: кнопка «купить» — большая. Кнопка «нет, спасибо» — поменьше.
Кнопку «Submit» выделили размером и цветом. Но очень сложно найти кнопку «No, thanks»: крестик убрали, сама кнопка запряталась среди текста, который нам не хочется читать
И это работает — пользователь может ввести свою почту, даже если он изначально не хотел. Лишь бы окно уже закрылось ¯\_(ツ)_/¯ Использовать такие приемы или нет — личный выбор дизайнера. Но очевидно, что такой подход не ориентирован на пользователя.
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
Прятать всю навигацию в бургер только из-за закона Миллера — ну так себе советик))
Цель навигации по сайту не в том, чтобы запомнить и выучить наизусть ее разделы. Главное — помочь пользователю быстрее попасть в нужный раздел. Зачем прятать навигацию и заставлять делать больше кликов? Чтобы не нарушить магию чисел?
"Главное — помочь пользователю быстрее попасть в нужный раздел" — в этом и суть :) Если в другие разделы он переходит реже, есть смысл убрать эти блоги в "бургер"
"и заставлять делать больше кликов"
Вам мозг коучи загадили, всё нормально с кликами. Если я на главной не вижу чего мне надо, то палец по привычке сразу идёт к бургеру за навигацией. Если бы навигация была на главной, то мне бы это помогло на 0%.
Есть те действия которые нам нужно, чтобы совершал пользователь (оставил заявку, заказал товар и т.п.) их лучше вынести на главную, а есть те, которые напрямую не ведут к конверсии, их можно спрятать в бургер.
Думаю, пример с бургер-меню характерен зарубежным странам, например, в Европе. Как-то читала об этом. А в странах СНГ оно не прижилось, т.к. людям неудобно и они не понимают, что к чему
:)
или ты будешь проклят,поделись с 10 друзьями
У тебя есть 3 секунды, чтобы отпустить кота! Время пошло...
забавно, что вы для обложки статьи «Как захватить внимание» выбрали скриншоты главных экранов смартфонов, у которых нет функции захватить внимание или удержать пользователя
статья тоже начинается с логической несостыковки: «Почти 90% информации человек получает с помощью зрения, около 9% — с помощью слуха и только 1% — с помощью вкуса, осязания и обоняния. Этим фактом часто пренебрегают многие заказчики, а зря»
не совсем понял, какое предубеждение вы тут разрушаете. но я не встречал заказчиков, которые просят сделать приложение или сайт, чтобы он хорошо звучал или приятно пахнул, все ориентируются на визуальное восприятие
Цыгане детектед. Половина утверждений статьи не пройдет по фактчекингу. Натянуто на глобус или притянуто за уши как откровение. Просто набрали текста на промо статью и в четыре руки в комментах накручивают до кучи. Очевидные "правила" под соусом блюда от шеф-повара плюс субъективные оценочные умозаключения, которые нельзя считать ни универсальными ни рабочими для всех случаев.
Возможно с развитием VR технологий возникнет потребность в аромате сайта и в том, чтобы он был приятным на ощупь. Но это уже будет новый этап развития технологий.
Суть как раз в том, что большую часть информации человек считывает с помощью зрения, и это правило нужно использовать по максимуму: создавать классное удобное юзабилити с помощью описанных нами фишек. Чтобы пользователю не хотелось сбежать с сайта сразу же, как только от туда зашел. Антипример - обратный контраст форм или слабая группировка. Заказчики часто закрывают на это глаза и считают, что хороший интерфейс и дизайн не так важны, как функционал ¯\_(ツ)_/¯
Я понимаю вашу точку зрения и согласна с тем, что визуальное восприятие играет важную роль в создании приложений и сайтов. Однако, я бы хотела подчеркнуть, что звук, также как и другие сенсорные восприятия, могут играть важную роль в удержании внимания пользователя и создании более глубокого эмоционального впечатления. Также, я считаю, что многие заказчики могут пренебрегать этим фактом, особенно в контексте разработки мобильных приложений, где звуковое сопровождение может улучшить впечатление от использования приложения.
Комментарий недоступен
Почему бы и нет
«Пример удачного интерфейса. Дизайнер оставил в меню только 2 элемента, а остальные убрал в «бургер»» — ох ребята... вы мне, конечно, нравитесь. Но вот это либо осознанный байт на комменты, либо я расстроюсь..
Если сейчас вас прочтут дизайнеры, придут на сложные проекты, и будут оставлять два пункта меню и бургер рядом с ними, в котором ещё 10 пунктов — это будет беда.
Условно, в еком придут где можно категории каталога сразу показать, вынесут лампочки и двери, а 8 других засунут в бургер. И потом владелец магазина порадуется падению конверсий. Ибо такой прием может очень плохо повлиять и будут заходить в основном в эти два раздела, забив на бургер. Так что это не назвать «примером удачного интерфейса».
Этот пример - как способ избежать большого количество пунктов навигаций. Вынести самые важные (рекомендуется до 7), а остальные скрыть в бургер-меню. Их может быть и больше 2-х. Но если эти 2 пункта приоритетнее, чем остальные, то можно и 2 оставить, а остальные скрыть в бургер.
Насчёт 7+-2 - в современной реальности это 5, ибо сейчас такой вал информации, что запоминать больше уже никто не в состоянии.
У меня в хроме открыто много вкладок, многие из них постоянные и не меняются, например первые 10-15 точно, и я прекрасно в них ориентируюсь, не смотря на еще 10 вкладок которые открыты правее и там текущие, нужные только на данный момент вкладки. Почему тут не работает правило 7+-? Почему в этом случае мне удобнее видеть больше но сразу чем группировать покомпактнее но дольше искать нужное?
По сути именно из-за этого правило 7+-2 вообще существует)
Понятно, почему согласно правилу 7+-2 нельзя делать больше 9 элементов. Но почему нельзя делать меньше 5, например, 4 или 3? Это меньше 5, поэтому согласно данному правилу так делать не стоит. Однако память спокойно может их обработать.
Потому что это всю жизнь было просто 5±2. Не больше семи элементов. Как оно превратилось в 7±2, не знаю. Автор что-то выдумал.
Если делать меньше элементов, то будет оставаться много "воздуха" и возникнет ощущение, что информации не хватает, либо, будто что-то забыли добавить.
Если это не помешает клиентскому опыту, что можно уменьшить количество элементов)
"С точки зрения эволюции, мозг — самый ленивый орган"- не тупой,а просто с ленивым мозгом
ну странно,с точки зрения эволюции мозг явно не на последней ступени должен стоять
Точно, можно отвечать на упреки - "это не мы тупые, это все эволюция".)
и по этому большая половина населения ленивая из за мозга?
ну странно,с точки зрения эволюции мозг явно не на последней ступени должен стоять
Как естественно крутится лимон. Каждый день такое вижу 🤣
Лимон он такой.
Главное добавьте еще темную тему
Вот ответ на ваш вопрос. 1. Создайте уникальный заголовок или заглавие, которое будет привлекать внимание и вызывать интерес.
2. Используйте красочные изображения или видео, чтобы сделать контент более привлекательным.
3. Добавьте хорошо структурированный текст, который будет читаться легко и понятно.
4. Используйте примеры и истории, чтобы заинтересовать пользователя и показать ему, как ваш продукт или услуга может помочь ему решить его проблемы.
5. Предложите пользователю что-то бесплатно, чтобы вызвать его внимание и заинтересовать его.
6. Используйте социальные сети, чтобы привлечь внимание к вашему контенту и поделиться им с другими людьми.
7. Убедитесь, что ваш контент отвечает на конкретные вопросы и потребности пользователей.
8. Создайте уникальный дизайн, который будет выделяться среди других сайтов и контента.
9. Используйте обратную связь, чтобы узнать, что пользователи думают о вашем контенте и как его можно улучшить.
10. Будьте оригинальными и не бойтесь экспериментировать, чтобы привлечь внимание пользователей.
Большое спасибо за такой развернутый комментарий!
( . ) ( . )
8====Э
лайк если зацепился взглядом
Жители VC ждали именно этот комментарий)))
Это транс?
()===|;;;;;;;;;;;;;;;>
эти скобочки запали мне в душу
.
Хочется еще тонкости почитать: как, например, не оттолкнуть пользователя перегрузкой, а наоборот — провести его по желаемому нам пути. Тут часть пунктов отвечают на этот вопрос, но было бы супер, если бы прям об этом написали)
В блоге в предыдущих статьях рассказывали про триггеры и мотиваторы, там частично ваш вопрос раскрыли.
Примем к сведению и закинем в список идей) Тема действительно интересная, так что обязательно про это напишем.
Спасибо большое! Мне по работе необходимы любые советы, я новичок - "ем" все советы, проверяю на собственной практике :)) Спасибо за полезности!
Рады, что информация оказалась полезной для вас! Удачи в начинаниях)
Интересная статья. Меня лично всегда очень сильно смущали навигационные иконки без текстового обозначения. При проектировании интерфейсов, я представляю, смогли бы мои пожилые родственники пользоваться этим продуктом.
Как правило, иконки без текста всегда вызывают ступор у большинства людей, которые не проводят много времени за использованием сайтов или приложений.
В вашем примере с аккордеоном, абсолютно не очевидно что там прячется меню, если ты такую иконку видишь впервые. Т.е. часть пользователей этого сайта, даже не узнают что там есть пункты меню.
Ещё отличный пример для меня, это приложение озон. Если вы откроете главную страницу приложения, внизу будет навигация с иконками, и вот когда я объясняю свой маме как ей попасть в настройки профиля, я говорю ей - «нажми на лицо внизу». Для дизайнера озона очевидно, что лицо это меню профиля, но для некоторых людей, это просто набор иконок и они ничего для них не значат.
Озон как раз-таки и подписывает свои иконки. Например, "на лице внизу" написано "Мой Ozon". А многие приложения предлагают пройти краткое обучение по основному функционалу после их установки.
Ну и хотелось бы добавить, что в обоих примерах, о которых я написал выше, элементов не больше 7. Но их нейминг или обозначение очень хромает, из-за чего разобраться в них безумно сложно
Используя все эти правила можно второй тик-ток создать 🤣 сидеть и залипать, но уже в интерфейсе.
От примера неудачного интерфейса, где показан Windows Phone до сих пор рыдаю от ностальгии)
Наши дизайнеры в рамках повышения насмотренности находили подобный сервис) Там представлены интерфейсы различных мобильных приложений. Действительно как Тик-ток выходит: сидишь, изучаешь...
А насчет Windows Phone согласны. Достаточно интересная была история. Как знать, возможно более удобный интерфейс помог бы смартфонам Windows вытеснить всех конкурентов с рынка мобильных устройств)
Я бы посоветовал вам создавать уникальный и интересный контент, чтобы привлечь внимание пользователей, так же использовать яркие и красочные изображения, создавать интерактивный контент, использовать социальные сети для привлечения внимания , и у вас все обязательно получиться )
Огромнейшее вам спасибо, воспользовались вашим советом и у нас получилось.
Статья уровня "многа иконак, не вмещается в телефон, сделаим как в инстаграми пять штукаф". Также сделал ВК. Жаль, что это не работает для бизнеса.
mobile first подход сейчас действительно в тренде, с этим ничего не поделаешь. Многие (в том числе бизнес) ориентируются в первую очередь на пользователей смартфонов
Коротко, понятно и интересно)
Рады, что вам понравилось)
Хорошая статья, молодцы!
Спасибо! Рады, что вам понравилось :)
Советую посмотреть выступление Ольги Федоровой на тему "Исследования вербальной рабочей памяти в психолингвистике: магическое число и другие опасные вещи". Вы, сразу видно, дяди серьезные и экспертные. Уверен, вам хватит примерно 7 ± 2 минуты просмотра, чтобы понять, какую чушь вы написали
Я перевыполнил. посмотрел 11 минут. Чуши не обнаружено. Давайте таймстампы выступления - будем разбираться.
Обязательно посмотрим. Скиньте ссылку на выступление, будьте добры :) С какой минуты смотреть и что именно в нашей статье - чушь?
меня так бесит, что в @Яндекс на картинки нужно переходить, чтобы начать поиск. В Гугле уже давно не так
не понял где тут не так?
Вопрос к автору: А где брали статистику, очень цифры зацепили...
Почти 90% информации человек получает с помощью зрения, около 9% — с помощью слуха и только 1% — с помощью вкуса, осязания и обоняния.
Эта информация есть в открытом доступе ;)
Во втором пункте как будто бы изрядно обосрали андроид и похвалили эпл
там windows в качестве антипримера приведен) а не андроид 🤔
Все дело в том с каким контекстом в голове пользователь попал на ваш сайт, и может ли он найти то, зачем он пришел.
Согласны, контекст нужно учитывать всегда.
Их число равно 7±2 (здесь их 5)
😂😂
ну а что, вдруг кому-то лень посчитать 🙂
Комментарий недоступен
Тогда лучше последним, закон края в этой ситуации работает не в полную силу :))
Теперь тот лимон ещё долго будет вертеться в моей голове
Да, лимон - он такой)
А что за андроид на скриншоте справа? хочу купить такой
Хорошая статья, для начинающих дизайнеров - самое то
Спасибо, и для начинающих в том числе :)
В контексте дизайна смысла нет писать про 90% зрения и 1% обоняния. Кто будет нюхать сайт? Разве что те, кто дороги чертит на экране мобилы. Лучше бы раскрыли тему слуха, т.к. незрячие люди слушают содержимое сайта. Слово «ровно» очень уверенно написано капсом — где ссылка на исследования, которые показывают, что прямо РОВНО?
Интересно, а сколько времени требуется вам, чтобы зайти на сайт/приложение и понять, что оно того не стоит?) Как правило человек считывает это моментально.
Хм)интересненько, спасибо за разбор) особенно третий, эффект края, даже не задумывался об этом, надо понаблюдать)
Всегда пожалуйста :)
Интересная статья, я в веб-дизайне недавно и мне было любопытно. Однако, объясните плиз момент с "Числом 7 ± 2". У вас на негативном примере 8 иконок и это считается плохо и я согласен, что считывается тяжело, но 8 входит в общее рекомендательное число 7+2, аж до 9. Как тогда пользоваться этой формулой?
Спасибо, Михаил. 9 - это уже пороговое значение. Все, что выше, плохо сказывается на пользователе. 8 иконок также усложняют процесс взаимодействия с сервисом, потому что являются близкими к пороговому значению. Поэтому если есть возможность показать пользователю меньшее количество пунктов навигации (5-7), то лучше сделать так.
Это точно. Чем проще сайт, тем больше к нему доверия. Но не надо впадать в крайности, две кнопки на сайте это тоже странно.
Две кнопки - это грубый пример, их может быть и больше. Но если они приоритетнее остальных, то можно и две оставить, а остальные скрыть) Опять же, нужно учитывать контекст.
Две кнопки - это грубый пример, их может быть и больше. Но если они приоритетнее остальных, то можно и две оставить, а остальные скрыть) Опять же, нужно учитывать контекст.
Спасибо ,было интересно читать материал !
Рады быть полезными!
Обожаю интерфейс айфона.
Думала, что будет сложно привыкнуть к нему после, казалось бы, удобного интерфейса андроида, но после покупки нового гаджета буквально влюбилась в него)
Комментарий удален автором поста