Проектирование прототипа сайта доставки для ресторана

От BPMN-процесса к интерактивному интерфейсу: пошаговый разбор

От бизнес-процесса к экранам: как трансформировать BPMN в прототип?

На основе дорожки «Клиент» в BPMN выделены 5 ключевых экранов:

1. Авторизация — вход/регистрация
2. Меню — список блюд с фильтрами
3. Корзина — проверка заказа + данные доставки
4. Оплата — выбор способа и подтверждение
5. Подтверждение доставки — уведомление клиента

Как это связано с BPMN?
Каждый экран соответствует этапу процесса:

• Старт процесса → Экран авторизации
• Выбор блюд → Экран меню
• Оформление → Корзина + Доставка
• Финиш → Подтверждение

Почему выбран lo-fi прототип?

• Цель: Быстро согласовать логику интерфейса без деталей дизайна.
• Преимущества для проекта:
  Экономия времени (не нужно прорабатывать цвета/шрифты).
  Возможность оперативно вносить правки после проверки заказчиком.
  Фокус на usability, а не на визуале.

Инструменты:

• Ручные скетчи на бумаге → для мозгового штурма.
• Figma/Miro → для цифровых вайрфреймов и раскадровки.

Создание раскадровки: как визуализировать пользовательский путь?

Шаг 1. Рисуем экраны
Каждый экран — это упрощённый блок с ключевыми элементами:

• Авторизация: Поля для логина/пароля, кнопка «Войти».
• Меню: Список блюд (плейсхолдеры), фильтры (чекбоксы), поиск.
• Корзина: Таблица с заказом, поля «Адрес», «Время доставки».

Шаг 2. Связываем экраны стрелками
Пример потока:
Авторизация → Меню → Корзина → Оплата → Подтверждение

Шаг 3. Добавляем комментарии
Пояснения для команды/заказчика:

• «Если пользователь не авторизован, система перенаправляет на экран входа».
• «Кнопка «Назад» возвращает к меню без очистки корзины».

Проверка на соответствие процессу

Критерии проверки:

• Все ли шаги из BPMN отражены в интерфейсе?
• Есть ли «тупиковые» пути (например, невозможность исправить адрес доставки после оплаты)?
• Соответствует ли логика экранов бизнес-правилам (например, минимальная сумма заказа)?

Пример ошибки и исправления:

• Было: Нет экрана восстановления пароля.
• Стало: Добавлена кнопка «Забыли пароль?» на экране авторизации.

Что дальше?

После согласования lo-fi прототипа:

1. Детализация в mid-fi: Добавление элементов UI (кнопки, формы).
2. Тестирование: Проверка сценариев на реальных пользователях.
3. Переход к hi-fi: Только после утверждения логики.

Совет: Используйте lo-fi прототип как чек-лист для требований. Если экран нельзя нарисовать даже схематично — в требованиях есть пробелы.

Проектирование lo-fi прототипа для сайта доставки: пошаговый гайд

Этапы работы с прототипом

1. Подготовка

• Источники: BPMN-процесс, интервью с заказчиком, анализ конкурентов
• Инструмент: Miro (шаблон Website Wireframing)
• Что делаем:
  Разбиваем процесс на экраны (5 ключевых)
  Определяем элементы для каждого экрана

Пример для экрана входа:

• Логотип "Вкусмил"
• Поле "Email/телефон"
• Поле "Пароль"
• Кнопка "Войти"
• Ссылка "Зарегистрироваться"

2. Анализ

• Проверяем:
  Нет ли "тупиковых" сценариев
  Все ли шаги процесса отражены
  Удобна ли навигация

Найденные проблемы:

• Нет восстановления пароля → добавляем ссылку "Забыли пароль?"
• Слишком много полей на экране доставки → разбиваем на 2 шага

3. Презентация

• Показываем команде и заказчику в Miro
• Фиксируем комментарии прямо на доске

4. Доработка

• Вносим правки (макс. 1-2 итерации)

Как создать прототип в Miro?

Шаг 1. Настройка доски

1. Создаем новую доску → раздел Research & Design
2. Выбираем шаблон Website Wireframing

