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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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