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

Проекты

Процесс

Программисты

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

Алан Купер «Об интерфейсе»

http://habrahabr.ru/blogs/ui_design_and_usability/35175/

Текущая ситуация в проектах

http://habrahabr.ru/blogs/ui_design_and_usability/35602/

Текущая ситуация в проектах

http://habrahabr.ru/blogs/ui_design_and_usability/35185/

Текущая ситуация в проектах

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

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

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

4. Прототип легче сохранять в актуальном виде, чем функциональную спецификацию5. Повышает качество проекта, уменьшая количество ошибок взаимодействия с системой6. Прототип позволяет провести юзабилити-тестирование

http://webmascon.com/topics/development/23a.asp

Преимущества

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

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

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/

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

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

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

4. Позволить думать о создаваемом интерфейсе, а не инструменте5. Низкая стоимость ПО

http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/

Требования

1. Скорость создания прототипа 2. Интерактивность 3. Детализация4. Необходимость повторной отрисовки5. Доступность для всех участников проекта6. Возможность простого внесения изменений7. Создание собственных библиотек

Критерии

Среда

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

Бумага

Среда

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.comhttp://www.1point.ru

В презентации использовались изображения : Rob Enslin (http://www.flickr.com/photos/doos/3596580004/)

Lloyd Budd (http://www.flickr.com/photos/foolswisdom/43144375/)