Процесс создания сайта. Этап 1: интерактивные прототипы сайта
26.10.2012
Этой статьей мы открываем цикл публикаций для клиентов и заказчиков о процессе разработки сайта.
Цикл рассматривает все шаги и этапы разработки: от идеи до запуска проекта и поможет избежать типовые и скрытые ошибки. Результат – сэкономленные деньги и время.
В этой статье мы пропускаем нулевой этап, когда идея: «Нам нужен сайт!», превращается в набор требований и функций сайта.
Речь пойдет об интерактивных прототипах.
Прототипы: как они разрабатываются и зачем нужны
Перефразируя , можно сказать, что прототип - это быстрая «черновая» реализация основных блоков содержания и функций сайта. Это архитектурный план, по которому будет разрабатываться сайт.
В самом примитивном виде прототип – это рисунок «от руки», чертеж основных блоков странички сайта на бумаге или в Excel.
Такая форма проектирования подходит лишь для начального обдумывания. Неудобство работы, сложность редактирования, отсутствие интерактивности – это далеко неполный список причин, по которым разработчики все чаще отдают предпочтение интерактивному прототипированию.
Преимущества интерактивных прототипов
Забегая вперед скажем, что самое главное и неоспоримое преимущество данной формы проектирования в том, что в результате мы получаем что-то осязаемое, некую модель сайта, которую можно «потрогать»: покликать по кнопкам и ссылкам, протестировать удобство навигации, испытать механизм работы функционала и получить «имитацию» результата. Но обо всём по порядку.
1. Прототипы позволяют осмыслить будущий сайт
Сайт на этапе обсуждения идеи представляет собой нечто эфемерное. 95% наших клиентов в процессе разработки прототипов приходят к расширенному и более точному понимаю проекта.
2. Точно определить содержание сайта
Все блоки содержания указываются с точностью до буквы. Уже на данном этапе можно указать расположение и внешний вид контента.
3. Сымитировать работу функций сайта до этапа программирования
Интерактивные прототипы могут имитировать практически все: работу и выпадение меню, добавление товара в корзину, оформление заказа, работу фильтра в каталоге товаров, работу слайдеров и баннеров, перемещение объектов и их смена в зависимости от действий пользователя.
4. Построить модель реализации целей пользователей, протестировать и скорректировать ее (этап 0)
Сценарии и цели пользователей, определяемые на нулевом этапе разработки сайта, реализуются в наборе функций сайта и логике размещения содержания. С помощью прототипов можно провести начальное тестирование сайта в фокус-группе и выявить слабые места и ошибки проектирования.
5. Сэкономить время и деньги на этапе дизайна
Еще пару лет назад, когда российские веб-студии не применяли прототипы, все задачи проектирования сайта ложилась на плечи дизайнера. Именно дизайнер размещал блоки сайта, определял их содержание, со слов заказчика.
В результате, дизайн растягивался на недели, при этом удобством и функциональностью сайта подчас жертвовали в угоду «красоте».
С введением этапа проектирования прототипов все встало на свои места. Дизайнер работает с уже сформированной структурой шаблонов. Это значительно сокращает время и стоимость разработки дизайна сайта.
6. Привлечь программистов к анализу технических путей реализации нужного Вам функционала и найти оптимальное решение
Читать даже хорошо написанное техническое задание – тяжелая работа. Наличие интерактивного прототипа помогает программистам понять логику работы сайта уже на этапе проектирования. К тому же, при анализе работы прототипа, программисты «примеряют» функционал сайта на ту или иную систему управления сайтом и выделяют наиболее нестандартные (дорогие) блоки.
7. Выявить узкие места и ошибки, а также узлы сайта, генерирующие большую нагрузку на сервер
Опытный программист, поработав с прототипом, сможет указать на логические ошибки в работе функций сайта и на те блоки, которые генерируют наибольшую нагрузку на сервер.
В итоге работы над прототипом, вместо «рисунка на бумаге» мы получаем работающую модель основных разделов и функций сайта, в виде набора html-страниц, имитирующих функционал готового проекта.
Эти страницы можно открыть в любом браузере, покликать на меню, ссылки, кнопки и получить предполагаемый результат.
Просмотреть пример прототипа сайта можно .
Программы прототипирования
В работе над сайтами мы используем программу проектирования интерфейсов Axure RP ( ), которая позволяет создать прототипы как для веб-сайтов, так и для мобильных приложений, но, справедливости ради, упомянем и о .
Работу в Axure RP мы рассмотрим в отдельной статье.
Этапы разработки прототипов
Итак, форма и программа для проектирования выбраны. На нулевом этапе сформулированы типовые сценарии поведения пользователей и список необходимого функционала.
К примеру, для интернет-магазина список функционала может выглядеть следующим образом:
1. Каталог товаров
a. Список товаров
i. Сортировка товаров по цене, названию, рейтингу
ii. Постраничная навигация
iii. Карточка быстрого просмотра товара
b. Фильтрация товаров по свойствам
c. Добавление товара в корзину
2. Оформление заказа и т.п.
Теперь можно перейти к «закладке фундамента» будущего проекта – прототипированию. Важность этого этапа нельзя переоценить, ведь, как известно, ошибки, допущенные на самом раннем этапе разработки, в итоге оказываются самыми дорогостоящими.
Шаг 1
На первом шаге разработки прототипа из множества функционала определяем список уникальных шаблонов (страниц). Для выполнения каждой функции выделяем отдельную страницу.
Продолжим пример интернет-магазина. Из набора функций мы получаем список уникальных шаблонов, прототипы которых нам предстоит разработать:
1. Главная страница
2. Каталог
a. Список товаров
b. Список товаров с примененным фильтром и вариантом сортировки
3. Страница товара
4. Корзина
Каждая из этих страниц решает свою уникальную задачу. Так, главная страница – это основная точка входа, собирающая для пользователя наиболее важную информацию о сайте. Она решает наиболее сложную задачу удержания пользователя, поэтому, как минимум, должна:
• Удостоверять, что нужная пользователю информация есть на этом сайте
• Завоевать доверие пользователя и удержать его внимание
• Содержание и навигация должны быстро подсказать пользователю, куда пойти далее по сайту, чтобы достичь своей цели.
Чем более точно будут описаны задачи каждого шаблона, тем эффективнее будет работать сайт и меньше ошибок будет допущено на этапе проектирования.
В итоге, в Axure RP мы получаем список прототипов.
Шаг 2
На втором шаге мы разрабатываем прототип главной страницы, на основе которой будут построены все остальные шаблоны сайта.
Принципы построения главной страницы:
1. Эмоциональное воздействие
Какой бы сайт Вы не разрабатывали – магазин, сайт компании, промо-сайт, портал – принцип удержания посетителя всегда самый важный. Открыв сайт первый раз, пользователь принимает решение, остаться на нем или уйти. Решение принимается подсознательно, за доли секунды. Еще несколько секунд уходит на сознательную (мотивировочную часть):
- плохой или хороший дизайн (нравится или не нравится),
- видна ли сразу нужная информация или хотя бы путь к ней,
- долго ли грузится сайт или открывается быстро
- и т.д.
Важно сразу получить положительный эмоциональный отклик – очаровать посетителя, удержать его внимание если не нужной информацией, то привлекательными образами. И, в итоге, завоевать доверие и право продолжить диалог.
Именно поэтому важно на этапе построения прототипа спроектировать нужное эмоциональное воздействие.
2. Информационная лаконичность
Как и 5 лет тому назад, многие сайты остаются перегруженными. На главной странице выводится все, что считается нужным посетителю: новости, акции, новинки, лидеры продаж, блоги, форумы.
В итоге, пользователю надо потратить кучу времени, чтобы визуально найти нужную точку перехода или блок информации. А такого времени ни у кого нет. У Вас, как у проектировщика сайта, есть 2-3 секунды, чтобы удержать пользователя.
Поэтому так важно определить только критически важные блоки сайта, которые будут нужны всем посетителям. Мозг воспринимает не более 7 объектов одновременно, информационная перегрузка вызывает стресс.
3. Удобная навигация
Зачастую шапка и футер главной страницы сайта наследуются внутренними страницами. Навигационные инструменты сайта (меню, поиск, «хлебные крошки» или путь по сайту) сквозным образом присутствуют во всех шаблонах. Их функциональность и удобство пользования должны быть тщательно продуманы и реализованы в прототипе. Принцип достижения нужной страницы в 2-3 клика еще много лет будет актуален.
В последнее время распространена тенденция закрепления навигационных инструментов и корзины в верхней части экрана при прокрутке страницы. Это повышает удобство работы пользователя с сайтом и позволяет с любого места страницы перейти в нужную часть сайта. Мы рекомендуем данный метод навигации для всех сайтов с большим количества контента.
Введение такого принципа отображения навигации решает частично и другую проблему: нежелание пользователя прокручивать страницу вниз.
4. Привычное расположение элементов
За последние годы большинство пользователей привыкло к однотипности устройства некоторых элементов сайта. Например, корзина располагается в правом верхнем углу; логотип компании находится в верхней части сайта, слева или по центру и т.д.
Такое расположение элементов сайта – результат исследований по юзабилити, опыт работы многих крупных сайтов и магазинов. Было бы ошибочно «изобретать велосипед» и пытаться приучить пользователей к другим местам размещения этих блоков. Пользователь приходит на сайт для своих целей, а не для того, чтобы найти на вашем сайте корзину, меню или переход на главную страницу.
Вот краткие правила разработки прототипа главной страницы сайта. Необходимо помнить цель главной страницы: очаровать, удержать пользователя и направить кратчайшим путем к нужной ему информации.
Шаг 3
После того, как найдена золотая середина, и прототип главной страницы утвержден, на его основе мы начинам разработку внутренних страниц.
Помним, что каждая внутренняя страница решает свою уникальную задачу: найти нужный товар, рассказать об этом товаре или показать его «лицом»… Поэтому на этом шаге мы используем два принципа: необходимо и достаточно.
«Необходимо» - структура внутренней страницы должна содержать необходимые для решения своей задачи блоки и функции.
«Достаточно» - на странице должно быть достаточно дополнительной информации, необходимой пользователю, скажем, для покупки товара.
Рассмотрим пример. У страницы товара одна задача – «продать» товар посетителю. Только вот посетители находятся на разных этапах принятия решения о покупке:
- Еще не знают, нужный ли это товар или надо искать другой;
- Сравнивают товар с другим;
- Уже приняли решение брать этот товар, но ищут место покупки и выгодную цену;
- Склоняются купить товар в этом магазине, но не знают условий доставки и оплаты
- И т.д.
Необходимо: на странице удобным и понятным образом должна быть размещена вся информация о товаре, а также инструменты покупки товара (добавление в корзину или предварительный заказ).
Достаточно: страница должна содержать достаточно ссылок/вспомогательных блоков информации для осуществления продажи товара.
Применение этих двух принципов позволяет не перегрузить страницы лишней информацией и не забыть разместить нужную и важную.
Шаг 4
Структура и блоки контента внутренних страниц готовы. Теперь необходимо, согласно сценариям пользования сайтом, наложить на них действия: клики и переходы на другие страницы, выпадение меню, увеличение фотографий и т.п.
В итоге, прототип получает интерактивность. На этом этапе логично наложить эффекты анимации и спроектировать обратную связь сайта в ответ на действия пользователя.
Шаг 5
На последнем шаге, когда прототипы уже готовы и их работу можно проверить в любом браузере, проводится юзабилити-тестирование. Задача тестировщика – полностью сымитировать типовое поведение пользователя (пользовательские сценарии) на текущем прототипе. Желательно, чтобы тестируемый первый раз видел данный прототип. Задание может выглядеть просто: необходимо купить на данном сайте такой-то товар или найти такую-то информацию о товаре.
Ведущий наблюдает за действиями пользователя и записывает все отклонения от пользовательского сценария. В конце тестирования данные отклонения суммируются, выявляются ошибки проектирования и вносятся правки в прототипы. Дополнительно, от каждого тестируемого собираются пожелания и замечания.
Идеально, если такое тестирование проводится с помощью реальных/лояльных клиентов/пользователей.
Техническое задание
Лишь после того, как мы получили модель будущего сайта с четко выстроенной структурой и логикой работы, можно перейти к её словестному описанию - техническому заданию. Обратная последовательность действий или полное игнорирование этапа проектирования, может привести к печальным последствиям в виде увеличения сроков разработки и раздувания первоначального бюджета в разы. Помимо технических деталей и логики работы всех функций сайта, в ТЗ также должны содержаться структурная модель данных, требования по нагрузке и отказоустойчивости.
Итог (спасибо, что дошли до конца статьи)
Разработка прототипов – это обязательный этап при создании сайта. Чем тщательнее и правильнее будет проведен этот этап, тем эффективнее будет работать сайт после запуска и тем больше будет экономия на всех других этапах производства сайта.
Просмотров:
16445
