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

Учебный курс
«Проектирование интерфейса
пользователя»
Преподаватель:
к. т. н. Пескова Ольга Вадимовна
Лекция №7
Концептуальное
проектирование
Разработка инфраструктуры
пользовательского интерфейса
Место в общем плане проектирования
1
Исследование
пользователей, предметной
области
2
Собранные данные
Стратегия дизайна
Профили групп
Моделирование
Персонажи
Контекстные сценарии
пользователей и контекстов
использования
3
Выработка требований
к проектированию
пользовательских, бизнеса и
технологических
Функциональные,
информационные
требования
4
Информационная архитектура
Общая структура взаимодействия
Сценарии ключевого пути
Проверочные сценарии
Концепция пользовательского интерфейса
Оценка/проверка
Концептуальное
проектирование
общей структуры и
взаимодействия
продукта
5
Детальное
проектирование
поведения, формы и
наполнения
Спецификации
формы, поведения и
содержания
6
Спецификации
программной системы
Выработка требований
к разработке
Проектирование интерфейса пользователя. Лекция №7.
3
Инфраструктура взаимодействия. Этапы
1
• Определение форм-фактора, типа приложения и
способов управления
2
• Разработка информационной архитектуры
3
• Создание ключевых сценариев: начало (навигационные
модели, диаграмма путей)
4
• Создание ключевых сценариев: завершение
(функциональные и информационные элементы, их группы
и взаимосвязей между ними; интерактивные раскадровки)
5
• Макетирование общей инфраструктуры взаимодействия
6
• Создание и выполнение проверочных сценариев для
верификации решений
Процесс имеет итерационный характер.
Порядок этапов с 3-его по 6-ый зависит от стиля мышления проектировщика.
Проектирование интерфейса пользователя. Лекция №7.
4
2
Информационная архитектура. Пример
© Розенфельд Л.,
Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
5
2
Информационная архитектура.
Основные компоненты
• Системы организации контента – способы
распределения информации по категориям.
• Система именования - терминологические
способы передачи информации.
• Система навигации - способы просмотра или
передвижения по информации.
• Системы поиска - способы поиска информации.
Проектирование интерфейса пользователя. Лекция №7.
6
2
Информационная архитектура.
Пример основных компонент ИА
© Розенфельд Л.,
Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
7
2
Информационная архитектура.
Системы организации контента
хронологические
чёткие
алфавитные
географические
Схемы организации
тематические
нечёткие
по задачам
Системы
организации
контента
гибридные
по аудиториям
иерархические
метафорические
Структуры
организации
гипертекстовые
Проектирование интерфейса пользователя. Лекция №7.
8
2
Информационная архитектура.
Системы организации контента. Примеры (1)
Проектирование интерфейса пользователя. Лекция №7.
9
2
Информационная архитектура.
Системы организации контента. Примеры (2)
http://onlife.alfabank.ru/
Проектирование интерфейса пользователя. Лекция №7.
10
Информационная архитектура.
Системы именования (обозначения)
2
Обозначения
текстовые
заголовки
обозначения
системы
навигации
контекстные
ссылки
значки
Общие принципы выбора обозначений:
1) категоризация содержимого должна
отражать его модель с т. з. пользователя;
2) по возможности сужение аудитории и
использование её языка;
3) нужны не просто обозначения, а
последовательные системы обозначений.
Критерии качества названий:
1) выразительность/описательность;
2) различимость;
3) сбалансированность;
4) повторяемость.
термины
указателя
Проектирование интерфейса
пользователя. Лекция №7.
11
2
Информационная архитектура.
Системы именования (обозначения). Примеры (1)
Общепринятые соглашения для обозначения системы навигации
Проектирование интерфейса пользователя. Лекция №7.
12
2
Информационная архитектура.
Системы именования (обозначения). Примеры (2)
Проектирование интерфейса
пользователя. Лекция №7.
13
2
Информационная архитектура.
Системы навигации
Встроенные системы
глобальные
встроенные
Системы
навигации
локальные
контекстнозависимые
вспомогательные
Вспомогательные системы
© Розенфельд Л., Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
14
2
Информационная архитектура. Системы навигации.
Встроенные системы. Пример (1)
http://www.epicurious.com/
Проектирование интерфейса пользователя. Лекция №7.
15
2
Информационная архитектура. Системы навигации.
Вспомогательные системы. Пример (2)
http://yogajournal.ru/
http://www.epicurious.com/
Проектирование интерфейса пользователя. Лекция №7.
16
2
Информационная архитектура.
Системы поиска
Общее представление об организации работы поисковой системы
© Розенфельд Л., Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
17
2
Информационная архитектура.
Системы поиска
Проектирование интерфейса пользователя. Лекция №7.
18
2
Информационная архитектура.
Карточная сортировка
Проектирование интерфейса пользователя. Лекция №7.
19
Информационная архитектура.
Карточная сортировка
2
Назначение
Выяснение, какие родственные связи видят пользователи между понятиями
или объектами системы.
Область
применения
• проектирование информационной архитектуры продукта;
• проверка и согласование выбранной информационной архитектуры;
• создание таксономий;
• взаиморасположение блоков содержимого и/или элементов управления в
интерфейсе.
Подвиды
• открытая;
• закрытая.
Выходные
данные
• для закрытого подвида: таблица «карточка-категория» – процент
респондентов, разместивших i-ую карточку в j-ую категорию;
• для открытого подвида:
– перечень категорий (групп) исследуемых понятий;
– дендрограмма выявленных категорий;
– таблица «карточка-карточка» – вероятность принадлежности i-ой и jой карточек к одной категории.
Сложность
проведения
• низкие затраты на организацию и проведение мероприятия;
• затраты на анализ результатов зависят от подвида карточной сортировки,
от инструмента, с помощью которого проводится сортировка, от числа
карточек и числа участников.
Проектирование интерфейса пользователя. Лекция №7.
20
Пример «ЭБ Яуза». Карточная сортировка.
Проведение мероприятия с Websort.net
http://websort.net/s/948910/
Проектирование интерфейса пользователя. Лекция №7.
21
Пример «ЭБ Яуза». Карточная сортировка.
Анализ результатов с Websort.net (1)
Проектирование интерфейса пользователя. Лекция №7.
22
Пример «ЭБ Яуза». Карточная сортировка.
Анализ результатов с Websort.net (2)
Проектирование интерфейса пользователя. Лекция №7.
23
Пример «ЭБ Яуза». Карточная сортировка.
Анализ результатов с Websort.net (3). Дендрограмма карточек
Срез – 12 кластеров
Проектирование интерфейса пользователя. Лекция №7.
24
Пример «ЭБ Яуза».
Визуализация информационной архитектуры
Главная
Поиск
Рекомендованная
литература
Внешние
ресурсы
О библиотеке
Личный
кабинет
по запросу
зарубежные
ресурсы
новости
избранное
по рубрикам
полезные
ссылки
новые
поступления
заказы
по РЖ ВИНИТИ
ресурсы МГТУ
ЧаВо
«на руках»
обратная связь
персональные
данные
Схема организации: основная – по задачам; доп. – по тематикам.
Структура организации: основная – широкая иерархическая.
Проектирование интерфейса пользователя. Лекция №7.
25
2
Информационная архитектура.
Документация
 Нет универсальной диаграммы, отражающей все аспекты
