«Не заставляйте меня думать»: как использовать ментальные модели в UX-дизайне

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

Удивительное-невероятное: пользователи знают, как работает ваш продукт еще до того, как вы его создадите. Кто бы мог подумать.

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

Ментальная модель — что это?

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

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

Для иллюстрации

Яркий пример — маленькие дети, которые сегодня, вероятно, намного больше проводят с сенсорным экраном, чем с книгами или обычным телевизором. Привыкнув, что от смахивания сразу все включается, они больше не представляют, что может быть как-то иначе, и когда к ним в руки попадает книга, начинают отчаянно «свайпать». Но когда это не срабатывает, впадают в ступор. Потому что сформировалась модель: жест смахивание = включение любого прямоугольного объекта.

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

Ментальные модели дизайнеров и пользователей

Как верно завещал Нильсен, модели дизайнеров и простых смертных сильно отличаются. Почему?

1. Дизайнеры полностью погружены в свои проекты и создают по 150 ментальных моделей на дню. Для этого они часто берут шаблоны проектирования других дизайнеров, из-за чего возникает своеобразный профессиональный «пузырь», вакуум, который мешает видеть полную картину.Здесь легко попасть в ловушку собственных знаний — то, что важно для других дизайнеров, для обычных пользователей может оказаться ненужным и бессмысленным.
2. Пользователи формируют свои уникальные ментальные модели. На них влияет целый букет факторов — образование, опыт, возраст, общий культурный уровень.Средний пользователь не так хорошо разбирается во всех тонкостях UI-проектирования и ему до фени проблемы дизайнеров из «пузыря» и до желания внедрить все существующие фичи сразу. Главное для него — быстрота и удобство.А для этого надо максимально сократить разрыв между сторонами.

Что происходит, когда ментальные модели не совпадают

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

И это не просто тезис ради тезиса, есть подтверждающие цифры и факты.

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

Другой пример. В 2017 году Snapchat решил радикально изменить интерфейс. Он убрал кнопку «Друзья», ввел категории и хронологию для чатов. Для просмотра чатов нужно было крутить в левую сторону, историй — нажать с противоположной, для них открывалось отдельная страница.

Пользователи категорически не приняли нововведения. Поднялась волна возмущения. Петицию за отмену обновлений подписало более миллиона человек, а количество негативных комментариев составило 83 процента. В результате такого глобального несовпадения Snapchat потерпел значительные убытки — 443 миллиона долларов.

Позже Snapchat откатил приложение к исходному виду.

Фатальная ошибка сервиса — попытка заставить людей менять привычки и учиться пользоваться продуктом заново, чего допускать ни в коем случае нельзя.

А когда совпадают

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

Так, Google недавно провел тотальный редизайн своего календаря — любимого инструмента миллионов людей по всему миру, которые не менялся с момента возникновения. Но делал это не нахрапом, а аккуратно и постепенно, в течение нескольких месяцев, предварительно предупредив пользователей о грядущих переменах.

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

Корпоративный мессенджер Slack пошел еще дальше и организует для своих пользователей интерактивные туры по интерфейсу, когда вводит какие-то новшества. Этим он убивает сразу двух зайцев: и тестирует реакцию на новые функции, и формирует новую ментальную медаль. Умный ход.

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

Известный инженер и специалист по юзабилити Якоб Нильсен в своем Law of Internet User Experience говорит:

С ним трудно не согласиться.

А теперь к чему это все. Священная цель UX-дизайнера — создать такой процесс, который позволит быстро и легко достигать своих целей.

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

UX-исследование

Обычно дизайнеры составляют Customer Journey Maps и карты эмпатии, чтобы понять, какой путь пользователь совершает на сайте или в приложении. Такие карты помогают выявить места на сайте, где пользователь испытывает трудности, и решить эти проблемы.

Эти методы активно используют в UX, но они вполне подойдут и для анализа ментальных моделей.

Впрочем, так можно сказать про все другие методы UX-исследований, к которым относятся:

1. Персонажи
2. Сценарии использования продукта
3. А/B-тестирование
4. И уже упомянутые карты эмпатии и Customer Journey Maps

Они как раз и выявляют предполагаемые несоответствия между ментальными моделями продукта и пользователя.

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

Заимствование элементов из существующего UX

Вытекает из предыдущего пункта. Наблюдайте, как пользователи взаимодействуют с существующими проектами, отмечайте наиболее успешные паттерны и применяйте их в других подобных проектах.

В копировании нет ничего ужасного. Это понимают все крупные мировые IT-гиганты и регулярно перенимают друг у друга фишки, которые выстрелили.

Несколько примеров.

1. Twitter ввел хештэги — скопировали Facebook и Instagram
2. Twitter ввел теги — скопировали Facebook, LinkedIn, Instagram
3. Snapchat реализовал истории — скопировали Facebook и Instagram

Интересная закономерность, да?

Практически во всех этих случаях эти функции мало отличаются.

Facebook не стесняется брать разработки других и внедрять их в свои продукты. Если компания не может приобрести новое успешное приложение, то, скорее всего, он просто позаимствует часть функционала.

При этом социальная сеть от этого ничуть не страдает — число активных пользователей Facebook достигло отметки в 2,2 миллиарда.

Он и сам влияет на другие приложения. Так, почти во всех популярных социальных сетях мы можем увидеть элементы, которые первоначально появились у Facebook: значок уведомления в правом верхнем углу, статус, новостная лента.

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

Скевоморфизм

Скевоморфизм — направление в дизайне, которое преподносит цифровой материал так же, как и его реальный аналог. Он подразумевает, что определенный физический орнамент или элемент был скопирован с формы другого объекта, но изготовлен другими методами или из других материалов.

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

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

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

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

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

Креатив и инновации

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

Конечно, звучит как сказка и несбыточная мечта, но и такие решения находятся.

Взять хотя бы ползунки громкости. Ползунок слева — это то, как этот элемент представляют большинство людей. Вариант справа — как он реализован на iOS.

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

Apple объединил две ментальные модели и создал принципиально новый дизайн, внедрив его в свои устройства. Инновация нареканий не вызвала, а юзабилити стал лучше.

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

Мораль

Люди — существа привычки. В этом заключается главная идея ментальных моделей.

Новшества не должны заставать пользователя врасплох и вынуждать менять привычки и сложившуюся модель поведения. Тесты и UX-исследования помогают выявить лучшие повторяющиеся паттерны, которые следует внедрять в новые продукты и применять для улучшения уже существующих.

Вывод здесь очевиден. Чем больше вы не соответствуете ожиданиям пользователей и заставляете их делать то, что они не хотят, тем больше денег вы теряете. И наоборот — чем большее вы «ублажаете» своих клиентов и пытаетесь понять, чего они хотят, тем больше профит.