Проектирование пользовательского интерфейса
Контекст задачи
Интерфейс — это лицо программы. Именно через него пользователь судит о системе в целом. Грамотно спроектированный пользовательский интерфейс должен быть интуитивно понятным, эффективным и доставлять удовольствие от работы. Разработка UI для обучающих, игровых, имитационных программ часто выделяется в отдельный компонент, влияющий на весь процесс проектирования.
Формулировка
Спроектируйте пользовательский интерфейс для ключевых сценариев использования вашей системы.
Используйте Draw.io
А. Анализ «Действие — Отклик»
Для каждого ключевого сценария использования заполните таблицу:
| Действие пользователя | Отклик системы | Элемент интерфейса |
|---|---|---|
| Нажатие на кнопку «Вход» | Вывод формы для ввода логина и пароля | Модальное окно |
| Ввод логина и пароля | Проверка учётных данных | Поля ввода |
| … | … | … |
Б. Раскадровка интерфейса (Storyboard)
Выполните раскадровку интерфейса для 3-5 основных сценариев:
- Нарисуйте последовательность экранов (wireframes)
- Покажите переходы между экранами
- Опишите элементы управления и их назначение
В. Принципы проектирования
Проверьте спроектированный интерфейс на соответствие принципам:
| Принцип | Вопрос для проверки | Соблюдён? |
|---|---|---|
| Видимость | Пользователь видит доступные действия? | |
| Обратная связь | Система отвечает на каждое действие? | |
| Ограничения | Невозможные действия заблокированы? | |
| Соответствие | Элементы выглядят как привычные? | |
| Предотвращение ошибок | Есть подтверждение опасных действий? |
Результаты
Раскадровка интерфейса c указанием всех доступных функций
Критерии оценивания
- Таблица «Действие — Отклик» покрывает все ключевые сценарии
- Раскадровка включает все основные экраны
- Переходы между экранами логичны и понятны
- Соблюдены принципы видимости и обратной связи
- Интерфейс учитывает потребности целевой аудитории