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

Вы читаете бесплатный выпуск из рассылки «Текст в интерфейсе».
В этом выпуске будет мало про буковки и много ‒ про логику и кейсы.
Если нужно разобраться с основами текста в интерфейсе, почитайте короткий гайд для UX-писателя и дизайнера.


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

Они помогают с логикой продукта, фичами и 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-писателя, ими может заниматься дизайнер. Но лучше, когда вдвоём ‒ чтобы учесть все нюансы.


Вопросы для самоконтроля

  • Что такое сторифреймы
  • В каких программах стали бы их собирать
  • Кто в команде отвественный за сторифреймы


Become a patron to

40
Unlock 40 exclusive posts
Listen anywhere
Connect via private message