реклама
разместить

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

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

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Что такое ментальные модели

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

Эти представления складываются в шаблоны мышления — ментальные модели.

«Ментальная модель — это мыслительный процесс человека о том, как что-то работает. Ментальные модели основаны на неполных фактах, прошлом опыте и даже интуитивном восприятии. Они помогают формировать действия и поведение, влияют на область внимания в сложных ситуациях и определяют, как люди подходят к проблемам и решают их» (Carey, 1986)

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

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

На основе ментальных моделей формируется «Система 1» в концепции Канемана. Она облегчает умственную нагрузку при рутинных действиях. Мозг быстро отфильтровывает привычные задачи и решает их по шаблонам, не прилагая дополнительных усилий. На основе этой системы пользователи выбирают «хорошие», «современные», «удобные» для них продукты.

Но на формирование ментальных моделей влияет не только опыт контакта с материальным миром, но и биология, культура, социум, история. Поэтому ментальные модели у разных людей похожи. Это приводит к общим тенденциям в дизайне.

Как ментальные модели повлияли на дизайн

Ещё задолго до веба по телефонным трубкам говорили, а на кнопки нажимали. Проектировщики интерфейсов пытались упростить людям жизнь, поэтому адаптировали знакомые формы под новую диджитал-среду. Так из-за ментальных моделей прообразы физических объектов стали частью дизайна.

Появление иконок

Некоторые иконки уже потеряли связь с реальным объектом, но имеют смысл в диджитале. Дискетой никто не пользуется, но на панели Word она ещё сигнализирует о функции «Сохранить».

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Популярность домашних телефонов упала в полтора раза ещё в далёком 2009. Но иконка телефонной трубки по-прежнему на главных экранах Android и iOS.

Панель инструментов на главном экране Realme и IPhone
Панель инструментов на главном экране Realme и IPhone

Внутри диджитала всё непрерывно меняется, поэтому ментальные модели тоже корректируются. Так «палец вверх» в большинстве соцсетей сменился на «сердце».

Хотя Facebook и Youtube отчаянно сопротивляются, «сердечко» в значении лайка для многих привычнее.

Слева лента Facebook*, справа Instagram* и Twitter. *Входят в Meta Platforms Inc., деятельность которых запрещена в РФ<br />
Слева лента Facebook*, справа Instagram* и Twitter. *Входят в Meta Platforms Inc., деятельность которых запрещена в РФ

Имитация физических кнопок

Ментальные модели заставляют нас заимствовать форму материальных объектов. Типичная рекомендация для дизайна кликабельных элементов: «Делайте кнопку похожей на кнопку». Авторы подразумевают прямоугольную и контрастную фону кнопку.

Ментальные модели не дают представить круглые кнопки, например, на клавиатуре MacBook. Но во времена печатной машинки «Ремингтон» они никого не смущали. По закону Фиттса — чем больше область нажатия, тем легче попадать в неё. У прямоугольных кнопок больше площадь нажатия, поэтому постепенно они стали более популярны, а с ними изменилась и ментальная модель.

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

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

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Как физиология влияет на гарнитуру, размер кнопок и таббары

Физиологические ограничения тоже влияют на дизайн. Аудитория диджитала не молодеет и ощущает потребность в адаптации контента.

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

Контрастность и крупный кегль

Даже человеку со стопроцентным зрением сложно разглядывать мелкий светло-серый текст на белом фоне. Поэтому рекомендуется использовать кегль не менее 13-14 pt, в том числе для сносок. Контрастность текста регулируют с помощью плагинов и расширений.

Размер кнопки

У среднестатистических пальцев размер подушек 16 — 20 мм. Минимальный рекомендуемый размер нажимаемых элементов — 1x1 см. Такого размера часто недостаточно, поэтому кнопки и их область нажатия делают больше.

Таббар внизу экрана

Таббары оказались внизу отчасти по вине большого пальца. Им пользователи совершают большую часть действий в мобильных устройствах. Так появился дизайн, управляемый большим пальцем — thumb-driven design:

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Но ментальные модели могут противоречить физиологии. Таббар оказался внизу экрана не сразу. Верхняя панель навигации закрепилась после появления гамбургер-меню, которое разработал Нормон Кокс в 80-х годах. Популяризация книги Итана Маркотта «Отзывчивый веб-дизайн» в 2011 году привела к тому, что верхняя панель навигации и гамбургер-меню стали стандартом в дизайне мобильных интерфейсов. Так привычные для десктопа элементы перебрались в первые мобильные версии.

