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