Лабораторная работа: Построение прототипа веб-приложения на бумаге

Цель:
Научиться создавать более детализированный прототип веб-приложения на бумаге, используя пользовательские сценарии и элементы интерфейса для визуализации структуры и функциональности приложения.

Критерии оценивания:

• Применяет навыки построения прототипа.
• Отображает все ключевые элементы интерфейса на бумажном прототипе.
• Учитывает взаимодействие пользователя с элементами интерфейса.

Ход работы:

1. Подготовительный этап:

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

2. Определение цели прототипа:

1. • Определите назначение приложения (например, интернет-магазин, приложение для бронирования).
   • Разбейте задачи на ключевые пользовательские сценарии:
     • Регистрация и вход.
     • Просмотр каталога товаров/услуг.
     • Добавление в корзину или бронирование.

3. Построение схемы страниц:

1. • Начните с главной страницы:
     • Укажите элементы: логотип, меню, поиск, основное содержимое.
   • Продолжите с внутренних страниц:
     • Каталог (список товаров/услуг).
     • Карточка товара.
     • Страница регистрации/входа.
     • Личный кабинет или корзина.
   • Для каждой страницы прорисуйте элементы интерфейса (кнопки, поля ввода, заголовки, текстовые блоки).

4. Учет взаимодействий:

1. • Используйте стрелки и аннотации, чтобы показать, как пользователь переходит между страницами.
   • Например:
     • Кнопка «Вход» на главной странице → Страница авторизации.
     • Клик по карточке товара → Страница товара.

5. Детализация прототипа:

1. • Добавьте функциональные детали:
     • Описание кнопок (например, «Добавить в корзину»).
     • Места для отображения сообщений об ошибках (например, «Неверный пароль»).
   • Обозначьте интерактивные элементы (подчеркивания ссылок, выделение активных кнопок).

6. Проверка и доработка:

1. • Проверьте, соответствуют ли все элементы заданию и требованиям.
   • Пройдите основные пользовательские сценарии, чтобы убедиться, что прототип логичен и функционален.
   • Получите обратную связь от коллег или преподавателя, внесите исправления.

7. Оформление работы:

1. • Соберите все страницы прототипа в виде набора изображений.
   • Составьте отчет, включающий:
     • Краткое описание приложения и целей прототипа.
     • Сценарии взаимодействия пользователей.
     • Фото или сканированные версии прототипа.

Пример задания:
Создайте бумажный прототип приложения для бронирования билетов:

• Главная страница с полем поиска (например, даты и направления).
• Страница результатов поиска с фильтрами и списком доступных вариантов.
• Страница деталей билета с описанием и кнопкой «Забронировать».
• Форма регистрации/входа.

Советы:

• Ориентируйтесь на интуитивно понятный интерфейс.
• Упрощайте элементы там, где это возможно, чтобы не перегружать дизайн.
• Используйте понятные обозначения, например, иконки корзины, стрелки для переходов.

Ожидаемый результат:

• Детализированный бумажный прототип с отображением всех страниц и элементов интерфейса.
• Логичные переходы между страницами, отображенные стрелками.