Крутые продукты возникают, когда сталкиваются задачи бизнеса и проблемы пользователя. Но между А «идея» до Б «готовый продукт-огонечек» лежит долгий путь разработки.
Посмотрим на пирамиду потребностей, адаптированную под дизайн продуктов. На первых этапах главной задачей становится создание функционального, надежного и полезного продукта.
Исходя из этой модели эмоциональный, привлекательный дизайн с красивыми элементами и анимациями — это вишенка на торте. Хорошо, если есть, но не обязателен.
Я не буду оспаривать эту модель. Я расскажу, почему нельзя относится к «delightful» как к чему-то второстепенному и в чем ценность красивого дизайна, заставляющего говорить «вау».
Каждый день нам приходится принимать различные решения: от выбора молока в магазине до переезда в другую страну. Мы привыкли считать, что за всеми такими решениями стоит логичный выбор, homo sapiens как ни крути. На самом деле мы просто не замечаем ту работу, которую проводит наше подсознание.
Изображение с сайта giphy.com
Согласно Nielsen Norman Group есть две системы обработки информации, которые помогают нам принимать решения.
Система 1 — быстрое сканирование и оценка информации. Это «автоматическая» система, которую мы не контролируем и которая требует минимума энергии. Тем не менее она отлично справляется c простыми взаимосвязями и распознает шаблоны.
Система 2, наоборот, требует много усилий и нашего внимания. В самый раз для сложных задач или ситуаций, где нужен наш контроль. Но даже в таких условиях первая система предоставляет поток информации для того, чтобы вторая могла корректно работать.
Зачем дизайнерам знать о первой системе? Несколько причин:
Изображение с сайта medium.muz.li
О похожих вещах говорит Дональд Норман (автор книги «Emotional Design: Why We Love (Or Hate) Everyday Things»). Он описывает три уровня визуального восприятия: интуитивный, поведенческий и рефлекторный.
Интуитивный уровень — это и есть система 1, когда мы воспринимаем информацию подсознательно, именно на этом уровне работает «вау»-эффект.
Поведенческий уровень дает понимание, как продукт или интерфейс устроен и как мы можем это использовать. Этот уровень про функциональность и UX, дизайн должен быть понятным и удобным.
Рефлекторный уровень — наш рассудок, основанный на опыте, осознании и обучении. Доминирует над двумя предыдущими и отвечает за целостное восприятие продукта. Также Дональд Норман утверждает, что эмоциональная сторона может быть более важной для успеха продукта, чем его функциональные элементы. Его фундаментальный тезис заключается в том, что привлекательные продукты работают лучше, так как они заставляют людей чувствовать себя хорошо и решать проблемы лучше.
Пришло время разобраться, как же произвести на пользователя приятное первое впечатление, чтобы он полюбил ваш сайт или мобильное приложение. Мы уже знаем, что человек в первую очередь составляет свое мнение об интерфейсе, да и о самом продукте или услуге, в большей степени подсознательно. И это значит, что у дизайнера есть совсем немного времени, чтобы «зацепить» и убедить пользователя. Приведем несколько советов.
В самом начале проекта следует определить эмоциональный тон — какие эмоции вы хотите вызвать. Например, юмор и беззаботность, доверие, восхищение, сочувствие и т. д. Подробнее в концепте 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 уровня визуального и эмоционального дизайна посадочных страниц
Появилась идея для проекта? Мы хотим узнать о том, что важно для вас
Связаться