Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке
Чтобы пользователь не разворачивался на полпути от покупки, дизайн должен учитывать его поведение. Мы в Antro при проектировании интерфейсов ориентируемся на физиологию, психологию и ментальные модели пользователей. В статье рассказываем, как работает этот подход, а выводы подкрепляем научными концепциями и собственным опытом.
Что такое ментальные модели
Мы воспринимаем материальный мир в нескольких измерениях: эмоциональном, когнитивном, сенсорном и поведенческом. Поэтому формируется многогранное представление об объектах внешнего мира и их особенностях.
Эти представления складываются в шаблоны мышления — ментальные модели.
«Ментальная модель — это мыслительный процесс человека о том, как что-то работает. Ментальные модели основаны на неполных фактах, прошлом опыте и даже интуитивном восприятии. Они помогают формировать действия и поведение, влияют на область внимания в сложных ситуациях и определяют, как люди подходят к проблемам и решают их» (Carey, 1986)
Один из основоположников поведенческой экономики и нобелевский лауреат Даниэль Канеман выделяет два режима человеческого мышления.
На основе ментальных моделей формируется «Система 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», если статья зашла. И пишите в комментариях, если нет :)
У нас есть блог на сайте и телеграм-канал. Там мы больше рассказываем про UX и CX — подписывайтесь!
На создание онлайн-авиасимулятора у него ушло три часа.
В следующий раз когда жена или мамка начнёт пилит тебя, что ты опять сидишь за компом и тратишь бесценное время, то вспоминай мои пост и утверждай, что это тренажер важных навыков для предпринимателя, основателя стартапа или менеджера продукта. И если вы ожидали тут увидеть сплошные экономические симуляторы, то это не так. Они конечно тоже будут, н…
Заметили, как на фоне незначительного потепления отношений с американцами, начала раскатываться губа отечественных руководителей? Обсуждается как само собой разумеющееся, что буквально не сегодня завтра западный бизнес буквально ломанется в Россию: начнет выкупать обратно по рыночной цене отобранные за 1 рубль заводы (как было с Рено), строить новы…
Замечания пользователей собрало The Verge. Издание надеялось, что их прокомментирует автор видео, но тот не ответил на запрос.
Начинали еще в далеком 1998 году, хотели продавать автомобильные запчасти или книги, но денег хватило только на книги. Путь был тернистым, приходилось нанимать даже осужденных
СМИ шутят, что история тянет на сценарий шпионского триллера.
Ей пришлось опубликовать объяснение, чем отличается её бизнес от вымышленного.
Рассказываю, как я веду дела в телеграме (а там, буквально, все мои дела). Особенно полезно для предпринимателей, управленцев и просто ответственных людей. Описал четкую инструкцию по настройкам и принципы поддержания порядка. Актуально тем, кто вечно пропускает сообщения или не может найти ту самую важную группу.
Спасибо, что собираете в кучу какие-то вещи, о которых уже даже не задумываешься/забываешь. Иногда в запарке забывается база :)
Это только 1-я часть статьи? Есть ощущение, что не все описано, что собирались.
А чего не хватило, расскажите?
Отличная статья, но у меня возник вопрос. Можно ли расширить понимание «ментальных моделей»?
Например, как я понимаю, к ним правильно приравнивать и целые флоу пользователя на сайте:
— расположение целых блоков на странице,
— оформление заказа,
— даже комментарий под этой статьей.
Хотелось бы узнать больше насчет данных и схожих моментов, а также насколько верно мое предположение?
Спасибо за фидбек! Ментальная модель у человека одна, поэтому в её рамках может быть как флоу на сайте, так и привычка опасаться полицейских, например
Интересная статья, Спасибо!
Кстати, скевоморфизм ведь появился не просто потому что это было модно. Одна из причин — такой интерфейс был более понятен для людей, которые никогда раньше не пользовались сенсорными смартфонами. То есть они видели там отражения объектов из реального мира и понимали как этим пользоваться.
По той же причине он и утратил свою актуальность. Когда все научились пользоваться смартфонами — отпала необходимость детально прорисовывать каждый элемент
Появился он действительно в первую очередь поэтому. Другой момент, что со временем люди не только привыкли к интерфейсам, но и сам скевоморфизм очень тяжело производить и поддерживать. Трудозатраты на прямоугольники с обложками и книжную полку — несоизмеримы.
спасибо ,очень интересная статья, читал с большим интересом!