10 шаблонов поведения для UX-дизайна
При разработке любого продукта важно понимать и учитывать ожидания пользователей. Если создавать продукт в вакууме, не принимая во внимание существующие варианты на рынке или психологию и культуру пользователей, то он неизбежно потерпит провал.
Приведенные ниже описания шаблонов были взяты из книги «Проектирование интерфейсов: Шаблоны для эффективного дизайна взаимодействия», написанной Дженифер Тидуэлл (Jenifer Tidwell), Чарльзом Брюером (Charles Brewer) и Эйн Валенсия (Aynne Valencia). Настоятельно рекомендую обратить внимание на эту книгу, если вы хотите узнать более подробную информацию.
1. Безопасное исследование
«Я просто хочу изучить программу, не запутавшись и не попадая в неприятности».
«Когда пользователю кажется, что он может изучить интерфейс без тяжелых последствий, он, вероятно, узнает больше и будет чувствовать себя более позитивно. Хорошее программное обеспечение позволяет людям попробовать что-то новое, вернуться к изначальному этапу и взяться за что-то другое, не испытывая при этом стресса».
В отличие от реального мира, интерфейсы позволяют людям с легкостью исправлять свои ошибки. Если вы случайно проливаете кофе на юбку, находясь при этом в офисе, то вы не сможете отменить это действие с помощью CTRL + Z. Дизайны интерфейсов, напротив, должны побуждать пользователей изучать различные доступные опции, а затем позволять им вернуться к исходному положению или с легкостью отменить любые действия.
Примеры:
- кнопка «Назад», облегчающие возврат к началу;
- возможность применения фотофильтров и отмены их действия при неудовлетворительном результате;
- сохранение истории;
- кнопка «Отмена» при создании документов.
2. Мгновенный результат
«Я хочу получить этого прямо сейчас, а не позже».
«Людям нравится видеть мгновенные результаты от выполненных действий — такова природа человека. Всегда приятно получить «успешный опыт» в течение первых нескольких секунд использования приложения! Такой подход значительно повышает вероятность дальнейшего использования, даже если позже оно немного усложнится. Пользователи будут чувствовать себя более уверенными не только в приложении, но и в себе, если на то, чтобы разобраться, им не потребовалось много времени».
В нашем быстро меняющемся цифровом мире все процессы становятся намного быстрее и проще. Нужно перекусить? Доставщик еды будет у вашего дома уже через 30 минут или даже раньше. Хотите сами добраться до магазина? Uber или любая другая служба такси будет с минуты на минуту. Хотите с кем-нибудь познакомиться? Просто свайпните понравившегося человека в приложении для знакомств. Список можно продолжать бесконечно…
Если продукт не обеспечивает мгновенный прилив дофамина, то существует риск его замены продуктом конкурента. Поэтому при создании дизайна подумайте над тем, как предоставить пользователям чувство удовлетворения или достижения чего-либо.
Примеры:
- получение мэтча в приложении для знакомств;
- взрыв конфетти при освоении привычки (например, Confetti);
- мгновенный поиск подходящей машины после вызова такси;
- возможность отложить действие или временно скрыть отображаемый контент.
3. Удовлетворение
«Вполне приемлемо. Не хочу тратить много времени на изучение».
«Когда люди видят новый интерфейс, они не прочитывают каждый его фрагмент в попытке найти наиболее подходящую для решения их проблемы кнопку. Вместо этого пользователь быстро просматривает интерфейс, выбирает первый увиденный элемент, который может удовлетворить его потребность, и нажимает на него, даже если выбор будет ошибочным. Люди готовы принять «вполне приемлемый» вместо «лучшего» варианта, если изучение всех альтернатив может стоить времени или усилий».
Случалось ли вам, быстро «просканировав» исходную страницу и не читая даже заголовка, решить, что вам этот вариант не подходит? Со мной это происходит постоянно. Мы подсознательно и сознательно поглощаем предложенную информацию и оцениваем, может ли продукт решить нашу проблему, сделать нашу жизнь лучше или соответствует ли он нашим стандартам.
Наиболее важная информация должна быть достаточно простой, чтобы пользователь смог понять ее с первого взгляда. Если вы полагаетесь на то, что пользователи будут прочитывать большие блоки текста, чтобы понять, какую пользу может принести ваш продукт, то вы можете упустить большинство новых пользователей.
Ключевые моменты:
- предоставьте очевидные опции, которые пользователь может выбрать без лишних беспокойств;
- интерфейс должен быть легко сканируемым;
- пользователи выбирают первый вариант, который может сработать.
4. Отложенный выбор
«Я не хочу отвечать прямо сейчас, дайте мне закончить!»
«Это вытекает из стремления людей к мгновенному удовлетворению. Если вы задаете пользователям, пришедшим за решением определенной задачи, ненужные вопросы, они скорее всего предпочтут пропустить эти вопросы и вернутся к ним позже. Например, в некоторых веб-досках объявлений предусмотрены длинные и сложные процедуры регистрации. Никнеймы, адреса электронной почты, настройки конфиденциальности, аватары, личные характеристики… список можно продолжать бесконечно. А пользователь просто хотел опубликовать одно маленькое объявление».
«Почему бы не позволить им пропустить большую часть вопросов, ответить на самый минимум и вернуться позже (при желании), чтобы заполнить остальное? В противном случае они могут провести около получаса, отвечая на длинные вопросы и выбирая идеальное изображение для аватара».
UX-дизайнеры должны учитывать эти моменты. Не запрашивайте ненужную информацию, но, что более важно, разрешите ввести информацию позже или сделайте эти данные необязательными.
Предоставьте возможность пропустить любую информацию, которая не нужна на все 100%.
Ключевые моменты:
- не добавляйте слишком много шагов;
- предоставьте пользователям возможность «пропустить» шаг;
- отделите важные вопросы от менее важных;
- предоставьте возможность добавлять, изменять и редактировать информацию позже.
5. Привыкание
«Эти клавиши работают везде, так почему они не работают здесь?»
«При повторном использовании интерфейса некоторые частые физические действия становятся рефлексивными: нажатие Ctrl-S для сохранения документа, нажатие кнопки «Назад» для выхода из веб-страницы, нажатие «Вернуться» для закрытия модального диалогового окна, использование жестов для отображения и скрытия окон и даже нажатие педали тормоза автомобиля. Пользователю больше не нужно сознательно обдумывать эти действия. Они стали привычными».
Как человек, который ежедневно использует такое сочетание, как Figma, XD и Sketch, я впечатлен тем, насколько единообразно большинство элементов управления, но все же раздражаюсь, если вижу некоторые различия.
При наличии отраслевого стандарта для взаимодействия или пользовательского интерфейса лучше соблюдать эти соглашения — перепроектирование существующих шаблонов, как правило, чаще всего приводит к путанице, чем приносит пользу. Приберегите свой творческий потенциал для других аспектов продукта.
Примеры:
- CTRL + S, CTRL + Z;
- свайп влево или вправо для перехода к следующему или предыдущему экрану;
- нажатие X для выхода из диалога;
- свайп вниз для обновления страницы на мобильном телефоне.
6. Пространственная память
«Клянусь, эта кнопка была здесь минуту назад. Куда она делась?»
«Когда люди манипулируют объектами и документами, то чаще всего они находят их позже по месту расположения, а не по названию».
«Пространственная память объясняет, почему полезно предоставлять организованные пользователем области для сортировки документов и объектов, такие как рабочий стол. Такие вещи не всегда практичны, особенно с большим количеством объектов, но они работают довольно хорошо с небольшим количеством элементов. Когда люди организовывают пространство самостоятельно, они, скорее всего, вспомнят, куда поместили тот или иной объект».
Представьте свое приложение как физическое пространство. Люди будут организовывать его так, как им удобно, а не так, как хочет ваш алгоритм. Сделайте так, чтобы пользователи могли с легкостью перемещать элементы и делать закладки или сохранять их на потом.
Примеры:
- группировка приложений в папки;
- размещение различных экранов свайпом влево, вправо, вверх или вниз;
- организация программ на рабочем столе;
- сортировка карт в кошельке Apple.
7. Социальное доказательство
«А что об этом говорят другие?»
«Человек — социальное существо. Каким бы твердым не было наше мнение, на него, как правило, влияет то, что говорят или делают другие люди. Нам необходимо как получение одобрения от других, так и принадлежность к какой-либо группе. Мы поддерживаем идентичность в социальных сетях. Мы помогаем группам и людям, которые нам дороги».
Социальное доказательство может сделать продукт более привлекательным. Не обязательно включать функцию добавления друзей. Отображение элементов по популярности поможет пользователям чувствовать себя менее одинокими при принятии решений. Если другие выбрали этот вариант и остались довольны, то есть хороший шанс, что это разумный выбор.
Примеры:
- отзывы на Amazon, Airbnb, Yelp и др.;
- лайки, реакции, возможность поделиться, ретвиты, подписчики, количество друзей, синяя галочка, комментарии или просмотры;
- советы или рекомендуемые товары от друзей;
- «48 вашим друзьям нравится эта страница».
8. Оптимизированное повторение
«Сколько раз я должен это повторить?»
«Во многих типах приложений пользователям приходится выполнять одну и ту же операцию снова и снова. Чем проще для них, тем лучше. Если вы сократите операцию до одного нажатия клавиши/клика на повторение или, что еще лучше, до нескольких нажатий клавиш/кликов для всех повторений — вы сэкономите пользователям много времени».
Раньше мне приходилось делать приличное количество работы, связанной с обслуживанием клиентов, для моей первой компании. Я постоянно копировал и вставлял одни и те же общие ответы из документа. В конце концов я решил, что должен быть способ упростить эту задачу. И я его нашел — расширение Chrome, которое использовало текстовый ярлык для автоматического заполнения того, что я хотел написать. Например, когда я набирал «greet%», он автоматически вставлял мое приветственное сообщение.
Это сэкономило мне огромное количество времени и помогло осознать важность оптимизации пользовательского опыта для часто повторяющихся действий.
Если ваши пользователи постоянно повторяют одну и ту же команду или действие — создайте ярлык или рабочий процесс, чтобы облегчить им жизнь.
Примеры:
- автозаполнение, когда вы начинаете что-то печатать;
- Google Chrome автоматически завершает запрос «yo» как «www.youtube.com»;
- автоматизация рутинных процессов в Slack с помощью Workflow Builder;
- «Удалить все» или «Выбрать все».
9. Проспективная память
«Я помещаю этот элемент сюда, чтобы напомнить себе о том, что нужно сделать это дело позже».
«Мы организуем проспективную память, когда планируем выполнить что-либо в будущем, и делаем это таким образом, чтобы напомнить себе о том, что это нужно сделать. Например, если завтра вам нужно принести книгу на работу, то накануне вечером, вы можете положить ее на стол рядом с входной дверью. Если вам нужно ответить на письмо в электронной почте позже, вы можете оставить его на экране в качестве напоминания».
Проспективная память не часто появляется в интерфейсах, но это важный шаблон, на который стоит обратить внимание. Ее инфраструктура играет главную роль. Возможность сохранять черновики, напомнить о чем-либо позже или разместить незавершенные задачи в удобном месте поможет пользователю в дальнейшем вернуться к задаче.
Примеры:
- открытые окна как напоминание, что какое-либо действие нужно закончить;
- пометка на непрочитанном письме;
- закладки на веб-сайтах, которые нужно просмотреть позже;
- выделение текста в документе в качестве напоминания, что его нужно будет пересмотреть позже.
10. Небольшие перерывы
«Займусь-ка я чем-нибудь полезным, пока жду поезд».
«У людей часто появляется несколько свободных минут в повседневной жизни. Например, перерыв во время работы, время в очереди в магазине или в пробке. В такие моменты людям хочется отвлечься, чтобы сократить время ожидания, сделав что-то конструктивное или интересное, но при этом они знают, что у них не будет достаточно времени, чтобы углубиться в онлайн-активность».
Интерфейс должен побуждать пользователей провести в нем те свободные минуты, когда они едут в лифте. Он должен ускорять изучение чего-либо, развлекать или помогать находить нужную информацию. Этот пункт возвращает нас к мгновенному удовлетворению — если пользователь уверен, что ваше приложение может быстро поднять настроение, он будет возвращаться снова и снова.
Примеры:
- лента в Instagram;
- чтение новостей;
- игры;
- ответы на сообщения;
- проверка электронной почты.
Перевод статьи Danny Sapio: 10 Behavior Patterns for UX Design
Комментарии