'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

Категории рассматриваемых шаблонов проектирования Проектирование интерфейса пользователя. Лекция №11. 4 © Дж. Тидвелл


Слайд 4

Проектирование интерфейса пользователя. Лекция №11. 5 Основы компоновки страницы. Факторы разметки страницы визуальная иерархия; визуальный поток; группировка и выравнивание; «динамические дисплеи».


Слайд 5

Проектирование интерфейса пользователя. Лекция №11. 6 Основы компоновки страницы. Визуальная иерархия (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 октября. Увидимся на вечеринке!


Слайд 6

Проектирование интерфейса пользователя. Лекция №11. 7 Основы компоновки страницы. Визуальная иерархия (2) Средства отражения визуальной иерархии: предпочтение верхнему левому краю; пустое пространство; контрастные шрифты (чем крупнее и жирнее, тем важнее информация); контрастные цвета для фона и переднего плана; позиционирование, выравнивание и отступы (смещённый вправо текст – второстепенный по отношению к тому, что над ним); графика типа линий, рамок, цветных панелей.


Слайд 7

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


Слайд 8

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


Слайд 9

Проектирование интерфейса пользователя. Лекция №11. 10 Основы компоновки страницы. Всё вместе http://www.alistapart.com/articles/


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

Проектирование интерфейса пользователя. Лекция №11. 15 © Дж. Тидвелл Шаблон №33. Центральная схема (Center Stage) (2) Google Maps http://boingboing.net


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

Проектирование интерфейса пользователя. Лекция №11. 19 © Дж. Тидвелл Шаблон №35. Пачка карточек (Card Stack) (2) http://thebanmappingproject.org Netscape 7 Окно печати, Internet Explorer для Mac OS X


Слайд 19

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


Слайд 20

Проектирование интерфейса пользователя. Лекция №11. 21 © Дж. Тидвелл Шаблон №36. Закрываемые панели (Closable Panels) (2) A9 от Amazon http://visualthesaurus.com


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

Проектирование интерфейса пользователя. Лекция №11. 28 © Дж. Тидвелл Шаблон №39. Диагональный баланс (Diagonal Balance) (2) http://eleganthack.com http://miniusa.com Поиск дилера


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

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


Слайд 36

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


Слайд 37

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


Слайд 38

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


Слайд 39

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


Слайд 40

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


Слайд 41

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


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

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


Слайд 48

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


Слайд 49

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


Слайд 50

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


Слайд 51

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


Слайд 52

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


Слайд 53

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


Слайд 54

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


Слайд 55

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


Слайд 56

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


Слайд 57

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


Слайд 58

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


Слайд 59

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


Слайд 60

Каковы конкретные значения данных? Проектирование интерфейса пользователя. Лекция №11. 61 © Дж. Тидвелл Метки, например, названия городов на географической карте. Легенда, если в информационной графике для изображения значений используются цвет, стиль линий, символ или размер. Оси, линейки, сетки, если суть данных задаётся их местоположением на графике. Всплывающие данные, см. ш. Всплывающие данные, если информационная графика интерактивна. Окрашивание данных, если нужно увидеть выборку данных среди всей последовательности данных и если нужно увидеть эту выборку на нескольких изображениях, см. ш. Окрашивание данных. Техники отображения конкретных значений на общем изображении


Слайд 61

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


Слайд 62

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


Слайд 63

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


Слайд 64

Проектирование интерфейса пользователя. Лекция №11. 65 © Дж. Тидвелл Шаблон №55. Всплывающие данные (Datatips) (2) http://hivegroup.com


Слайд 65

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


Слайд 66

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


Слайд 67

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


Слайд 68

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


Слайд 69

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


Слайд 70

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


Слайд 71

72 © Дж. Тидвелл Шаблон №58. Локальное масштабирование (Local Zooming) (3) Проектирование интерфейса пользователя. Лекция №11. http://www.windsorinterfaces.com/datelens-screenshots.shtml Выбран один день на представлении «Три месяца»


Слайд 72

73 © Дж. Тидвелл Шаблон №58. Локальное масштабирование (Local Zooming) (4) Проектирование интерфейса пользователя. Лекция №11. http://www.windsorinterfaces.com/datelens-screenshots.shtml Выбран один день на представлении «Один месяца»


Слайд 73

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


Слайд 74

75 © Дж. Тидвелл Шаблон №59. Чередование строк (Row Striping) (2) http://boston.com Проектирование интерфейса пользователя. Лекция №11.


Слайд 75

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


Слайд 76

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


Слайд 77

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


Слайд 78

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


Слайд 79

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


Слайд 80

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


Слайд 81

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


Слайд 82

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


Слайд 83

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


Слайд 84

Проектирование интерфейса пользователя. Лекция №11. 85 © Дж. Тидвелл Шаблон №67. Древовидная карта (Treemap) Дано: многомерные и/или иерархические данные, которые можно группировать по значениям атрибутов. Нужно: «упаковать» множество данных в один интерфейс с целью визуальной поддержки поиска тенденций и взаимосвязей в данных. Решение: представить данные в виде прямоугольников разных: размеров (~ некоторой количественной переменной, цена, популярность и др.).; цветов (~ некоторой количественной переменной, доход, или качественной переменной, тематика, категория); местоположений в целом (группировка по иерархии в данных); позиция внутри группы(от меньшего по размеру к большему или сортировка , например, по возрасту, по алфавиту); дополнить всплывающими подсказками, динамическими запросами и др. интерактивными механизмами. http://www.smartmoney.com/map-of-the-market/ => уловить связи между размером и цветом, размером и местоположением, местоположением и цветом – быстро проникнуть вглубь происходящих процессов. История древовидных карт: http://www.cs.umd.edu/hcil/treemap-history/


Слайд 85

Проектирование интерфейса пользователя. Лекция №11. 86 © Дж. Тидвелл Шаблон №67. Древовидная карта (Treemap) (2) http://www.smartmoney.com/map-of-the-market/ размер прямоугольника ~ размер сектора рынка; красный – потери; зелёный – выгода.


Слайд 86

Проектирование интерфейса пользователя. Лекция №11. 87 © Дж. Тидвелл Шаблон №67. Древовидная карта (Treemap) (3) NewsMap (http://newsmap.jp) по новостям Google News размер блока и шрифта – популярность; цветовой тон – тема; значение цвета – давность.


×

HTML:





Ссылка: