Крутые продукты возникают, когда сталкиваются задачи бизнеса и проблемы пользователя. Но между А «идея» до Б «готовый продукт-огонечек» лежит долгий путь разработки.
Посмотрим на пирамиду потребностей, адаптированную под дизайн продуктов. На первых этапах главной задачей становится создание функционального, надежного и полезного продукта.
Исходя из этой модели эмоциональный, привлекательный дизайн с красивыми элементами и анимациями — это вишенка на торте. Хорошо, если есть, но не обязателен.
Я не буду оспаривать эту модель. Я расскажу, почему нельзя относится к «delightful» как к чему-то второстепенному и в чем ценность красивого дизайна, заставляющего говорить «вау».
Как люди воспринимают информацию
Каждый день нам приходится принимать различные решения: от выбора молока в магазине до переезда в другую страну. Мы привыкли считать, что за всеми такими решениями стоит логичный выбор, homo sapiens как ни крути. На самом деле мы просто не замечаем ту работу, которую проводит наше подсознание.
Изображение с сайта giphy.com
Согласно Nielsen Norman Group есть две системы обработки информации, которые помогают нам принимать решения.
Система 1 — быстрое сканирование и оценка информации. Это «автоматическая» система, которую мы не контролируем и которая требует минимума энергии. Тем не менее она отлично справляется c простыми взаимосвязями и распознает шаблоны.
Система 2, наоборот, требует много усилий и нашего внимания. В самый раз для сложных задач или ситуаций, где нужен наш контроль. Но даже в таких условиях первая система предоставляет поток информации для того, чтобы вторая могла корректно работать.
Зачем дизайнерам знать о первой системе? Несколько причин:
- Система 1 определяет, как пользователи оценивают релевантность информации. Думаю, многие слышали о том, что пользователи не читают текст на сайтах (только при необходимости), а сканируют его, «цепляясь» за отдельные слова и фразы. Но такое выборочное восприятие касается не только текста, а всего контента на экране. В ситуации огромного потока информации пользователь обращает внимание на элементы с наивысшей информационной нагрузкой. И на их основе решает, стоит ли дальше тратить время.
- Система 1 влияет на то, как пользователи воспринимают визуальную часть и косвенно удобство использования сайта. Исследования говорят о том, что красивые сайты кажутся удобнее, чем аналогичные непривлекательные. Юзабилити все еще важно, но приятный дизайн дает преимущества. Доказано: пользователи считают, что красивые продукты работают лучше, даже если на самом деле это не так.
- Система 1 помогает оценить достоверность. На оценку достоверности сайта влияют самые заметные элементы. Например, движущийся блок сбоку страницы может восприниматься как очередная реклама и раздражать (привет, баннерная слепота!). С другой стороны, логотип известной компании на странице будет вызывать доверие.
Изображение с сайта medium.muz.li
О похожих вещах говорит Дональд Норман (автор книги «Emotional Design: Why We Love (Or Hate) Everyday Things»). Он описывает три уровня визуального восприятия: интуитивный, поведенческий и рефлекторный.
Интуитивный уровень — это и есть система 1, когда мы воспринимаем информацию подсознательно, именно на этом уровне работает «вау»-эффект.
Поведенческий уровень дает понимание, как продукт или интерфейс устроен и как мы можем это использовать. Этот уровень про функциональность и UX, дизайн должен быть понятным и удобным.
Рефлекторный уровень — наш рассудок, основанный на опыте, осознании и обучении. Доминирует над двумя предыдущими и отвечает за целостное восприятие продукта. Также Дональд Норман утверждает, что эмоциональная сторона может быть более важной для успеха продукта, чем его функциональные элементы. Его фундаментальный тезис заключается в том, что привлекательные продукты работают лучше, так как они заставляют людей чувствовать себя хорошо и решать проблемы лучше.
Как дизайнеру переманить систему 1 на свою сторону
Пришло время разобраться, как же произвести на пользователя приятное первое впечатление, чтобы он полюбил ваш сайт или мобильное приложение. Мы уже знаем, что человек в первую очередь составляет свое мнение об интерфейсе, да и о самом продукте или услуге, в большей степени подсознательно. И это значит, что у дизайнера есть совсем немного времени, чтобы «зацепить» и убедить пользователя. Приведем несколько советов.
Определить эмоциональный тон
В самом начале проекта следует определить эмоциональный тон — какие эмоции вы хотите вызвать. Например, юмор и беззаботность, доверие, восхищение, сочувствие и т. д. Подробнее в концепте The Wheel of Emotions, by Robert Plutchik
Изображение с сайта psicopico.com
Определить дизайн персон и ключевые взаимодействия
Недостаточно раскидать по странице красивые элементы. Важно знать «болевые точки» и делать правильные акценты. В этом помогут дизайн персоны и карта пользовательского взаимодействия: так мы узнаем, какие цели у пользователя и как он взаимодействует с контентом на странице, и сможем приоритизировать этот контент, создать иерархию и осознанно вести пользователя по экрану. А эмоции добавлять точечно, в тех местах, где хотим привлечь внимание: CTA, формы для связи, услуги и другая важная для конкретного проекта информация.
Изображение с сайта dribbble.com
Использовать визуальные эффекты с умом
На эмоции влияют:
- цвет
- звук
- крупная типографика и стиль речи
- текстуры
- навигация
- читабельность и тон текста
- иллюстрации
- графические элементы
Дизайнеру приходится жонглировать этими элементами, чтобы создать красивый интерфейс с нужными эмоциями. Важно соблюдать баланс, избегать конкурирующих призывов к действию и не использовать много цветов (более четырех) или шрифтов (более двух), так как это может вызвать «эффект радуги» и «перегрузит» систему 1.
Изображение с сайта ericandre.com
Здесь тоже приходят на помощь исследования: чем «чище» сайт, тем ниже показатель отказов, и это касается подавляющей части направлений сайтов. Выяснилось, что если взять шкалу от 0 (самый ужасный и бьющий в глаза дизайн) до 100 (сияющая чистота и простота), то идеальный для пользователя вариант «упрощения» и «чистоты» будет 85%.
Текст. Используйте активную лексику ваших клиентов, так вы будете звучать как человек, а не робот. Часто к этому прибегают в сообщениях об ошибках, кнопках, диалоговых окнах и т. д.
Изображение с сайта metalinjection.net
Иллюстрации. Хорошо привлекают внимание и помогают расположить пользователя к себе. Например, с их помощью можно иллюстрировать процессы, обратить внимание на сообщение или нивелировать недостатки типа 404 ошибки.
Микровзаимодействия. Анимации помогают не только добиться «гладкой» навигации, но и добавить забавных и запоминающихся элементов и даже вызвать «вау»-эффект. Подробнее о микровзаимодействиях можно прочитать в нашем блоге.
Случайность и неожиданность. Один и тот же призыв к действию на каждой странице вызывает скуку. Почему му бы не придумать разные сообщения и менять их от странице к странице?
Сюрприз. Когда происходит что-то, чего пользователь не ожидал от вас, это оказывает сильный эмоциональный эффект. Как, например, сделала команда Zeplin, добавив овощи в таблицу с выбором планов.
Изображение с сайта app.zeplin.io
Наиболее яркие элементы должны быть продуманными и подкреплять доверие
Главные элементы следует делать четкими и визуально приятными, потому что система 1 будет оценивать надежность вашего продукта по самым заметным компонентам на странице.
Аналитика
Тестируйте и отслеживайте аналитику, чтобы оценить, как пользователи реагируют на изменения.
Как убедить клиента и команду, или Примеры из жизни
Казалось бы, есть исследования, которые говорят о том, как важно уделять внимание визуальной составляющей продукта. Но почему по-прежнему вокруг полно восхитительных концептов на dribbble, но так мало красивых «живых» проектов? Дело в том, что влияние дизайна не так просто посчитать и, соответственно, убедить клиента тратить на это деньги.
Тот же Дональд Норман говорит о том, что нет какой-то формулы для создания хорошего эмоционального дизайна и нужно полагаться на интуицию.
Предположим, у нас есть отлично работающий продукт, который помогает пользователям. Но что дальше? Что будет отличать наш продукт от такого же замечательного продукта-конкурента? Именно здесь становится очевидна ценность эмоций. Дизайн становится этим отличием между компаниями.
Давайте посмотрим на Dropbox, которому приходится конкурировать с таким гигантом, как Google Drive, и какое огромное значение команда Dropbox придает дизайну в целом и иллюстрациям в частности. Дизайн Dropbox — это не только приятный интерфейс, он передает идеи и ценности продукта.
Изображение с сайта illustrationui.com
Еще один пример, где компания уделяет большое внимание эмоциям, что помогает обойти конкурентов, — это Slack. Создатели понимали, что разрабатывают продукт, в котором люди будут проводить много времени, и важно было уделить внимание эмпатии, сделать его человечным. Что у них отлично получилось: Slack словно хочет быть другом. В приложении все устроено таким образом, чтобы пользователь понимал, что оно создано для людей другими людьми. Мы уже приводили пример приветственных сообщений, которыми Slack встречает при загрузке. И это такая простая, но очаровательная идея, которая заставляет каждый раз улыбнуться. А ведь это многого стоит :)
Что в итоге
Эмоциональный дизайн важен. Исследования доказывают, что пользователи предпочитают работать с визуально приятными продуктами, прощают им недостатки, и, более того, привлекательные продукты заставляют людей чувствовать себя хорошо и, в свою очередь, лучше решать задачи.
Но красота не должна вступать в конфликт с функциональностью, надежностью и удобством. Сначала необходимо обеспечить минимальную ценность продукта, но не останавливаться на этом, а добавлять эмоции и улучшать впечатления пользователей, обязательно проверяя, как они реагируют на изменения.
Статьи по теме
The most overlooked growth hack: designing for emotions
Preserving human touch – Designing with Emotion
3 уровня визуального и эмоционального дизайна посадочных страниц
