Scott
Аннотации к вайрфрейму объясняют поведение, которого не видно на статичном экране. Поставьте номер рядом с нужным элементом и добавьте короткое пояснение: каково исходное состояние, что вызывает изменение и что происходит дальше. Полезная аннотация отвечает на конкретный вопрос: выбрано ли время заранее, когда появляется ошибка и действительно ли кнопка продолжения завершает запись.
Располагайте пояснения рядом с экраном, к которому они относятся. Если нужно разобраться в переходах между экранами, покажите маршрут с помощью инструментов прототипирования Pixso. Аннотация описывает правило, а интерактивный переход позволяет испытать его действие.
Объясняйте решения, которых не видно в макете
Подпись «Электронная почта» уже показывает назначение поля. Пояснение «Поле электронной почты» ничего не добавляет. А фраза «Обязательно для продолжения; если поле пустое, сохранить остальные введённые данные» описывает поведение, которое невозможно передать одним прямоугольником с подписью.
Начните с вопросов, которые вызывает конкретный экран. Какие значения заданы по умолчанию? Какие элементы влияют друг на друга? Что можно выбрать? При каком условии возникает ошибка и куда пользователь попадёт дальше? Описывайте важные для задачи решения, а не превращайте каждый пиксель в отдельный пункт спецификации.
Разделяйте текст интерфейса и указания команде. На экране может быть написано «Выберите время», а в пояснении — «В исходном состоянии время не выбрано». Первая фраза находится внутри интерфейса, вторая — за его пределами. Иначе коллега может принять указание по реализации за текст, который увидит клиент.
Пример: шесть аннотаций к одной форме записи
Возьмём экран записи на 30-минутную консультацию по дизайну. В нём есть краткое описание услуги, выбор даты с указанным 14 мая, три варианта времени, поле электронной почты и кнопка «Проверить запись». Пользователь выбирает время и проверяет сведения перед окончательным подтверждением.
Доступны варианты 10:00, 11:00 и 14:00, причём последний занят. В исходном состоянии время не выбрано, а электронная почта не введена. Следующие пояснения фиксируют это состояние и основные зависимости.
| Номер и расположение | Аннотация | На какой вопрос отвечает |
|---|---|---|
| 01 · Описание услуги | Это 30-минутная консультация по дизайну. Изменить её продолжительность на данном экране нельзя. | «30 минут» — настройка или информация? |
| 02 · Заголовок выбора даты и времени | В примере выбрано 14 мая. Показывать свободное время на выбранную дату по местному времени студии; часовой пояс указать рядом с вариантами. | К какой дате и часовому поясу относятся часы? |
| 03 · Варианты времени | Изначально ни один вариант не выбран. Можно выбрать только один. Пометить 14:00 как недоступное время и запретить его выбор. При выборе 11:00 прежний выбор 10:00 снимается. | Можно ли записаться сразу на несколько часов? |
| 04 · Электронная почта | При продолжении требуется адрес электронной почты. Если поле пустое, остаться на этом экране и показать рядом с ним «Введите адрес электронной почты». Остальные данные сохранить. | Когда появляется ошибка пустого поля? |
| 05 · Выбор даты | При смене даты сбросить выбранное время и показать доступные часы новой даты. Сохранить введённую электронную почту. Предложить выбрать время заново. | Какие данные сохраняются после смены даты? |
| 06 · Проверить запись | Если обязательные данные заполнены, открыть сводку записи. Иначе показать сообщения у соответствующих полей на текущем экране. Переход дальше ещё не подтверждает запись. | Эта кнопка уже создаёт запись? |
Если консультация бывает разной продолжительности, добавьте её выбор и объясните, как он влияет на доступное время. Решите, сохраняется ли выбранное время при смене даты, до передачи макета в разработку: привычный вид календаря сам по себе на этот вопрос не отвечает.
Указывайте условие и наблюдаемый результат
Для аннотации 05 фраза «Обновить форму» слишком расплывчата. Она может означать сохранение прежнего времени, автоматический выбор первого свободного часа или очистку всех полей. «При смене даты сбросить выбранное время и сохранить электронную почту» оставляет гораздо меньше вариантов толкования.
Удобная конструкция: когда происходит это, изменить одно и сохранить другое. Не обязательно использовать все три части в каждом пояснении. Уточняйте, что сохраняется, когда это предотвращает существенную ошибку, например потерю контактных данных при исправлении даты.
Пояснения к ошибкам должны быть такими же конкретными: условие, сообщение и способ исправления. Если время не выбрано, напишите «Выберите время консультации»; если почта не введена — «Введите адрес электронной почты». Один значок ошибки не объясняет проблему. В рекомендациях W3C по обозначению ошибок ввода требуется указать ошибочный элемент и описать обнаруженную ошибку текстом.
Когда важно расположение сообщения, покажите состояние с ошибкой рядом с исходным вайрфреймом. Для этой формы отдельно задайте правило: после неудачной попытки продолжить клавиатурный фокус переходит к первому некорректно заполненному полю. Это решение нужно реализовать и проверить в работающем интерфейсе — цветная рамка в статичном макете не демонстрирует перемещение фокуса.
Располагайте пояснения так, чтобы их было легко найти
Ставьте номера снаружи элементов управления, не перекрывая подписи, значения и области нажатия. Пояснения соберите в колонку рядом с фреймом, в порядке чтения экрана. Короткая соединительная линия помогает уточнить неоднозначную привязку, но шесть пересекающихся линий сделают пояснения сложнее самой формы.
Сохраняйте номер, если то же правило относится к элементу в другом состоянии. Аннотация 04 должна по-прежнему обозначать электронную почту на экране с ошибкой. Тогда коллега сможет сказать «В пункте 04 непонятно исправление», не описывая координаты на холсте.
Если пояснения не должны попадать в прототип, оставляйте их за пределами экранного фрейма. Перед отправкой экспортированного изображения включите в него колонку с текстом и проверьте читаемость в фактическом размере просмотра. Если весь лист приходится сильно увеличивать, сделайте общий вид и отдельный крупный фрагмент взаимодействия, а не уменьшайте шрифт аннотаций.
Разделяйте аннотации, прототипы и комментарии
Аннотация нужна для правила, которое команда должна сохранить. Прототип — для последовательности действий, которую нужно попробовать. Комментарий — для вопроса или обсуждения, по которому решение ещё не принято.
В примере с записью правило «При смене даты выбранное время сбрасывается» относится к постоянному пояснению. Замечают ли люди этот сброс — подходящий вопрос для интерактивной проверки. А «Стоит ли сохранять время, если оно доступно в обе даты?» — пока тема обсуждения, а не согласованное поведение.
Когда обсуждение завершено, обновите пояснение и затронутые экраны. Утверждённое поведение не должно оставаться только в ветке комментариев, пока сам вайрфрейм показывает прежнее решение. Выбор между вайрфреймом, детальным макетом и прототипом тоже зависит от того, на какой вопрос команде предстоит ответить.
Соберите форму с аннотациями в Pixso
Создайте в дизайн-файле Pixso экран записи с читаемыми подписями, вариантами времени, полем электронной почты и кнопкой проверки. Рядом с фреймом добавьте текстовую колонку и небольшие пронумерованные маркеры, связывающие шесть правил с элементами формы. Для аннотаций достаточно обычных объектов редактора: их текст и положение легко менять.
Продублируйте экран, чтобы показать ошибку пустой электронной почты и состояние после смены даты. Во втором варианте оставьте введённую почту, но снимите выбор времени. Так результат правила 05 можно увидеть, а не представлять по описанию.
Для проверки перехода свяжите кнопку «Проверить запись» в заполненной форме со сводным экраном. Покажите на нём услугу, дату, время и электронную почту, а также отдельное действие подтверждения. В Pixso можно связывать экраны и оставлять комментарии в контексте макета; смысл конкретного сценария записи при этом задают сами экраны и описанные правила.
Создать вайрфрейм с аннотациями в Pixso →
Проверьте изменение, которое легче всего понять неверно
Предложите коллеге изучить вайрфрейм без устных пояснений: «Вы выбрали 10:00 и ввели электронную почту. Теперь меняете дату. Что сохранится, а что придётся выбрать снова?» Если экран и аннотация 05 не дают ясного ответа, сначала исправьте их, а уже затем дополняйте документацию.
Пронумерованные пояснения нужны, чтобы этот ответ можно было получить без вашего присутствия. Шесть точных замечаний у нужных элементов полезнее страницы общих советов, подходящих к любой форме.