Шаг 2. Рисуем экраны

• Используем стандартные элементы:
  Прямоугольники → для блоков
  Текстовые поля → для заголовков
  Иконки → для кнопок

Пример экрана меню:

• Шапка с логотипом
• Строка поиска
• Фильтры (чекбоксы "Вегетарианское", "Острое")
• Список блюд (плейсхолдеры с названиями и ценами)

Шаг 3. Добавляем переходы

• Соединяем экраны стрелками
• Подписываем действия:
  "Клик по 'Корзине' → переход к оформлению"

Лайфхаки для эффективного прототипирования

Для аналитика:

• Используйте цветовые метки:
  Красный → спорные моменты
  Зеленый → утвержденные элементы

Для команды:

• Добавьте легенду в углу доски (обозначьте элементы)

Для заказчика:

• Сделайте 2 варианта сложных экранов (например, разное расположение кнопки "Оплатить")

Частые ошибки и как их избежать

Ошибка - Решение

Слишком много элементов на экране - Разбить на несколько шагов

Нет альтернативных сценариев (например, пустая корзина) - Добавить состояния "Нет товаров"

Неочевидные переходы- Протестировать на коллегах

Что передать дизайнеру после согласования?

1. Ссылку на Miro с комментариями
2. Список утвержденных экранов
3. Особые сценарии (например, "Если заказ меньше 1000 руб. — показать предупреждение")

Важно! Lo-fi прототип — это "скелет". Дизайнер добавит цвета, шрифты и анимации на этапе mid-fi/hi-fi.

Кейс: как мы улучшили экран доставки

Было:
1 экран с:

• Списком заказа
• Полями: адрес, время, комментарий
• Кнопкой "Оплатить"

Проблема:
Пользователи путались при заполнении

Стало:
Шаг 1. Подтверждение заказа

• Список блюд
• Кнопка "Изменить"
• Кнопка "Далее"

Шаг 2. Данные доставки

• Карта с выбором адреса
• Выпадающий список "Время"
• Поле "Комментарий"

Результат:
Количество ошибок при заказе ↓ на 40%

Итоги: как создать эффективный lo-fi прототип на основе бизнес-процесса

Ключевые шаги проектирования

1. От бизнес-процесса к экранам
   Каждый шаг пользователя → отдельный экран
   Пример для доставки еды:
   Авторизация → Меню → Корзина → Доставка → Оплата → Подтверждение
2. Раскадровка — основа навигации
   Схематично соединяем экраны стрелками
   Подписываем действия:
   "Клик 'Далее' → переход к выбору адреса"
3. Минималистичное наполнение
   Только ключевые элементы (поля ввода, кнопки)
   Без дизайна: черно-белая схема + поясняющие надписи

Что это даёт?

✔ Выявление проблем на раннем этапе

• Перегруженные экраны (например, 10 полей ввода на одном шаге)
• "Мёртвые зоны" (куда нельзя вернуться)

✔ Уточнение бизнес-процесса

• Обнаружили, что нет проверки минимальной суммы заказа → добавили шаг "Проверка корзины"
• Упростили сложные шаги (разбили доставку на 2 экрана)

Практические советы

• Для Miro/Figma: Используйте готовые UI-киты для wireframing
• Для презентации: Добавьте легенду (например: "Зелёные кнопки — основные действия")
• Для тестирования: Проверьте сценарии:
  "Что видит пользователь при пустой корзине?"

Ошибки, которых стоит избегать

• ❌ Слишком много деталей (например, иконки вместо прямоугольников)
• ❌ Отсутствие альтернативных путей (например, нет кнопки "Назад")
• ❌ Игнорирование комментариев команды

Пример улучшения:
После теста выяснилось, что 60% пользователей ищут кнопку "Промокод" в корзине → перенесли её из раздела оплаты.

Что дальше?

1. Утверждаем lo-fi с заказчиком
2. Передаём дизайнеру для mid-fi (добавляем цвета, шрифты)
3. Готовим сценарии для юзабилити-тестирования

Главный принцип:
Lo-fi прототип — это "черновик", который помогает сэкономить часы разработки. Чем проще — тем легче вносить изменения!