Рисовал ли Wireframe

Ответ

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

Когда и зачем я рисую wireframes

На этапе Discovery:

• Когда нужно быстро визуализировать несколько вариантов решения проблемы
• Для обсуждения с дизайнером и инженерами возможных подходов
• Чтобы убедиться, что мы решаем правильную проблему (не тратим время на неправильное решение)

На этапе Definition:

• Уточнение user flow и точек взаимодействия
• Маппинг всех состояний экрана (loading, error, empty state)
• Определение информационной иерархии

На этапе Design Review:

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

Инструменты и подходы

Low-fidelity wireframes (я рисую сам):

• Figma — мой основной инструмент, быстро и просто
• Pencil & Paper — для быстрых скетчей на встречах
• Miro/Mural — когда работаю с распределённой командой

Я предпочитаю low-fidelity по нескольким причинам:

• Быстро создаются и быстро меняются (нет привязанности к деталям)
• Люди интерпретируют их как это всего лишь черновик, поэтому критика честнее
• Фокус на информационной архитектуре, а не на красоте

High-fidelity wireframes (обычно рисует дизайнер):

• Когда требования уже понятны и утверждены
• Дизайнер добавляет цвета, типографику, реальный контент
• На этом этапе я помогаю с UX-feedback (удобство, доступность)

Конкретные примеры

Пример 1: Оптимизация checkout

Я нарисовал 3 варианта:

1. One-page checkout (всё на одном экране)
2. Step-by-step (4 шага, каждый на своём экране)
3. Inline validation (формы раскрываются при необходимости)

Мы обсудили trade-off:

• One-page: просто, но перегруженно информацией
• Step-by-step: психологически легче (progress bar), но больше кликов
• Inline: компромисс, но сложнее в реализации

Дизайнер взял идеи из всех вариантов и создал гибридное решение.

Пример 2: Новый onboarding flow

Я нарисовал цепочку из 8 экранов:

• Экран 1-2: Регистрация
• Экран 3-4: Заполнение профиля
• Экран 5-6: Выбор интересов
• Экран 7: Preview личного фида
• Экран 8: Готово, добро пожаловать!

Потом мы тестировали этот flow с пользователями и обнаружили, что люди выпадают на экране 4 (слишком много полей). Я быстро переделал wireframe, оставив только обязательные поля. Результат — конверсия улучшилась на 18%.

Принципы, которых я придерживаюсь

Думать в контексте пользователя:

• Какие экраны нужны (не забыть loading, error states)
• Какой путь пользователь пройдёт
• Где возможны drop-offs и friction

Коммуницировать, не рисовать:

• Wireframe должен быть легко понятным и обсуждаемым
• Не нужен идеальный дизайн
• Аннотации важнее красоты

Тестировать рано:

• Показать wireframe пользователям до разработки
• Собрать feedback и переделать
• Это дешевле, чем менять код потом

Быть гибким:

• Wireframe — это гипотеза, а не закон
• Когда выясняется новая информация, нужно быть готовым переделать