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

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

Некоторые (особо продвинутые) UX-специалисты после постановки новой задачи не уходят с головой в графические редакторы. Вместо этого готовят себе кофе и неспешно собираются с мыслями. И в итоге выигрывают. Спросите, как так? Просто они уже знают одну хитрость, как сэкономить трудочасы и при этом удивить качеством.
В какой-то момент я решил, что буду начинать процесс создания дизайна не с вайрфреймов и даже не с набросков на бумаге с той степенью детализации, которую считаю приемлемой, а с того, что впоследствии назвал сторифреймами — документа, который представляет собой что-то среднее между сценарием/текстом и вайрфреймом.

Фабрицио Тейшейра
дизайн-директор Work&Co
Немного теории
Как видно из названия, «сторифреймы» — это нечто, связанное с историями. А история (если вспомнить уроки литры) означает повествование с завязкой, кульминацией и развязкой.

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

Литература + дизайн = ?

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

  • Общая вводная информация («Мы контора „Бла-бла“, мы очень крутые…»).
  • Раскрытие сути и нюансов («Мы можем и умеем то, а еще то, и еще то…»).
  • Предложение решений предполагаемых проблем пользователя или обрисовка новых возможностей («Наверняка вы сталкивались с тем-то/не пробовали то…, а у нас есть интересное предложение…»).
  • Подведение посетителя страницы к определенному действию («Просто позвоните нам…»).

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

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

Накидать все мысли в кучу обычно быстро и легко. Налитой ранее чашки кофе должно хватить…
Фото: gastronom.ru
2. Теперь задачка усложняется. Глубоко вздохните, освежитесь, прежде чем вернуться к тексту второй раз. Сейчас нужно будет нещадно вырвать ненужное. Сделать рассказ насколько возможно лаконичным и емким. Чтобы не зависнуть на этом слишком долго, можно опираться на такие вопросы:

  • Что нужно знать пользователю об этом товаре или продукте?
  • Как он попадет на вашу страницу, и что уже ему может быть известно об этом?
  • Какой информации ему не хватает, чтобы выполнить запланированный разработчиками сценарий поведения на сайте?
В общем, надо развеять все сомнения будущего посетителя страницы, откинуть его возможные вопросы.
Storyframing, или словесное прототипирование — это обобщённое представление пользователей о том, как они ожидают, должна работать ваша система. Можно сказать, что это пошаговая история ментальной модели пользователей.

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

4. Сторифреймы, как и любое сочинение не всегда здравомыслящего творческого мозга — вещь субъективная. Поделитесь своими наработками с коллегами. Возможно, они покрутят пальцем у виска, может поднимут пальцы вверх или внесут ряд своих предложений относительно этого. Мы уверены, что взглянуть на текст не откажутся и заказчики. Только важно перед этим донести до них, что это не готовый контент, а лишь план конструктивной разработки страницы.
Привет, мы Dropbox.
Мы заново изобретаем работу в команде (в подтверждение — мы постоянно выпускаем новые инструменты для командной работы).
При создании продуктов мы ориентируемся на ваш стиль работы.
Вы можете взять с собой документы куда угодно — например, переместить в телефон и открыть по дороге.
Вы достаточно быстро можете загружать видео и отправлять их кому угодно (даже если у них нет Dropbox).
Вы также можете достаточно просто управлять фотографиями.
Мы упростили их организацию.
А еще у нас есть инструменты для совместной работы в режиме реального времени: вы можете работать вместе над презентацией или, например, постоянно обновлять файлы в папке.
Конечно, мы безопасны. Вы больше никогда не потеряете свои файлы.
Мы вас заинтересовали? Начните работу сейчас.
P. S. если это не совсем то, что вам нужно, вот еще штуки, которые вы можете делать.
Примерно так может выглядеть в финале качественный сторифрейм. По виду это блок теста, но на самом деле он представляет собой структурную и смысловую схему будущей страницы. Это не готовая информация для публикации, а памятка дизайнеру, периодически «улетающему» на волне вдохновения. Этот документ — спасение от «слепого» создания макета и обычно следующих за этим долгих переделок.
Даже если у вас большой опыт работы в графических программах, а детализация вайрфреймов низкая, вы всё равно тратите время и другие ресурсы, определяя форму, а не суть того, что нужно сказать. Даже делая эскизы на бумаге, вы занимаетесь дизайном (две колонки или три?) прежде чем понять, что написать в этих колонках и в какой последовательности.

Фабрицио Тейшейра
дизайн-директор Work&Co
Когда ваша история будет отшлифована и согласована, останется последний ответственный шаг перед тем, как приступить к вайрфреймам. Придется еще раз отбросить лень, напрячь мозг и приготовить бодрящий напиток.

И так, у вас есть готовый текст. Он отражает суть, не оставляет вопросов у пользователя и, наконец, нравится заказчику. Но талантливый дизайнер не позволит себе скопипастить его в текстовый блок, кинуть пару картинок и потирать руки, выдав примерно такое:
Пример с bureau.ru
Так вот, на финальном этапе работы со сторифреймами надо подумать, как сделать из скучных букв современный, функциональный и наглядный интерфейс. Какие части сгруппировать, а какие заменить картинками, видео или другой графикой. То есть тут уже можно наконец-то вспомнить, что ты дизайнер, а не писатель, и начинать переводить историю в макет.
Преображение «слонов» трудами дизайнеров. Взято с bureau.ru
В чем плюсы сторифреймов?
1
Сторифреймы — это инвестиция. Вложить в них часть времени = получить его в будущем в виде дивидендов.
2
Они одинаково хорошо подходят для разных типов страниц: домашних, лендингов, лонгридов и любых сайтов с длинной прокруткой.
3
Помогают аудитории бегло и легко считывать посыл страницы.
4
Обеспечивают связность и целостность контента.
5
Истории — это всегда востребованный и популярный формат, независимо от темы и типа содержания.
На сегодняшний день текстовое проектирование — совсем новый и пока редко практикуемый этап разработки. В частности среди российских дизайнеров.

По запросу «сторифреймы» поиск Гугла выдает всего 5 страниц результатов. И среди них более 90% ссылок — это переводы одной и той же статьи уже известного вам по цитатам дизайн-директора Work&Co и создателя UX Collective Фабрицио Тейшейры. Своим необычным способом работы он поделился в блоге чуть более года назад. И его опыт сейчас перенимает ряд продвинутых разработчиков, которые следят за свежими профессиональными фишками.

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