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

Концептуальное проектирование Лекция 11 Принципы и шаблоны проектирования взаимодействия (продолжение)

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

Категории рассматриваемых шаблонов проектирования Проектирование интерфейса пользователя. Лекция 11.4 © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Информационная архитектура и структура приложения 2 Ориентация на местности (навигация, указатели, поиск пути) 3 Компоновка элементов страницы 4 Действия и команды 5 Информационная графика (деревья, таблицы, графики) 6 Формы и элементы управления 7 Компоновщики и редакторы 8 Визуальный стиль 9

Проектирование интерфейса пользователя. Лекция 11.5 Основы компоновки страницы. Факторы разметки страницы Компоновка элементов страницы 4 1)визуальная иерархия; 2)визуальный поток; 3)группировка и выравнивание; 4)«динамические дисплеи».

Проектирование интерфейса пользователя. Лекция 11.6 Основы компоновки страницы. Визуальная иерархия (1) Компоновка элементов страницы 4 Приглашаем вас на вечеринку, посвященную 30-му дню рождения Зельды! Также приглашаем детей. Будет подаваться ужин; если вы хотели бы принести с собой еду, то позвоните Стейси по телефону Когда: 20 октября в 19:00. Где: дом Зельды. Если вы не знаете, как проехать, не стесняйтесь звонить Зельде и спрашивать. Пожалуйста, дайте ответ на приглашение Стейси до 10 октября. Увидимся на вечеринке! Пользователь должен видеть информационную структуру страницы по её компоновке (группы информации, вес информации и др.) Приглашаем вас на вечеринку, посвященную 30-му дню рождения Зельды! Также приглашаем детей. Будет подаваться ужин; если вы хотели бы принести с собой еду, то позвоните Стейси по телефону Когда: 20 октября в 19:00. Где: дом Зельды. Если вы не знаете, как проехать, не стесняйтесь звонить Зельде и спрашивать. Пожалуйста, дайте ответ на приглашение Стейси до 10 октября. Увидимся на вечеринке! Приглашаем вас на вечеринку, посвященную 30-му дню рождения Зельды! Также приглашаем детей. Будет подаваться ужин; если вы хотели бы принести с собой еду, то позвоните Стейси по телефону Когда: 20 октября в 19:00. Где: дом Зельды. Если вы не знаете, как проехать, не стесняйтесь звонить Зельде и спрашивать. Пожалуйста, дайте ответ на приглашение Стейси до 10 октября. Увидимся на вечеринке!

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

Проектирование интерфейса пользователя. Лекция 11.8 Основы компоновки страницы. Визуальный поток Компоновка элементов страницы 4 Визуальный поток определяет курс, которому следует взгляд читателя при просмотре страницы: нужно контролировать его, чтобы пользователи проходили по нужному пути в правильной последовательности; сверху вниз и слева направо – визуальный поток по умолчанию. Точки фокусировки – точки, на которых взгляд человека останавливается независимо от его желания: взгляд следует от самой сильной до самой слабой точки; их должно быть немного; создаются при помощи пустого пространства, контрастности, крупного жирного шрифта, цветовой заливки, сходящихся линий, резких границ, гарнитур шрифтов и движения. Воспринимаемый смысл страницы может меняться в зависимости от того, куда смотрит пользователь. Диалоговое окно с хорошим визуальным потоком, Macromedia Dreamweaver

Проектирование интерфейса пользователя. Лекция 11.9 Основы компоновки страницы. Группировка и выравнивание Компоновка элементов страницы 4 люди стремятся во всем найти порядок; способы, вызывающие у пользователя ассоциации одних элементов с другими (сходство/различие), сформулированы гештальт-психологами в начале XX века. Четыре гештальт-принципа

Проектирование интерфейса пользователя. Лекция Основы компоновки страницы. Всё вместе Компоновка элементов страницы 4

