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

Учебный курс
«Проектирование интерфейса
пользователя»
Преподаватель:
к. т. н. Пескова Ольга Вадимовна
Лекция №11
Концептуальное
проектирование
Принципы и шаблоны проектирования
взаимодействия
(продолжение)
Место в общем плане проектирования
1
Исследование
пользователей, предметной
области
2
Собранные данные
Стратегия дизайна
Профили групп
Моделирование
Персонажи
Контекстные сценарии
пользователей и контекстов
использования
3
Выработка требований
к проектированию
пользовательских, бизнеса и
технологических
Функциональные,
информационные
требования
4
Информационная архитектура
Общая структура взаимодействия
Сценарии ключевого пути
Проверочные сценарии
Концепция пользовательского интерфейса
Оценка/проверка
Концептуальное
проектирование
общей структуры и
взаимодействия
продукта
5
Детальное
проектирование
поведения, формы и
наполнения
Спецификации
формы, поведения и
содержания
6
Спецификации
программной системы
Выработка требований
к разработке
Проектирование интерфейса пользователя. Лекция №11.
3
Категории рассматриваемых шаблонов проектирования
1
2
3
4
5
6
7
8
9
• Поведенческие шаблоны, или «чем занимаются люди»
• Информационная архитектура и структура приложения
• Ориентация на местности (навигация, указатели, поиск пути)
• Компоновка элементов страницы
• Действия и команды
• Информационная графика (деревья, таблицы, графики)
• Формы и элементы управления
• Компоновщики и редакторы
• Визуальный стиль
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
4
4
Компоновка элементов страницы
Основы компоновки страницы.
Факторы разметки страницы
1) визуальная иерархия;
2) визуальный поток;
3) группировка и выравнивание;
4) «динамические дисплеи».
Проектирование интерфейса пользователя. Лекция №11.
5
4
Компоновка элементов страницы
Основы компоновки страницы. Визуальная иерархия (1)
Приглашаем вас на вечеринку, посвященную 30-му дню
рождения Зельды! Также приглашаем детей. Будет
подаваться ужин; если вы хотели бы принести с собой
еду, то позвоните Стейси по телефону 555-12-12. Когда:
20 октября в 19:00. Где: дом Зельды. Если вы не знаете,
как проехать, не стесняйтесь звонить Зельде и
спрашивать. Пожалуйста, дайте ответ на приглашение
Стейси до 10 октября. Увидимся на вечеринке!
Приглашаем вас на вечеринку, посвященную
30-му дню рождения Зельды!
Также приглашаем детей. Будет подаваться ужин; если
вы хотели бы принести с собой еду, то позвоните Стейси
по телефону 555-12-12.
Когда: 20 октября в 19:00. Где: дом Зельды. Если вы не
знаете, как проехать, не стесняйтесь звонить Зельде и
спрашивать.
Пожалуйста, дайте ответ на приглашение Стейси до 10
октября. Увидимся на вечеринке!
Приглашаем вас на вечеринку, посвященную
30-му дню рождения Зельды!
Также приглашаем детей. Будет
подаваться ужин; если вы хотели бы
принести с собой еду, то позвоните
Стейси по телефону 555-12-12.
Когда: 20 октября в 19:00.
Где: дом Зельды.
Если вы не знаете, как проехать, не стесняйтесь
звонить Зельде и спрашивать.
Пожалуйста, дайте ответ на
приглашение Стейси до 10 октября.
Увидимся на вечеринке!
Пользователь должен видеть
информационную структуру
страницы по её компоновке (группы
информации, вес информации и др.)
Проектирование интерфейса пользователя. Лекция №11.
6
4
Компоновка элементов страницы
Основы компоновки страницы. Визуальная иерархия (2)
Средства отражения визуальной иерархии:
1) предпочтение верхнему левому краю;
2) пустое пространство;
3) контрастные шрифты (чем крупнее и жирнее, тем важнее
информация);
4) контрастные цвета для фона и переднего плана;
5) позиционирование, выравнивание и отступы (смещённый
вправо текст – второстепенный по отношению к тому, что над
ним);
6) графика типа линий, рамок, цветных панелей.
Проектирование интерфейса пользователя. Лекция №11.
7
4
Компоновка элементов страницы
Основы компоновки страницы. Визуальный поток
Визуальный поток определяет курс, которому
следует взгляд читателя при просмотре страницы:
• нужно контролировать его, чтобы
пользователи проходили по нужному пути в
правильной последовательности;
• сверху вниз и слева направо – визуальный
поток по умолчанию.
Точки фокусировки – точки, на которых взгляд
человека останавливается независимо от его
желания:
• взгляд следует от самой сильной до самой
слабой точки;
• их должно быть немного;
• создаются при помощи пустого пространства,
контрастности, крупного жирного шрифта,
цветовой заливки, сходящихся линий, резких
границ, гарнитур шрифтов и движения.
Воспринимаемый смысл страницы может
меняться в зависимости от того, куда смотрит
пользователь.
Диалоговое окно с хорошим
визуальным потоком, Macromedia
Dreamweaver
Проектирование интерфейса пользователя. Лекция №11.
8
4
Компоновка элементов страницы
Основы компоновки страницы. Группировка и выравнивание
•
•
люди стремятся во всем найти порядок;
способы, вызывающие у пользователя ассоциации одних элементов с другими
(сходство/различие), сформулированы гештальт-психологами в начале XX века.
Четыре гештальт-принципа
Проектирование интерфейса пользователя. Лекция №11.
9
4
Компоновка элементов страницы
Основы компоновки страницы. Всё вместе
http://www.alistapart.com/articles/
Проектирование интерфейса пользователя. Лекция №11.
10
4
Компоновка элементов страницы
Основы компоновки страницы. «Динамические дисплеи»
•
•
предыдущие аспекты одинаково справедливы и для ПИ, и для
печатной продукции (плакаты, журналы и др.)
только для ПИ надо учитывать «динамическую природу»
компьютерных дисплеев – на экране «меньше места», чем на
бумаге, но существуют иные способы вместить большое
количество содержимого:
a) просмотр содержимого через окно, фиксированного размера
с помощью полос прокрутки;
b) применение шаблонов Пачка карточек, Закрываемые
панели, Перемещаемые панели;
c) применение шаблонов Ответное включение и Ответное
обнаружение;
d) др.
Проектирование интерфейса пользователя. Лекция №11.
11
4
Компоновка элементов страницы
Шаблон №32. Визуальная схема (Visual Framework) (1)
Дано:
•
Веб-сайт с множеством страниц;
•
Приложение с множеством окон.
Нужно:
•
Сфокусировать пользователя на содержимом, меняющим от окна к окну;
•
Связный интерфейс (вид разных окон принадлежит единой структуре,
общие «постоянные» элементы ПИ);
•
Узнаваемость фирменного стиля.
Решение:
•
Использовать для дизайна каждой страницы один и тот же базовый макет
(общая схема компоновки, набор цветов и компонентов, шрифтов, системы
наименования, стиля написания, указателей, навигационных средств,
промежутки и выравнивание элементов);
•
Но обеспечить достаточную гибкость, чтобы помещать на страницы разное
содержимое.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
12
4
Компоновка элементов страницы
Шаблон №32. Визуальная схема (Visual Framework) (2)
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
13
4
Компоновка элементов страницы
Шаблон №33. Центральная схема (Center Stage) (1)
Дано:
•
веб-страница;
•
приложения для редактирования документов.
Нужно:
•
Сразу перевести взгляд пользователя к самой важной информации или задаче.
Решение:
•
Чётко выраженный центральный элемент приковывает внимание – поместить важную часть ПИ в
самый большой, центральный раздел страницы (окна), объединить дополнительные инструменты на
панелях, окружающих сцену.
Flash MX
Проектирование интерфейса пользователя. Лекция №11.
© Дж. Тидвелл
14
4
Компоновка элементов страницы
Шаблон №33. Центральная схема (Center Stage) (2)
http://boingboing.net
Google Maps
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
15
4
Компоновка элементов страницы
Шаблон №34. Именованные разделы (Titled Sections) (1)
Дано:
•
Много содержимого, которое не помещается на одной странице;
•
Содержимое разбиваемо на тематические или по задачам разделы, имеющие смысл для
пользователя.
Нужно:
•
Уместить всё содержимое на одной странице и при этом сделать её максимально удобной для
быстрого просмотра и восприятия.
Решение:
•
Разбить содержимое на автономные разделы;
•
Перечислить разделы на одной странице;
•
Присвоить визуально заметные заголовки, использовать пустое пространство для отделения
разделов, поместить разделы на подложки разных цветов, аккуратнее использовать рамки.
http://www.adobe.com
Проектирование интерфейса пользователя. Лекция №11.
© Дж. Тидвелл
16
4
Компоновка элементов страницы
Шаблон №34. Именованные разделы (Titled Sections) (2)
Javadoc HTML page
Eudora for Mac OS 9
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
17
4
Компоновка элементов страницы
Шаблон №35. Пачка карточек (Card Stack) (1)
Дано:
•
на странице слишком много содержимого - внимание пользователя рассеивается;
•
возможна группировка содержимого по тематике, по задачам и т. п.;
•
содержимое нельзя организовать в жесткую структуру (например, по шаблону Таблица свойств);
•
группировка в Именованные разделы не приведёт к сокращению места.
Нужно:
•
вывести все разделы на одной странице;
•
избежать зашумленного интерфейса;
•
использовать распространённую форму представления разделов.
Решение:
•
поместить разделы содержимого на отдельные панели ("карточки") - продумать информационную
архитектуру (контексты);
•
собрать их в пачку так, чтобы была видна только одна панель;
•
выбрать способ представления - горизонтальные вкладки, вертикальные вкладки, без вкладок,
столбец названий в левой части страницы, раскрывающийся список с названиями карточек (не рек.);
•
использовать вкладки или др. средства для предоставления доступа к "карточкам".
Свойства обозревателя, Internet Explorer
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
18
4
Компоновка элементов страницы
Шаблон №35. Пачка карточек (Card Stack) (2)
http://thebanmappingproject.org
Netscape 7
Окно печати, Internet Explorer для Mac OS X
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
19
4
Компоновка элементов страницы
Шаблон №36. Закрываемые панели (Closable Panels) (1)
Dreamweaver MX
Дано:
• на странице слишком много содержимого - внимание
пользователя рассеивается.
Нужно:
• вывести все разделы на одной странице;
• избежать зашумленного интерфейса;
• обеспечить независимый одновременный доступ к разным
разделам.
Решение:
• тоже, что и для ш. Пачка карточек;
• но позволить пользователю открывать и закрывать панели
независимо друг от друга;
Замечание:
• проверьте удобство применения этого шаблона на ваших
пользователях.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
20
4
Компоновка элементов страницы
Шаблон №36. Закрываемые панели (Closable Panels) (2)
A9 от Amazon
http://visualthesaurus.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
21
4
Компоновка элементов страницы
Шаблон №36. Закрываемые панели (Closable Panels) (3)
Flickr.com
Visual Studio
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
22
4
Компоновка элементов страницы
Шаблон №37. Перемещаемые панели (Movable Panels) (1)
Дано:
• на странице слишком много содержимого - внимание
пользователя рассеивается;
• монопольный тип интерфейса (длительная работа с
приложением).
Нужно:
• вывести все разделы на одной странице;
• обеспечить независимый одновременный доступ к разным
разделам;
• позволить пользователю самому выполнять компоновку
панелей;
• обеспечить поддержку пространственной памяти.
Решение:
• позволить самостоятельно перемещать и располагать панели
приложения;
• запомнить расположение панелей для следующего запуска
приложения;
• обеспечить возможность восстановления компоновки по
умолчанию.
MATLAB
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
23
4
Компоновка элементов страницы
Шаблон №37. Перемещаемые панели (Movable Panels) (2)
Winamp
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
24
4
Компоновка элементов страницы
Шаблон №38. Выравнивание по правому/левому краю
(Right/Left Alignment) (1)
Дано:
• форма или другой набор элементов, перед
которыми будут находиться текстовые метки.
Нужно:
• сформировать строгие перцепционные пары
"метка-элемент" (использовать гештальпринципы близости и непрерывности).
Решение:
• элементы оформить в виде таблицы из двух
столбцов;
• выровнять метки, расположенные слева, по
правому краю;
• выровнять элементы, расположенные справа,
по левому краю;
• по возможности сделать одинаковой ширину
элементов.
Адресная книга, Mac Os X
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
25
4
Компоновка элементов страницы
Шаблон №38. Выравнивание по правому/левому краю
(Right/Left Alignment) (2)
Dreamweaver MX
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
26
4
Компоновка элементов страницы
Шаблон №39. Диагональный баланс (Diagonal Balance) (1)
Дано:
•
Страница или диалоговое окно, где
вверху находится заголовок или
колонтитул, внизу – несколько кнопок
или ссылок, OK и Отмена, Назад и
Вперёд.
•
всё содержимое страницы
помещается на экране без прокрутки.
Нужно:
•
Сбалансировать визуально сильные
элементы, заголовки, вкладки и др., с
одной стороны, кнопки – с другой
(«уравновесить гири»);
•
Способствовать идеальному
визуальному потоку.
Решение:
•
организовать элементы на странице
ассиметрично, но сбалансировать,
поместив визуальный вес в верхний
левый и нижний правый углы.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
27
4
Компоновка элементов страницы
Шаблон №39. Диагональный баланс (Diagonal Balance) (2)
http://miniusa.com
http://eleganthack.com
Поиск дилера
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
28
4
Компоновка элементов страницы
Шаблон №40. Таблица свойств (Property Sheet) (1)
Дано:
•
объекты ПИ с большим списком свойств, которые можно
редактировать.
Нужно:
•
обеспечить возможность редактирования всех свойств,
одновременно, на одном экране;
•
показать пользователю, что все свойства можно редактировать
прямо на этом экране.
Решение:
•
использовать компоновку с двумя столбцами или компоновку в
стиле формы;
•
тщательно продумать:
•
компоновку;
•
порядок следования свойств;
•
метки;
•
выбор элементов управления для ввода значений свойств;
•
когда фиксировать новое значение свойства;
•
«смешанные значения» (выбраны несколько объектов).
Visual Studio
Альтернативы:
•
меню;
•
прямая манипуляция.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
29
4
Компоновка элементов страницы
Шаблон №40. Таблица свойств (Property Sheet) (2)
Adobe Photoshop
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
30
4
Компоновка элементов страницы
Шаблон №41. Ответное обнаружение
(Responsive Disclosure)
Дано:
•
сложная задача;
•
пользователь новичок или редко посещает;
•
следующий шаг может зависеть от выбора, сделанного
на предыдущем шаге.
Нужно:
•
помочь пользователю решить сложную задачу шаг за
шагом на одной странице;
•
Формировать правильную ментальную модель решения
задачи у пользователя;
•
не нарушать состояние потока из-за переключения
контекстов, вызванного отдельными модальными
окнами как в ш. Мастер.
Решение:
•
начать с лаконичного ПИ;
•
после каждого выполненного шага показывать
следующие объекты ПИ (для следующего шага).
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
31
4
Компоновка элементов страницы
Шаблон №42. Ответное включение
(Responsive Enabling) (1)
Дано:
•
сложная задача;
•
пользователь новичок или редко
посещает;
•
следующий шаг не зависит от выбора,
сделанного на предыдущем шаге.
Нужно:
•
помочь пользователю решить сложную
задачу шаг за шагом на одной
странице;
•
Формировать правильную ментальную
модель решения задачи у
пользователя;
•
Пи должен быть стабильным (никаких
динамических изменений на каждом
шаге).
Решение:
•
начать с ПИ, где отключено
большинство элементов;
•
после каждого выполненного шага
включать элементы ПИ для
следующего шага.
MATLAB's Curve-Fitting Tool
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
32
4
Компоновка элементов страницы
Шаблон №42. Ответное включение
(Responsive Enabling) (2)
Поиск в телефонной
книге, Nokia 5800
Mac OS X System Preferences
Ответное выключение
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
33
4
Компоновка элементов страницы
Шаблон №43. «Резиновый макет» (Liquid Layout) (1)
Дано:
•
ПИ не «закрытого» типа (справочный киоск,
встроенный в КПК, полноэкранная видеоигра);
•
страница содержит много текста или насыщенный
информационный элемент (таблица, дерево и др.);
•
графический редактор.
Нужно:
•
возможность отображения содержимого в
большем (меньшем) пространстве, чтобы лучше
понять содержимое.
Решение:
•
при изменении размера окна изменять размер
содержимого страницы, чтобы она всегда была
«заполнена».
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
34
4
Компоновка элементов страницы
Шаблон №43. «Резиновый макет» (Liquid Layout) (2)
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
35
5
Действия и команды
«Глаголы» пользовательского интерфейса (1)
Общепринятые средства
выполнения действий:
•
•
•
•
•
•
•
•
Нестандартные кнопки и
элементы управления:
кнопки;
строки меню;
всплывающие меню (контекст);
раскрывающиеся меню (больше
подходят для выбора состояний,
чем действий);
панели инструментов
(пиктограммы);
ссылки;
панели действий или задач
(слова);
невидимые действия:
– двойной щелчок на элементе;
– клавишные сочетания;
– перетаскивание («переместить это
сюда», «сделать это с ним»)
– ввод команд.
• значки, реагирующие на
щелчки мыши;
• текст, реагирующий на щелчки
мыши, но не выглядящий как
кнопка;
• объект, реагирующий на
наведение указателя мыши;
• объект, выглядящий как будто
им можно манипулировать.
Примеры таких приложений:
мультимедийные проигрыватели,
программы мгновенного обмена
сообщениями, визуальные
редакторы, игры и др.
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
36
5
Действия и команды
«Глаголы» пользовательского интерфейса (2)
точка начала
воспроизведения
точка конца
песни
открывает меню значений временной
шкалы (⅟₂, ¼, ⅟₈ нота т др.)
Выделяемые
«регионы» каждой
дорожки (поддержка
множественного
выбора,
перетаскивания и
перемещения со
строки на строку)
перемещаемые
«сферы» –
контрольные точки
уровня громкости
(вверх-вниз, из
стороны- в сторону) –
регулировка крутизны
кривой
для перемещения
ползунка – щелкнуть в
крайние положения
блокировка
воспроизводящей
головки
размер окна
GarageBand
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
37
5
Действия и команды
«Глаголы» пользовательского интерфейса (3)
Рекомендации по проектированию действий в ПИ:
1) по возможности следуйте общепринятым правилам, повторно
используйте уже известные пользователям концепции (см.
руководства по стилю оформления для конкретной ОС);
2) визуализируйте элементы управления так, чтобы они
разрешали (подсказывали) выполнять некоторое действие:
a)
b)
c)
используйте псевдо-трёхмерную графику (подсвечивание и тени);
меняйте вид указателя мыши при наведении на элемент;
используйте вплывающие подсказки при наведении курсора
мыши.
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
38
5
Действия и команды
Шаблон №44. Группа кнопок (Button group) (1)
Дано:
•
небольшое число действий (2-5), связанных
некоторым смыслом друг с другом.
Нужно:
•
подсказать пользователю, какие действия доступны
в данной контексте;
•
помочь пользователю понять связь между
действиями.
Решение:
•
представлять связанные действия в виде набора
кнопок, выровненных по вертикали и горизонтали;
•
использовать гешталь-принципы близости и
замкнутости (размер, выравнивание);
•
если действий более трёх-четырёх, то создать
несколько наборов кнопок;
•
разместить группу рядом с объектом (справа), на
который влияют действия, или внизу окна, если
объект – всё окно.
Окно настройки в MS Word
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
39
5
Действия и команды
Шаблон №44. Группа кнопок (Button group) (2)
Apple iTunes
стандартные
кнопки строки
заголовка
элементы
управления
воспроизведением
действия,
связанные со
списком
воспроизведения
смешанные
действия
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
40
5
Действия и команды
Шаблон №45. Панель действий (Action Panel) (1)
Дано:
•
в некотором контексте много действий (их число
велико для использования ш. Группа кнопок);
•
возможность не экономить экранное пространство.
Нужно:
•
наглядно предоставить возможность действий в
зависимости от контекста;
•
свободное представление (структуризация)
действий.
Решение:
•
не использовать меню основное или всплывающее;
•
предоставить большую группу схожих действия на
панели ПИ, всегда находящейся на экране, снизу
или сбоку от того, с чем работает панель действий;
•
выбрать средство структуризации действий:
простой список, список из нескольких столбцов,
списки по категориям, деревья, таблицы,
Закрываемые панели или комбинация средств;
•
выбрать средство обозначения действий: текст,
значки или комбинация средств.
Панель "New Presentation", MS
Powerpoint
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
41
5
Действия и команды
Шаблон №45. Панель действий (Action Panel) (2)
Windows Explorer
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
42
5
Действия и команды
Шаблон №46. Заметная кнопка «Готово»
(Prominent «Done» Button)
Дано:
•
пользователь выполняет некоторую транзакцию, например,
совершает покупку в Интернет-магазине.
Нужно:
•
создать ощущение завершённости транзакции на последнем её
шаге.
Решение:
•
поместить кнопку, завершающую транзакцию («Готово»,
«Отправить» и т. п.), в конец визуального потока (рядом с
последним полем ввода);
•
сделать кнопку большой и заметной (выглядящей как кнопка, а не
ссылка);
•
текст (на кнопке) предпочтительнее, чем одиночный значок.
www.kodakgallery.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
43
5
Действия и команды
Шаблон №47. Умные элементы меню (Smart menu items)
MS Word (Windows)
Дано:
•
некоторые элементы меню действуют на
определённые объекты, например, команда
Закрыть;
•
поведение некоторых элементов меню зависит от
контекста, например, команда Отменить (Undo).
Нужно:
•
точно сообщить пользователю, что произойдёт при
выборе этих элементов меню.
Решение:
•
динамически дополнять названия элементов меню
или отключать вообще (в зависимости от
выбранного объекта ПИ или другого контекста);
•
что делать, если выбраны несколько объектов?.
Illustator (Mac OS)
ш. Безопасное исследование
Проектирование интерфейса пользователя. Лекция №11.
© Дж. Тидвелл
44
5
Действия и команды
Шаблон №48. Предварительный просмотр (Preview) (1)
Дано:
•
пользователь собирается выполнить что-то
«тяжеловесное» или очень важное
(например, отправка формы, заполнение
которой заняло много времени, печать
документа, совершение покупки).
Нужно:
•
дать возможность пользователю
убедиться, что он всё делает правильно;
•
предотвратить ошибки, потерю времени и
других средств;
•
просто помочь понять, к чему приводит
некоторое действие.
Решение:
•
предоставить возможность
предварительного просмотра результата
действий (сводка о данных транзакции,
документа «на бумаге», итоговый вид
изображения и др.);
•
предоставить возможность вернуться и
исправить ошибки.
MS PowerPoint
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
45
5
Действия и команды
Шаблон №48. Предварительный просмотр (Preview) (2)
Amazon.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
46
5
Действия и команды
Шаблон №48. Предварительный просмотр (Preview) (3)
Adobe Photoshop
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
47
5
Действия и команды
Шаблон №49. Индикатор хода процесса (Progress Indicator)
Дано:
•
длительная операция, которая блокирует взаимодействие
пользователя с интерфейсом;
•
длительная операция, которая выполняется в фоновом
режиме более двух секунд.
Нужно:
•
снять беспокойство пользователя по поводу невозможности
продолжать взаимодействие с системой;
•
сократить субъективное время выполнения операции.
Решение:
•
анимированный индикатор того, что:
– происходит в данный момент;
– какая доля операции уже выполнена;
– сколько времени остаётся ждать;
•
показать, как остановить процесс;
•
не блокировать другую работу с интерфейсом.
Internet Explorer progress
Стартовый экран KDE
Mail.ru
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
48
5
Действия и команды
Шаблон №50. Возможность отмены (Cancelability)
Дано:
•
длительная операция, которая блокирует взаимодействие пользователя с интерфейсом;
•
длительная операция, которая выполняется в фоновом режиме более двух секунд.
Нужно:
•
предотвратить ошибки;
•
обеспечить комфортное изучение ПИ.
Решение:
•
предоставить способ мгновенной отмены длительной операции без побочных эффектов.
Свойства принтера в Windows с хорошо спрятанной операцией Отмена
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
49
5
Действия и команды
Шаблон №51. Многоуровневая отмена (Multi-Level Undo) (1)
Дано:
•
высокоинтерактивный ПИ (почтовые клиенты, средства разработки,
графические редакторы и др.).
Нужно:
•
возможность с лёгкостью аннулировать последовательность
действий, выполненных пользователем;
•
обеспечить безопасное исследование ПИ (ошибки поправимы).
Решение:
•
сконструировать стек отмены:
– определить глубину и т. п.;
– продумать, какие операции будут попадать в стек отмены,
какие нет;
– продумать представление стека.
ш. История команд
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
50
5
Действия и команды
Шаблон №51. Многоуровневая отмена (Multi-Level Undo) (2)
Распространённые отменяемые изменения (операции):
•
ввод текста в документах;
•
транзакции в БД;
•
изменения в изображениях или на холстах для рисования;
•
операции над файлами;
•
создание, удаление и изменение порядка объектов в списках
(например, электронных сообщений);
•
операции вставки, копирования и вырезания.
Распространённые неотменяемые изменения (операции):
•
выделение текста, объектов;
•
навигация между окнами, страницами;
•
положение указателя мыши или курсора;
•
положение полосы прокрутки;
•
местоположение окна или панели.
Операции, принципиально неотменяемые:
•
шаг приобретения при совершении покупки в электронном
магазине;
•
публикация сообщения на форуме или в чате;
•
отправку электронной почты
•
и др.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
51
5
Действия и команды
Шаблон №52. История команд (Command History)
Дано:
•
длинные и сложные последовательности действий в графическом ПИ или в командной строке.
Нужно:
•
помочь выполнять длительную работу с повторяющимся действиями;
•
напомнить: что было сделано, в каком порядке были выполнены действия;
•
сохранить журнал действий по причинам различного характера.
Решение:
•
хранить и отображать на экране постоянно обновляющийся список действий, выполняемых
пользователем;
•
фиксировать только отменяемые действия (см. ш. Многоуровневая отмена);
•
?: как отобразить в графическом ПИ.
MATLAB
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
52
5
Действия и команды
Шаблон №53. Макрос (Macros)
Actions в Adobe Photoshop
Дано:
•
некоторые последовательности действий осмысленно
объединяются пользователем под общим названием и выполняются
целиком и многократно для разных объектов.
Нужно:
•
сократить время, ошибки и усилия по многократному выполнению
некоторых последовательностей действий.
Решение:
•
предоставить возможность записи последовательности действий как
единого действия;
•
предоставить возможность его воспроизведения над одним или
несколькими выделенными объектами;
•
предоставьте возможность именовать макросы, ссылать друг на
друга, просматривать общий список макросов и т. п.;
•
продумать способ вызова макросов.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
53
6
Информационная графика (деревья, таблицы, графики)
Основы информационной графики
Информационная графика:
• означает визуально представление данных с целью
передачи определённого знания пользователю;
• это карты, блок-схемы, графики, таблицы, деревья,
временные шкалы и различные виды диаграмм;
• даёт ответы на вопросы типа:
–
–
–
–
как организованы данные?
какие связи между данными существуют?
каким образом можно изучать эти данные?
можно ли изменить порядок данных, чтобы взглянуть на них
по-другому?
– как посмотреть только то, что пользователю нужно знать?
– каковы конкретные значения данных?
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
54
6
Информационная графика (деревья, таблицы, графики)
Как организованы данные?
=> выбрать форму
представления
данных
Распространённые модели организации информации
Проектирование интерфейса
пользователя. Лекция №11.
© Дж. Тидвелл
55
6
Информационная графика (деревья, таблицы, графики)
Какие связи между данными существуют? (1)
Найдите чёрные объекты
Найдите значения, большие единицы
Ещё раз
Ещё раз
=> выбрать способ
кодирования данных
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
56
6
Информационная графика (деревья, таблицы, графики)
Какие связи между данными существуют? (2)
Подсознательные способы визуализации взаимосвязей в данных
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
57
6
Информационная графика (деревья, таблицы, графики)
Каким образом можно изучать эти данные?
Навигация и просмотр. Распространённые техники
1)
Прокрутка и панорамирование:
•
изменение местоположения видимой части иллюстрации;
•
например, ш. Обзор и детали.
2) Масштабирование:
•
изменение масштаба видимой части изображения;
•
например, ш. Локальное масштабирование.
3) Открывание и закрывание интересующих данных:
•
исследование иерархических данных;
•
например, ш. Каскадные списки.
4) Погружение:
•
аналогично п. 3, но без интеграции в текущее изображение данных.
=> позволить пользователю сфокусироваться на интересующей его
точке, одновременно показать достаточно материала вокруг неё,
чтобы он понимал, где именно эта точка находится на общем графике
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
58
6
Информационная графика (деревья, таблицы, графики)
Можно ли изменить порядок данных, чтобы взглянуть на
них по-другому?
Упорядочивание и перестановка
• простое изменение порядка
представления данных может
выявить их неожиданные
взаимосвязи (между соседними
элементами);
• варианты упорядочивания:
–
–
–
–
–
–
–
–
в алфавитном порядке;
численно;
по дате или времени;
по физическому
местоположению;
по категории или метке;
по популярности (часто/редко
используемые);
по предпочтениям
пользователя;
случайный.
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
59
6
Информационная графика (деревья, таблицы, графики)
Как увидеть только то, что пользователю нужно узнать?
Поиск и фильтрация
•
•
•
•
цель: сконцентрироваться исключительно на интересующем пользователя фрагменте
данных, избавившись от всего остального;
например, ш. Динамические запросы, ш. Окрашивание данных;
выяснить: что именно будет интересовать ваших пользователей;
параметры лучших интерфейсов фильтрации и запроса:
–
–
–
высокая интерактивность;
повторяемость (уточнения, комбинации поиска по запросу и фильтрации);
зависимость от контекста (вывод результата поиска с представлением контекста найденных
данных).
www.sundayriver.com
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
60
6
Информационная графика (деревья, таблицы, графики)
Каковы конкретные значения данных?
Техники отображения конкретных значений на общем изображении
1)
2)
3)
4)
5)
Метки, например, названия городов на географической карте.
Легенда, если в информационной графике для изображения
значений используются цвет, стиль линий, символ или размер.
Оси, линейки, сетки, если суть данных задаётся их
местоположением на графике.
Всплывающие данные, см. ш. Всплывающие данные, если
информационная графика интерактивна.
Окрашивание данных, если нужно увидеть выборку данных
среди всей последовательности данных и если нужно увидеть
эту выборку на нескольких изображениях, см. ш.
Окрашивание данных.
© Дж. Тидвелл
Проектирование интерфейса
пользователя. Лекция №11.
61
6
Информационная графика (деревья, таблицы, графики)
Шаблон №54. Обзор и детали (Overview Plus Detail) (1)
Дано:
•
«большое изображение» данных.
Нужно:
•
дать возможность самостоятельно просматривать детали
некоторого фрагмента общей картины данных;
•
сохранить ориентацию относительно общей картины.
Решение:
•
поместить иллюстрацию с общим видом данных рядом с
увеличенным детальным видом;
•
при перетаскивании области просмотра по общему
изображению, показывать соответствующую часть
изображения в детальном представлении;
•
на общем представлении показывать указатель «Вы
находитесь здесь».
http://wildfire.usgs.gov
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
62
6
Информационная графика (деревья, таблицы, графики)
Шаблон №54. Обзор и детали (Overview Plus Detail) (2)
Adobe Photoshop
MATLAB Signal Browser
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
63
6
Информационная графика (деревья, таблицы, графики)
Шаблон №55. Всплывающие данные (Datatips) (1)
Дано:
•
отображение общего представления
данных;
•
большая часть данных скрыта под
определёнными точками (объектами)
на иллюстрации.
Нужно:
•
поиск конкретных значений данных
на их общем представлении;
•
исследование данных по общей
картине (что здесь ещё есть).
Решение:
•
выводить значения данных для
интересующей пользователя точки во
всплывающей подсказке при
наведении над ней указателя мыши.
www.thebanmappingproject.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
64
6
Информационная графика (деревья, таблицы, графики)
Шаблон №55. Всплывающие данные (Datatips) (2)
http://hivegroup.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
65
6
Информационная графика (деревья, таблицы, графики)
Шаблон №56. Динамические запросы (Data Queries) (1)
Дано:
•
многомерный набор данных
любой формы, в любом
представлении;
•
фиксированный набор
свойств (атрибутов) данных,
интересующий пользователя.
Нужно:
•
увидеть те фрагменты
данных, которые
соответствуют определённым
критериям;
•
понять взаимосвязи между
разными свойствами данных;
•
упростить способ
исследования данных.
Решение:
•
возможность настраивать
фильтрацию данных с
помощью простых
стандартных элементов
управления;
•
немедленная, интерактивная
визуализация фильтрации.
Проектирование интерфейса пользователя. Лекция №11.
http://hivegroup.com
© Дж. Тидвелл
66
6
Информационная графика (деревья, таблицы, графики)
Шаблон №56. Динамические запросы (Data Queries) (2)
Выбор элементов управления
(зависит от типа данных и от типов
запросов пользователей):
•
ползунки (выбор одного числа
в определённом диапазоне);
•
двойные ползунки (выбор
поддиапазона);
•
переключатели и
раскрывающиеся списки
(выбор одного из нескольких
возможных элементов);
•
флажки (выбор значений
бинарных атрибутов);
•
иногда текстовые поля (ввод
значений с ш. Заполнение
пропусков).
Выставка в Музее современного
искусства,
http://www.moma.org/interactives/exhi
bitions/2002/brucke/flash.html
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
67
6
Информационная графика (деревья, таблицы, графики)
Шаблон №57. Окрашивание данных (Data Brushing)
Дано:
•
многомерные данные.
Нужно:
•
обеспечить средство визуального анализа взаимосвязей в данных.
Решение:
•
согласованные (связанные) представления данных в виде разных проекций;
•
мгновенная синхронизация манипуляций (выделение, масштабирование, панорамирование)
в разных представлениях.
http://www.yenka.com/
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
68
6
Информационная графика (деревья, таблицы, графики)
Шаблон №57. Окрашивание данных (Data Brushing) (2)
Способ выделения данных:
•
рамка;
•
щёлчок мыши на объекте;
•
+ Shift/+Ctrl;
•
лассо;
•
инвертирование;
•
спец. указатель мыши.
Например:
•
линейные графики + точечные
диаграммы;
•
точечные диаграммы + таблицы;
•
диаграммы + дерево;
•
карта + дерево и др.
http://www.yenka.com/
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
69
6
Информационная графика (деревья, таблицы, графики)
Шаблон №58. Локальное масштабирование
(Local Zooming)
Дано:
•
большой набор данных в любой форме (таблицы, графики, карты и др.).
Нужно:
•
обеспечить выбор и просмотр подробных сведений (как неотъемлемой части картины) о конкретных
объектах при сохранении общего высокоуровневого контекста.
Решение:
•
отобразить общее представление данных [мелкий шрифт и/или рисунки] с возможностью выбора
небольших участков (одного или нескольких элементов), находящихся под указателем мыши;
•
допустимо некоторое искажение пространственных взаимоотношений между объектами при
демонстрации подробностей.
«Рыбий глаз» с
веб-сайта AT&T
не для
неопытных
пользователей
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
70
6
Информационная графика (деревья, таблицы, графики)
Шаблон №58. Локальное масштабирование
(Local Zooming) (2)
Приложение Inxight TableLens
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
71
6
Информационная графика (деревья, таблицы, графики)
Шаблон №58. Локальное масштабирование
(Local Zooming) (3)
http://www.windsorinterfaces.com/datelens-screenshots.shtml
Выбран один день на представлении «Три месяца»
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
72
6
Информационная графика (деревья, таблицы, графики)
Шаблон №58. Локальное масштабирование
(Local Zooming) (4)
http://www.windsorinterfaces.com/datelens-screenshots.shtml
Выбран один день на представлении «Один месяца»
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
73
6
Информационная графика (деревья, таблицы, графики)
Шаблон №59. Чередование строк (Row Striping)
Дано:
•
таблица с данными;
•
столбцы визуально «сильнее»;
•
по строкам читать трудно (большое число столбцов или несколько строк текста в строках
таблицы, или др.).
Нужно:
•
обеспечить удобство чтения данных построчно.
Решение:
•
использовать гештальт-принципы непрерывности и замкнутости;
•
окрасить фон строк таблицы поочерёдно двумя спокойными ненасыщенными цветами,
близких оттенков;
iTunes
Дополнительно:
•
один из цветов
может быть цветом
фона страницы;
•
отпадает
необходимость
отображать границы
таблицы и её ячеек.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
74
6
Информационная графика (деревья, таблицы, графики)
Шаблон №59. Чередование строк (Row Striping) (2)
http://boston.com
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
75
6
Информационная графика (деревья, таблицы, графики)
Шаблон №60. Сортируемая таблица (Sortable Table)
Дано:
•
многомерные данные, представленные в
таблице.
Нужно:
•
обеспечить возможность изучения
взаимосвязей в данных;
•
и упростить поиск конкретного элемента
данных.
Решение:
•
использовать заголовок столбца как
элемент управления (кнопка, гипертекст,
стрелки и др.), выполняющий сортировку по
данному атрибуту;
•
выполнение очередной сортировки не
нарушает текущую сортировку.
Проводник Windows
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
76
6
Информационная графика (деревья, таблицы, графики)
Шаблон №60. Сортируемая таблица (Sortable Table) (2)
Inxight's Table Lens (здесь дома, выставленные на продажу)
Сортировка:
1) по площади
дома;
2) по числу
спальных
комнат.
=> взаимосвязи
атрибутов
(переменных)
В таблице чем
длиннее синий
прямоугольник,
тем больше
значение
атрибута
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
77
6
Информационная графика (деревья, таблицы, графики)
Шаблон №61. Переход к элементу (Jump To Item)
Дано:
•
список с прокруткой (таблица, раскрывающееся
меню, комбинированное поле, дерево с большим
числом узлов).
Нужно:
•
быстрый доступ к конкретному элементу списка,
предпочтительно с клавиатуры.
Решение:
•
обеспечить ввод имени элемента с клавиатуры и
немедленный переход к нему и его выделение;
•
выделенным остаётся последний
найденный/выбранный.
Брайзер Chrome
Mac OS X Finder
Примеры:
• поиск файлов, меню для выбора
региона или страны;
• числовые списки (год, сумма)
• др.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
78
6
Информационная графика (деревья, таблицы, графики)
Шаблон №62. Строка для нового элемента (New-Item Row)
Дано:
•
«вертикальное» представление данных (таблица, список, дерево и др.).
Нужно:
•
обеспечить возможность добавление нового элемента, экономя пространство на экране и
сокращая объём навигации.
Решение:
•
объединить акт создания нового элемента с местом, где постоянного расположения этого
элемента;
•
ввод нового элемента в пустую строку таблицы.
MS Outlook
Ш. Хорошие варианты по
умолчанию (Good Defaults)
Ш. Приглашение к вводу
(Input Prompt)
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
79
6
Информационная графика (деревья, таблицы, графики)
Шаблон №63. Каскадные списки (Cascading Lists)
Диалог выбора шрифта
Дано:
•
данные, структурированные в виде дерева
(на каждом уровне множество вариантов).
Нужно:
•
обеспечить просмотр и выбор элементов,
снабжая полной информацией о
местонахождении в иерархии элементов и о
полном составе глубоких уровней иерархии.
Решение:
•
разбить иерархию на несколько
прокручиваемых списков и отображать их на
кране одновременно (в панелях слева
направо);
•
при необходимости в последней (самой
правой) панели отображать подробные
сведения о выбранном листе или элементы
управления для действий, подходящих
конкретному приложению (например,
редактирование листового элемента).
Примеры иерархий:
• буквенные: файловые системы;
• концептуальные: навигация и
выбор элементов в категориях
или выбор в последовательности
взаимосвязанных элементов;
• др.
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
80
6
Информационная графика (деревья, таблицы, графики)
Шаблон №63. Каскадные списки (Cascading Lists) (2)
Mac OS X Finder
MS Excel
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
81
6
Информационная графика (деревья, таблицы, графики)
Шаблон №67. Древовидная карта (Treemap)
http://www.smartmoney.com/map-of-the-market/
Дано:
•
многомерные и/или иерархические данные, которые можно группировать по значениям атрибутов.
Нужно:
•
«упаковать» множество данных в один интерфейс с целью визуальной поддержки поиска тенденций
и взаимосвязей в данных.
Решение:
•
представить данные в виде прямоугольников разных:
a) размеров (~ некоторой количественной переменной, цена, популярность и др.).;
b) цветов (~ некоторой количественной переменной, доход, или качественной переменной,
тематика, категория);
c) местоположений в целом (группировка по иерархии в данных);
d) позиция внутри группы(от меньшего по размеру к большему или сортировка , например, по
возрасту, по алфавиту);
•
дополнить всплывающими подсказками, динамическими запросами и др. интерактивными
механизмами.
=> уловить связи между размером и цветом, размером и
местоположением, местоположением и цветом – быстро
проникнуть вглубь происходящих процессов.
История древовидных карт:
http://www.cs.umd.edu/hcil/treemap-history/
© Дж. Тидвелл
Проектирование интерфейса пользователя. Лекция №11.
85
6
Информационная графика (деревья, таблицы, графики)
Шаблон №67. Древовидная карта (Treemap) (2)
http://www.smartmoney.com/map-of-the-market/
•
•
размер прямоугольника ~ размер сектора рынка;
красный – потери; зелёный – выгода.
Проектирование интерфейса пользователя. Лекция №11.
© Дж. Тидвелл
86
6
Информационная графика (деревья, таблицы, графики)
Шаблон №67. Древовидная карта (Treemap) (3)
NewsMap (http://newsmap.jp) по новостям Google News
•
•
•
размер блока и шрифта – популярность;
цветовой тон – тема;
значение цвета – давность.
Проектирование интерфейса пользователя. Лекция №11.
© Дж. Тидвелл
87