1. Учебный курс «Человеко-центрированное проектирование ПО» Преподаватель: к. т. н. Пескова Ольга Вадимовна

2. Лекция №6 Концептуальное проектирование Разработка инфраструктуры пользовательского интерфейса

3. Место в общем плане проектирования Человеко-центрированное проектирование ПО. Лекция №6. 3

4. Разработка общей инфраструктуры пользовательского интерфейса Человеко-центрированное проектирование ПО. Лекция №6. 4 Результат: грубые наброски экранов и вариантов поведения Инфраструктура взаимодействия Результат: детальный макет типовых экранов Визуальная инфраструктура Результат: форма (физическая модель) Физическая инфраструктура

5. Инфраструктура взаимодействия. Этапы Человеко-центрированное проектирование ПО. Лекция №6. 5 Процесс имеет итерационный характер. Порядок этапов с 3-его по 5-ый зависит от стиля мышления проектировщика. Определение технической платформы, форм-фактора, типа приложения и способов управления 1 Разработка информационной архитектуры 2 Создание ключевых сценариев (навигационной модели) 3 Определение функциональных и информационных элементов Определение функциональных групп и иерархических связей между ними 4 Макетирование инфраструктуры взаимодействия 5 Создание и выполнение проверочных сценариев для верификации решений 6

6. Инфраструктура взаимодействия. Монопольный тип интерфейса Человеко-центрированное проектирование ПО. Лекция №6. 6 1

7. Инфраструктура взаимодействия. Временный тип интерфейса Человеко-центрированное проектирование ПО. Лекция №6. 7 1

8. Инфраструктура взаимодействия. Фоновый тип интерфейса Человеко-центрированное проектирование ПО. Лекция №6. 8 1

9. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса Человеко-центрированное проектирование ПО. Лекция №6. 9 1

10. Инфраструктура взаимодействия. «Настольные» приложения Человеко-центрированное проектирование ПО. Лекция №6. 10 1 монопольный, временный, фоновый.

11. Инфраструктура взаимодействия. Продукты в веб-среде Человеко-центрированное проектирование ПО. Лекция №6. 11 1 информационные веб-сайты; сервисные веб-сайты; веб-приложения; интернет-приложения. баланс между монопольным и временным типом

12. Инфраструктура взаимодействия. Информационные веб-сайты Человеко-центрированное проектирование ПО. Лекция №6. 12 1

13. Инфраструктура взаимодействия. Сервисные веб-сайты Человеко-центрированное проектирование ПО. Лекция №6. 13 1

14. Инфраструктура взаимодействия. Веб-приложения Человеко-центрированное проектирование ПО. Лекция №6. 14 1

15. Инфраструктура взаимодействия. Интернет-приложения Человеко-центрированное проектирование ПО. Лекция №6. 15 RSS-reader 1

16. Инфраструктура взаимодействия. Встроенные системы и портативные устройства Человеко-центрированное проектирование ПО. Лекция №6. 16 Palm’s Tungsten T Apple iPod Платёжные терминалы Автомобильная приборная панель Nissan Connect Информационные киоски 1

17. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (1) Человеко-центрированное проектирование ПО. Лекция №6. 17 Пример видоизменения одного приложения в зависимости от: 1)целей пользователя; 2)содержания работы пользователя (вовлечённости); 3)технической платформы. 1 Добавим третье измерение – «содержание работы» : решает одну простую задачу («утилита»); ПО для рабочего процесса («работа»); увлекательный и/или игровой процесс («погружение»).

18. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (2) Человеко-центрированное проектирование ПО. Лекция №6. 18 1 Обычный режим Microsoft OneNote 2010 — цифровая записная книжка, в которой можно: собрать все заметки, сведения из различных источников, снимки экрана и др. в виде записных книг; использовать механизм поиска; организовывать совместную работу. Вариант №1.

19. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (3) Человеко-центрированное проектирование ПО. Лекция №6. 19 1 Штатный режим "заметки на полях" Microsoft OneNote 2010 — быстрое создание простой текстовой заметки с сохранением в Неподшитые заметки. Вариант №2.

20. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (4) Человеко-центрированное проектирование ПО. Лекция №6. 20 1 Microsoft OneNote web application - хранение и работа заметок в глобальной сети. Вариант №3.

21. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (5) Человеко-центрированное проектирование ПО. Лекция №6. 21 1 Microsoft OneNote Mobile 2010 для Windows® phone. Думаю, особенно полезны рукописные заметки + возможность их преобразования (если она достойно реализована). Вариант №4.

22. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (6) Человеко-центрированное проектирование ПО. Лекция №6. 22 1 Microsoft OneNote. Предположение. OneNote мог бы вести себя как демон, например, фоном отслеживая поведение других пользователей в совместных записных книгах и создавая оповещения об этих изменениях. Вариант №5.

23. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (7) Человеко-центрированное проектирование ПО. Лекция №6. 23 1 Microsoft OneNote. Предположение. Легко представить, что процесс систематизации накопленных заметок и прочих сведений совместно с механизмами рецензирования и "связанных заметок" превратят взаимодействие в суверенный тип. Вариант №6.

24. Инфраструктура взаимодействия. Техническая платформа и тип интерфейса. Пример (8) Человеко-центрированное проектирование ПО. Лекция №6. 24 1 Microsoft OneNote. Фантастическое предположение. Накопленные заметки и сведения автоматических систематизировались бы и представлялись бы в форме, например, по технологии подобной MS Pivot - погружение в "красочный мир" манипуляции данными. Вариант №7. http://www.getpivot.com/

25. Информационная архитектура. Пример Человеко-центрированное проектирование ПО. Лекция №6. 25 2 © Розенфельд Л., Морвиль П.

26. Информационная архитектура. Основные компоненты Человеко-центрированное проектирование ПО. Лекция №6. 26 2 Системы организации контента – способы распределения информации по категориям. Система именования - терминологические способы передачи информации, например, употребление специализированной или обыденной лексики. Система навигации - способы просмотра или передвижения по информации. Системы поиска - способы поиска информации, например, путём выполнения поискового запроса или с помощью указателя.

27. Информационная архитектура. Пример основных компонент ИА Человеко-центрированное проектирование ПО. Лекция №6. 27 2 © Розенфельд Л., Морвиль П.

28. Информационная архитектура. Системы организации контента Человеко-центрированное проектирование ПО. Лекция №6. 28 2 Системы организации контента Схемы организациичёткиехронологическиеалфавитныегеографическиенечёткиетематическиепо задачампо аудиториямметафорическиегибридные Структуры организации иерархическиегипертекстовые

29. Информационная архитектура. Системы именования (обозначения) Общие принципы выбора обозначений: 1)фокус на конкретном содержимом, на пользователях и на контексте (категоризация содержимого должна отражать его модель с т. з. пользователя); 2)по возможности сужение аудитории и использование её языка; 3)нужны не просто обозначения, а последовательные системы обозначений. Критерии качества названий: 1)выразительность/описательность; 2)различимость ; 3)однородность; 4)сбалансированность; 5)повторяемость. Человеко-центрированное проектирование ПО. Лекция №6. 29 2 Обозначения текстовые заголовки обозначения системы навигации контекстные ссылки термины указателя значки

30. Информационная архитектура. Системы навигации Человеко-центрированное проектирование ПО. Лекция №6. 30 2 Системы навигации встроенные глобальныелокальные контекстно- зависимые вспомогательные Вспомогательные системы Встроенные системы © Розенфельд Л., Морвиль П.

31. Информационная архитектура. Системы поиска Человеко-центрированное проектирование ПО. Лекция №6. 31 2 Общее представление об организации работы поисковой системы © Розенфельд Л., Морвиль П.

32. Информационная архитектура. Карточная сортировка Человеко-центрированное проектирование ПО. Лекция №6. 32 2

