Кирa Свeтлoвa, спeциaлист пo юзaбилити 1PS.RU, спeциaльнo для блoгa Нeтoлoгии aдaптирoвaлa статью Carrie Cousins о способах рассказать историю с помощью дизайна.
Веб-сайт — это больше, чем просто место для хранения информации о вашем приложении, портфолио или продуктах. Он должен рассказывать историю, чтобы привлекать и восхищать пользователей. Это один из ключевых моментов, который поможет задержать клиентов на сайте.
Хотя хорошая история может начаться с идеи на бумаге, но оживет она только благодаря дизайну.
Привлекайте изображениями
Дизайн должен визуально привлекать пользователя. Начните с простых и понятных образов. Фотографии звёзд, интересные иллюстрации или видео, которые вызывают вау-эффект, помогут захватить внимание и произвести первое впечатление.
Но концепция «показать, не рассказывать» на этом не заканчивается.
История должна быть наполнена образами как с помощью визуальных методов дизайна, так и слов на экране. Создайте подходящую истории цветовую палитру, с элементами, что приводят пользователей к пониманию цели или задачи вашего проекта. Хорошая история поможет направлять пользователя по этому пути. Дизайн должен быть очевидным визуальным дополнением.
Создавайте персонажа
В веб-дизайне мы много говорим о персонажах. Это ключевая часть процесса разработки дизайна. Перейдите на следующий уровень, добавив в историю персонажа, с которым пользователи могут идентифицировать себя.
Персонаж может быть реальным и путешествовать по всему проекту или может восприниматься как голос в контенте.
Отличный пример развития персонажа у сервиса рассылок MailChimp. Фредди, талисман и логотип компании, появляется на протяжении всего дизайна, в блоге и в рекламных акциях. Этот персонаж делает для компании несколько вещей:
- Во-первых, персонаж помогает объяснить название компании. В широко распространенной рекламной кампании в виде шутки была использована некоторая путаница с «MailChimp». Шимпанзе рядом со словами делает понятней название.
- Во-вторых, персонаж демонстрирует весёлый характер, который изображает компания. Тон и визуальные эффекты легкие и простые.
- Фредди предоставляет компании историю, когда им нечего добавить в рекламных кампаниях. Как появился шимпанзе? Откуда его имя? И так далее. Персонаж помогает сохранить новизну истории и двигаться вперед.
Приглашайте к участию
Добавляйте ценность дизайну с помощью интерактивных элементов в паре с общими действиями. Слегка анимируйте кнопки, на которые пользователи должны обратить внимание. Или помогите заметить определённые элементы с помощью подсказок, например, стрелок или изображений, которые как бы «наклоняются» в сторону интерактивных элементов.
Рассмотрите другие эффекты, которые помогут сохранить у пользователей заинтересованность историей. Параллакс-скроллинг — весьма привлекательный способ мотивировать пользователей прокручивать страницу вниз или в сторону. Это одна из причин, почему данный метод настолько популярен.
Хорошая история не должна быть сложной.
Компания Humaan улучшила свою историю с помощью простых hover-эффектов в паре с фотографиями команды, что знакомят с людьми, стоящими за компанией. Это просто и эффективно. Обратите внимание на фотографии сотрудников. Забавные позы и выражения лиц позволяют увидеть характер каждого члена команды.
Создайте игру
Один из самых сложных моментов при рассказе истории — это развивать её. Если вы не знаете с чего начать, простая игра может помочь вам сосредоточиться и даже предоставить забавные возможности для пользователей.
Хитрость добавления игры в дизайн заключается в том, чтобы сохранить ее простой, короткой и предоставить некоторое вознаграждение за совершенные действия, например, код купона или виртуальный значок.
Необязательно это должна быть игра в стиле покемонов. Посмотрите на Dropbox. Получение дополнительного пространства в аккаунте облачного хранилища является целью для многих пользователей. Приглашение других пользователей в Dropbox, авторизация с мобильных устройств и привязка электронной почты к аккаунту представляют собой игровые механики, которые компания использует, чтобы дать пользователям больше пространства для хранения. Игра проста, есть награды за успех, и это помогает создать команду лояльных пользователей Dropbox.
Для пользователей, которые не хотят играть в игру или не могут выполнить все задачи, Dropbox предлагает оплатить проект, чтобы пропустить задания и выиграть сразу. Это другой трюк «игровой» истории; пользователи должны иметь возможность победить.
Сделайте микровзаимодействия выразительней
Продумайте даже самые крошечные элементы дизайна, с которыми будут взаимодействовать пользователи. Сайты социальных сетей, в частности, привлекают столько внимания, потому что они создают простые микровзаимодействия.
Как и обновление, микровзаимодействия — это короткие моменты, когда дизайн привлекает пользователей. Каждый раз, когда вы меняете настройки, отправляете сообщение, авторизируетесь или лайкаете пост, вы становитесь свидетелем микровзаимодействия.
От клика по «сердцу» в Инстаграм (и наблюдения, как оно становится красным) до нажатия на ретвит — эта обратная связь побуждает пользователя возвращаться.
Выразительные микровзаимодействия создают спрос на дизайн. Они повышают уровень функций для пользователей, что делает ценным общий опыт взаимодействия с сервисом.
Микровзаимодействия также делают дизайн отзывчивым и привлекательным. Добавьте данную информацию к ключевым целям вашего сайта. Это может быть что угодно, начиная от возможности пользователям поделиться только что приобретенным продуктом и заканчивая добавлением чего-либо в вишлист с подпиской на обновления.
Напишите рассказ
У каждой истории есть вступление, основная часть и заключение.
Если дизайн вашего сайта не отражает связность и последовательность истории, то пользователи могут запутаться или потеряться. Вот самая простая из формул:
- Вступление. Логотип и заголовок. Позвольте пользователям узнать, кто вы и почему они находятся на вашем сайте.
- Основная часть. Вся вспомогательная информация, которая делает вас особенными. Что вы можете сделать для людей, которые сейчас на вашем сайте? Чего им следует ожидать?
- Заключение. Очевидный призыв к действию, например, форма, кнопка заказа или ссылка на что-то ещё.
Сохраняйте простоту сюжетной линии
Это может показаться противоречием совету №6, но история должна быть простой. Она не должна быть объёмом в 1500 страниц. Простая сюжетная линия та, которую вы могли бы рассказать за 5 секунд или меньше.
История должна захватывать пользователей сразу, оставлять впечатление и вызывать желание вернуться.
Да, вы можете сделать это со вступлением, основной частью и заключением.
Компания Upstream сделала все это на главной странице — пользователи могут прокручивать дальше до «основной части» истории, но кратко все три части представлены в первом экране. Визуальные эффекты и текст рассказывают историю о нужде и помощи людям и компании Upstream, которая может помочь. На экране есть кнопка «принять участие», и визуальное оформление настолько поразительное, что вы захотите помочь.
Эта история проста и эффективна. Пользователи с большей вероятностью запомнят её… и вас.
Вывод
Создавая историю, важно помнить, что она должна быть именно вашей. Не пытайтесь быть тем, кем вы не являетесь. Пользователи с большей вероятностью откликнутся на искренность, чем на выдуманный рассказ.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
