Как зацепить пользователя: светлая и тёмная магия вовлекающего дизайна

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

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

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

Есть много способов «сбить автопилот» и обратить взгляд человека на то, что хотим показать мы. Далее рассмотрим способы вовлечения, которые предлагает UI-дизайн.

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

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

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

Какие задачи можно решить с помощью дизайна:

• Вызвать интерес, зацепить.
• Стимулировать взаимодействие с продуктом достаточное время без отвлечения на что-то более интересное.
• Вызвать у пользователя желание делиться контентом, снова возвращаться к сайту/приложению и т.д.

А сделать это можно самыми разными способами: проверенными, новаторскими, этичными, сомнительными… Рассмотрим, каким бывает вовлекающий дизайн на светлой и тёмной стороне.

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

1. Сопровождение пользователя

Цель – экономить время пользователя. Что это значит?

• Давать информацию порционно, своевременно и по теме, в соответствии с запросом.
• Подходить с умом к проектированию структуры и содержанию контента.
• Предупреждать об ошибках по мере возникновения

В реальности пользователь не всегда ведет себя логично – важно это помнить.

2. Контраст

Что это значит? Сделать некоторые области более заметными по сравнению с остальными и таким образом привлечь к ним взгляд. Существуют разные способы управления вниманием в дизайне с помощью контраста:

• Вариант 1: Использовать акценты, правильную палитру цветов, грамотную структуру сайта, современную анимацию.

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

• Вариант 2: Сыграть на отличиях от конкурентов или сделать то, чего пользователь не ожидает.

Сравните эффект, который создают два варианта рекламы от Apple. Если рекламные постеры обычно цветные, то у черно-белого выше шансы зацепить взгляд и сбить автопилот. Как удержать внимание? Дизайн должен обмануть стереотипы и подсознательные ожидания.

3. Эксплуатация любопытства

Что это значит? Добавить большое количество модулей и элементов, которые ударяют по всем интересам пользователя.

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

Этот принцип совершенно противоположен первому (убрать всё лишнее), но иногда может быть уместным.

4. Персонализация

Что это значит? Сделать так, чтобы бренд ассоциировался у пользователя с чем-то личным. Эту задачу решают различные средства:

• Кастомизация;
• Личная статистика;
• Персональные подборки.

Важно дать пользователю возможность почувствовать себя особенным.

Spotify и запущенная в 2017 акция Wrapped/Музыкальные итоги года наглядно демонстрируют этот принцип: пользователь видит как глобальную статистику, так и личную. Акция вызвала существенный скачок в количестве скачиваний приложения и стала ежегодной традицией, а саму идею подхватил Яндекс и другие стриминговые сервисы, реализовав по-своему.

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

5. Эмоции и эмпатия

Что это значит? Использовать приемы, которые передают эмоции и вызывают сопереживание, чувство «мне это знакомо», эмоциональный отклик – значит, и повышенное внимание; дизайн в этом случае выступает катализатором.

Форматов для реализации много:

• Видео;
• Лонгриды с большим количеством графики;
• Личные истории;
• Реальные отзывы.

Человеческие лица – один из мощнейших способов создания эмоционального отклика у пользователя.

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

Например:

• Таймер или всплывающие сообщения вида «Осталось N минут/N штук» подталкивает забронировать товар как можно скорее.
• Система автоматически воспроизводит следующий эпизод сериала, чтобы зритель часами не отрывался от экрана.
• Процесс отмены подписки на сервис или имейл-рассылку намеренно усложнен, чтобы пользователю стало лень это делать.
• Дизайн мобильных приложений подразумевает постоянные push-уведомления, побуждающие заходить снова и снова.
• Диалоговое окно рекламирует соцсети или рассылку в духе «Подпишись, не будь дураком».
• Всплывающие уведомления на сайте эксплуатируют пользовательские паттерны: знакомый звук или надпись «У вас новое сообщение», крестик для закрытия не расположен в привычном правом верхнем углу, и т.д.

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

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

Образуются три серьезные проблемы:

• Ошибочные бизнес-цели. Компания начинает гнаться за ростом просмотров, кликов, заявок и других количественных показателей. При этом игнорируются особенности конкретного продукта, и метрики не подстраиваются под реальные условия.
• Беспомощность. Пользователь теряет контроль и не может осознанно взаимодействовать с продуктом, получая реальную пользу. Вместо этого ощущается зависимость и дискомфорт.
• Усталость и пресыщенность. Нечестные UX-приемы истощают пользователя и делают менее восприимчивым. В то же время конкуренция вынуждает дизайнеров снова применять «петли вовлечения», «бесконечный скролл» и «диджитал фастфуд». В итоге проигрывают все.

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

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

Пример 1

На сайте издательства МИФ можно купить книги или собрать набор в разделе «Мастерская подарков». Наглядная последовательность действий позволяет пользователю легко представить результат.