Проектирование интерфейса пользователя. Лекция Основы компоновки страницы. «Динамические дисплеи» Компоновка элементов страницы 4 предыдущие аспекты одинаково справедливы и для ПИ, и для печатной продукции (плакаты, журналы и др.) только для ПИ надо учитывать «динамическую природу» компьютерных дисплеев – на экране «меньше места», чем на бумаге, но существуют иные способы вместить большое количество содержимого: a)просмотр содержимого через окно, фиксированного размера с помощью полос прокрутки; b)применение шаблонов Пачка карточек, Закрываемые панели, Перемещаемые панели; c)применение шаблонов Ответное включение и Ответное обнаружение; d)др.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 32. Визуальная схема (Visual Framework) (1) Компоновка элементов страницы 4 Дано: Веб-сайт с множеством страниц; Приложение с множеством окон. Нужно: Сфокусировать пользователя на содержимом, меняющим от окна к окну; Связный интерфейс (вид разных окон принадлежит единой структуре, общие «постоянные» элементы ПИ); Узнаваемость фирменного стиля. Решение: Использовать для дизайна каждой страницы один и тот же базовый макет (общая схема компоновки, набор цветов и компонентов, шрифтов, системы наименования, стиля написания, указателей, навигационных средств, промежутки и выравнивание элементов); Но обеспечить достаточную гибкость, чтобы помещать на страницы разное содержимое.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 32. Визуальная схема (Visual Framework) (2) Компоновка элементов страницы 4

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 33. Центральная схема (Center Stage) (1) Компоновка элементов страницы 4 Дано: веб-страница; приложения для редактирования документов. Нужно: Сразу перевести взгляд пользователя к самой важной информации или задаче. Решение: Чётко выраженный центральный элемент приковывает внимание – поместить важную часть ПИ в самый большой, центральный раздел страницы (окна), объединить дополнительные инструменты на панелях, окружающих сцену. Flash MX

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 33. Центральная схема (Center Stage) (2) Компоновка элементов страницы 4 Google Maps

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 34. Именованные разделы (Titled Sections) (1) Компоновка элементов страницы 4 Дано: Много содержимого, которое не помещается на одной странице; Содержимое разбиваемо на тематические или по задачам разделы, имеющие смысл для пользователя. Нужно: Уместить всё содержимое на одной странице и при этом сделать её максимально удобной для быстрого просмотра и восприятия. Решение: Разбить содержимое на автономные разделы; Перечислить разделы на одной странице; Присвоить визуально заметные заголовки, использовать пустое пространство для отделения разделов, поместить разделы на подложки разных цветов, аккуратнее использовать рамки.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 34. Именованные разделы (Titled Sections) (2) Компоновка элементов страницы 4 Javadoc HTML page Eudora for Mac OS 9

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 35. Пачка карточек (Card Stack) (1) Компоновка элементов страницы 4 Дано: на странице слишком много содержимого - внимание пользователя рассеивается; возможна группировка содержимого по тематике, по задачам и т. п.; содержимое нельзя организовать в жесткую структуру (например, по шаблону Таблица свойств); группировка в Именованные разделы не приведёт к сокращению места. Нужно: вывести все разделы на одной странице; избежать зашумленного интерфейса; использовать распространённую форму представления разделов. Решение: поместить разделы содержимого на отдельные панели ("карточки") - продумать информационную архитектуру (контексты); собрать их в пачку так, чтобы была видна только одна панель; выбрать способ представления - горизонтальные вкладки, вертикальные вкладки, без вкладок, столбец названий в левой части страницы, раскрывающийся список с названиями карточек (не рек.); использовать вкладки или др. средства для предоставления доступа к "карточкам". Свойства обозревателя, Internet Explorer

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 35. Пачка карточек (Card Stack) (2) Компоновка элементов страницы 4 Netscape 7 Окно печати, Internet Explorer для Mac OS X

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 36. Закрываемые панели (Closable Panels) (1) Компоновка элементов страницы 4 Дано: на странице слишком много содержимого - внимание пользователя рассеивается. Нужно: вывести все разделы на одной странице; избежать зашумленного интерфейса; обеспечить независимый одновременный доступ к разным разделам. Решение: тоже, что и для ш. Пачка карточек; но позволить пользователю открывать и закрывать панели независимо друг от друга; Замечание: проверьте удобство применения этого шаблона на ваших пользователях. Dreamweaver MX

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 36. Закрываемые панели (Closable Panels) (2) Компоновка элементов страницы 4 A9 от Amazon

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 36. Закрываемые панели (Closable Panels) (3) Компоновка элементов страницы 4 Flickr.com Visual Studio

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 37. Перемещаемые панели (Movable Panels) (1) Компоновка элементов страницы 4 Дано: на странице слишком много содержимого - внимание пользователя рассеивается; монопольный тип интерфейса (длительная работа с приложением). Нужно: вывести все разделы на одной странице; обеспечить независимый одновременный доступ к разным разделам; позволить пользователю самому выполнять компоновку панелей; обеспечить поддержку пространственной памяти. Решение: позволить самостоятельно перемещать и располагать панели приложения; запомнить расположение панелей для следующего запуска приложения; обеспечить возможность восстановления компоновки по умолчанию. MATLAB

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 37. Перемещаемые панели (Movable Panels) (2) Компоновка элементов страницы 4 Winamp

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 38. Выравнивание по правому/левому краю (Right/Left Alignment) (1) Компоновка элементов страницы 4 Дано: форма или другой набор элементов, перед которыми будут находиться текстовые метки. Нужно: сформировать строгие перцепционные пары "метка-элемент" (использовать гешталь- принципы близости и непрерывности). Решение: элементы оформить в виде таблицы из двух столбцов; выровнять метки, расположенные слева, по правому краю; выровнять элементы, расположенные справа, по левому краю; по возможности сделать одинаковой ширину элементов. Адресная книга, Mac Os X

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 38. Выравнивание по правому/левому краю (Right/Left Alignment) (2) Компоновка элементов страницы 4 Dreamweaver MX

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 39. Диагональный баланс (Diagonal Balance) (1) Компоновка элементов страницы 4 Дано: Страница или диалоговое окно, где вверху находится заголовок или колонтитул, внизу – несколько кнопок или ссылок, OK и Отмена, Назад и Вперёд. всё содержимое страницы помещается на экране без прокрутки. Нужно: Сбалансировать визуально сильные элементы, заголовки, вкладки и др., с одной стороны, кнопки – с другой («уравновесить гири»); Способствовать идеальному визуальному потоку. Решение: организовать элементы на странице ассиметрично, но сбалансировать, поместив визуальный вес в верхний левый и нижний правый углы.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 39. Диагональный баланс (Diagonal Balance) (2) Компоновка элементов страницы Поиск дилера

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 40. Таблица свойств (Property Sheet) (1) Компоновка элементов страницы 4 Дано: объекты ПИ с большим списком свойств, которые можно редактировать. Нужно: обеспечить возможность редактирования всех свойств, одновременно, на одном экране; показать пользователю, что все свойства можно редактировать прямо на этом экране. Решение: использовать компоновку с двумя столбцами или компоновку в стиле формы; тщательно продумать: компоновку; порядок следования свойств; метки; выбор элементов управления для ввода значений свойств; когда фиксировать новое значение свойства; «смешанные значения» (выбраны несколько объектов). Visual Studio Альтернативы: меню; прямая манипуляция.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 40. Таблица свойств (Property Sheet) (2) Компоновка элементов страницы 4 Adobe Photoshop

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 41. Ответное обнаружение (Responsive Disclosure) Компоновка элементов страницы 4 Дано: сложная задача; пользователь новичок или редко посещает; следующий шаг может зависеть от выбора, сделанного на предыдущем шаге. Нужно: помочь пользователю решить сложную задачу шаг за шагом на одной странице; Формировать правильную ментальную модель решения задачи у пользователя; не нарушать состояние потока из-за переключения контекстов, вызванного отдельными модальными окнами как в ш. Мастер. Решение: начать с лаконичного ПИ; после каждого выполненного шага показывать следующие объекты ПИ (для следующего шага).

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 42. Ответное включение (Responsive Enabling) (1) Компоновка элементов страницы 4 Дано: сложная задача; пользователь новичок или редко посещает; следующий шаг не зависит от выбора, сделанного на предыдущем шаге. Нужно: помочь пользователю решить сложную задачу шаг за шагом на одной странице; Формировать правильную ментальную модель решения задачи у пользователя; Пи должен быть стабильным (никаких динамических изменений на каждом шаге). Решение: начать с ПИ, где отключено большинство элементов; после каждого выполненного шага включать элементы ПИ для следующего шага. MATLAB's Curve-Fitting Tool

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 42. Ответное включение (Responsive Enabling) (2) Компоновка элементов страницы 4 Mac OS X System Preferences Поиск в телефонной книге, Nokia 5800 Ответное выключение

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 43. «Резиновый макет» (Liquid Layout) (1) Компоновка элементов страницы 4 Дано: ПИ не «закрытого» типа (справочный киоск, встроенный в КПК, полноэкранная видеоигра); страница содержит много текста или насыщенный информационный элемент (таблица, дерево и др.); графический редактор. Нужно: возможность отображения содержимого в большем (меньшем) пространстве, чтобы лучше понять содержимое. Решение: при изменении размера окна изменять размер содержимого страницы, чтобы она всегда была «заполнена».

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 43. «Резиновый макет» (Liquid Layout) (2) Компоновка элементов страницы 4

