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

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

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

Как видно из названия, «сторифреймы» — это нечто, связанное с историями. А история (если вспомнить уроки литры) означает повествование с завязкой, кульминацией и развязкой.

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

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

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

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

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

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

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

Накидать все мысли в кучу обычно быстро и легко. Налитой ранее чашки кофе должно хватить…

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

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

В общем, надо развеять все сомнения будущего посетителя страницы, откинуть его возможные вопросы.

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

4. Сторифреймы, как и любое сочинение не всегда здравомыслящего творческого мозга — вещь субъективная. Поделитесь своими наработками с коллегами. Возможно, они покрутят пальцем у виска, может поднимут пальцы вверх или внесут ряд своих предложений относительно этого. Мы уверены, что взглянуть на текст не откажутся и заказчики. Только важно перед этим донести до них, что это не готовый контент, а лишь план конструктивной разработки страницы.

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

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

И так, у вас есть готовый текст. Он отражает суть, не оставляет вопросов у пользователя и, наконец, нравится заказчику. Но талантливый дизайнер не позволит себе скопипастить его в текстовый блок, кинуть пару картинок и потирать руки, выдав примерно такое:

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

На сегодняшний день текстовое проектирование — совсем новый и пока редко практикуемый этап разработки. В частности среди российских дизайнеров.

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

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