Найти в Дзене

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

При создании нового продукта или оптимизации уже существующего, дизайнеры должны использовать знания своих пользователей о знакомых им продуктах и интерфейсах. Преимуществом станет упрощенное взаимодействие, быстрая адаптация и интуитивно понятный UX. Люди знают, как работает ваш продукт и как его использовать, еще до того, как вы его создадите. По крайней мере, они должны. Дизайнеры хотят быть интересными и оригинальными, но люди всегда будут подходить к новым продуктам и функциям, основываясь на том, что они использовали раньше (в мире UX это называется «ментальной моделью»), и по этой причине дизайнерам следует работать с ожиданиями пользователей. Что такое "ментальная модель"? «Ментальная модель основана на убеждениях, а не на фактах: то есть это модель того, что пользователи знают (или думают, что знают) о такой системе, как ваш сайт». - Nielsen Norman Group Благодаря привычному использованию множества продуктов, существующих сегодня, мозг человека развивает ментальные модели их ф
Оглавление

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

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

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

Что такое "ментальная модель"?

«Ментальная модель основана на убеждениях, а не на фактах: то есть это модель того, что пользователи знают (или думают, что знают) о такой системе, как ваш сайт». - Nielsen Norman Group

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

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

-3

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

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

«У каждого отдельного пользователя есть свои ментальные модели, и разные пользователи могут создавать разные модели одного и того же пользовательского интерфейса. Кроме того, одна из главных проблем юзабилити - это общий разрыв между ментальными моделями дизайнеров и пользователей ». - Якоб Нильсен, Nielsen Norman Group.
Настройка автокресла в Mercedes - отличный пример интерактивного дизайна, в котором используется ментальная модель. Форма автокресла делает его интуитивно понятным для понимания и управления.
Настройка автокресла в Mercedes - отличный пример интерактивного дизайна, в котором используется ментальная модель. Форма автокресла делает его интуитивно понятным для понимания и управления.

Дизайнеры погружаются в свои проекты и регулярно создают собственные ментальные модели. Они также используют часть общих UX шаблонов, используемых другими дизайнерами. В некотором смысле это может создать «UX-пузырь». Легко попасть в ловушку разработки чего-то, что имеет смысл для других дизайнеров, но может запутать обычного пользователя.

У людей есть уникальные модели поведения, обычно формируемые образованием, опытом, возрастом и культурой. Средний пользователь не так хорошо разбирается в тонкостях пользовательского интерфейса, как дизайнеры, живущие в вышеупомянутом «UX-пузыре».

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

Смещение UX-моделей

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

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

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

В тематическом исследовании, разработанном User Interface Engineering, выявлено, что когда кнопка «Зарегистрироваться» была заменена на кнопку «Продолжить» в процессе оформления заказа, эта незначительная корректировка привела к увеличению дохода на 300 миллионов долларов. Основываясь на предыдущем опыте, покупатели имели устоявшуюся модель процесса, который будет следовать после нажатия кнопки «Зарегистрироваться» - обычно это трудоемкий процесс регистрации, который потребуется перед покупкой продукта. Эти негативные ожидания заставили покупателей отказаться от своей корзины.

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

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

Улучшение смещенных UX-моделей

Юзабилити-тестирование и другие методы исследования UX помогают выявить несоответствие между разработанным интерфейсом и ментальными моделями пользователей. Кроме того, разрывы между ментальными моделями могут быть улучшены с помощью интерактивных туров, упрощённой регистрации, обратной связи в реальном времени и / или значимых элементов, которые помогут в изучении новых функций продукта и нового пользовательского интерфейса.

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

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

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

Slack использует интерактивные обзоры с целью помочь новым пользователям изучить интерфейс и в случае противоречий улучшить существующий UX.
Slack использует интерактивные обзоры с целью помочь новым пользователям изучить интерфейс и в случае противоречий улучшить существующий UX.

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

Проектирование на основе ментальных моделей

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

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

Исследование UX-моделей

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

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

 Полезно изучить UX систему конкурентных продуктов, в частности их слабые места.
Полезно изучить UX систему конкурентных продуктов, в частности их слабые места.

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

Самые популярные приложения находятся под непосредственным влиянием друг друга и регулярно реализуют проекты, основанные на существующих ментальных моделях. Например, Facebook представил шаблон взаимодействия «Likes», который затем скопировали LinkedIn и Instagram.

Twitter представил хэштеги, которые затем были скопированы в Facebook и Instagram. Тэги были введены Twitter, а затем скопированы Facebook, LinkedIn, Instagram и другими. Instagram представил истории, а затем Facebook скопировали их. Snapchat представил фото фильтры, которые заимствовал Facebook.

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

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

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

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

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

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

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

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

Многие цифровые элементы UI дизайна отражают существующие аналоги. Это происходит не потому, что дизайнерам не хватает воображения. Они понимают, что на ознакомление с элементами пользовательского интерфейса, отдаленными от каких-либо аналогов придётся потратить больше усилий. Знакомую UX- систему можно сравнить с выключателем света в доме, который не затруднит найти даже в темноте, что значительно уменьшает конгитивную нагрузку на пользователя.

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

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

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

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

Творчество и инновации

Для максимизации UX-дизайна необходимо использование устоявшихся ментальных моделей. Создание и внедрение инноваций в рамках существующих UX-шаблонов и стандартов может привести к появлению новых и интересных продуктов, которые по-прежнему соответствуют ожиданиям пользователей.

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

Слайдер противоречит ожиданиям пользователей, так как расположен вертикально, но работает горизонтально. Слайдер справа взят из iOS. Apple создали что-то новое и оригинальное на базе стандартного UX-дизайна, который формирует общее ожидание того, как работает слайдер громкости.

-12

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