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

Этап I. Создание прототипа

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

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

Этап II. Объединение и наполнение прототипа

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

Этап III. Доработка прототипа

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

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

Финальный этап. Приемка

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

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

Как идет процесс создания интерактивных прототипов?

Проектирование и дизайн интерфейса

• 

  Структурные схемы страниц (wireframes)

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

• 

  Дизайн-макеты страниц

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

Прототипирование

• 

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

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

• 

  Презентация продукта

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