20 шагов к лучшему прототипированию

Клайв Говард (Clive Howard)

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

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

1. Добейтесь ясности ваших целей

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

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

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

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

2. Функциональность важнее красоты

Есть разные варианты представления прототипов, и это проявляется в том, что этого существует множество инструментов прототипирования. По большому счёту прототипы отражают функциональные части приложения, например то, что страница будет содержать 3 текстовых поля и 2 кнопки. Прототип отражает распределение функций, а не конечные формы.

В компании «Говард Бейнс» (Howard Baines) мы применяем аскетичный подход к прототипам. Они не содержат ничего, кроме функциональных элементов (блоки, кнопки, выпадающие меню и т. д.). Мы избегаем того, что может быть воспринято как оформление или компоновка. Некоторые могут пойти в этом немного дальше и включить в прототипы компоновку и детали оформления. Каждый выбирает то, что подходит именно в его случае.

3. Опирайтесь на собственный опыт

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

4. Выберите ответственного

Убедитесь, что есть выделенные люди, отвечающие за создание макетов. Эти люди ответственны за поддержание макетов в актуальном состоянии, организацию оценки, внесение изменений и т.д. В случае стартапа, часто ответственными оказываются основатели, авторы идеи, те, кто владеет виденьем и пониманием конечной цели. В случае с нашими клиентами, эта роль часто достается нам. Не так важно, кто является ответственным, главное, чтобы он был.

5. Вовлекайте в процесс всех

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

6. Установите четкий срок готовности прототипов

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

7. Соблюдайте чистоту

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

8. Избегайте излишнего оформления прототипов

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

9. Помните, что пользовательский интерфейс и user experience — не одно и то же

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

10. Думайте о пользователе

Несмотря на всю очевидность, очень легко оказаться в ситуации, когда вы создаете прототипы, позабыв о пользователе. Нам нужно сосредоточиться на функциональности, но не менее важно продумывать user experience создаваемого продукта. Например, если вы создаете форму на 3 страницы, то вполне возможно, немногие пользователи смогут заполнить её до конца.

11. Не ленитесь

Часто проще заявить: «Страница входа очевидна, давайте не будем создавать её прототип». Убедитесь, что вы запрототипировали абсолютно всё. В конце этого процесса у вас должен быть набор документов, по которому можно походить так же, как по конечному сайту. Каждый шаг важен и ни один нельзя игнорировать.

12. Организуйте ваши прототипы по разделам

Сайт или приложение очень часто делится на разделы, такие как: новости, продукты или профиль пользователя. Разделите ваши прототипы по соответствующим секциям, чтобы упростить поиск нужного экрана.

13. Нумеруйте страницы

Процессы в веб-приложениях часто состоят из ряда шагов. Хороший пример — оформление покупки в интернет-магазине. Часто эти процессы линейны, но иногда пользователи могут избрать другой путь, например, пропустив один из шагов. Чётко указывайте номера страниц в вашем документе и помечайте, какое действие (например, нажатие кнопки) приводит пользователя на ту или иную страницу.

14. Ищите повторения

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

15. Проверяйте свой прототип

Конечный документ должен быть понятен всем. Если его может понять только разработчик — значит что-то с ним не так. Спросите хотя бы одного человека, не имеющего отношения к проекту, понимает ли он прототип.

16. Реклама функциональна

Многие сайты используют рекламу для монетизации. Она может быть очень простой, как объявления Google, но это функциональный элемент, а не оформление, поэтому включайте её в прототипы.

17. Не только публичная часть сайта

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

18. Знайте, когда остановиться

Убедитесь, что у всех ключевых участников проекта есть возможность высказаться по поводу прототипов, но не превращайте прототипирование в расписывание Сикстинской капеллы. Как правило, достаточно трёх итераций. В первой мы переносим идею на бумагу. Во второй мы изменяем прототип согласно отзывам, полученным от других участников, например от разработчиков и проектировщиков. Во время третьей итерации занимаемся окончательной шлифовкой.

19. Выберите верные инструменты

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

Когда вы начнете создавать документ, мы рекомендуем вам использовать тот инструмент, который для вас будет удобнее всего. Разработчики, например, могут использовать Micsofoft Visio, менеджеры проектов — PowerPoint, а дизайнеры — Adobe Fireworks.

По моему, прототип должен представлять из себя скорее документ, а не что-то интерактивное (это может отвлекать внимание, подобно визуальному дизайну). Поэтому, я считаю, что создание HTML-прототипов не лучшее решение.

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

20. Учитывайте зависимости

Все знают, что из себя представляет процесс покупки в интернет магазине, верно? Поэтому кажется, что очень легко создать её прототип раз и навсегда. Это не совсем так. Что если вы используете стороннюю платежную систему, такую как PayPal? Это может повлиять на взаимодействие различных компонентов сайта. Исследуйте области, в которых есть зависимости, и внесите соответствующие исправления. Проще сделать это сразу и сейчас, чем откладывать на потом.

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

У вас есть советы, как быстро создавать качественные, удобные прототипы?

wireframing бумажный прототип прототипирование

• 20 Steps to Better Wireframing
• Переводчики статьи
• Клайв Говард: 20 шагов к лучшему прототипированию