«Глаголы» пользовательского интерфейса (1) Общепринятые средства выполнения действий: кнопки; строки меню; всплывающие меню (контекст); раскрывающиеся меню (больше подходят для выбора состояний, чем действий); панели инструментов (пиктограммы); ссылки; панели действий или задач (слова); невидимые действия: – двойной щелчок на элементе; – клавишные сочетания; – перетаскивание («переместить это сюда», «сделать это с ним») – ввод команд. Нестандартные кнопки и элементы управления: значки, реагирующие на щелчки мыши; текст, реагирующий на щелчки мыши, но не выглядящий как кнопка; объект, реагирующий на наведение указателя мыши; объект, выглядящий как будто им можно манипулировать. Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Действия и команды 5 Примеры таких приложений: мультимедийные проигрыватели, программы мгновенного обмена сообщениями, визуальные редакторы, игры и др.

«Глаголы» пользовательского интерфейса (2) Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Действия и команды 5 GarageBand точка начала воспроизведения точка конца песни открывает меню значений временной шкалы (, ¼, нота т др.) Выделяемые «регионы» каждой дорожки (поддержка множественного выбора, перетаскивания и перемещения со строки на строку) перемещаемые «сферы» – контрольные точки уровня громкости (вверх-вниз, из стороны- в сторону) – регулировка крутизны кривой блокировка воспроизводящей головки для перемещения ползунка – щелкнуть в крайние положения размер окна

