+7 (495) 128-22-90 [email protected]

Прототипирование интернет-магазина: как спроектировать интерфейс в e-commerce?

В этой статье говорим об одном из важнейших этапов создания сайта – UX-прототипировании.

Индикатор прокрутки статьи

Прототипирование интернет-магазина: как спроектировать интерфейс в e-commerce?

В этой статье мы поговорим об одном из важнейших этапов создания сайта – прототипировании. Расскажем, как сделать прототип (его иногда называют скетчем) и почему это важно как для разработчика, так и для заказчика.

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

Что такое UX-прототип?

UX-прототип — это черно-белая схема страницы. Он фиксирует, какие элементы и в каком порядке будут на ней расположены: где будет, к примеру, фотография товара, кнопки, какие фильтры будут доступны пользователю и прочее. На этом этапе мы продумываем структуру всего сайта: какие будут разделы, типовые блоки и их содержимое (фото, видео, текст), где будет находиться меню, поиск по сайту, контакты и так далее.

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

Зачем создавать UX-прототип?

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

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

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

Что прототипирование нам позволяет:

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

  • определить сроки реализации проекта, так как нам понятен объем работ

  • заложить основу конечного дизайна

  • представить итоговый результат и оценить идею сайта

  • создать структуру страниц и проверить целесообразность функционала

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

Почему прототипирование важно для заказчика?

Этап прототипирования (как и дизайна) требует регулярной обратной связи от клиента: именно в это время принимаются ключевые решения о том, каким будет продукт. Со стороны агентства принимают участие дизайнер и менеджер проекта.

Заказчик также ответственен за результат и сроки реализации проекта. Обсуждение деталей сайта с менеджером проекта помогает выиграть клиенту и в сроках, и в затратах на проект. 

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

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

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

Что важно знать перед созданием UX-прототипа?

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

1. Брифование — изучение бизнеса клиента

На этапе знакомства с клиентом мы выявляем особенности бизнеса, цели и задачи сайта и прочие важные нюансы. Чем больше мы узнаем информации от клиента, тем проще работать дальше.

2. Образ проекта и дизайн-концепция

Здесь важно понять предпочтения клиента и его представления о функционале и дизайне сайта. На этом этапе мы понимаем, каким видит сайт заказчик. Сам клиент также лучше понимает образ будущего сайта.

3. Бенчмаркинг

Аналитик исследует рынок, чтобы создать усовершенствованный и актуальный продукт и сформировать требования к сайту с учетом опыта конкурентов. Этот этап состоит из нескольких подэтапов: исследование рынка, изучение целевой аудитории, анализ конкурентов и формирование требований к будущему сайту.

4. Анализ поискового спроса

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

5. Анализ клиентского опыта 

Мы визуализируем взаимодействие пользователя с сайтом, то есть создаем карту путешествий посетителей по сайту, чтобы понять их поведение и облегчить достижение конечной цели (как правило, совершить покупку).

Результатом этой работы является набор документов, с которым мы переходим к  прототипированию. 

Как мы создаем прототип?

Как правило, сначала создаем прототип главной страницы, затем работаем с внутренними страницами. Десктопную версию проектируем в первую очередь; после того, как она утверждена заказчиком, приступаем к разработке мобильной версии.

В зависимости от типа проекта последовательность шагов может меняться. Если проект — интернет-магазин, то логичнее начинать с карточки товара и каталога, а не с главной страницы. Если на сайте подавляющая часть аудитории —  мобильная, то мы используем подход mobile first (ориентир на мобильные устройства): сначала делаем мобильную версию и разворачиваем ее до десктопа. 

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

Разработка прототипов главной страницы

Сначала разрабатываем прототип главной страницы сайта, на основе которой будут созданы внутренние; главная страница задает особенности всего проекта. 

Прототипы главной страницы:

1. Пример проекта.

2. Пример проекта.

Разработка прототипов внутренних страниц 

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

Разработка прототипов адаптивной версии

После утверждения десктопной версии переходим к мобильной.

Основные выводы

  • Создание прототипа — ответственный этап для всех участников процесса, требующий постоянного взаимодействия агентства и заказчика. Все этапы должны обязательно согласовываться с клиентом.

  • Прототип — фундамент будущего проекта, на котором будет строиться весь последующий процесс разработки; от его структуры будет зависеть удобство и самодостаточность сайта.

  • Прототипирование позволяет оценить возможности сайта и протестировать на соответствие техническому заданию. Также позволяет определить сроки и стоимость создания сайта.

  • Создание прототипа требует предварительного анализа бизнеса клиента и конкурентов, чтобы получить эффективный продукт, который отвечает задачам бизнеса и улучшает пользовательский опыт.

  • Прототип помогает сделать понятную навигационную структуру сайта для разных пользовательских сценариев.

вверх