Выпуск №53. Создание прототипа

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

Что такое прототип

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

Зачем нужны прототипы

Прототипы помогают в разных случаях:

• для команды проекта – для одинакового понимания будущего проекта; разработчикам проще реализовывать проект при наличии не только технического задания, но и прототипа – чтобы сверяться c «картинкой» в случае недопонимания. При тестировании и приемке сайта.
• для заказчика – визуальное представление его требований и пожеланий
• для пользователейкак первичный инструмент тестирования удобства
• для веб-студий и фрилансеров прототип может стать хорошим визуальным предложением для потенциального клиента. Исходя из первичных требований клиента вы можете создать прототип как концепцию проекта, предлагая на примере как будет выглядеть и работать сайт. Вы также можете акцентировать особенные решения, которые вы придумали.

Не все компании готовы тратить дополнительные усилия, время и деньги на создание прототипа. Но именно прототип чаще всего помогает:

• Уменьшить риски проекта
  Например, когда при первичных требованиях не продумали возможности пользователей и их взаимодействие.
• Уменьшить количество ошибок
  Ошибки, допущенные в конце создания проекта – самые дорогие; приходится переделывать систему. Прототип позволяет обнаружить ошибки на ранней стадии и минимизировать появление новых.
• Повысить качество проекта за счет снижения количества ошибок
• Уменьшить сроки и стоимости разработки

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

Что прототипируют

• Cайты
• Мобильные приложения
• Программное обеспечение

Также есть отдельная область, когда прототипируют устройства (например, мобильные телефоны), панели управления (например, панель управления самолетом).

Виды прототипов

Бумажные

• Быстро создаются
• Не требуют больших затрат (нужна доска и фломастер или бумага и карандаш)
• Сложно использовать дальше (при разработке, тестировании)
• Невозможно предоставить заказчику
• Требуют детализации и глубины проработки

Скетчи, мокапы

• Больше всего используются в команде для обсуждения предложений и нововведений в проект
• Легкие в разработке
• Существуют онлайн-версии программ для разработки таких прототипов
• Используют при разработке проекта
• В большинстве своем не позволяют попробовать продукт, есть лишь статичные страницы

Интерактивные прототипы

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

Тестирование прототипов

• «Коридорное» тестирование – тестирование продукта, проводимое на сотрудниках. Лучше не использовать данный вид тестирования, т.к. могут быть некорректные результаты. Сотрудники не всегда являются конечными пользователями системы, также для них система уже известна.
• A/B тестирование (о нем вы говорили в выпуске 44)
• Тепловые карты в Яндекс.Метрике

Софт для создания прототипов

Интерактивные прототипы

• axure.com
• adobe.com
• flairbuilder.com
• foreui.com
• guimachine.ru
• proto.io
• pidoco.com
• protoshare.com

Скетчи, мокапы

• balsamiq.com
• mockupbuilder.com
• gomockingbird.com
• iphonemockup.lkmc.ch

В большинстве случаев можно заливать прототип на сервер и отправлять ссылку на прототип участникам проекта.

Весь набор инструментов прототипирования с разбиением по типу использования можно посмотреть здесь protomoto.com

Как создавать прототип?

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

Примеры прототипов

Полезные книги

• Алан Купер «Об интерфейсе»
• Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»
• Стив Круг «Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!»