«Глаголы» пользовательского интерфейса (3) Рекомендации по проектированию действий в ПИ: 1)по возможности следуйте общепринятым правилам, повторно используйте уже известные пользователям концепции (см. руководства по стилю оформления для конкретной ОС); 2)визуализируйте элементы управления так, чтобы они разрешали (подсказывали) выполнять некоторое действие: a)используйте псевдо-трёхмерную графику (подсвечивание и тени); b)меняйте вид указателя мыши при наведении на элемент; c)используйте вплывающие подсказки при наведении курсора мыши. Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Действия и команды 5

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 44. Группа кнопок (Button group) (1) Действия и команды 5 Дано: небольшое число действий (2-5), связанных некоторым смыслом друг с другом. Нужно: подсказать пользователю, какие действия доступны в данной контексте; помочь пользователю понять связь между действиями. Решение: представлять связанные действия в виде набора кнопок, выровненных по вертикали и горизонтали; использовать гешталь-принципы близости и замкнутости (размер, выравнивание); если действий более трёх-четырёх, то создать несколько наборов кнопок; разместить группу рядом с объектом (справа), на который влияют действия, или внизу окна, если объект – всё окно. Окно настройки в MS Word

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 44. Группа кнопок (Button group) (2) Действия и команды 5 элементы управления воспроизведением действия, связанные со списком воспроизведения стандартные кнопки строки заголовка смешанные действия Apple iTunes

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 45. Панель действий (Action Panel) (1) Действия и команды 5 Дано: в некотором контексте много действий (их число велико для использования ш. Группа кнопок); возможность не экономить экранное пространство. Нужно: наглядно предоставить возможность действий в зависимости от контекста; свободное представление (структуризация) действий. Решение: не использовать меню основное или всплывающее; предоставить большую группу схожих действия на панели ПИ, всегда находящейся на экране, снизу или сбоку от того, с чем работает панель действий; выбрать средство структуризации действий: простой список, список из нескольких столбцов, списки по категориям, деревья, таблицы, Закрываемые панели или комбинация средств; выбрать средство обозначения действий: текст, значки или комбинация средств. Панель "New Presentation", MS Powerpoint

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 45. Панель действий (Action Panel) (2) Действия и команды 5 Windows Explorer

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 46. Заметная кнопка «Готово» (Prominent «Done» Button) Действия и команды 5 Дано: пользователь выполняет некоторую транзакцию, например, совершает покупку в Интернет-магазине. Нужно: создать ощущение завершённости транзакции на последнем её шаге. Решение: поместить кнопку, завершающую транзакцию («Готово», «Отправить» и т. п.), в конец визуального потока (рядом с последним полем ввода); сделать кнопку большой и заметной (выглядящей как кнопка, а не ссылка); текст (на кнопке) предпочтительнее, чем одиночный значок.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 47. Умные элементы меню (Smart menu items) Действия и команды 5 Дано: некоторые элементы меню действуют на определённые объекты, например, команда Закрыть; поведение некоторых элементов меню зависит от контекста, например, команда Отменить (Undo). Нужно: точно сообщить пользователю, что произойдёт при выборе этих элементов меню. Решение: динамически дополнять названия элементов меню или отключать вообще (в зависимости от выбранного объекта ПИ или другого контекста); что делать, если выбраны несколько объектов?. MS Word (Windows) Illustator (Mac OS) ш. Безопасное исследование

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 48. Предварительный просмотр (Preview) (1) Действия и команды 5 Дано: пользователь собирается выполнить что-то «тяжеловесное» или очень важное (например, отправка формы, заполнение которой заняло много времени, печать документа, совершение покупки). Нужно: дать возможность пользователю убедиться, что он всё делает правильно; предотвратить ошибки, потерю времени и других средств; просто помочь понять, к чему приводит некоторое действие. Решение: предоставить возможность предварительного просмотра результата действий (сводка о данных транзакции, документа «на бумаге», итоговый вид изображения и др.); предоставить возможность вернуться и исправить ошибки. MS PowerPoint

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 48. Предварительный просмотр (Preview) (2) Действия и команды 5 Amazon.com

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 48. Предварительный просмотр (Preview) (3) Действия и команды 5 Adobe Photoshop

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 49. Индикатор хода процесса (Progress Indicator) Действия и команды 5 Дано: длительная операция, которая блокирует взаимодействие пользователя с интерфейсом; длительная операция, которая выполняется в фоновом режиме более двух секунд. Нужно: снять беспокойство пользователя по поводу невозможности продолжать взаимодействие с системой; сократить субъективное время выполнения операции. Решение: анимированный индикатор того, что: –происходит в данный момент; –какая доля операции уже выполнена; –сколько времени остаётся ждать; показать, как остановить процесс; не блокировать другую работу с интерфейсом. Стартовый экран KDE Internet Explorer progress Mail.ru

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 50. Возможность отмены (Cancelability) Действия и команды 5 Дано: длительная операция, которая блокирует взаимодействие пользователя с интерфейсом; длительная операция, которая выполняется в фоновом режиме более двух секунд. Нужно: предотвратить ошибки; обеспечить комфортное изучение ПИ. Решение: предоставить способ мгновенной отмены длительной операции без побочных эффектов. Свойства принтера в Windows с хорошо спрятанной операцией Отмена

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 51. Многоуровневая отмена (Multi-Level Undo) (1) Действия и команды 5 Дано: высокоинтерактивный ПИ (почтовые клиенты, средства разработки, графические редакторы и др.). Нужно: возможность с лёгкостью аннулировать последовательность действий, выполненных пользователем; обеспечить безопасное исследование ПИ (ошибки поправимы). Решение: сконструировать стек отмены: –определить глубину и т. п.; –продумать, какие операции будут попадать в стек отмены, какие нет; –продумать представление стека. ш. История команд

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 51. Многоуровневая отмена (Multi-Level Undo) (2) Действия и команды 5 Распространённые отменяемые изменения (операции): ввод текста в документах; транзакции в БД; изменения в изображениях или на холстах для рисования; операции над файлами; создание, удаление и изменение порядка объектов в списках (например, электронных сообщений); операции вставки, копирования и вырезания. Распространённые неотменяемые изменения (операции): выделение текста, объектов; навигация между окнами, страницами; положение указателя мыши или курсора; положение полосы прокрутки; местоположение окна или панели. Операции, принципиально неотменяемые: шаг приобретения при совершении покупки в электронном магазине; публикация сообщения на форуме или в чате; отправку электронной почты и др.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 52. История команд (Command History) Действия и команды 5 Дано: длинные и сложные последовательности действий в графическом ПИ или в командной строке. Нужно: помочь выполнять длительную работу с повторяющимся действиями; напомнить: что было сделано, в каком порядке были выполнены действия; сохранить журнал действий по причинам различного характера. Решение: хранить и отображать на экране постоянно обновляющийся список действий, выполняемых пользователем; фиксировать только отменяемые действия (см. ш. Многоуровневая отмена); ?: как отобразить в графическом ПИ. MATLAB

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 53. Макрос (Macros) Действия и команды 5 Дано: некоторые последовательности действий осмысленно объединяются пользователем под общим названием и выполняются целиком и многократно для разных объектов. Нужно: сократить время, ошибки и усилия по многократному выполнению некоторых последовательностей действий. Решение: предоставить возможность записи последовательности действий как единого действия; предоставить возможность его воспроизведения над одним или несколькими выделенными объектами; предоставьте возможность именовать макросы, ссылать друг на друга, просматривать общий список макросов и т. п.; продумать способ вызова макросов. Actions в Adobe Photoshop

