В этой статье мы поговорим об одном из важнейших этапов создания сайта – прототипировании. Расскажем, как сделать прототип (его иногда называют скетчем) и почему это важно как для разработчика, так и для заказчика.
Прототипирование, или проектирование — этап разработки моделей страниц сайта. Пожалуй, один из самых важных этапов, так как на этой стадии мы определяем, что, собственно, сайт будет собой представлять. Во время прототипирования создается структурный и функциональный каркас сайта, его «скелет», тщательно продумывается логика взаимодействия с пользователем.
Что такое UX-прототип?
UX-прототип — это черно-белая схема страницы. Он фиксирует, какие элементы и в каком порядке будут на ней расположены: где будет, к примеру, фотография товара, кнопки, какие фильтры будут доступны пользователю и прочее. На этом этапе мы продумываем структуру всего сайта: какие будут разделы, типовые блоки и их содержимое (фото, видео, текст), где будет находиться меню, поиск по сайту, контакты и так далее.
На стадии проектирования мы не занимаемся вопросами декорирования (цветовые решения, шрифты, иконки, иллюстрации и др.) — это делаем на этапе дизайна. Прототипирование — это про структуру, функционал, пользовательские сценарии, а не про оформление и фирменный стиль. Когда «остов» сайта создан, можно сосредоточиться на декоративных вопросах — начинается дизайн.
Зачем создавать UX-прототип?
На этапе прототипирования важно не ошибиться и построить схему страницы так, чтобы продукт отвечал задачам бизнеса и пользователи максимально быстро достигали своих целей на сайте.
Во время прототипирования можно оценить затраты на разработку проекта, так как на этом этапе мы определяем конечную структуру сайта. После определения структуры и согласования с заказчиком вносим лишь минимальные правки и клиенту не приходится переплачивать за исправления на этапе дизайна.
Проектирование также позволяет сэкономить время, поскольку в ходе создания прототипа происходит обсуждение структуры проекта с заказчиком, чтобы учесть все нюансы и не тратить время на доработки и перерисовку прототипа.
Что прототипирование нам позволяет:
-
составить точную смету на выполнение проекта, которая фиксируется до начала разработки сайта
-
определить сроки реализации проекта, так как нам понятен объем работ
-
заложить основу конечного дизайна
-
представить итоговый результат и оценить идею сайта
-
создать структуру страниц и проверить целесообразность функционала
Без прототипирования есть риск получить провальный проект и придется переплачивать тому, кто будет переделывать весь сайт.
Почему прототипирование важно для заказчика?
Этап прототипирования (как и дизайна) требует регулярной обратной связи от клиента: именно в это время принимаются ключевые решения о том, каким будет продукт. Со стороны агентства принимают участие дизайнер и менеджер проекта.
Заказчик также ответственен за результат и сроки реализации проекта. Обсуждение деталей сайта с менеджером проекта помогает выиграть клиенту и в сроках, и в затратах на проект.
Этап проектирования нужен для того, чтобы вовремя внести правки и получить структуру, которая понравится заказчику. После прототипирования на этапе дизайна вносить изменения будет дольше и сложнее, поскольку доработка «скелета» занимает меньше времени, чем доработка дизайна с изменением структуры проекта. Доработать прототип легче и быстрее, чем вносить изменения в готовый дизайн-макет с оформлением.
На этапе прототипирования важно не экономить на времени, поскольку этот этап помогает сделать полноценный и работоспособный сайт. Лучше больше времени потратить на понимание специфики сайта и изучение пользовательского опыта, чем получить неудачный проект.
Чтобы получить успешный проект, важно, чтобы сайт нравился не только заказчику, но и пользователям. Поэтому мы предлагаем свое решение по реализации проекта на основе собранных данных о бизнесе заказчика, его целевой аудитории и конкурентах. Об этом рассказываем далее.
Что важно знать перед созданием UX-прототипа?
Перед проектированием мы проводим предпроектный анализ, чтобы изучить специфику бизнеса клиента и составить грамотное техническое задание на разработку сайта. Ниже представлены этапы предпроектного анализа, которые мы используем в нашем агентстве.
1. Брифование — изучение бизнеса клиента
На этапе знакомства с клиентом мы выявляем особенности бизнеса, цели и задачи сайта и прочие важные нюансы. Чем больше мы узнаем информации от клиента, тем проще работать дальше.
2. Образ проекта и дизайн-концепция
Здесь важно понять предпочтения клиента и его представления о функционале и дизайне сайта. На этом этапе мы понимаем, каким видит сайт заказчик. Сам клиент также лучше понимает образ будущего сайта.
3. Бенчмаркинг
Аналитик исследует рынок, чтобы создать усовершенствованный и актуальный продукт и сформировать требования к сайту с учетом опыта конкурентов. Этот этап состоит из нескольких подэтапов: исследование рынка, изучение целевой аудитории, анализ конкурентов и формирование требований к будущему сайту.
4. Анализ поискового спроса
Изучение спроса помогает создать индивидуальную структуру сайта, не повторять ошибки конкурентов, представить информацию на сайте в удобном для пользователя виде и получить готовый к продвижению продукт.
5. Анализ клиентского опыта
Мы визуализируем взаимодействие пользователя с сайтом, то есть создаем карту путешествий посетителей по сайту, чтобы понять их поведение и облегчить достижение конечной цели (как правило, совершить покупку).
Результатом этой работы является набор документов, с которым мы переходим к прототипированию.
Как мы создаем прототип?
Как правило, сначала создаем прототип главной страницы, затем работаем с внутренними страницами. Десктопную версию проектируем в первую очередь; после того, как она утверждена заказчиком, приступаем к разработке мобильной версии.
В зависимости от типа проекта последовательность шагов может меняться. Если проект — интернет-магазин, то логичнее начинать с карточки товара и каталога, а не с главной страницы. Если на сайте подавляющая часть аудитории — мобильная, то мы используем подход mobile first (ориентир на мобильные устройства): сначала делаем мобильную версию и разворачиваем ее до десктопа.
На страницах проекта мы создаем детальный, продуманный до мелочей план будущего сайта. Каждый этап обязательно согласуем с клиентом. Прототип показывает полный функционал продукта.
Разработка прототипов главной страницы
Сначала разрабатываем прототип главной страницы сайта, на основе которой будут созданы внутренние; главная страница задает особенности всего проекта.
Прототипы главной страницы:
1. Пример проекта.
2. Пример проекта.
Разработка прототипов внутренних страниц
После согласования и утверждения прототипа главной страницы, мы приступаем к разработке остальных страниц. На данном этапе также прорабатываем структуру, функционал, блоки контента и прочие элементы интерфейса.
Разработка прототипов адаптивной версии
После утверждения десктопной версии переходим к мобильной.
Основные выводы
-
Создание прототипа — ответственный этап для всех участников процесса, требующий постоянного взаимодействия агентства и заказчика. Все этапы должны обязательно согласовываться с клиентом.
-
Прототип — фундамент будущего проекта, на котором будет строиться весь последующий процесс разработки; от его структуры будет зависеть удобство и самодостаточность сайта.
-
Прототипирование позволяет оценить возможности сайта и протестировать на соответствие техническому заданию. Также позволяет определить сроки и стоимость создания сайта.
-
Создание прототипа требует предварительного анализа бизнеса клиента и конкурентов, чтобы получить эффективный продукт, который отвечает задачам бизнеса и улучшает пользовательский опыт.
-
Прототип помогает сделать понятную навигационную структуру сайта для разных пользовательских сценариев.