Как в интерфейсе учесть привычки клиента, чтобы привести его к покупке
Чтобы пользователь не разворачивался на полпути от покупки, дизайн должен учитывать его поведение. Мы в 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», если статья зашла. И пишите в комментариях, если нет :)
Спасибо, что собираете в кучу какие-то вещи, о которых уже даже не задумываешься/забываешь. Иногда в запарке забывается база :)
Это только 1-я часть статьи? Есть ощущение, что не все описано, что собирались.
А чего не хватило, расскажите?
Хочется узнать больше о том, как это проявляется в реальном мире и как вообще изучаются ментальные модели.
Вы этим занимаетесь сами?
Это своеобразная проекция книги Канемана "Думай медленно - решай быстро" на UX
Канеман тоже говорит о ментальных моделях, просто так их не называет, но книжка очень крутая — лайк за упоминание :)
Подумаем, как развить тему. В принципе, весь мир — один большой пример того, как работают ментальные модели. Рад видеть интерес :)
Мы проводим продуктовые исследования. Они, как и маркетинговые, во многом о том, чтобы понять, как мыслит человек, так что да, с такой задачкой к нам можно обратиться
Отличная статья, но у меня возник вопрос. Можно ли расширить понимание «ментальных моделей»?
Например, как я понимаю, к ним правильно приравнивать и целые флоу пользователя на сайте:
— расположение целых блоков на странице,
— оформление заказа,
— даже комментарий под этой статьей.
Хотелось бы узнать больше насчет данных и схожих моментов, а также насколько верно мое предположение?
Спасибо за фидбек! Ментальная модель у человека одна, поэтому в её рамках может быть как флоу на сайте, так и привычка опасаться полицейских, например
Интересная статья, Спасибо!
Кстати, скевоморфизм ведь появился не просто потому что это было модно. Одна из причин — такой интерфейс был более понятен для людей, которые никогда раньше не пользовались сенсорными смартфонами. То есть они видели там отражения объектов из реального мира и понимали как этим пользоваться.
По той же причине он и утратил свою актуальность. Когда все научились пользоваться смартфонами — отпала необходимость детально прорисовывать каждый элемент
Появился он действительно в первую очередь поэтому. Другой момент, что со временем люди не только привыкли к интерфейсам, но и сам скевоморфизм очень тяжело производить и поддерживать. Трудозатраты на прямоугольники с обложками и книжную полку — несоизмеримы.
спасибо ,очень интересная статья, читал с большим интересом!
Спасибо вам за фидбек :) Ваши комментарии помогают поднимать статью на главной — это ценно 💙
Гляжу: новая студия пишет годноту. Вчиталась: а это Mojo продолжает писать дайджесты общеизвестных вещей. А чего название сменили?
Писали об этом у себя в тг-канале, кстати — https://t.me/antro_cx/4 :)
Как автор статьи скажу, что вещи эти далеко не настолько общеизвестные, насколько хотелось бы
Всем привет! На связи Experience-Driven агентство Antro👋
Когда-то мы были студией Mojo, но нам надоело бесконечное:
💁 «Алло, это студия МОЙО?»
🙅 «О, Mojo — это платформа для создания сайтов?»
🤦♀ «Блин, обожаю ваш редактор контента…»
🤷♀ «Почему ваш шоколад такой дорогой?»
Сменилось...
Всем привет! На связи Experience-Driven агентство Antro👋
Когда-то мы были студией Mojo, но нам надоело бесконечное:
💁 «Алло, это студия МОЙО?»
🙅 «О, Mojo — это платформа для создания сайтов?»
🤦♀ «Блин, обожаю ваш редактор контента…»
🤷♀ «Почему ваш шоколад такой дорогой?»
Сменилось не только название — мы обновили портфель услуг и чётко сформулировали позиционирование.
За 2,5 года на рынке мы поняли, что на одном пользовательском опыте хороший продукт не построишь. Рост диджитализации привёл к появлению более информированной и требовательной аудитории. UX может быть превосходным, но опыт потребителя испортит курьер в момент доставки или выгоревшие сотрудники службы поддержки. Более того — человек вообще не посмотрит в сторону продукта, если не сформировано ценностное предложение.
Пора решать все эти проблемы. Теперь мы специализируемся на построении омниканального клиентского опыта и росте LTV. Собственно, будем рассказывать об этом в телеграм-канале.
Следите за апдейтами!
Это на самом деле классно! Спасибо! С удовольствием прочитал
Спасибо большое за фидбек!
Очень хорошая книга для создания базового понимания интерфейс дизайна: "Не заставляйте меня думать" Стивена Круга, очень советую
Да, Круг — классный, и пишет не так сложно как Норман
Полезно 👍
Благодарю за комментарий. Помогаете нам продвигаться в сообществе VC :)
Если дизайнер включит креативность там, где не нужно, и решит спроектировать нестандартную навигацию
Имхо именно по этому лучше придерживаться советам от вендеров платформ в реализации интерфейсов, если речь про мобильную разработку...
Да, гайдлайны в дизайне мобильных интерфейсов крайне важны. Постоянное использование смартфона также влияет на ментальную модель и ожидания пользователя от взаимодействия с приложухой, хотя она и не выпущена гуглом или эппл непосредственно
должны влиять Guidelines:
1 => https://developer.apple.com/design/human-interface-guidelines/guidelines
2=>https://m3.material.io/
Кстати, вопрос, Вы пишите под каждую из платформ?
Или у вас только вэб?
На мобилке мы делаем кросс-платформу, но даже в её рамках соблюдаем гайды вендоров.
Часто к нам приходят клиенты именно за интерфейсом, потому что команда разработки у них уже есть, а вот экспертизы в проектировании не всегда достаточно. Такое нам тоже нравится :)
Интересно и полезно, спасибо! В суете жизни о подобных деталях и не задумываешься)
Мне, на самом деле, кажется, что даже если абстрагироваться от интерфейсов, то все идеи из статьи интересны в рамках самого мышления. А лучше понимать, как работает твой мозг — круто!
Не получилось к вам зайти
Отвратительно! Уже написали в ESET. Если вам хочется поближе с нами познакомиться, то всегда рады поболтать в тг @antrocx или тут в личке можно мне написать :)
А где примеры вашего супер дизайна о котором столько теории?