Основы информационной графики Информационная графика: означает визуально представление данных с целью передачи определённого знания пользователю; это карты, блок-схемы, графики, таблицы, деревья, временные шкалы и различные виды диаграмм; даёт ответы на вопросы типа: – как организованы данные? – какие связи между данными существуют? – каким образом можно изучать эти данные? – можно ли изменить порядок данных, чтобы взглянуть на них по-другому? – как посмотреть только то, что пользователю нужно знать? – каковы конкретные значения данных? Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6

Как организованы данные? Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 Распространённые модели организации информации => выбрать форму представления данных

Какие связи между данными существуют? (1) Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 Найдите чёрные объекты Ещё раз Найдите значения, большие единицы => выбрать способ кодирования данных

Какие связи между данными существуют? (2) Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 Подсознательные способы визуализации взаимосвязей в данных

Каким образом можно изучать эти данные? 1)Прокрутка и панорамирование: изменение местоположения видимой части иллюстрации; например, ш. Обзор и детали. 2)Масштабирование: изменение масштаба видимой части изображения; например, ш. Локальное масштабирование. 3)Открывание и закрывание интересующих данных: исследование иерархических данных; например, ш. Каскадные списки. 4)Погружение: аналогично п. 3, но без интеграции в текущее изображение данных. Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 => позволить пользователю сфокусироваться на интересующей его точке, одновременно показать достаточно материала вокруг неё, чтобы он понимал, где именно эта точка находится на общем графике Навигация и просмотр. Распространённые техники

