Виды прототипов
Прототип отвечает на вопрос «как это работает», а не «как это выглядит». Виды различают по детализации и материалу: чем раньше стадия, тем проще прототип и тем легче его переделать.
| Вид | Из чего сделан | Что проверяет | Когда уместен |
|---|---|---|---|
| Бумажный | Экраны на листах; ведущий подкладывает следующий лист | Понятны ли идея и порядок шагов | Самое начало, идея ещё меняется |
| Кликабельный lo-fi | Вайрфреймы из серых блоков со связями | Структуру и навигацию | Сценарий нужно проверить до оформления |
| Кликабельный hi-fi | Готовые макеты со связями, переходами и состояниями | Понятность текстов, заметность кнопок, ощущение от интерфейса | Перед разработкой и для показа заказчику |
| Кодовый | HTML, CSS и JavaScript с настоящим поведением | Сложные взаимодействия, работу с данными, анимации | Возможностей редактора уже не хватает |
Чем прототип отличается от макета и MVP
Вайрфрейм описывает структуру, макет — внешний вид, прототип — поведение; подробное сравнение этой тройки — в статье вайрфрейм. Важна и другая граница: прототип — ещё не продукт.
| Признак | Макет | Прототип | MVP |
|---|---|---|---|
| Что это | Статичный экран в итоговом оформлении | Связанные экраны, по которым можно пройти | Первая рабочая версия продукта с минимумом функций |
| Можно нажимать | Нет | Да, по связям, которые провёл дизайнер | Да, всё работает по-настоящему |
| Данные | Нарисованные | Нарисованные | Настоящие |
| Нужен программист | Нет | Нет, кроме кодового прототипа | Да |
| Что проверяет | Стиль и детали | Сценарий и понятность | Нужен ли продукт людям |
Из чего состоит прототип: термины
У прототипа свой словарь. В таблице — общепринятые названия и то, как они называются в Morfa.
| Термин | Что значит | В Morfa |
|---|---|---|
| Экран | Одно состояние интерфейса целиком | Фрейм верхнего уровня (F) |
| Хотспот | Активная зона, на которую нажимают | Слой со взаимодействием: кнопка, иконка, аватар |
| Триггер | Что делает человек | «При нажатии», «При наведении», «Через задержку», «При нажатии клавиши» и другие |
| Действие | Что происходит в ответ | «Перейти к», «Открыть оверлей», «Изменить на», «Назад» и другие |
| Переход | Как один экран сменяет другой | «Растворение», «Умная анимация», «Сдвиг внутрь» и другие, с кривой вроде «Плавно» |
| Оверлей | Окно поверх экрана: меню, диалог, подсказка | «Открыть оверлей» и «Закрыть оверлей» |
| Сценарий (flow) | Путь от первого экрана до цели | «Сценарии» и «Начало сценария» |
Как проверить прототип с людьми
Прототип окупается, когда по нему проходят люди, которые его не делали. Простой юзабилити-тест устроен так.
Сформулируйте задачу
Не «нажмите на корзину», а «закажите ещё одну пиццу к выбранной». Задача описывает цель, а не кнопки.
Задайте начало
Выделите первый экран и в разделе «Начало сценария» нажмите «Сделать началом сценария». В плеере сценарии страницы видны списком, и участник начнёт с нужного.
Наблюдайте молча
Попросите участника думать вслух и не подсказывайте. Отмечайте, где он остановился, вернулся или нажал не туда.
Исправьте и повторите
Поправьте экраны и проверьте снова на других людях. Главные проблемы обычно видны уже на первых участниках.
Как собрать прототип в Morfa
Каждый экран — фрейм, каждая связь — взаимодействие на слое. Выделите кнопку и на вкладке «Прототип» добавьте взаимодействие: триггер «При нажатии», действие «Перейти к» и экран назначения. Затем запустите плеер кнопкой ▶ или клавишами ⌥⌘↵ (на Windows и Linux — Ctrl+Alt+Enter).
Полный список триггеров, переходов и рамок устройств и порядок работы по шагам — на странице прототипы. Готовые связи можно разобрать в кликабельных шаблонах «Мобильное приложение», «Презентация» и «Сайт».
Частые ошибки
Большинство ошибок видно на первом же прогоне, если искать их специально.
- Тупики. С экрана нельзя ни пойти дальше, ни вернуться. Проверьте, что на каждом экране есть связь вперёд или действие «Назад».
- Весь продукт одним прототипом. Проверяйте по одному сценарию: вход, оформление заказа, восстановление пароля.
- Копия экрана на каждое состояние. Открытое меню или нажатая кнопка — это варианты компонента, которые переключает действие «Изменить на»: переменных и условий в прототипах пока нет. Пример — в гайде кнопка с вариантами.
- Слишком красиво и слишком рано. На ранней стадии участники обсуждают цвета вместо сценария. Начните с кликабельного вайрфрейма.
- Тест без задачи. Вопрос «как вам?» даёт мнения, а не данные о том, где человек застрял.