День 2020. #УрокиРазработки
Уроки 50 Лет Разработки ПО

Урок 18. Чем выше уровень абстракции, тем проще выполнять итерации. Окончание
Начало

Быстрые визуальные итерации
Пользовательские интерфейсы имеют два уровня проектирования: архитектурное и техническое. Просматривая экран UI, вы видите техническую часть с элементами визуального оформления, особенностями размещения текста, изображений, ссылок, полей ввода и элементов управления. Если нужна бОльшая точность, можно создать подробную структуру экрана или веб-страницы с помощью такого инструмента, как модель «отображение—действие—отклик» (Display-Action-Response, DAR). Однако поэтапное техническое проектирование UI требует изменения отдельных отображаемых элементов. Эти изменения могут быть утомительными, если не использовать эффективный инструмент создания экранов.

Архитектурное проектирование UI раскрывается через параметры навигации, представленные на каждом экране. Вы можете быстро уточнить проект архитектуры, нарисовав диалоговую карту (см. пример на рисунке выше). Она представляет архитектуру UI в форме диаграммы состояний или диаграммы переходов. Каждый экран, который система демонстрирует пользователю, — это отдельное состояние, в котором может находиться система. Прямоугольники на диаграмме переходов представляют собой диалоговые элементы, с помощью которых пользователь взаимодействует с системой (веб-страница, меню, диалоговое окно и т.п.). А стрелки указывают пути перехода от одного элемента к другому. Стрелки можно подписать, чтобы указать условия и/или действия, которые запускают переход.

Представление UI на данном уровне абстракции не позволяет людям отвлекаться на детали оформление каждого элемента диалога. Они могут сосредоточиться на общей картине того, как пользователь будет взаимодействовать с системой в рамках решения задачи, последовательно используя диалоговые элементы.

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

Следующий уровень итераций улучшения дизайна UI — моделирование набора экранных форм, чтобы создать более или менее реалистичную раскадровку UI. Такие модели позволяют более точно имитировать взаимодействие с пользователем, переходя в потоке задач от одного такого снимка экрана к другому.

Сочетание быстрого проектного моделирования, имитации взаимодействия с пользователем и прототипирования потребует меньше усилий, чем реализация всего UI с последующим поэтапным его изменением до тех пор, пока ваши пользователи не останутся довольны.

Источник: Карл Вигерс “Жемчужины Разработки”. СПб.: Питер, 2024. Глава 3.