Можно ли изменить порядок данных, чтобы взглянуть на них по-другому? простое изменение порядка представления данных может выявить их неожиданные взаимосвязи (между соседними элементами); варианты упорядочивания: – в алфавитном порядке; – численно; – по дате или времени; – по физическому местоположению; – по категории или метке; – по популярности (часто/редко используемые); – по предпочтениям пользователя; – случайный. Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 Упорядочивание и перестановка

Как увидеть только то, что пользователю нужно узнать? Проектирование интерфейса пользователя. Лекция Информационная графика (деревья, таблицы, графики) 6 цель: сконцентрироваться исключительно на интересующем пользователя фрагменте данных, избавившись от всего остального; например, ш. Динамические запросы, ш. Окрашивание данных; выяснить: что именно будет интересовать ваших пользователей; параметры лучших интерфейсов фильтрации и запроса: – высокая интерактивность; – повторяемость (уточнения, комбинации поиска по запросу и фильтрации); – зависимость от контекста (вывод результата поиска с представлением контекста найденных данных). Поиск и фильтрация © Дж. Тидвелл

Каковы конкретные значения данных? Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Информационная графика (деревья, таблицы, графики) 6 1)Метки, например, названия городов на географической карте. 2)Легенда, если в информационной графике для изображения значений используются цвет, стиль линий, символ или размер. 3)Оси, линейки, сетки, если суть данных задаётся их местоположением на графике. 4)Всплывающие данные, см. ш. Всплывающие данные, если информационная графика интерактивна. 5)Окрашивание данных, если нужно увидеть выборку данных среди всей последовательности данных и если нужно увидеть эту выборку на нескольких изображениях, см. ш. Окрашивание данных. Техники отображения конкретных значений на общем изображении

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 54. Обзор и детали (Overview Plus Detail) (1) Дано: «большое изображение» данных. Нужно: дать возможность самостоятельно просматривать детали некоторого фрагмента общей картины данных; сохранить ориентацию относительно общей картины. Решение: поместить иллюстрацию с общим видом данных рядом с увеличенным детальным видом; при перетаскивании области просмотра по общему изображению, показывать соответствующую часть изображения в детальном представлении; на общем представлении показывать указатель «Вы находитесь здесь». Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 54. Обзор и детали (Overview Plus Detail) (2) Adobe Photoshop Информационная графика (деревья, таблицы, графики) 6 MATLAB Signal Browser

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 55. Всплывающие данные (Datatips) (1) Дано: отображение общего представления данных; большая часть данных скрыта под определёнными точками (объектами) на иллюстрации. Нужно: поиск конкретных значений данных на их общем представлении; исследование данных по общей картине (что здесь ещё есть). Решение: выводить значения данных для интересующей пользователя точки во всплывающей подсказке при наведении над ней указателя мыши. Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 55. Всплывающие данные (Datatips) (2) Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 56. Динамические запросы (Data Queries) (1) Дано: многомерный набор данных любой формы, в любом представлении; фиксированный набор свойств (атрибутов) данных, интересующий пользователя. Нужно: увидеть те фрагменты данных, которые соответствуют определённым критериям; понять взаимосвязи между разными свойствами данных; упростить способ исследования данных. Решение: возможность настраивать фильтрацию данных с помощью простых стандартных элементов управления; немедленная, интерактивная визуализация фильтрации. Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 56. Динамические запросы (Data Queries) (2) Выбор элементов управления (зависит от типа данных и от типов запросов пользователей): ползунки (выбор одного числа в определённом диапазоне); двойные ползунки (выбор поддиапазона); переключатели и раскрывающиеся списки (выбор одного из нескольких возможных элементов); флажки (выбор значений бинарных атрибутов); иногда текстовые поля (ввод значений с ш. Заполнение пропусков). Информационная графика (деревья, таблицы, графики) 6 Выставка в Музее современного искусства, bitions/2002/brucke/flash.html

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 57. Окрашивание данных (Data Brushing) Дано: многомерные данные. Нужно: обеспечить средство визуального анализа взаимосвязей в данных. Решение: согласованные (связанные) представления данных в виде разных проекций; мгновенная синхронизация манипуляций (выделение, масштабирование, панорамирование) в разных представлениях. Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 57. Окрашивание данных (Data Brushing) (2) Информационная графика (деревья, таблицы, графики) 6 Способ выделения данных: рамка; щёлчок мыши на объекте; + Shift/+Ctrl; лассо; инвертирование; спец. указатель мыши. Например: линейные графики + точечные диаграммы; точечные диаграммы + таблицы; диаграммы + дерево; карта + дерево и др.