Бургер-меню, разработанное Нормоном Коксом для первого в мире графического пользовательского интерфейса
Бургер-меню, разработанное Нормоном Коксом для первого в мире графического пользовательского интерфейса

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

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке
В новом обновлении iOS 15 навигация в Safari на уровне большого пальца
В новом обновлении iOS 15 навигация в Safari на уровне большого пальца

Зачем делать продукт похожим на другие

Чтобы бренд и продукт оставались жизнеспособными, дизайнерам приходится подстраиваться под аудиторию и её запросы.

Человек ожидает увидеть знакомую навигацию. Как гласит закон Якоба:

«Большую часть времени пользователи проводят на сторонних сервисах, поэтому в новом для них продукте ожидают увидеть стандартные элементы в привычных местах».

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

Звучит немного ультимативно и, строго говоря, из этого правила есть исключения. Приведу в пример кейс Tinder:

До 2012 года сайты знакомств представляли из себя обычные таблицы. Движения пальцем по экрану вправо и влево (свайпы) коренным образом изменили пользовательский интерфейс. Разработчики Tinder долго думали, стоит ли выходить с новым продуктом на и без того перегретый рынок. Их идея возникла благодаря жалобам пользователей других дейтинг-сервисов. В результате, свайпы — революционное решение в навигации, покорило поколение Y. Но оно возникло не из желания покреативить на пустом месте, а как способ решения существующей проблемы. Ну а о том, к какому успеху пришло само приложение, говорить не нужно. Хотя, естественно, дело было не только в свайпах.

Стандартное использование элементов экономит усилия мозга и снижает когнитивную нагрузку. Это доказывает исследование лектора Хайфского университета и бывшего консультанта Intel — Шея Бен-Барака. Он провел эксперимент и расположил на телефонной клавиатуре кнопки по горизонтали, а не по вертикали.

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Испытуемые набирали номер на 46% дольше. 22% из них набрали номер неправильно.

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Магия прототипичности

Прототипичность (не путать с прототипированием) — это, грубо говоря, «похожесть». То, насколько объект похож на другие объекты из своей категории. Прототипичность стоит на ментальных моделях, о которых мы уже так много сегодня говорили.

Пользователю легче взаимодействовать с привычным интерфейсом, потому что уже сформировались шаблоны мышления. Легкий и удобный дизайн вызывает лояльность к продукту. Доказательство — исследование Google за 2012 год. Результаты показали, что пользователи предпочитают веб-сайты с низкой визуальной сложностью и высокой прототипичностью.

Сайты с низкой прототипичностью обычно оценивались рекспондентами как непривлекательные.

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

Почему сервису недостаточно быть «таким, как все»

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

Желание поменять приевшееся и обыденное отражается на трендах. Например, какое-то время было модно детально копировать в интерфейсе внешний вид объектов из реального мира — процветал скевоморфизм.

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

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

Тренды влияют на восприятие дизайна. Людям достаточно 50 секунд, чтобы составить мнение о сайте. Ментальные модели диктуют, какой сайт считать старомодным и неудобным.

Новый опыт привлекает клиентов. Но дизайнеры пытаются придерживаться принципа «Most Advanced, Yet Acceptable» — «Самый передовой, но все же приемлемый». Он помогает оставить новшества понятными и не раздражающими.

Как только пользователь прикладывает слишком много усилий для понимания интерфейса, опыт моментально становится негативным. Это объясняется законом Йеркса — Додсона:

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

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

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

Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке

Но в развлекательных приложениях, как Pokémon Go, задача — удерживать пользователей долгое время. Для этого нужен постоянно меняющийся опыт. Поэтому новые фичи на регулярной основе прекрасно работают на эту цель.

Итог

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

Не забывайте ставить «+1», если статья зашла. И пишите в комментариях, если нет :)

У нас есть блог на сайте и телеграм-канал. Там мы больше рассказываем про UX и CX — подписывайтесь!

7272
реклама
разместить
29 комментариев

Спасибо, что собираете в кучу какие-то вещи, о которых уже даже не задумываешься/забываешь. Иногда в запарке забывается база :)

Это только 1-я часть статьи? Есть ощущение, что не все описано, что собирались.

8

А чего не хватило, расскажите?

