Сторифреймы. Зачем и как их составлять
Видовая теория, польза и content first подход к проектированию.
Сторифреймы — это дизайн-схема приложения. Никаких серых прямоугольников, только текст. Они помогают с логикой продукта, фичами и tone of voice.
В российской практике сторифреймы иногда называют «сценариями». Но это может запутать, потому что сценариев в UX много и разных. Я буду придерживаться термина «сторифреймы», чтобы никого не путать и самой не путаться.
Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.
Как выглядят сторифреймы
Нет какого-то одного способа собирать сторифреймы. Кто-то пишет сплошным текстом, что будет на экране. Кто-то собирает в мокапах.
Давайте разберёмся.
Сплошной текст
Dropbox, сторифрейм главной страницы
Текст, который появится на главной, ребята из Dropbox пишут сплошняком. Потом приходят дизайнеры и примеряют всё к макету.
Диалоги
Собака Павлова, приложение ОСАГО
В петербургском бюро сторифреймы пишут в форме диалога: как будто продукт разговаривает с человеком.
Это прикольно, но в диалогах можно потеряться: вот этот диалог ‒ это какой экран и при каком сценарии? Дизайнеру или стороннему писателю придётся разбираться с логикой.
Мне кажется, первые два способа имеют право на жизнь. Но они неудобные для работы в команде и вот почему: непонятно, сколько экранов на них нужно, как будут располагаться элементы и легко потеряться в буквах, пока разбираешься с фичами.
Диалоги в мокапах
Расскажу, как я собираю сторифреймы в мокапах. Для начала про форму.
Я собираю сторифремы в miro. Там есть специальный шаблон ‒ wireframing. В нём можно настроить переходы, указать кнопки и так далее. Это помогает понять продуктовую логику и как будет выглядеть интерфейс.
Ещё сторифреймы можно собирать в Figma или Sketch (и не придётся никуда переносить, если работаете в этих же программах).
Если удобно рисовать на бумаге, можно и так. Только потом нужно переносить всё в цифру. А это всегда занимает чуть больше времени, чем «копировать» и «вставить».
Мои сторифреймы в miro, посмотреть поближе
Теперь про содержание. Я пишу сторифреймы в диалогах. Так легче представить, какие вопросы могут появиться у человека и как ему ответит продукт.
Пока собираешь сторифреймы, становится понятно, как говорит продукт, какие термины придётся использовать и в каком контексте.
Для меня сторифреймы ‒ основа глоссария по продукту и tone of voice.
Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.
Когда писать сторифреймы
После того, как продакт выложил все функциональные и бизнес-требования на стол и до варфреймов (и прототипов).
Если в процессе сторифреймов что-то поменяется, то исправить будет быстрее, чем перерисовывать экран.
Дизайнер и основатель UX Collective Fabricio Teixeira тоже приступает к сторифреймам до прототипов.
Перед тем как двигать серые прямоугольники, полировать дизайн или рисовать что-то на бумаге, я пишу сторифреймы
Кто пишет сторифреймы
Зависит от компании. По моему опыту, сторифреймами чаще занимаются дизайнеры и UX-писатели. И лучше, если вместе, а не отдельно. Чтобы не делать одну работу два раза.
А можно обойтись без сторифреймов
Можно, конечно. Но всегда есть риск, что в процессе что-то поменяется или что-то не учли с самого начала. И придётся перерисовывать макет (или макеты 🙆♂️).
Вот что пишет Влад Головач в книжке «Дизайн пользовательского интерфейса. Искусство мыть слона».
Бóльшая часть работы дизайнера интерфейсов, во всяком случае, по затраченному времени — это думание. Чем сильнее мы ускорим это думание, тем быстрее и производительнее начнем работать.
Сторифреймы как раз помогают думать быстрее. Поэтому, когда я участвую в разработке приложения, то вместе с дизайнером сначала собираю сторифреймы. Потому что на поздних этапах уже не до них.
Алярм, домашка!
Представьте, к вам пришёл продакт. Говорит, будем делать приложение для оплаты, как у Amazon Go. Только для русского магазина.
Условия такие: есть экран прелоадера, есть штрих-код, который нужно приложить к турникету, флоу для привязки любой российской карты и баланс на карте до и после покупки.
Какие сторифреймы сделаете? Почему?
Что в итоге
Сторифреймы экономят время при проектировании приложений, а ещё помогают с tone of voice.
Лучше всего к ним подступаться, когда понятны требования бизнеса и разработчиков.
Самые наглядные сторифреймы ‒ это диалоги в мокапах.
Если в команде нет UX-писателя, ими может заниматься дизайнер. Но лучше, когда вдвоём ‒ чтобы учесть все нюансы.
Эта статья — часть рассылки о тексте в интерфейсе. Если интересна эта тема, подписывайтесь.
→ Как и где следить за мной
Рассылка о тексте в интерфейсе
Нашли опечатку? Отправьте скрин в Телеграм: @redachredach