70 © Дж. Тидвелл Шаблон 58. Локальное масштабирование (Local Zooming) Дано: большой набор данных в любой форме (таблицы, графики, карты и др.). Нужно: обеспечить выбор и просмотр подробных сведений (как неотъемлемой части картины) о конкретных объектах при сохранении общего высокоуровневого контекста. Решение: отобразить общее представление данных [мелкий шрифт и/или рисунки] с возможностью выбора небольших участков (одного или нескольких элементов), находящихся под указателем мыши; допустимо некоторое искажение пространственных взаимоотношений между объектами при демонстрации подробностей. Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11. «Рыбий глаз» с веб-сайта AT&T не для неопытных пользователей

71 © Дж. Тидвелл Шаблон 58. Локальное масштабирование (Local Zooming) (2) Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11. Приложение Inxight TableLens

72 © Дж. Тидвелл Шаблон 58. Локальное масштабирование (Local Zooming) (3) Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция Выбран один день на представлении «Три месяца»

73 © Дж. Тидвелл Шаблон 58. Локальное масштабирование (Local Zooming) (4) Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция Выбран один день на представлении «Один месяца»

74 © Дж. Тидвелл Шаблон 59. Чередование строк (Row Striping) Дано: таблица с данными; столбцы визуально «сильнее»; по строкам читать трудно (большое число столбцов или несколько строк текста в строках таблицы, или др.). Нужно: обеспечить удобство чтения данных построчно. Решение: использовать гештальт-принципы непрерывности и замкнутости; окрасить фон строк таблицы поочерёдно двумя спокойными ненасыщенными цветами, близких оттенков; iTunes Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11. Дополнительно: один из цветов может быть цветом фона страницы; отпадает необходимость отображать границы таблицы и её ячеек.

75 © Дж. Тидвелл Шаблон 59. Чередование строк (Row Striping) (2) Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11.

76 © Дж. Тидвелл Шаблон 60. Сортируемая таблица (Sortable Table) Дано: многомерные данные, представленные в таблице. Нужно: обеспечить возможность изучения взаимосвязей в данных; и упростить поиск конкретного элемента данных. Решение: использовать заголовок столбца как элемент управления (кнопка, гипертекст, стрелки и др.), выполняющий сортировку по данному атрибуту; выполнение очередной сортировки не нарушает текущую сортировку. Проводник Windows Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11.

