Буквально на днях я рассказывал дизайнеру пользовательского опыта из нашей команды о простой технике, которой пользуюсь уже много лет и которую никогда не воспринимал именно как «технику» — скорее, просто как интуитивный подход человека, который спроектировал столько веб-страниц, что давно им счет потерял.
В какой-то момент я решил, что буду начинать процесс создания дизайна не с вайрфреймов (и траты времени на перетаскивание серых квадратиков и текстовых блоков по экрану) и даже не с набросков на бумаге с той степенью детализации, которую считаю приемлемой, а с того, что впоследствии назвал сторифреймами — документа, который представляет собой что-то среднее между сценарием/текстом и вайрфреймом.
Какие программы я для этого использую?
Текстовый редактор.
Google Doc. Или Microsoft Word. Или Apple TextEdit. Любой сойдет.
Эта техника работает особенно хорошо для лэндингов, домашних страниц или вебсайтов с длинной прокруткой, которые нацелены на то, чтобы рассказать связную, целостную историю. И если уж начистоту, именно такие страницы набирают популярность в последнее время.
Главный вопрос, который я задаю себе, прежде чем открыть текстовый редактор и «написать» страницу — это «Как бы я объяснил другу в письме или личной беседе, что представляет собой эта идея/тема/продукт/история, которую я пытаюсь донести?».
Интерфейс — это история
Вспомните лучшие продукты и сервисы на рынке и те истории, которые пытаются нам поведать их веб-сайты. Кто-то не пожалел времени на наполнение, проектирование и верстку этих страниц, чтобы вы, как посетитель, могли легко и бегло считать посыл, выраженный человеческим языком.
Практически любая веб-страница в Сети пытается рассказать нам какую-то историю.
- Домашняя страница Dropbox рассказывает, что это сервис, как он появился и какое место может занимать в вашей жизни.
- Домашняя страница NY Times рассказывает, что происходит в мире с точки зрения редакции.
- Домашняя страница AirBNB рассказывает о компании и приводит примеры услуг, которые она предлагает.
Для таких историй хорошо подходит текстовый формат. Избавившись от визуальной мишуры, вы сможете лучше сосредоточиться на сути того посыла, который хотите выразить. А текстовые редакторы — отличный инструмент для этой цели: простые, аккуратные и адаптированы под большую девайсов, которыми постоянно пользуются дизайнеры — от компьютеров и планшетов до мобильных телефонов.
Если делать скачок из брифа прямиком в дизайнерскую программу, которой вы отдаете предпочтение (Sketch, Photoshop, InDesign, Axure, Principle, неважно), скорее всего, вы в итоге потратите много усилий на то, чтобы отполировать форму при том, что история еще не готова.
Даже если вы набили руку в работе с этой программой и делаете малодостоверные вайрфреймы, все равно на определение формы уйдет какое-то количество интеллектуального трафика (и лишнего времени), который стоило бы потратить то, чтобы в общих чертах определить, что вы хотите сказать. Работая в графических редакторах или просто рисуя ручкой на бумаге, вы обдумываете решения, связанные с дизайном (две или три колонки?), хотя даже еще не знаете точно, нужна ли вообще эта часть истории на странице.
Каждый интерфейс — это история, а каждый дизайнер — рассказчик, что бы он ни проектировал: дизайн лэндинга, концепцию продукта, окно регистрации или диалог чатбота.
Разумеется, история не может заменить форму, но она определено на нее влияет и зачастую предшествует ей. Кто-то из дизайнеров, возможно, возразит, что работа над дизайном может помочь с выстраиванием истории и что эти два аспекта должны образовывать симбиоз, подпитывая друг друга. Так и есть. Но в этой статье речь идет о том, с чего лучше начинать, и предлагаемая техника, по моему опыту за последние годы, работает хорошо. Не сомневаюсь, что у других дизайнеров есть свои хитрости.
Пример сторифрейма
Сторифрейм выглядит как блок текста, в котором основное внимание уделяется иерархии и структуре страницы; это не макет и не финальная версия текстового наполнения. В качестве небольшого примера: вот как выглядит домашняя страница Dropbox в формате сторифрейма:
Вот несколько лучших практик, которые вы можете применить при создании истории для своей страницы:
1. Для начала запишите все.
Серьезно, первый шаг — выплеснуть все свои идеи и соображения на чистый лист текстового редактора. Рассматривайте каждый абзац как отдельный модуль, а каждое предложение — как элемент вашего будущего дизайна. Это упражнение — запись всего, что только можно сказать о продукте — поможет вам собраться с мыслями, прежде чем вы начнете определяться, каким пунктам отдать приоритет.
Я всегда возвращаюсь к исходному вопросу, который приводил выше: «Как бы я объяснил другу в письме или личной беседе, что представляет собой эта идея/тема/продукт/история, которую я пытаюсь донести?».
Обычно на этот упражнение уходит минут 15 и пол-кружки кофе.
2. Будьте лаконичны.
Теперь, когда вы все собрали в один текстовый документ, пришло время урезать длину вашей истории. Так как вы входите в команду, которая разрабатывала продукт, скорее всего вы слишком много знаете о том, как он работает, и не устоите перед соблазном углубиться в частности.
«Я написал бы короче, но у меня не было времени». — Марк Твен
Отвлекитесь немного, сделайте глубокий вдох и только после этого возвращайтесь к тексту, чтобы выделить именно то, что пользователям необходимо знать о продукте. Задумайтесь о контексте: как они попадают на вашу страницу? Что им уже известно о продукте на этом этапе и что еще нужно узнать, чтобы сделать следующий шаг?
3. Попробуйте разные истории.
Как только у вас будет готов первый черновик, сделайте несколько копий документа и начинайте играть со структурой: как можно переставить элементы, чтобы получить другие истории, какие из вариантов звучат более естественно и приятно для человеческого уха? В этом упражнении вы также можете переставлять местами абзацы или снова вводить те фрагменты текста, которые выбросили на предыдущем этапе.
4. Покажите другим.
Прелесть (и, в общем-то, весь смысл) прописывания истории прежде, чем начнется работа над вайрфреймами, в том, что это позволяет с легкостью показывать ее другим командам, получать от них фидбэк и собирать предложения. Только убедитесь, что они понимают: это не финальный текст, а синтезированная версия структуры страницы.
И только после этого можно переходить к вайрфреймам и визуальным мокапам.
В конечном итоге, в каком виде вы и ваша команда ни решили бы реализовать каждый из модулей, история сайта в целом остается неизменной — ведь вы задали расположение базовых информационных блоков с самого начала.
Сторифреймы: предельно низкая достоверность
Чем нравятся в сторифреймы (они же «структуры страниц» они же «сценарии сайтов») — они в конечном счете экономят мне массу времени. Можно принимать достаточно фундаментальные решения касательно стратегии, потоков задач, нарратива, не тратя время на лишние подробности.
Когда история намечена и вы в достаточной степени определили общую схему расположения, чтобы перейти на следующий этап, можно задаться более конкретными вопросами относительно дизайна страницы:
- В каком виде лучше отобразить эту информацию?
- Какие части текста можно объединить в один модуль?
- В каких частях истории текст можно заменить за изображение, видео или короткую анимацию?
- Для каких частей текст следует дополнить вышеперечисленными материалами?
- Какие конкретные факты вы приведете в качестве доказательства тех или иных утверждений?
- Каких действий вы ждете от посетителей, после того как они ознакомятся с историей, которую рассказывает ваш вебсайт?
Автор: Everyday Tools
