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

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

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

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

Определение функциональных и информационных элементов Человеко-центрированное проектирование ПО. Лекция № Информационные элементы (ИЭ)– фундаментальные объекты интерактивных продуктов, с которыми работает пользователь продукта. См. объектную модель. Функциональные элементы (ФЭ)– операции, которые могут выполняться над информационными объектами и элементами интерфейса, представляющими эти объекты. ИЭ и ФЭ Требования (сценарии) Цели и ментальные модели пользователей Принципы и шаблоны проектирования

Определение функциональных групп и иерархических связей между ними Человеко-центрированное проектирование ПО. Лекция № Группировка элементов с учётом: – контекстных сценариев (соответствия рабочему процессу персонажа); – совместного использования элементов в ходе решения одной рабочей задачи персонажа; – последовательного использования при пошаговом рабочем процессе персонажа; – технологической платформы продукта (размер экрана, форм- фактора, способов управления); Изучение ключевых состояний или экранов продукта – представлений продукта. Распределение ИЭ и ФЭ по высокоуровневым контейнерам: экранам, фреймам и панелям. Использование принципов и шаблонов проектирования.

Пример «ЭБ Яуза». ФЭ поиска по электронному каталогу для Андрея (с приоритетами) Человеко-центрированное проектирование ПО. Лекция №

Пример «ЭБ Яуза». ФЭ поиска по электронному каталогу для Владимира Александровича (с приоритетами) (1) Человеко-центрированное проектирование ПО. Лекция № «для заказа» добавлено по политическим соображениям (и для Павла)

Пример «ЭБ Яуза». ФЭ поиска по электронному каталогу для Владимира Александровича (с приоритетами) (2) Человеко-центрированное проектирование ПО. Лекция №

Пример «ЭБ Яуза». Группировка ФЭ поиска с учётом приоритетов ключевых персонажей Человеко-центрированное проектирование ПО. Лекция №7. 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример «ЭБ Яуза». Навигационная модель. Сценарий Андрея №1 Человеко-центрированное проектирование ПО. Лекция №7. 30 Гл. стр. Сц. №1 список дисциплинреком. лит. список изд. Андрей издание фонд загрузка

Пример «ЭБ Яуза». Навигационная модель. Сценарий Владимира Александровича №1 Человеко-центрированное проектирование ПО. Лекция №7. 31 Гл. стр. новости Сц. №1 БД EBSCO список рефератов поиск в РЖ внеш. ресурс реферат фонд В. А.

Пример «ЭБ Яуза». Навигационная модель. Сценарий Павла №2 Человеко-центрированное проектирование ПО. Лекция №7. 32 Гл. стр. поиск Сц. №2 список журналов обратная связь подписка на новости Павел