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

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

 

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? Это может повлиять на взаимодействие различных компонентов сайта. Исследуйте области, в которых есть зависимости, и внесите соответствующие исправления. Проще сделать это сразу и сейчас, чем откладывать на потом.

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

 

Зачем нужно прототипирование мобильных приложений и какие бывают инструменты для создания интерактивных макетов

 

После того как команда разработчиков и клиент нашлидруг друга, перед ними возникает нелегкая задача: научиться говорить на одном языке. И как бы детально ни было написано техническое задание, всегда есть большой риск разойтись в содержании понятия "очевидное" или просто забыть указать какую-то деталь. Как раз для того, чтобы как можно раньше увидеть, как будет построена система взаимодействия мобильного приложения с пользователем, и нужен прототип.

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

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

 

Зачем клиенту нужен прототип мобильного приложения?

Прототип позволяет:

• увидеть приложение в действии и понять, насколько корректно разработчики понимают идею и ТЗ;

• оценить будущее приложение с точки зрения пользователя;

• определить, нужно ли вносить изменения в схему взаимодействия приложения с пользователем;

• избежать дополнительных финансовых и временных затрат, если выявлены несоответствия.

Иметь под рукой готовую модель приложения полезно еще и в том случае, если:

• вы выступаете в качестве посредника и должны показать прототип конечному заказчику;

• будущее мобильное приложение является основой вашего стартапа, а рабочий прототип станет преимуществом при поиске источников финансирования для дальнейших этапов;

• вы хотите протестировать приложение на фокус-группе, прежде чем приступать к самому дорогостоящему — программированию и тестированию.

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

 

Какие бывают инструменты для создания прототипа?

Условно все инструменты можно разделить на 3 группы по типу носителя:

1. на бумаге;

2. на экране компьютера;

3. на мобильном устройстве.

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

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

Prototyping on Paper — приложение, которое объединяет карандаш, бумагу и iPhone. Можно сфотографировать нарисованные от руки эскизы, и сервис автоматически отрегулирует яркость и размер, позволит сделать симулятор будущего приложения. С помощью POP можно создать интерактивный прототип и проследить, как приложение будет реагировать на нажатие той или иной кнопки. Есть и встроенная система фидбэка. С ее помощью оценить прототип, предложить изменения и отметить сильные стороны в комментариях могут все пользователи, у которых есть доступ. Prototyping on Paper идеально подходит для быстрого прототипирования, не требующего детальной проработки дизайна.

Flinto — это редактор для создания интерактивного прототипа на основе готовых макетов: как детально проработанных мокапов, так и быстрых набросков. Главное отличие от POP заключается в том, что у тех, кто использует Flinto, есть возможность сделать прототип действительно похожим на будущее приложение. Работает Flinto так: агрегирует все существующие экраны и позволяет легко и удобно расставлять ссылки между разными элементами. Если загруженные макеты проработаны дизайнером тщательно, то прототип выглядит очень реалистично. Создатели Flinto стремились максимально приблизить поведение прототипа к привычному для пользователю поведению приложения. Например, Flinto умеет красиво и натурально скроллить. После того как прототип готов, его можно загрузить прямо на рабочий стол устройства для более удобной демонстрации.

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

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

 

Сколько денег нужно потратить, чтобы хорошо сэкономить?

Качественный прототип сводит финансовые риски, связанные с разработкой приложений, к минимуму. Но далеко не каждый достойный инструмент для создания прототипа можно заполучить бесплатно (POP). У одних приложений цена зависит от количества проектов (InVision), у других — от количества пользователей, имеющих доступ к проекту (Flinto). Есть и такие, у которых тарифные планы зависят как от количества проектов, так и количества пользователей (Proto.io).

Гибкие цены позволяют выбрать оптимальный инструмент таким образом, чтобы извлечь из затеи с прототипами максимальную выгоду без потери в качестве.

 

Зачем еще нужны интерактивные прототипы?

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

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

 

Резюме

Прототип способен выявить и ликвидировать все основные недопонимания между заказчиком и разработчиками, которые как минимум в 80% случаев могут привести к серьезным проблемам.

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

Интерактивный прототип можно создать при помощи разных (как платных, так и бесплатных) инструментов. При выборе инструмента стоит руководствоваться не только ценой, но и функциональностью. Если вы хотите создать быстрый прототип по наброску в блокноте, вам будет достаточно бесплатного Prototyping on paper. Когда же речь идет о полноценном прототипе, включающим в себя продуманный дизайн, следует обратиться к более продвинутым приложениям: InVision, Flinto, Proto.io и др.

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