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

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

Место в общем плане проектирования Проектирование интерфейса пользователя. Лекция 7. 3

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

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

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

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

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

Информационная архитектура. Системы организации контента. Примеры (1) Проектирование интерфейса пользователя. Лекция

Информационная архитектура. Системы организации контента. Примеры (2) Проектирование интерфейса пользователя. Лекция

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

Информационная архитектура. Системы именования (обозначения). Примеры (1) Проектирование интерфейса пользователя. Лекция Общепринятые соглашения для обозначения системы навигации

Информационная архитектура. Системы именования (обозначения). Примеры (2) Проектирование интерфейса пользователя. Лекция

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

Информационная архитектура. Системы навигации. Встроенные системы. Пример (1) Проектирование интерфейса пользователя. Лекция

Информационная архитектура. Системы навигации. Вспомогательные системы. Пример (2) Проектирование интерфейса пользователя. Лекция

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

Информационная архитектура. Системы поиска Проектирование интерфейса пользователя. Лекция

Информационная архитектура. Карточная сортировка Проектирование интерфейса пользователя. Лекция

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

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

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

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

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

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

Информационная архитектура. Документация Проектирование интерфейса пользователя. Лекция Нет универсальной диаграммы, отражающей все аспекты информационной архитектуры. Наиболее распространены следующие виды диаграмм: схемы/чертежи (blueprints), общие и частные; каркасы (wireframes), общие (макеты) и частные (раскадровки); перечисление содержимого (модели и инвентарь контента).

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

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

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

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

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

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

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

Пример «ЭБ Яуза». Навигационная модель для Андрея (по контекстным сценариям) Проектирование интерфейса пользователя. Лекция 7. 34

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

Пример «ЭБ Яуза». Навигационная модель для Владимира Александровича (по контекстным сценариям) Проектирование интерфейса пользователя. Лекция 7. 36

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

Пример «ЭБ Яуза». Навигационная модель для Павел (по контекстным сценариям) Проектирование интерфейса пользователя. Лекция 7. 38

Диаграмма путей Проектирование интерфейса пользователя. Лекция НазначениеВизуализация типовых маршрутов в продукте для всех персонажей. Область применения ранняя стадия проектирования интерактивного взаимодействия; проектирование последовательности операций. Процедура1)Разметить на листе пространство для диаграммы (место продукта); 2)По границам продукта выстроить персонажей; 3)Отобразить разными цветами навигационные модели персонажей. 4)Определить, сходства/различия маршрутов разных персонажей; 5)Проверить полноту и непротиворечивость сценариям. Инструментыдоска/бумага/MS Visio/др.

Пример «ЭБ Яуза». Диаграмма путей (неполная, из предыдущих примеров) Проектирование интерфейса пользователя. Лекция Павел Гл. стр. список дисциплинреком. лит. список док. Андрей документ фонд загрузка В. А. новости БД EBSCO список рефератов поиск в РЖ внеш. ресурс реферат поиск список журналов обр. связь подписка на новости

Пример «ЭБ Яуза». Диаграмма путей (полная, один-к-одному по сценариям) Проектирование интерфейса пользователя. Лекция 7. 41

Пример «ЭБ Яуза». Диаграмма путей (полная, расширенная) Проектирование интерфейса пользователя. Лекция 7. 42

Примеры альтернативных схем. Схема от 37Signals. Проектирование интерфейса пользователя. Лекция © 37Signals ( a-shorthand-for-designing-ui-flows) a-shorthand-for-designing-ui-flows © 37Signals ( a-shorthand-for-designing-ui-flows) a-shorthand-for-designing-ui-flows Log-in flow Отправка требований для создания учётной записи нового пользователя

Проектирование интерфейса пользователя. Лекция MetaFilter.com page1 Примеры альтернативных схем. Визуальный словарь Дж. Гаррета