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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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