{"id":13755,"url":"\/distributions\/13755\/click?bit=1&hash=4a49bc9ad259aa8d20fdf5f5cb6cf844e7de4bb2ba8ca3a458efcedefcf5ada8","title":"\u041d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 vc.ru","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В новом обновлении iOS 15 навигация в Safari на уровне большого пальца

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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

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

0
29 комментариев
Написать комментарий...
Eazy Haze

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

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Eazy Haze

Хочется узнать больше о том, как это проявляется в реальном мире и как вообще изучаются ментальные модели.
Вы этим занимаетесь сами?

Ответить
Развернуть ветку
Andrew Oz

Это своеобразная проекция книги Канемана "Думай медленно - решай быстро" на UX

Ответить
Развернуть ветку
Женя Князев из antro.cx

Канеман тоже говорит о ментальных моделях, просто так их не называет, но книжка очень крутая — лайк за упоминание :)

Ответить
Развернуть ветку
Женя Князев из antro.cx

Подумаем, как развить тему. В принципе, весь мир — один большой пример того, как работают ментальные модели. Рад видеть интерес :)

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

Ответить
Развернуть ветку
Петров Платон

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Dmitriy

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
MegaAnders

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

Ответить
Развернуть ветку
ex. Mojo

Спасибо вам за фидбек :) Ваши комментарии помогают поднимать статью на главной — это ценно 💙

Ответить
Развернуть ветку
Юлия Антипова

Гляжу: новая студия пишет годноту. Вчиталась: а это Mojo продолжает писать дайджесты общеизвестных вещей. А чего название сменили?

Ответить
Развернуть ветку
Женя Князев из antro.cx

Писали об этом у себя в тг-канале, кстати — https://t.me/antro_cx/4 :)

Как автор статьи скажу, что вещи эти далеко не настолько общеизвестные, насколько хотелось бы

Всем привет! На связи Experience-Driven агентство Antro👋

Когда-то мы были студией Mojo, но нам надоело бесконечное:

💁 «Алло, это студия МОЙО?»

🙅 «О, Mojo — это платформа для создания сайтов?»

🤦‍♀ «Блин, обожаю ваш редактор контента…»

🤷‍♀ «Почему ваш шоколад такой дорогой?»

Сменилось...

Всем привет! На связи Experience-Driven агентство Antro👋

Когда-то мы были студией Mojo, но нам надоело бесконечное:

💁 «Алло, это студия МОЙО?»

🙅 «О, Mojo — это платформа для создания сайтов?»

🤦‍♀ «Блин, обожаю ваш редактор контента…»

🤷‍♀ «Почему ваш шоколад такой дорогой?»

Сменилось не только название — мы обновили портфель услуг и чётко сформулировали позиционирование.

За 2,5 года на рынке мы поняли, что на одном пользовательском опыте хороший продукт не построишь. Рост диджитализации привёл к появлению более информированной и требовательной аудитории. UX может быть превосходным, но опыт потребителя испортит курьер в момент доставки или выгоревшие сотрудники службы поддержки. Более того — человек вообще не посмотрит в сторону продукта, если не сформировано ценностное предложение.

Пора решать все эти проблемы. Теперь мы специализируемся на построении омниканального клиентского опыта и росте LTV. Собственно, будем рассказывать об этом в телеграм-канале.

Следите за апдейтами!

Ответить
Развернуть ветку
Фил Калленберг

Это на самом деле классно! Спасибо! С удовольствием прочитал

Ответить
Развернуть ветку
Женя Князев из antro.cx

Спасибо большое за фидбек!

Ответить
Развернуть ветку
vasiliy bykov

Очень хорошая книга для создания базового понимания интерфейс дизайна: "Не заставляйте меня думать" Стивена Круга, очень советую

Ответить
Развернуть ветку
Женя Князев из antro.cx

Да, Круг — классный, и пишет не так сложно как Норман

Ответить
Развернуть ветку
Павел Павлов

Полезно 👍

Ответить
Развернуть ветку
Женя Князев из antro.cx

Благодарю за комментарий. Помогаете нам продвигаться в сообществе VC :)

Ответить
Развернуть ветку
Asf
Если дизайнер включит креативность там, где не нужно, и решит спроектировать нестандартную навигацию
Если дизайнер включит креативность там, где не нужно, и решит спроектировать нестандартную навигацию

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

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

Ответить
Развернуть ветку
Asf
На интерфейс влияют объективные факторы

должны влиять Guidelines:
1 => https://developer.apple.com/design/human-interface-guidelines/guidelines
2=>https://m3.material.io/

Кстати, вопрос, Вы пишите под каждую из платформ?
Или у вас только вэб?

Ответить
Развернуть ветку
Женя Князев из antro.cx

На мобилке мы делаем кросс-платформу, но даже в её рамках соблюдаем гайды вендоров.

Часто к нам приходят клиенты именно за интерфейсом, потому что команда разработки у них уже есть, а вот экспертизы в проектировании не всегда достаточно. Такое нам тоже нравится :)

Ответить
Развернуть ветку
Арам Манучарян

Интересно и полезно, спасибо! В суете жизни о подобных деталях и не задумываешься)

Ответить
Развернуть ветку
Женя Князев из antro.cx

Мне, на самом деле, кажется, что даже если абстрагироваться от интерфейсов, то все идеи из статьи интересны в рамках самого мышления. А лучше понимать, как работает твой мозг — круто!

Ответить
Развернуть ветку
Артём Сергеевич

Не получилось к вам зайти

Ответить
Развернуть ветку
Женя Князев из antro.cx

Отвратительно! Уже написали в ESET. Если вам хочется поближе с нами познакомиться, то всегда рады поболтать в тг @antrocx или тут в личке можно мне написать :)

Ответить
Развернуть ветку
Василий Колесов

А где примеры вашего супер дизайна о котором столько теории?

Ответить
Развернуть ветку
Читать все 29 комментариев
null