Прототипирование веб-интерфейсов

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

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

Преимущества прототипов:

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

Прототипы интерфейса различаются в зависимости от задач решаемых прототипом:

  • Скетч, набросок, рисунок
  • Wireframes, макет
  • Дизайн, детальный макет
  • Интерактивный прототип
  • Прототип близкий к готовому продукту

Критерии создания прототипа

  • Скорость создания прототипа
  • Интерактивность
  • Детализация
  • Необходимость повторной отрисовки
  • Доступность для всех участников проекта
  • Возможность простого внесения изменений
  • Создание собственных библиотек

По интерактивности прототипы делятся на статические и динамические.
Статические прототипы: набросок, wireframes, детальный макет c готовым дизайном.
Динамический: wireframes с малой интерактивностью (можно кликать по заданным точкам как правило в формате pdf), wireframes с средней интерактивностью (как правило в html), детальный с готовым дизайном с малой интерактивностью, детальный с готовым дизайном с высокой интерактивностью, готовая верстка.

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

Чистовые (разработанные на основе детально проработанных макетов) – используются для утверждения с заказчиком, юзабилити-тестирования.

Рис. Последовательность расположения видов прототипирования в зависимости от характера прототипа на линейке разработки ПО.


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

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

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

Инструменты для прототипирования:

Бумажное прототипирование:
Скорость создания прототипа: высокая
Интерактивность: отсутствует
Детализация: высокая
Необходима повторная отрисовка: да
Доступность для всех участников проекта: ограниченная
Возможность внесения изменений: не возможно

Axure Pro:
Скорость создания прототипа: высокая
Интерактивность: средняя
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

Adobe InDesign
Скорость создания прототипа: средняя
Интерактивность: низкая
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

Microsoft Visio
Скорость создания прототипа: высокая
Интерактивность: низкая
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений

Adobe Fireworks
Скорость создания прототипа: средняя
Интерактивность: низкая
Детализация: высокая
Необходима повторная отрисовка: нет
Доступность для всех участников проекта: полная
Возможность внесения изменений: возможно без ограничений
Собственные библиотеки: возможно

Используемые материалы:
http://www.amazedev.com/prototyping_tools_site2009_presentation/
http://www.jvetrau.com/2007/12/04/interaktivnyie-prototipyi-deystvuyuschaya-model-polzovatelskogo-interfeysa-chast-1-klassifikatsiya/

 
  © 2012 — «Wayson»