Обзор средств прототипирования веб-сайтов

Обзор средств прототипирования веб-сайтов Коноплицкий Павел

Проекты

Процесс

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

http://habrahabr.ru/blogs/ui_design_and_usability/35175/ Текущая ситуация в проектах

Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования.

Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза».

Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика.

Прототип легче сохранять в актуальном виде, чем функциональную спецификацию

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

Прототип позволяет провести юзабилити-тестирование

http://webmascon.com/topics/development/23a.asp Преимущества

Скетч, набросок, рисунок

Wireframes , макет

Дизайн, детальный макет

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

Прототип близкий к готовому продукту

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

Google http://www.slideshare.net/wud/keekim-heng-the-principles-of-rapid-prototyping

37 signals http://rimmer333.habrahabr.ru/blog/31598/

Cooper http://www.amazedev.com/knigi-po-usability/

Упростить создание типовых решений, давая возможность для творчества

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

Учитывать невысокий уровень знаний и опыта у человека, выполняющего прототипирование

Позволить думать о создаваемом интерфейсе, а не инструменте

Низкая стоимость ПО

http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/ Требования

Скорость создания прототипа

Интерактивность

Детализация

Необходимость повторной отрисовки

Доступность для всех участников проекта

Возможность простого внесения изменений

Создание собственных библиотек

Критерии

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

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

Среда Скорость создания прототипа: средняя Интерактивность: низкая Детализация: низкая Необходима повторная отрисовка: да Доступность для всех участников проекта: полная Возможность внесения изменений: возможно с ограниченьями Собственные библиотеки: возможно Microsoft Office или Open Office http://excelprototyping.weebly.com/

Среда http://www.jvetrau.com/category/ui-modeling/wireframes/ Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Microsoft Visio

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

Среда http://www.slideshare.net/azart/akhmelevsky-wireframing-in-adobe-fireworks-presentation Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe Fireworks

Среда http://axure.com/expert.aspx Библиотека элементов http://upa.org.ru/UsabilityBulletin-26.aspx?EntryID=787 Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Axure RP

Среда http://www.amazedev.com/holygrail/ Скорость создания прототипа: низкая Интерактивность: высокая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно HolyGrail ( Adobe Dreamweaver)

Среда http://wireframesketcher.com/index.html Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: ? WireframeSketcher (Eclipse)

Среда http://www.justproto.com/en/ JustProto (on-line) Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно

Среда http://www.balsamiq.com/products/mockups Balsamiq Mockups (on-line) Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно

http://www.amazedev.com/stencils/ Стенсилы

Среда http://www.gui.ru/copylove/xaml-for-interction-design/ Microsoft Expression

Среда http://labs.adobe.com/technologies/flashcatalyst/ Adobe Flash Catalyst

http://habrahabr.ru/blogs/ui_design_and_usability/35162/ http://community.livejournal.com/ru_ucdesign/457798.html Используемые инструменты

СПАСИБО ЗА ВНИМАНИЕ ВОПРОСЫ? http://www.usability.by http://www.amazedev.com http://www.1point.ru В презентации использовались изображения : Rob Enslin (http://www.flickr.com/photos/doos/3596580004/) Lloyd Budd (http://www.flickr.com/photos/foolswisdom/43144375/)