Сторифрейминг в создании контента для сайта на примере Dropbox

На днях я разговаривал с коллегой из UX-отдела о простой методологии, которую я использовал годами, но считал её интуитивным решением. Перед тем как сделать первые наброски, приступить к вайрфреймам (и провести несколько часов, передвигая по экрану серые блоки и черновые тексты) я начинаю процесс с того, что позже стал называть «сторифрейм» — гибрида сценария и вайрфрейма. Я использую любой текстовый редактор, например, Google Doc.

Вопрос, который я задаю себе, открывая текстовый редактор:

Как бы я рассказал другу, о чём мой проект?

Технология хорошо подойдет для посадочной страницы, главной страницы сайта, лонгрида, когда цель — это единая, убедительная история. И давайте будем честны: такие страницы становятся всё более популярны.

Интерфейс — это история

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

Dropbox рассказывает о сервисе, зачем он нужен, и как использовать его в жизни.NY Times — о том, что сегодня произошло в мире.Airbnb — о интересном доступном жилье.

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

Работая в визуальном редакторе (Sketch, Photoshop, InDesign, Axure, Principle и других) сразу после анализа брифа/задачи, вы вкладываете энергию в форму, не утвердив содержание. Даже если у вас большой опыт работы в программах, а детализация вайрфреймов низкая, вы всё равно тратите время и другие ресурсы, определяя форму, а не суть того, что нужно сказать. Даже делая эскизы на бумаге вы занимаетесь дизайном (две колонки или три?) прежде чем понять, что написать в этих колонках и в какой последовательности.

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

Конечно, история не замещает форму: она обеспечивает содержание и иногда предшествует первым наработкам в дизайне.

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

Пример сторифрейма: главная страница Dropbox

Сторифрейм выглядит как сценарий. Здесь акцент на иерархии и структуре, а не на макете и финальном тексте. Вот сторифрейм на примере Dropbox:

Сторифрейминг в дизайне: начните с нескольких строчек текста перед началом работы со Sketch.

Перевод картинки (адаптированный):

• Привет, мы Dropbox.
• У нас новый подход к командной работе и мы создаём онлайн-инструменты для эффективных команд.
• Теперь ваши документы всегда под рукой: можно сохранить файл на своем компьютере, а потом открыть его с телефона.
• Вы можете быстро отправить видео кому угодно (даже если у него нет аккаунта Dropbox).
• Можно без проблем управлять своими фотографиями, быстро их систематизировать.
• Работайте с коллегами над проектом одновременно, например, совместно делайте презентацию.
• И это абсолютно безопасно — вы больше не потеряете важные документы.
• Интересно? Попробуйте сейчас.

Как писать текст для сайта:

1. Для начала выпишите всё

Серьезно, на первом этапе за 15 минут вывалите все мысли в простой текстовый файл. Рассмотрите каждый пункт как модуль и каждое предложение как элемент итогового дизайна. Это упражнение (написать всё, что думаешь) поможет организовать мысли и в дальнейшем приоритизировать идеи. Я всегда возвращаюсь к главному вопросу: как я бы рассказал другу за чашкой кофе эту историю/тему/проблему.

2. Будьте кратки

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

«Я написал бы короче, но у меня не было времени.» — Марк Твен

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

3. Сделайте несколько вариантов

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

4. Попробуйте продать

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

И вот теперь приступайте к созданию вайрфреймов и прототипов.

В итоге независимо от выбранного дизайна общая история на странице останется неизменной — ведь вы утвердили сторифрейм:

Сайт на русском

Не только Dropbox использует такой простой способ повествования, этот мейнстрим в сфере IT-продуктов развивается и в других отраслях. Просто посмотрите, как описывают продукт Slack, Mailchimp и очень минималистичный Basecamp — и попробуйте такой разговорный стиль для своего проекта.

Развитие сторифрейма

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

• Как лучше показать информацию?
• Какие текстовые блоки можно визуально объединить?
• Где текст можно визуализировать или заменить иконками, фото, видео, анимацией?
• Какие идеи помогут закрепить ваши аргументы?
• На какие действия мы подталкиваем посетителя на странице?

Интересно, что ранее «storyframing» описал Steve McCarthy, head of insight в Brandwidth. У него это многоэтапный подход к UX продуктов.

Дополнение (Юля Хусид, The Story):

Раньше я работала в digital-агентстве, и подготовка контента была настоящей болью — клиента и моей, как аккаунт-менеджера. Порой сроки проекта затягивались, когда клиент не присылал текст в раздел «О компании». Говорят, ленивые дизайнеры в таких случаях используют в макетах Lorem ipsum (такие ещё есть?). Сейчас я делаю сайты на Тильде, и на этапе проектирования сторифрейм не позволяет стать «заложником модулей» и поспешить с компоновкой страницы. В результате мы выбираем блоки осознанно, а работа получается цельной.

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

Статья Fabricio Teixeira, UX at R/GA