33. Информационная архитектура. Карточная сортировка Человеко-центрированное проектирование ПО. Лекция №6. 33 2 НазначениеВыяснение, какие родственные связи видят пользователи между понятиями или объектами системы. Область применения проектирование информационной архитектуры продукта; проверка и согласование выбранной информационной архитектуры; создание таксономий; взаиморасположение блоков содержимого и/или элементов управления в интерфейсе. Подвиды открытая; закрытая. Выходные данные для закрытого подвида: таблица «карточка-категория» – процент респондентов, разместивших i-ую карточку в j-ую категорию; для открытого подвида: – перечень категорий (групп) исследуемых понятий; – дендрограмма выявленных категорий; – таблица «карточка-карточка» – вероятность принадлежности i-ой и j- ой карточек к одной категории. Сложность проведения низкие затраты на организацию и проведение мероприятия; затраты на анализ результатов зависят от подвида карточной сортировки, от инструмента, с помощью которого проводится сортировка, от числа карточек и числа участников.

34. Пример «ЭБ Яуза». Карточная сортировка. Проведение мероприятия с Websort.net Человеко-центрированное проектирование ПО. Лекция №6. 34 http://websort.net/s/948910/

35. Пример «ЭБ Яуза». Карточная сортировка. Анализ результатов с Websort.net (1) Человеко-центрированное проектирование ПО. Лекция №6. 35

36. Пример «ЭБ Яуза». Карточная сортировка. Анализ результатов с Websort.net (2) Человеко-центрированное проектирование ПО. Лекция №6. 36

37. Пример «ЭБ Яуза». Карточная сортировка. Анализ результатов с Websort.net (3). Дендрограмма карточек Человеко-центрированное проектирование ПО. Лекция №6. 37 Срез – 12 кластеров

38. Пример «ЭБ Яуза». Визуализация информационной архитектуры Человеко-центрированное проектирование ПО. Лекция №6. 38 Главная Поиск по запросу по рубрикам по РЖ ВИНИТИ Рекомендованная литература Внешние ресурсы зарубежные ресурсы полезные ссылки ресурсы МГТУ О библиотеке новости новые поступления ЧаВо обратная связь Личный кабинет избранное заказы «на руках» персональные данные Схема организации: основная – по задачам; доп. – по тематикам. Структура организации: основная – широкая иерархическая.

39. Информационная архитектура. Документация. Концептуальные схемы (blueprints). Пример Человеко-центрированное проектирование ПО. Лекция №6. 39 2 Схема высокого уровня © Розенфельд Л., Морвиль П. Частная схема (навигация по географическим узлам на Weather Channel)

40. Информационная архитектура. Документация. Каркасы (wireframes). Пример (1) Человеко-центрированное проектирование ПО. Лекция №6. 40 2 Каркас главной страницы сайта поздравительных открыток (макет) © Розенфельд Л., Морвиль П.

41. Информационная архитектура. Документация. Каркасы (wireframes). Пример (2) Человеко-центрированное проектирование ПО. Лекция №6. 41 2 Каркас отдельной группы ФЭ сайта поздравительных открыток (раскадровка) © Розенфельд Л., Морвиль П.

42. Информационная архитектура. Документация. Моделирование содержимого и инвентарь. Примеры Человеко-центрированное проектирование ПО. Лекция №6. 42 2 Модель содержимого для рецептов сайта Epicurious.com © Розенфельд Л., Морвиль П. IDНазваниеТипСодержаниеПримечание 0ГлавнаяДомашняя страница Список новостей и категорий Новости из основных 5 тем должны быть выделены, текста не меньше абзаца 1Тема новости Подкатегория, домашняя страница Список новостей и подтем, описание темы Описание темы должно быть снабжено иллюстрацией, объём текста не менее абзаца Инвентарь контента (содержимого) новостного сайта (пример) © Usabilitylab

43. Информационная архитектура. Документация. Моделирование содержимого и инвентарь. Примеры Человеко-центрированное проектирование ПО. Лекция №6. 43 2 Epicurious.com