77 © Дж. Тидвелл Шаблон 60. Сортируемая таблица (Sortable Table) (2) Inxight's Table Lens (здесь дома, выставленные на продажу) Информационная графика (деревья, таблицы, графики) 6 Проектирование интерфейса пользователя. Лекция 11. Сортировка: 1)по площади дома; 2)по числу спальных комнат. => взаимосвязи атрибутов (переменных) В таблице чем длиннее синий прямоугольник, тем больше значение атрибута

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 61. Переход к элементу (Jump To Item) Дано: список с прокруткой (таблица, раскрывающееся меню, комбинированное поле, дерево с большим числом узлов). Нужно: быстрый доступ к конкретному элементу списка, предпочтительно с клавиатуры. Решение: обеспечить ввод имени элемента с клавиатуры и немедленный переход к нему и его выделение; выделенным остаётся последний найденный/выбранный. Mac OS X Finder Информационная графика (деревья, таблицы, графики) 6 Примеры: поиск файлов, меню для выбора региона или страны; числовые списки (год, сумма) др. Брайзер Chrome

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 62. Строка для нового элемента (New-Item Row) Дано: «вертикальное» представление данных (таблица, список, дерево и др.). Нужно: обеспечить возможность добавление нового элемента, экономя пространство на экране и сокращая объём навигации. Решение: объединить акт создания нового элемента с местом, где постоянного расположения этого элемента; ввод нового элемента в пустую строку таблицы. MS Outlook Информационная графика (деревья, таблицы, графики) 6 Ш. Хорошие варианты по умолчанию (Good Defaults) Ш. Приглашение к вводу (Input Prompt)

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 63. Каскадные списки (Cascading Lists) Дано: данные, структурированные в виде дерева (на каждом уровне множество вариантов). Нужно: обеспечить просмотр и выбор элементов, снабжая полной информацией о местонахождении в иерархии элементов и о полном составе глубоких уровней иерархии. Решение: разбить иерархию на несколько прокручиваемых списков и отображать их на кране одновременно (в панелях слева направо); при необходимости в последней (самой правой) панели отображать подробные сведения о выбранном листе или элементы управления для действий, подходящих конкретному приложению (например, редактирование листового элемента). Диалог выбора шрифта Информационная графика (деревья, таблицы, графики) 6 Примеры иерархий: буквенные: файловые системы; концептуальные: навигация и выбор элементов в категориях или выбор в последовательности взаимосвязанных элементов; др.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 63. Каскадные списки (Cascading Lists) (2) Mac OS X Finder Информационная графика (деревья, таблицы, графики) 6 MS Excel

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 64. Древовидная таблица (Tree Table) Дано:. Нужно:. Решение:. Actions в Adobe Photoshop Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 65. График с несколькими осями Y (Multi-Y Graph) Дано:. Нужно:. Решение:. Actions в Adobe Photoshop Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 66. Небольшие образцы (Small Multiples) Дано:. Нужно:. Решение:. Actions в Adobe Photoshop Информационная графика (деревья, таблицы, графики) 6

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 67. Древовидная карта (Treemap) Дано: многомерные и/или иерархические данные, которые можно группировать по значениям атрибутов. Нужно: «упаковать» множество данных в один интерфейс с целью визуальной поддержки поиска тенденций и взаимосвязей в данных. Решение: представить данные в виде прямоугольников разных: a)размеров (~ некоторой количественной переменной, цена, популярность и др.).; b)цветов (~ некоторой количественной переменной, доход, или качественной переменной, тематика, категория); c)местоположений в целом (группировка по иерархии в данных); d)позиция внутри группы(от меньшего по размеру к большему или сортировка, например, по возрасту, по алфавиту); дополнить всплывающими подсказками, динамическими запросами и др. интерактивными механизмами. Информационная графика (деревья, таблицы, графики) 6 => уловить связи между размером и цветом, размером и местоположением, местоположением и цветом – быстро проникнуть вглубь происходящих процессов. История древовидных карт:

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 67. Древовидная карта (Treemap) (2) Информационная графика (деревья, таблицы, графики) 6 размер прямоугольника ~ размер сектора рынка; красный – потери; зелёный – выгода.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 67. Древовидная карта (Treemap) (3) NewsMap ( по новостям Google News Информационная графика (деревья, таблицы, графики) 6 размер блока и шрифта – популярность; цветовой тон – тема; значение цвета – давность.