Кира Светлова, специалист по юзабилити 1PS.RU и участник Гильдии вольных проектировщиков, специально для блога Нетологии адаптировала статью Carrie Cousins о способах рассказать историю с помощью дизайна.

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

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

Привлекайте изображениями

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

Но концепция «показать, не рассказывать» на этом не заканчивается.

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

Создавайте персонажа

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

Персонаж может быть реальным и путешествовать по всему проекту или может восприниматься как голос в контенте.

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

Во-первых, персонаж помогает объяснить название компании. В широко распространенной рекламной кампании в виде шутки была использована некоторая путаница с «MailChimp». Шимпанзе рядом со словами делает понятней название.
Во-вторых, персонаж демонстрирует весёлый характер, который изображает компания. Тон и визуальные эффекты легкие и простые.
Фредди предоставляет компании историю, когда им нечего добавить в рекламных кампаниях. Как появился шимпанзе? Откуда его имя? И так далее. Персонаж помогает сохранить новизну истории и двигаться вперед.

Приглашайте к участию

Добавляйте ценность дизайну с помощью интерактивных элементов в паре с общими действиями. Слегка анимируйте кнопки, на которые пользователи должны обратить внимание. Или помогите заметить определённые элементы с помощью подсказок, например, стрелок или изображений, которые как бы «наклоняются» в сторону интерактивных элементов.

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

Хорошая история не должна быть сложной.

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

Создайте игру

Один из самых сложных моментов при рассказе истории — это развивать её. Если вы не знаете с чего начать, простая игра может помочь вам сосредоточиться и даже предоставить забавные возможности для пользователей.

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

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

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

Сделайте микровзаимодействия выразительней

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

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

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

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

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

Напишите рассказ

У каждой истории есть вступление, основная часть и заключение.

Если дизайн вашего сайта не отражает связность и последовательность истории, то пользователи могут запутаться или потеряться. Вот самая простая из формул:

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

Сохраняйте простоту сюжетной линии

Это может показаться противоречием совету №6, но история должна быть простой. Она не должна быть объёмом в 1500 страниц. Простая сюжетная линия та, которую вы могли бы рассказать за 5 секунд или меньше.

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

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

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

Эта история проста и эффективна. Пользователи с большей вероятностью запомнят её… и вас.

Вывод

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.