1. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Учебный курс Московский Городской Психолого-Педагогический университет Факультет «Информационных Технологий» Преподаватель: Алина Зотова Лекция № 4 : Прототипирование.
2. Процесс проектирования интерфейса Анализ Проектирование Реализация Внедрение Анализ бизнес-процессов и деятельности пользователей Формализация информации в виде диаграмм бизнес-процессов и сценариев Выработка концепции Прототипирование интерфейса Уточнение прототипов Тестирование с пользователями Получение обратной связи от пользователей и ее анализ
3. Цель урока Формирование представления о методе прототипирования на бумаге и условиях его наиболее эффективного использования
4.
5. Прототип - это Прототип : (от греч. protos — первый и typos — отпечаток, оттиск) — прообраз, образец, оригинал. Прототип — модель, работающая модель, опытный образец устройства или детали. Бумажное прототипирование – создание прототипа из бумаги и/или на бумаге
8. Зачем нужен? Быстрое получение обратной связи от пользователей Акцент на взаимодействие человека и устройства, а не на реализацию Когда использовать? Когда не важно время реакции системы Когда нужна высокоуровневая обратная связь
9. Преимущества Пользователь чувствует себя более комфортно, больше возможности для установления контакта и погружения в деятельность Незаконченное провоцирует творчество, больше обратной связи, активное додумывание и переделывание Пользователь не придирается к мелочам, так как принимает правила игры
10. Преимущества Быстро Дешево Выявляет высокоуровневые проблемы Больше фидбека лучшего качества Помогает думать более творчески Пользователи и команда вовлечены в процесс на ранней стадии Поощряет работу в команде и коммуникацию Предотвращает разногласия
11. Бумага не идеал С колько времени экран будет загружаться или обновляться Работу горизонтальной или вертикальной прокрутки Специфические цвета, изображения, шрифты Невозможно проследить:
12.
13. Процесс проектирования Анализ деятельности пользователей и формализация информации в виде сценариев Концептуальное проектирование Прототипирование интерфейса Тестирование с пользователями
14. Цель этапа прототипирования Объединить результаты стадии анализа, составления сценариев и концепции в прототипе будущего интерфейса для дальнейшего тестирования его с пользователями (возможны различные уровни детализации)
21. Статусы элементов интерфейса Enable Все поля доступны для редактирования Disable Поля не участвуют в текущем контексте, недоступны для чтения, копирования и редактирования Read-only Поля доступны для прочтения и копирования, изменять нельзя Hide Поля не участвуют в задаче или запрещены для данной роли
25. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Прототип на бумаге : как? 4. Дополнить макеты второстепенными динамическими элементами А потом перерисовать эскизы на большие листы (1 лист = 1 состояние экрана)
26. Обязательно Реальные данные в названиях элементов управления и в значимых для сценария текстах Обеспечить с помощью набросков все основные и побочные варианты поведения прототипа Визуализировать все сценарии, но с той степенью детализации, которая позволит не терять лишнего времени на ненужные подробности
27. Насколько подробным должен быть прототип на бумаге? Может выглядеть как набросок Может быть черно-белым, двуцветным, или трехцветным Длинный текст может быть заменен на пару предложений типа « Lorem ipsum », если значение текста не несет полезной для прохождения сценария информации
28. Отвечаем на вопросы Какую информацию предоставить пользователю? В какой последовательности? Как ее расположить? Какие выбрать элементы управления? Как их изобразить?
29. Прототип на бумаге : как? 5. Проверить набор элементов на полноту и соответствие сценарию Проиграть сценарии использования в команде проектировщиков, используя подготовленные прототипы.
30. Результат Набор экранов, форм и элементов управления, составляющих модель работающего устройства с основными функциями