Отличная статья, но у меня возник вопрос. Можно ли расширить понимание «ментальных моделей»?
Например, как я понимаю, к ним правильно приравнивать и целые флоу пользователя на сайте:
— расположение целых блоков на странице,
— оформление заказа,
— даже комментарий под этой статьей.
Хотелось бы узнать больше насчет данных и схожих моментов, а также насколько верно мое предположение?

4

Спасибо за фидбек! Ментальная модель у человека одна, поэтому в её рамках может быть как флоу на сайте, так и привычка опасаться полицейских, например

1

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

4

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

1

спасибо ,очень интересная статья, читал с большим интересом!

4
Раскрывать всегда
Играю я для души, а так у меня бизнес есть. Собрал 16 игр для прокачки навыков предпринимателя!

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

Играю я для души, а так у меня бизнес есть. Собрал 16 игр для прокачки навыков предпринимателя!
4848
88
33
33
Нужно в нарды играть с нужными человечками города - тогда и бизнес пойдет
реклама
разместить
“Мы убрали из Amazon 2 буквы и создали Azon” Как удалось основать крупнейший маркетплейс по посещаемости?

Начинали еще в далеком 1998 году, хотели продавать автомобильные запчасти или книги, но денег хватило только на книги. Путь был тернистым, приходилось нанимать даже осужденных

“Мы убрали из Amazon 2 буквы и создали Azon” Как удалось основать крупнейший маркетплейс по посещаемости?
22
Занимающаяся остеклением Lumon получила 200 откликов на вакансию — кандидаты хотели передать резюме Lumon Industries из «Разделения»

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

77
11
11
Как раз и навсегда навести порядок в telegram, не пропускать важные сообщения, не отвлекаться на ерунду и сберечь кучу нервов

Рассказываю, как я веду дела в телеграме (а там, буквально, все мои дела). Особенно полезно для предпринимателей, управленцев и просто ответственных людей. Описал четкую инструкцию по настройкам и принципы поддержания порядка. Актуально тем, кто вечно пропускает сообщения или не может найти ту самую важную группу.

Как раз и навсегда навести порядок в telegram, не пропускать важные сообщения, не отвлекаться на ерунду и сберечь кучу нервов
1717
66
33
11
Я делаю масло самодельным гидравлическим прессом, получаю 100к и счастлив

Когда я начал продавать сыродавленное масло в Калининграде и столкнулся с трудностями, о которых даже не думал. У меня ощущение, что я работаю из Европы, хотя закупаюсь и продаю в России. Зарабатываю 100 тысяч в месяц и не могу нормально расширить бизнес, потому что конкурировать с другими регионами — практически нереально.

У них конструкция похожа на мясорубку или соковыжималку
3939
Без этого инструмента селлер теряет по 1 млн рублей в среднем

Видели ли вы бизнес, который без продвижения и рекламы? Вот и я не видел. Но для рекламы WB нужно уметь анализировать РК (рекламную кампанию), ключевые запросы, стратегию и т.д

Без этого инструмента селлер теряет по 1 млн рублей в среднем
77
11
ЦБ понизил курс доллара почти на три рубля — до 81,5 рубля

Официальный курс евро опустился на 3,3 рубля.

22
22
11
11
ФАС проверит наценки на продукты в «Яндекс Лавке» и «Самокате»

Антимонопольная служба изучит средневзвешенные закупочные и розничные цены.

Источник фото: Retail.ru
2222
1515
22
Когда ФАС заинтересуется ценообразованием тарифов на ЖКХ?
реклама
разместить
Курс доллара на рынке Forex опустился ниже 82 рублей впервые с июня 2024 года

Аналитики объясняют это улучшением отношений России и США и низким спросом на доллар у российских импортёров.

99
11
11
11
Значит скоро 120
День 1119: «Газпром» сообщил об убытке более чем в 1 трлн рублей в 2024 году по РСБУ

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

Источник фото: «Банки.ру»
2626
55
44
22
11
11
11
Отправьте смс с кодом "яхта", на номер 0777 Помогите собрать Алеше на выплату дивидендов.
Что должен успеть сделать каждый российский предприниматель до 30 мая 2025 года

Уже поняли про что речь? Верно, про утечку. Если быть точнее, про утечку персональных данных из компании. Лет 10 назад это понятие не вызывало откровенно негативных чувств. С недавних пор оно неразрывно с тревогой и печалью, а буквально через полтора месяца уже будет навевать гнев и нести опустошение: не только эмоциональное, но и финансовое, ибо н…

Что должен успеть сделать каждый российский предприниматель до 30 мая 2025 года
1818
33
11
11
11
[]