Сторителлинг в UX/UI-дизайне

В одном маленьком городе жил одаренный молодой UX/UI-дизайнер. У него был талант создавать функциональные сайты, которые притягивали своей минималистичной эстетикой. Но в глубине души он хотел выделиться среди других дизайнеров, показать, что его проекты не просто гармоничны, но и особенны. Дедлайны горели, но дизайнера не оставляло желание придать содержания своим работам. И вот в один прекрасный день он случайно наткнулся на статью о сторителлинге на сайте Uprock, которая открыла для него новые знания.

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

Сторителлинг в UX/UI-дизайне — это способ воздействия на аудиторию с помощью повествования.

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

Разберемся подробнее с особенностями сторителлинга в UX/UI-дизайне в нашем лонгриде.

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

Обзоры продуктов или услуг

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

Например, на веб-сайте, посвященном истории известного бренда Breguet, представлено новое поколение культовых часов Type XX. Рассказывается, что такие часы использовались в авиации, их носили летчики, поэтому они стали настоящей легендой. Новая модель выполнена в соответствии с оригинальным дизайном часов из 50-х и стала современным ремейком. Далее подробно описывается устройство часов и рассказывается о их преимуществах.

История бренда или компании

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

Например, подобный сайт создан для fashion-компаний Melon Fashion Group. Они показали географию проекта, познакомили со своей командой, рассказали свой путь в обратном хронологическом порядке и познакомили с социальными проектами, в которых активно участвуют.

Отзывы клиентов

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

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

Истории о благотворительности и помощи

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

Лонгриды

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

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

Какие элементы входят в структуру истории?

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

1. Основная идея

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

2. Герои

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

3. Структура

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

Акт 1 — начало

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

Акт 2 — середина

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

Акт 3 — конец

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

4. Эмоциональная окраска

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

Работа над сайтом в формате сторителлинга предполагает использование повествовательного подхода. Чтобы было проще создать подобный проект, рекомендуем следовать следующим шагам.

1. Исследование аудитории и целей сайта

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

2. Определение целей

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

3. Создание героев

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

4. Определение структуры

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

5. Сбор контента и информации

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

6. Дизайн интерфейса

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

7. Анимация и визуальные эффекты

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

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

Сайт масла авокадо

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

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

И наконец, в завершение повествования, предлагается заказать масло двух объемов 500 мл или 1000 мл.

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

Сайт поселка «Волочанка»

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

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

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

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

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

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

1. Цвет

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

2. Иллюстрации и фотографии

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

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

3. Типографика

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

4. Текст

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

5. Анимация

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

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