Создание прототипа: как сэкономить нервы, время и деньги

В Asanov Agency мы занимаемся разработкой веб-проектов полного цикла: от сбора требований и аналитики до запуска и дальнейшего развития. Рассказываем, почему начинаем работу над сайтами с прототипирования, и делимся советами, как избежать лишней головной боли.

Разработка веб-проекта — многоступенчатый процесс, в котором каждый шаг влияет на конечный результат. Неправильное построение работы на начальном этапе способно негативно повлиять на последующие шаги: затягиваются сроки релиза, увеличивается конечная стоимость. Продукт еще не приносит прибыль, а уже требует дополнительных вложений. Владельцы бизнеса и маркетологи находятся в постоянном стрессе, начинается поиск виноватых на стороне исполнителя. Сотрудничество перестаёт быть обоюдно комфортным, и на выходе проектом не доволен ни клиент, ни команда разработчиков. Создание прототипа на старте проекта решает перечисленные проблемы и становится фундаментом планомерной и результативной работы.

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

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

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

Карта сайта помогает определить общую структуру проекта и набор типовых страниц.

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

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

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

Для этого мы собираем типовые страницы в Figma и объединяем их в интерактивные прототипы. Клиент получает ссылку на десктопную и мобильную версии, чтобы посмотреть как сайт будет отображаться на разных устройствах. Тестируя полученный прототип, заказчик оценивает удобство пользования и соответствие продукта поставленным бизнес-целям.

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

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

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

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

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

Тогда мы ещё не знали, что всё ровно наоборот.

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

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

Время — самый ценный ресурс в веб-разработке. Любое отклонение от намеченного плана оборачивается превышением сроков. Если подобные задержки наслаиваются одна на другую, релиз проекта откладывается. Наличие проработанного прототипа страхует от критических ситуаций.

В интернет-магазине osome2some.com пришлось заранее разобраться со сценариями для тех случаев, когда товара нет в наличии или товар доступен под заказ. До начала создания прототипа мы составили схему с возможными статусами совместно с клиентом.

После утверждения схемы мы продумали интерфейсные решения для каждого из кейсов и определили логику управления товарами из административной панели сайта.

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

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

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

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

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

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

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

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

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