Как подготовить сайт к разработке и проверить его прототип

Разработка продающего сайта начинается с цели и проверенного прототипа, а требования к скорости задает набор метрик Core Web Vitals, который Google свел в 2021 году. Разбираем, как пройти путь от цели и исследования аудитории до прототипа и технических порогов. От них зависит, останется посетитель на сайте или уйдет.

С чего начать — цель, аудитория и позиционирование

Начните с цели: сформулируйте, какую проблему пользователя решает сайт. Затем запишите пользовательские сценарии (User Stories) по схеме: кто пользователь, какое действие он хочет совершить и какой результат получит.

Аудиторию сегментируйте по 4 признакам: географическому, социально-демографическому, психографическому и поведенческому. Спрос в интернете можно оценить через Яндекс.Вордстат, а по размеру аудитории прикинуть объем рынка и перспективы продвижения.

Данные собирайте несколькими способами:

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

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

Позиционирование проверьте до запуска рекламы: соберите фокус-группу, запустите A/B-тесты креативов с разными формулировками, опросите существующих клиентов. Экспертная статья со ссылкой на Forbes приводит оценку: бренды с грамотным позиционированием растут в 2,3 раза быстрее конкурентов. Это мнение, но оно объясняет, зачем тратить время до первой строчки кода.

Зачем нужен прототип и как его проверить

Прототип проверяет структуру сайта до того, как ее начнут верстать.

Экспертная статья со ссылкой на исследования Nielsen Norman Group утверждает: низкодетализированные прототипы на 20-30% эффективнее для обратной связи о структуре, чем высокодетализированные макеты. Подробные макеты смещают внимание на визуальные детали.

По экспертной статье о прототипировании, тестирование на узкой группе из 5-7 человек позволяет выявлять до 85% проблем юзабилити.

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

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

Какая скорость и мобильная версия нужны сайту

По данным исследований, первое впечатление о сайте у пользователей формируется за 50 миллисекунд (0,05 с). Поэтому о скорости загрузки стоит думать с самого начала проекта.

В 2021 году Google представил набор метрик Core Web Vitals, которые оценивают качество пользовательского опыта. Первая: Largest Contentful Paint (LCP) показывает, как быстро загружается основной контент страницы (оптимально до 2,5 секунд). Вторая: First Input Delay (FID) отражает, как быстро сайт откликается на первое действие пользователя (оптимально до 100 мс). Третья: Cumulative Layout Shift (CLS) оценивает, насколько стабилен макет и сдвигаются ли элементы при загрузке (оптимально менее 0,1).

Еще в 2018 году Google анонсировал Speed Update и объявил скорость загрузки одним из важнейших факторов позиций сайта в мобильной выдаче.

Сжатие HTML, CSS и JavaScript с помощью Gzip, Brotli и других утилит уменьшает размер данных, передаваемых между сервером и браузером, и снижает время загрузки страницы. Скоростные требования удобнее заложить до старта, вместе с оценкой стоимости разработки сайта под вашу задачу, запуск и развитие.

Что проверить до того, как сайт уйдет в разработку

• Цель сайта сформулирована как решение проблемы пользователя, а сценарии записаны по схеме: роль, желаемое действие и результат, ради которого оно нужно.
• Сегменты аудитории описаны по географии, социально-демографическим, психографическим и поведенческим признакам.
• Позиционирование проверено на фокус-группе и A/B-тестах.
• Низкодетализированный прототип показан 5-7 людям: такая группа выявляет до 85% проблем юзабилити.
• Мобильная версия спроектирована первой, а целевые пороги загрузки заданы до начала работ.

Если такой список у вас уже есть, остается перенести его в требования к проекту: в QIO можно обсудить разработку сайта под вашу задачу.