Какой принцип здесь работает: Эмоции и эмпатия + сопровождение пользователя = мощный эффект.

Пример 2

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

Какой принцип здесь: Контраст + геймификация + эксплуатация любопытства.

Пример 3

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

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

Пример 4

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

Какой принцип здесь работает: Сопровождение пользователя + геймификация = беспроигрышная комбинация.

Пример 5

Медиа «Бизнес-секреты» от Тинькофф создает контент с двумя важнейшими свойствами:

• Ценность и польза для аудитории (инструкции, шаблоны, обновления законов, реальные истории предпринимателей и т.д);
• Четкая структура, нацеленность на конкретный запрос и ключевые слова, а также перекрестные ссылки для удобства чтения.

Какой принцип здесь работает: Сопровождение пользователя: четкая структура и ничего лишнего.

Пример 6

А это уже из нашей практики – дизайн приложения Shrooms для бронирования переговорок и других офисных помещений. Мы сделали максимальный упор на визуализацию самой важной для пользователя информации:

• Комнаты, которые сейчас свободны;
• Мое расписание и «окна» на сегодня;
• Текущее время – в удобном месте перед глазами;
• Недавние встречи, которые уже закончились.

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

Пример 7

Визуальная демонстрация прогресса – один из простейших и эффективнейших вариантов, как использовать UI дизайн для вовлечения.

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

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

Какой принцип здесь работает: Сопровождение пользователя + эффект приближения к цели = наглядность процесса.

Пример 8

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

Какой принцип здесь работает: Эффект приближения к цели + геймификация = снятие стресса и повышение мотивации пользователя.

Пример 9

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

Какой принцип здесь работает: Персонализация + эмоции и эмпатия = возможность вызвать личный отклик и построить взаимоотношения.

Данный кейс многократно усиливает использование UGC (User-generated content), поскольку аудитория лучше запоминает и больше доверяет контенту, созданному такими же пользователями.

Пример 10

Netflix известен тем, что в разделе предложений для просмотра подстраивает обложки под предпочтения конкретного зрителя. К примеру, для фанатов Умы Турман обложка «Криминального чтива» будет выглядеть иначе, чем для любителей Джона Траволты.

А свой мегапопулярный сериал «Очень странные дела» Netflix продвигал в том числе с помощью обложек, отражающих тот или иной жанр: триллер, детектив, ужасы, комедия, подростковый сериал и т.д.

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

Какой принцип здесь работает: Персонализация, выкрученная на максимум.

Пример 11

Spotify тоже стремятся персонализировать и кастомизировать всё: имейлы, плейлисты, поиск, главную страницу с подборками и т.д. Также интересна кооперация с Netflix по продвижению второго сезона «Очень странных дел»: пользователю предлагался тест, чтобы сравнить свои музыкальные предпочтения с плейлистами, составленными для каждого центрального персонажа сериала. При этом страница сайта была оформлена в стилистике сериала. Рекламная кампания получилась крайне успешной: интерес пользователей не спадал более двух месяцев.

Пример 12

Развлекательный проект под названием Museum of Annoying Experiences предлагает рассмотреть шуточные экспонаты в музее будущего. Отлично выполненная анимация позволяет пользователю перемещаться по сайту, словно в видеоигре.

Какой принцип здесь работает: Эксплуатация любопытства + геймификация.

Пример 13

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

Какой принцип здесь работает: Эксплуатация любопытства + сопровождение пользователя.

Пример 14

Как вместить много информации и не запутать пользователя? Вот пример из нашего опыта: CRM-система, дизайн которой решает эту проблему для агентства недвижимости. Интерактивные карточки содержат фотографию объекта и базовую информацию, а самое важное выделено акцентными цветами. Такой подход помогает сориентироваться и не перегружает восприятие. А если пользователю нужно больше, то достаточно кликнуть на карточку: откроются полные сведения и возможность редактировать.

Какой принцип здесь работает: Сопровождение пользователя + контраст = отличное решение для продуктов со сложной архитектурой.

Пример 15

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

Какой принцип здесь работает: Контраст.

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

Давайте разберем типичные проблемы, с которыми можно столкнуться.

Проблема №1: У вас нет другой идеи, кроме как создать креатив.

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

Если у вас информационный сайт, интернет-магазин или CRM система, дизайн лучше выбрать привычный и функциональный. Оригинальные решения сработают там, где основная цель – вызвать эмоции.

Проблема №2: Вы не понимаете и не изучаете аудиторию.

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

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

Проблема №3: Неясно, в чем предназначение сайта/приложения.

Пользователю больше всего нужна простота и ясность. Никто не хочет тратить время и задумываться: «А что здесь происходит?», это должно быть сразу очевидно. Интерактивные, вовлекающие и креативные приемы дизайна хороши, когда не отвлекают от целевого действия.

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

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

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

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