Курс по проектированию пользовательских интерфейсов в МГППУ

1. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Учебный курс Московский Городской Психолого-Педагогический университет Факультет «Информационных Технологий» Преподаватель: Алина Зотова Лекция № 4 : Прототипирование.

2. Процесс проектирования интерфейса Анализ Проектирование Реализация Внедрение Анализ бизнес-процессов и деятельности пользователей Формализация информации в виде диаграмм бизнес-процессов и сценариев Выработка концепции Прототипирование интерфейса Уточнение прототипов Тестирование с пользователями Получение обратной связи от пользователей и ее анализ

3. Цель урока Формирование представления о методе прототипирования на бумаге и условиях его наиболее эффективного использования

5. Прототип - это Прототип : (от греч. protos — первый и typos — отпечаток, оттиск) — прообраз, образец, оригинал. Прототип — модель, работающая модель, опытный образец устройства или детали. Бумажное прототипирование – создание прототипа из бумаги и/или на бумаге

7. Html Среда объектно-ориентированного программирования Графический редактор Прототипирование на бумаге Среда создания прототипа

8. Зачем нужен? Быстрое получение обратной связи от пользователей Акцент на взаимодействие человека и устройства, а не на реализацию Когда использовать? Когда не важно время реакции системы Когда нужна высокоуровневая обратная связь

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

10. Преимущества Быстро Дешево Выявляет высокоуровневые проблемы Больше фидбека лучшего качества Помогает думать более творчески Пользователи и команда вовлечены в процесс на ранней стадии Поощряет работу в команде и коммуникацию Предотвращает разногласия

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

13. Процесс проектирования Анализ деятельности пользователей и формализация информации в виде сценариев Концептуальное проектирование Прототипирование интерфейса Тестирование с пользователями

14. Цель этапа прототипирования Объединить результаты стадии анализа, составления сценариев и концепции в прототипе будущего интерфейса для дальнейшего тестирования его с пользователями (возможны различные уровни детализации)

15. Читаемость и контраст

16. Организация элементов в пространстве TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

17. Объект и фон

18. Объект и фон

21. Статусы элементов интерфейса Enable Все поля доступны для редактирования Disable Поля не участвуют в текущем контексте, недоступны для чтения, копирования и редактирования Read-only Поля доступны для прочтения и копирования, изменять нельзя Hide Поля не участвуют в задаче или запрещены для данной роли

23. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Прототип на бумаге : как? 2. Из информационных блоков составить макеты каждого вида экрана

25. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Прототип на бумаге : как? 4. Дополнить макеты второстепенными динамическими элементами А потом перерисовать эскизы на большие листы (1 лист = 1 состояние экрана)

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

27. Насколько подробным должен быть прототип на бумаге? Может выглядеть как набросок Может быть черно-белым, двуцветным, или трехцветным Длинный текст может быть заменен на пару предложений типа « Lorem ipsum », если значение текста не несет полезной для прохождения сценария информации

28. Отвечаем на вопросы Какую информацию предоставить пользователю? В какой последовательности? Как ее расположить? Какие выбрать элементы управления? Как их изобразить?

29. Прототип на бумаге : как? 5. Проверить набор элементов на полноту и соответствие сценарию Проиграть сценарии использования в команде проектировщиков, используя подготовленные прототипы.

30. Результат Набор экранов, форм и элементов управления, составляющих модель работающего устройства с основными функциями

31. Проектирование пользовательских интерфейсов Наш основной учебный ресурс http://ergogames.pbworks.com/ Адрес моей электронной почты [email_address] . com ИТ МГППУ 2009 г.

32. Проектирование пользовательских интерфейсов ИТ МГППУ 2009 г. Информационные источники Юзабилити в Википедии ( http:// ru.wikipedia.org / wiki /Usability ) Один из самых первых информационных ресурсов, поддерживающий сообщество проектировщиков интерфейсов Usability.ru ( http://www.usability.ru/glossary.htm#UI ) Русское отделение ACM SigCHI – RusCHI ( http://ruschi.ru/index_ru.htm ) Тематический блог на habrahabr .ru ( http://habrahabr.ru/blogs/ui_design_and_usability/ ) Сообщество в ЖЖ: ru_ucdesign ( http://livejournal.com/community/ru_ucdesign/ ) Блоги о дизайне интерфейсов: события, идеи, методы, обсуждения ( G ui.ru и fresh.gui.ru ) Неформальное профессиональное сообщество проектировщиков пользовательских интерфейсов ( http://friendfeed.com/ruschi ) Основные понятия: «Терминологические войны», Иван Дегтяренко ( http://www.gui.ru/ivan/terminilogy_wars_1 )