Figma: оптимизация дизайн-макета с нуля до передачи разработчикам Часть 1. Прототип — этап, который нельзя пропустить

Интернет-магазин, продающий лендинг или корпоративный блог должны решать задачи бизнеса и клиента. Часто заказчики просят сразу приступить к дизайну, но вначале нужно проработать нечто более важное — логику проекта. Станет ли пришедший на сайт пользователь клиентом или уйдёт к конкурентам через 30 секунд, не найдя нужную опцию, — зависит от качества работы над прототипом.

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

Почему прототип — это важно

Схематичное отображение страниц на начальном этапе помогает:

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

С чего начать: собираем информацию для прототипа

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

1. Собрать данные о бизнесе и продукте: информацию о компании, товарах или услугах, уникальном торговом предложении. Будут полезны диаграммы бизнес-процессов. Уже на этом этапе можно понять, какие блоки будут приоритетными, а какие — второстепенными.
2. Провести анализ целевой аудитории. Точный портрет пользователя позволит эффективно проработать сценарии — пути, которые тот преодолеет для решения проблемы. Изучить аудиторию и её поведение можно, анализируя статистику в Google Analytics и Яндекс.Метрике, изучая отзывы на форумах и в социальных сетях. 
3. Исследовать конкурентов. Как правило, владельцы бизнеса знают, с кем конкурируют в своей нише, и могут дать список. Анализ покажет, какие недостатки и преимущества есть у сайтов-соперников. Это поможет избежать их ошибок, адаптировать и использовать удачные приёмы. 
4. Выяснить, какие материалы для сайта уже готовы: возможно, написана часть текста или разработан фирменный стиль. Прототип не обязательно включает финальный текст, но есть информация, которая напрямую влияет на вид сайта, например, сложная инфографика. Использование реальных текстов вместо «рыбных» также повысит эффективность тестирования.
5. Сформулировать гипотезы, то есть ответить на вопрос: что будем проверять с помощью прототипа? Например, будет ли удобно найти нужный товар и сделать заказ. 
6. Составить бриф — документ, где структурирована вводная информация, обозначены договорённости и учтены все пожелания заказчика.

Как подготовить прототип к тестированию

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

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

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