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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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