Сторифреймы. Зачем и как их составлять

Видовая теория, польза и content first подход к проектированию.

pic by clubhouse

Сторифреймы — это дизайн-схема приложения. Никаких серых прямоугольников, только текст. Они помогают с логикой продукта, фичами и tone of voice.

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

Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.

Как выглядят сторифреймы

Нет какого-то одного способа собирать сторифреймы. Кто-то пишет сплошным текстом, что будет на экране. Кто-то собирает в мокапах.

Давайте разберёмся.

Сплошной текст

Dropbox, сторифрейм главной страницы

Текст, который появится на главной, ребята из Dropbox пишут сплошняком. Потом приходят дизайнеры и примеряют всё к макету.

Диалоги

Image for post
Image for post

Собака Павлова, приложение ОСАГО

В петербургском бюро сторифреймы пишут в форме диалога: как будто продукт разговаривает с человеком.

Это прикольно, но в диалогах можно потеряться: вот этот диалог ‒ это какой экран и при каком сценарии? Дизайнеру или стороннему писателю придётся разбираться с логикой.

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

Диалоги в мокапах

Расскажу, как я собираю сторифреймы в мокапах. Для начала про форму.

Я собираю сторифремы в miro. Там есть специальный шаблон ‒ wireframing. В нём можно настроить переходы, указать кнопки и так далее. Это помогает понять продуктовую логику и как будет выглядеть интерфейс.

Ещё сторифреймы можно собирать в Figma или Sketch (и не придётся никуда переносить, если работаете в этих же программах).

Если удобно рисовать на бумаге, можно и так. Только потом нужно переносить всё в цифру. А это всегда занимает чуть больше времени, чем «копировать» и «вставить».

Мои сторифреймы в miro, посмотреть поближе

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

Image for post
Image for post

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

Для меня сторифреймы ‒ основа глоссария по продукту и tone of voice.

Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.

Когда писать сторифреймы

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

Если в процессе сторифреймов что-то поменяется, то исправить будет быстрее, чем перерисовывать экран.

Пирамида «Нельзя так просто взять и сделать приложение»

Дизайнер и основатель UX Collective Fabricio Teixeira тоже приступает к сторифреймам до прототипов.

Перед тем как двигать серые прямоугольники, полировать дизайн или рисовать что-то на бумаге, я пишу сторифреймы

Кто пишет сторифреймы

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

А можно обойтись без сторифреймов

Можно, конечно. Но всегда есть риск, что в процессе что-то поменяется или что-то не учли с самого начала. И придётся перерисовывать макет (или макеты 🙆‍♂️).

Вот что пишет Влад Головач в книжке «Дизайн пользовательского интерфейса. Искусство мыть слона».

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

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

Алярм, домашка!

Представьте, к вам пришёл продакт. Говорит, будем делать приложение для оплаты, как у Amazon Go. Только для русского магазина.

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

Какие сторифреймы сделаете? Почему?

Что в итоге

Сторифреймы экономят время при проектировании приложений, а ещё помогают с tone of voice.

Лучше всего к ним подступаться, когда понятны требования бизнеса и разработчиков.

Самые наглядные сторифреймы ‒ это диалоги в мокапах.

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

Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.

→ Как и где следить за мной

Редач.Подкаст — первый подкаст для UX-писателей на русском;

Телеграм — о тексте в интерфейсе;

Нашли опечатку? Отправьте скрин в Телеграм: @redachredach

Written by

UX-writer & Content Strategist, motorina.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store