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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Контраст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

Пример 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 дизайн можно использовать для различных целей: выделить продукт среди аналогичных, повысить лояльность аудитории, оживить заскучавших пользователей и т.п.

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

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