информационной архитектуры.
 Наиболее распространены следующие виды диаграмм:
• схемы/чертежи (blueprints), общие и частные;
• каркасы (wireframes), общие (макеты) и частные
(раскадровки);
• перечисление содержимого (модели и инвентарь
контента).
Проектирование интерфейса пользователя. Лекция №7.
26
2
Информационная архитектура. Документация.
Концептуальные схемы (blueprints). Пример (1)
Схема высокого уровня
Частная схема (навигация по
географическим узлам на
Weather Channel)
© Розенфельд Л., Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
27
2
Информационная архитектура. Документация.
Каркасы (wireframes). Пример (1)
Каркас главной страницы сайта поздравительных открыток (макет)
© Розенфельд Л., Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
28
2
Информационная архитектура. Документация.
Каркасы (wireframes). Пример (2)
Каркас отдельной группы ФЭ сайта поздравительных открыток (раскадровка)
© Розенфельд Л., Морвиль П.
Проектирование интерфейса пользователя. Лекция №7.
29
Информационная архитектура. Документация.
Моделирование содержимого и инвентарь. Примеры
2
Модель содержимого для рецептов сайта Epicurious.com
© Розенфельд Л., Морвиль П.
Инвентарь контента (содержимого) новостного сайта (пример)
ID
Название
Тип
Содержание
Примечание
0
Главная
Домашняя
страница
Список новостей
и категорий
Новости из основных 5 тем должны
быть выделены, текста не меньше
абзаца
1
Тема
новости
Подкатегория,
домашняя
страница
Список новостей
и подтем,
описание темы
Описание темы должно быть
снабжено иллюстрацией, объём
текста не менее абзаца
© Usabilitylab
Проектирование интерфейса пользователя. Лекция №7.
30
Инфраструктура взаимодействия. Этапы
1
• Определение форм-фактора, типа приложения и
способов управления
2
• Разработка информационной архитектуры
3
• Создание ключевых сценариев: начало (навигационные
модели, диаграмма путей)
4
• Создание ключевых сценариев: завершение
(функциональные и информационные элементы, их группы
и взаимосвязей между ними; интерактивные раскадровки)
5
• Макетирование общей инфраструктуры взаимодействия
6
• Создание и выполнение проверочных сценариев для
верификации решений
Процесс имеет итерационный характер.
Порядок этапов с 3-его по 6-ый зависит от стиля мышления проектировщика.
Проектирование интерфейса пользователя. Лекция №7.
31
3
Навигационная модель по сценариям
Назначение
Визуализация навигации персонажа по
продукту в рамках конкретного сценария
взаимодействия.
Процедура
– для каждого персонажа:
– по каждому его сценарию:
1) расположить на листе персонаж и
обозначить место продукта;
2) «от руки» нанести пути
перемещения персонажа по продукту в
рамках данного сценария;
3) руководствоваться выработанной
информационной архитектурой.
Инструменты
• бумага и карандаш.
Проектирование интерфейса пользователя. Лекция №7.
32
Пример «ЭБ Яуза». Навигационная модель.
Сценарий Андрея №1
Сц. №1
реком. лит.
Андрей
Гл.
стр.
список дисциплин
список изд.
издание
загрузка
Проектирование интерфейса пользователя. Лекция №7.
фонд
33
Пример «ЭБ Яуза». Навигационная модель для Андрея
(по контекстным сценариям)
Проектирование интерфейса пользователя. Лекция №7.
34
Пример «ЭБ Яуза». Навигационная модель.
Сценарий Владимира Александровича №1
Сц. №1
новости
список рефератов
В. А.
Гл.
стр.
поиск в РЖ
внеш. ресурс
реферат
фонд
БД EBSCO
Проектирование интерфейса пользователя. Лекция №7.
35
Пример «ЭБ Яуза». Навигационная модель для Владимира
Александровича (по контекстным сценариям)
Проектирование интерфейса пользователя. Лекция №7.
36
Пример «ЭБ Яуза». Навигационная модель.
Сценарий Павла №2
Сц. №2
поиск
Павел
Гл.
стр.
список журналов
обратная связь
подписка на новости
Проектирование интерфейса пользователя. Лекция №7.
37
Пример «ЭБ Яуза». Навигационная модель для Павел
(по контекстным сценариям)
Проектирование интерфейса пользователя. Лекция №7.
38
3
Диаграмма путей
Назначение
Визуализация типовых маршрутов в продукте для
всех персонажей.
Область
применения
•
•
Процедура
ранняя стадия проектирования интерактивного
взаимодействия;
проектирование последовательности операций.
1) Разметить на листе пространство для диаграммы
(место продукта);
2) По границам продукта выстроить персонажей;
3) Отобразить разными цветами навигационные
модели персонажей.
4) Определить, сходства/различия маршрутов
разных персонажей;
5) Проверить полноту и непротиворечивость
сценариям.
Инструменты доска/бумага/MS Visio/др.
Проектирование интерфейса пользователя. Лекция №7.
39
Пример «ЭБ Яуза». Диаграмма путей
(неполная, из предыдущих примеров)
Андрей
В. А.
реком. лит.
список дисциплин
новости список журналов
список список док.
поиск
рефератов
Гл.
поиск в РЖ
документ
стр.
реферат
обр. связь
фонд
внеш. ресурс
загрузка
подписка на новости
Павел
БД EBSCO
Проектирование интерфейса пользователя. Лекция №7.
40
Пример «ЭБ Яуза». Диаграмма путей
(полная, один-к-одному по сценариям)
Проектирование интерфейса пользователя. Лекция №7.
41
Пример «ЭБ Яуза». Диаграмма путей (полная, расширенная)
Проектирование интерфейса пользователя. Лекция №7.
42
Примеры альтернативных схем. Схема от 37Signals.
© 37Signals
(http://37signals.com/svn/posts/1926a-shorthand-for-designing-ui-flows)
Отправка требований для создания учётной записи нового пользователя
Log-in flow
Проектирование интерфейса пользователя. Лекция №7.
43
Примеры альтернативных схем.
Визуальный словарь Дж. Гаррета
MetaFilter.com
page1
Проектирование интерфейса пользователя. Лекция №7.
44