Создание прототипа как этап разработки сайта: задачи, методы, преимущества
5 likes2,449 views
Документ рассматривает создание прототипов как ключевой этап разработки сайтов, подчеркивая его преимущества, такие как экономия времени и бюджета, а также улучшение юзабилити. Обсуждаются различные виды прототипов и методы их использования, включая бумажные, статические и динамические прототипы. Приведен кейс разработки прототипа для сайта немецкого бренда зубной пасты, иллюстрирующий процесс и результаты прототипирования.
Создание прототипа как этап разработки сайта: задачи, методы, преимущества
- 1. www.techart.ru МАРКЕТИНГОВЫЙ КОНСАЛТИНГ И АУТСОРСИНГ задачи методы преимущества Создание прототипа как этап разработки сайта: 26 /06 / 2014 Анна Ларина проект-менеджер МГ «Текарт»
- 2. 02/29 Создание прототипа как этап разработки сайта — Преимущества использования прототипов — Использование прототипов российскими веб-студиями — Что такое прототип — Виды прототипов — Что можно прототипировать — Сколько прототипов нужно — Прототип и юзабилити — Кейс: разработка прототипа для сайта немецкого бренда зубной пасты — 5 ситуаций, когда без прототипа можно обойтись Содержание
- 3. Создание прототипа как этап разработки сайта Преимущества прототипирования соответствие понимания ТЗ заказчиком и исполнителем осмысленная разработка дизайна экономия времени и бюджета исключение концептуальных ошибок развития проекта исключение ошибок юзабилити 03/29
- 4. 04/29 Создание прототипа как этап разработки сайта Использование прототипов российскими веб-студиями На бумаге (зарисовываем то, что обсуждаем) На словах В графических редакторах (статический прототип) При помощи ПО собственной разработки Динамический прототип Axure RP Источник: habrahabr.ru
- 5. 05/29 Создание прототипа как этап разработки сайта 1. Wireframes бумага и карандаш Microsoft Office Visio ÈÍÑÒÐÓÌÅÍÒÀÐÈÉ веб-сервисы Mockflow.com и Mockingbird ПО Wireframe Sketcher расширение для FireFox Pencil Project и др. Что такое прототип? Какие бывают прототипы
- 6. 06/29 Создание прототипа как этап разработки сайта 2. Prototype Axure RP HotGloo ProtoShare FlairBuilder ÈÍÑÒÐÓÌÅÍÒÀÐÈÉ и др. Что такое прототип? Какие бывают прототипы
- 7. 07/29 Создание прототипа как этап разработки сайта 3. Mockup Adobe Fireworks Adobe Photoshop PowerMockup Mockups Èíñòðóìåíòàðèé и др. Что такое прототип? Какие бывают прототипы
- 8. 08/29 Создание прототипа как этап разработки сайта Что такое прототип? Какие бывают прототипы Метод Детализация Применение Особенности Wireframes Prototype Mockup Низкая Средняя/ высокая Средняя/ высокая Документация, облегчение понимания Юзабилити-тестирование, структура продукта Статичный Динамичный Набросок ч/б Затраты $ $$$ $$ Утверждение с заказчиком, чистовой дизайн
- 9. 09/29 Создание прототипа как этап разработки сайта Что такое прототип? Определение Прототип сайта — схемы его страниц, собранные в структуру и, в случае необходимости, частично или полностью имитирующие работу интерактивных элементов и серверной части. Что такое прототип ?
- 10. 10/29 Создание прототипа как этап разработки сайта Что можно прототипировать? Главная страница Внутренние страницы Навигация по сайту Landing page Формы обратной связи Функционалы
- 11. 11/29 Создание прототипа как этап разработки сайта Сколько прототипов нужно? Хорошее правило: 20% функциональных возможностей, которые будут использоваться 80 % времени
- 12. 12/29 Создание прототипа как этап разработки сайта Прототип и юзабилити F-шаблон Навигация Контент в первом экране Структура контента на странице Размещение кнопок, форм Размещение баннерных мест Использование принципов юзабилити на этапе создания прототипа:
- 13. 13/29 Создание прототипа как этап разработки сайта Прототип и юзабилити Прототип — это возможность тестировать. Тестирование на всех этапах разработки прототипа. Как организовать тестирование? 5 тестирующих пользователей выявят до 85% всех проблем на сайте 8 тестирующих выявят почти все проблемы 2 тестирующих найдут половину проблем на вашем сайте.
- 14. 14/29 Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT
- 15. 15/29 Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Знакомство с проектом Анкетирование клиента Определение объема работы Изучение: — рынка и конкуренции — целевой аудитории — ниши продукта Определение: — целей и задач проекта — путей решения их на сайте Подготовительные работы
- 16. 16/29 Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Разработка промо-сайта, направленного на: — продвижение бренда — увеличение продаж — знакомство с брендом для новых покупателей — повышение лояльности среди поклонников марки — привлечение дилеров Сайт рассчитан главным образом на конечных потребителей, в меньшей степени — на дилеров. Сайт должен выгодно отличаться от сайтов-конкурентов. Подготовительные работы ЗАДАЧА
- 17. 17/29 Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Определение структуры и функционала сайта 1. О компании · История · Новости · Проекты · Контакты 2. Продукция · Взрослые зубные пасты · Зубные щетки · Ополаскиватели для полости рта · Детская линейка · Средства для зубных протезов · Новинки 3. Подбор продукции Отбеливание Лечение и т.д. 4. Акции 5. Интересно знать · Советы экспертов · Видеоматериалы · Статьи · Тесты 6. Где купить 7. Сотрудничество СТРУКТУРА
- 18. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Определение структуры и функционала сайта ФУНКЦИОНАЛ Проблема Задача Решения Стоматологическая проблема (например, кровоточат десны) Купить продукцию LACALUT Выбрать продукцию, решающую стоматологическую проблему Узнать, где купить в своем регионе Получить информациюУзнать больше о стоматологической проблеме Для юридических лиц: стать партнером 18/29Узнать об условиях партнерства, отправить заявку Сервис «Подбор продукции» Страница «Где купить» Раздел «Статьи» Раздел «Дистрибуция»
- 19. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Прототипирование 19/29 Шаг 1. Определение страниц, для которых будут созданы прототипы главная страница страница товара страница функционала «Подбор продукции» страница «Продукция» (разводящая каталога)
- 20. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Прототипирование 20/29 Шаг 2. Создание прототипа главной страницы Задачи главной страницы: • удостоверять, что нужная пользователю информация есть на этом сайте • завоевать доверие пользователя и удержать его внимание • содержание и навигация должны быстро подсказать пользователю, куда пойти далее по сайту, чтобы достичь своей цели Определение состава главной страницы: — Шапка сайта — Горизонтальное меню — Строка поиска — Вертикальное меню — Информационно-графический блок — Текстовый блок о бренде — Анонс продуктовых линеек
- 21. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT 21/29 Прототипирование Шаг 2. Создание прототипа главной страницы Принципы: эмоциональное воздействие информационная лаконичность удобная навигация привычное расположение элементов
- 22. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT 22/29 Прототипирование Шаг 2. Создание прототипа главной страницы. Тестирование прототипа Правки по результатам тестирования: На главную страницу добавлены новости и статьи Для анонсов зубных паст добавлены комментарии по фармакологическому действию Добавлен горизонтальный баннер для анонса новинок Надпись «Сделано в Германии» перенесена в шапку сайта
- 23. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT 23/28 Прототипирование Шаг 2. Создание прототипа главной страницы. Согласование с заказчиком
- 24. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT Прототипирование Шаг 3. Создание прототипов внутренних страниц
- 25. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT 25/29 Прототипирование Шаг 4. Создание динамичного прототипа Шаг 5. Окончательное тестирование
- 26. Создание прототипа как этап разработки сайта Кейс: прототипирование как одна из стадий разработки сайта LACALUT 26/29 Разработка технического задания Дизайн Разработка Контроль качества Публикация
- 27. Создание прототипа как этап разработки сайта Дизайн и структура сайта не требуют изменений с 2011 года Кейс: прототипирование как одна из стадий разработки сайта LACALUT Маркетинговые результаты — отличные!
- 28. Создание прототипа как этап разработки сайта 28/29 5 ситуаций, когда можно обойтись без прототипа простые проекты технологическая платформа с ограниченными функциями требуется креативный дизайн сайта редизайн с сохранением функционала заказчик «визуал»
- 29. Ольга Орлова проект-менеджер МГ «Текарт» СПАСИБО ЗА ВНИМАНИЕ! ПОЖАЛУЙСТА, ЗАДАВАЙТЕ ВОПРОСЫ. (495) 790-7591 info@techart.ru www.techart.ru http://twitter.com/techart/ http://www.facebook.com/techartgroup Анна Ларина проект-менеджер МГ «Текарт» www.techart.ru МАРКЕТИНГОВЫЙ КОНСАЛТИНГ И АУТСОРСИНГ