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

Пользователь должен видеть информационную структуру страницы по её компоновке (группы информации, вес информации и др.)

Приглашаем вас на вечеринку, посвященную

30-му дню рождения Зельды!

Также приглашаем детей. Будет подаваться ужин; если вы хотели бы принести с собой еду, то позвоните Стейси по телефону 555-12-12.

Когда: 20 октября в 19:00. Где: дом Зельды. Если вы не знаете, как проехать, не стесняйтесь звонить Зельде и спрашивать.

Пожалуйста, дайте ответ на приглашение Стейси до 10 октября. Увидимся на вечеринке!

Приглашаем вас на вечеринку, посвященную

30-му дню рождения Зельды!

Также приглашаем детей. Будет подаваться ужин; если вы хотели бы принести с собой еду, то позвоните Стейси по телефону 555-12-12.

Когда: 20 октября в 19:00.
Где: дом Зельды.
Если вы не знаете, как проехать, не стесняйтесь звонить Зельде и спрашивать.

Пожалуйста, дайте ответ на приглашение Стейси до 10 октября. Увидимся на вечеринке!

Диалоговое окно с хорошим визуальным потоком, Macromedia Dreamweaver

Четыре гештальт-принципа

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

Дано:
веб-страница;
приложения для редактирования документов.
Нужно:
Сразу перевести взгляд пользователя к самой важной информации или задаче.
Решение:
Чётко выраженный центральный элемент приковывает внимание – поместить важную часть ПИ в самый большой, центральный раздел страницы (окна), объединить дополнительные инструменты на панелях, окружающих сцену.

Flash MX

Google Maps

http://boingboing.net

Дано:
Много содержимого, которое не помещается на одной странице;
Содержимое разбиваемо на тематические или по задачам разделы, имеющие смысл для пользователя.
Нужно:
Уместить всё содержимое на одной странице и при этом сделать её максимально удобной для быстрого просмотра и восприятия.
Решение:
Разбить содержимое на автономные разделы;
Перечислить разделы на одной странице;
Присвоить визуально заметные заголовки, использовать пустое пространство для отделения разделов, поместить разделы на подложки разных цветов, аккуратнее использовать рамки.

http://www.adobe.com

Javadoc HTML page

Eudora for Mac OS 9

Дано:
на странице слишком много содержимого - внимание пользователя рассеивается;
возможна группировка содержимого по тематике, по задачам и т. п.;
содержимое нельзя организовать в жесткую структуру (например, по шаблону Таблица свойств);
группировка в Именованные разделы не приведёт к сокращению места.
Нужно:
вывести все разделы на одной странице;
избежать зашумленного интерфейса;
использовать распространённую форму представления разделов.
Решение:
поместить разделы содержимого на отдельные панели ("карточки") - продумать информационную архитектуру (контексты);
собрать их в пачку так, чтобы была видна только одна панель;
выбрать способ представления - горизонтальные вкладки, вертикальные вкладки, без вкладок, столбец названий в левой части страницы, раскрывающийся список с названиями карточек (не рек.);
использовать вкладки или др. средства для предоставления доступа к "карточкам".

Свойства обозревателя, Internet Explorer

http://thebanmappingproject.org

Netscape 7

Окно печати, Internet Explorer для Mac OS X

Дано:
на странице слишком много содержимого - внимание пользователя рассеивается.
Нужно:
вывести все разделы на одной странице;
избежать зашумленного интерфейса;
обеспечить независимый одновременный доступ к разным разделам.
Решение:
тоже, что и для ш. Пачка карточек;
но позволить пользователю открывать и закрывать панели независимо друг от друга;
Замечание:
проверьте удобство применения этого шаблона на ваших пользователях.

Dreamweaver MX

A9 от Amazon

http://visualthesaurus.com

Flickr.com

Visual Studio

Дано:
на странице слишком много содержимого - внимание пользователя рассеивается;
монопольный тип интерфейса (длительная работа с приложением).
Нужно:
вывести все разделы на одной странице;
обеспечить независимый одновременный доступ к разным разделам;
позволить пользователю самому выполнять компоновку панелей;
обеспечить поддержку пространственной памяти.
Решение:
позволить самостоятельно перемещать и располагать панели приложения;
запомнить расположение панелей для следующего запуска приложения;
обеспечить возможность восстановления компоновки по умолчанию.

MATLAB

Winamp

Дано:
форма или другой набор элементов, перед которыми будут находиться текстовые метки.
Нужно:
сформировать строгие перцепционные пары "метка-элемент" (использовать гешталь-принципы близости и непрерывности).
Решение:
элементы оформить в виде таблицы из двух столбцов;
выровнять метки, расположенные слева, по правому краю;
выровнять элементы, расположенные справа, по левому краю;
по возможности сделать одинаковой ширину элементов.

Адресная книга, Mac Os X

Dreamweaver MX

Дано:
Страница или диалоговое окно, где вверху находится заголовок или колонтитул, внизу – несколько кнопок или ссылок, OK и Отмена, Назад и Вперёд.
всё содержимое страницы помещается на экране без прокрутки.
Нужно:
Сбалансировать визуально сильные элементы, заголовки, вкладки и др., с одной стороны, кнопки – с другой («уравновесить гири»);
Способствовать идеальному визуальному потоку.
Решение:
организовать элементы на странице ассиметрично, но сбалансировать, поместив визуальный вес в верхний левый и нижний правый углы.

http://eleganthack.com

http://miniusa.com

Поиск дилера

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

Visual Studio

Альтернативы:
меню;
прямая манипуляция.

Adobe Photoshop

Дано:
сложная задача;
пользователь новичок или редко посещает;
следующий шаг может зависеть от выбора, сделанного на предыдущем шаге.
Нужно:
помочь пользователю решить сложную задачу шаг за шагом на одной странице;
Формировать правильную ментальную модель решения задачи у пользователя;
не нарушать состояние потока из-за переключения контекстов, вызванного отдельными модальными окнами как в ш. Мастер.
Решение:
начать с лаконичного ПИ;
после каждого выполненного шага показывать следующие объекты ПИ (для следующего шага).

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

MATLAB's Curve-Fitting Tool

Mac OS X System Preferences

Поиск в телефонной книге, Nokia 5800

Ответное выключение

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

Нестандартные кнопки и элементы управления:

значки, реагирующие на щелчки мыши;
текст, реагирующий на щелчки мыши, но не выглядящий как кнопка;
объект, реагирующий на наведение указателя мыши;
объект, выглядящий как будто им можно манипулировать.

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

© Дж. Тидвелл

Примеры таких приложений: мультимедийные проигрыватели, программы мгновенного обмена сообщениями, визуальные редакторы, игры и др.

точка конца песни

открывает меню значений временной шкалы (⅟₂, ¼, ⅟₈ нота т др.)

Выделяемые «регионы» каждой дорожки (поддержка множественного выбора, перетаскивания и перемещения со строки на строку)

перемещаемые «сферы» – контрольные точки уровня громкости (вверх-вниз, из стороны- в сторону) – регулировка крутизны кривой

блокировка воспроизводящей головки

для перемещения ползунка – щелкнуть в крайние положения

размер окна

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

© Дж. Тидвелл

Дано:
небольшое число действий (2-5), связанных некоторым смыслом друг с другом.
Нужно:
подсказать пользователю, какие действия доступны в данной контексте;
помочь пользователю понять связь между действиями.
Решение:
представлять связанные действия в виде набора кнопок, выровненных по вертикали и горизонтали;
использовать гешталь-принципы близости и замкнутости (размер, выравнивание);
если действий более трёх-четырёх, то создать несколько наборов кнопок;
разместить группу рядом с объектом (справа), на который влияют действия, или внизу окна, если объект – всё окно.

Окно настройки в MS Word

элементы управления воспроизведением

действия, связанные со списком воспроизведения

стандартные кнопки строки заголовка

смешанные действия

Apple iTunes

Дано:
в некотором контексте много действий (их число велико для использования ш. Группа кнопок);
возможность не экономить экранное пространство.
Нужно:
наглядно предоставить возможность действий в зависимости от контекста;
свободное представление (структуризация) действий.
Решение:
не использовать меню основное или всплывающее;
предоставить большую группу схожих действия на панели ПИ, всегда находящейся на экране, снизу или сбоку от того, с чем работает панель действий;
выбрать средство структуризации действий: простой список, список из нескольких столбцов, списки по категориям, деревья, таблицы, Закрываемые панели или комбинация средств;
выбрать средство обозначения действий: текст, значки или комбинация средств.

Панель "New Presentation", MS Powerpoint

Windows Explorer

Дано:
пользователь выполняет некоторую транзакцию, например, совершает покупку в Интернет-магазине.
Нужно:
создать ощущение завершённости транзакции на последнем её шаге.
Решение:
поместить кнопку, завершающую транзакцию («Готово», «Отправить» и т. п.), в конец визуального потока (рядом с последним полем ввода);
сделать кнопку большой и заметной (выглядящей как кнопка, а не ссылка);
текст (на кнопке) предпочтительнее, чем одиночный значок.

www.kodakgallery.com

Дано:
некоторые элементы меню действуют на определённые объекты, например, команда Закрыть;
поведение некоторых элементов меню зависит от контекста, например, команда Отменить (Undo).
Нужно:
точно сообщить пользователю, что произойдёт при выборе этих элементов меню.
Решение:
динамически дополнять названия элементов меню или отключать вообще (в зависимости от выбранного объекта ПИ или другого контекста);
что делать, если выбраны несколько объектов?.

MS Word (Windows)

Illustator (Mac OS)

ш. Безопасное исследование

Дано:
пользователь собирается выполнить что-то «тяжеловесное» или очень важное (например, отправка формы, заполнение которой заняло много времени, печать документа, совершение покупки).
Нужно:
дать возможность пользователю убедиться, что он всё делает правильно;
предотвратить ошибки, потерю времени и других средств;
просто помочь понять, к чему приводит некоторое действие.
Решение:
предоставить возможность предварительного просмотра результата действий (сводка о данных транзакции, документа «на бумаге», итоговый вид изображения и др.);
предоставить возможность вернуться и исправить ошибки.

MS PowerPoint

Amazon.com

Adobe Photoshop

Дано:
длительная операция, которая блокирует взаимодействие пользователя с интерфейсом;
длительная операция, которая выполняется в фоновом режиме более двух секунд.
Нужно:
снять беспокойство пользователя по поводу невозможности продолжать взаимодействие с системой;
сократить субъективное время выполнения операции.
Решение:
анимированный индикатор того, что:
происходит в данный момент;
какая доля операции уже выполнена;
сколько времени остаётся ждать;
показать, как остановить процесс;
не блокировать другую работу с интерфейсом.

Стартовый экран KDE

Internet Explorer progress

Mail.ru

Свойства принтера в Windows с хорошо спрятанной операцией Отмена

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

ш. История команд

Распространённые отменяемые изменения (операции):
ввод текста в документах;
транзакции в БД;
изменения в изображениях или на холстах для рисования;
операции над файлами;
создание, удаление и изменение порядка объектов в списках (например, электронных сообщений);
операции вставки, копирования и вырезания.
Распространённые неотменяемые изменения (операции):
выделение текста, объектов;
навигация между окнами, страницами;
положение указателя мыши или курсора;
положение полосы прокрутки;
местоположение окна или панели.
Операции, принципиально неотменяемые:
шаг приобретения при совершении покупки в электронном магазине;
публикация сообщения на форуме или в чате;
отправку электронной почты
и др.

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

MATLAB

Actions в Adobe Photoshop

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

© Дж. Тидвелл

=> выбрать форму представления данных

Найдите чёрные объекты

Ещё раз

Ещё раз

Найдите значения, большие единицы

=> выбрать способ кодирования данных

Подсознательные способы визуализации взаимосвязей в данных

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

© Дж. Тидвелл

=> позволить пользователю сфокусироваться на интересующей его точке, одновременно показать достаточно материала вокруг неё, чтобы он понимал, где именно эта точка находится на общем графике

Навигация и просмотр. Распространённые техники

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

© Дж. Тидвелл

Упорядочивание и перестановка

цель: сконцентрироваться исключительно на интересующем пользователя фрагменте данных, избавившись от всего остального;
например, ш. Динамические запросы, ш. Окрашивание данных;
выяснить: что именно будет интересовать ваших пользователей;
параметры лучших интерфейсов фильтрации и запроса:
высокая интерактивность;
повторяемость (уточнения, комбинации поиска по запросу и фильтрации);
зависимость от контекста (вывод результата поиска с представлением контекста найденных данных).

Поиск и фильтрация

© Дж. Тидвелл

www.sundayriver.com

Техники отображения конкретных значений на общем изображении

Дано:
«большое изображение» данных.
Нужно:
дать возможность самостоятельно просматривать детали некоторого фрагмента общей картины данных;
сохранить ориентацию относительно общей картины.
Решение:
поместить иллюстрацию с общим видом данных рядом с увеличенным детальным видом;
при перетаскивании области просмотра по общему изображению, показывать соответствующую часть изображения в детальном представлении;
на общем представлении показывать указатель «Вы находитесь здесь».

http://wildfire.usgs.gov

Adobe Photoshop

MATLAB Signal Browser

Дано:
отображение общего представления данных;
большая часть данных скрыта под определёнными точками (объектами) на иллюстрации.
Нужно:
поиск конкретных значений данных на их общем представлении;
исследование данных по общей картине (что здесь ещё есть).
Решение:
выводить значения данных для интересующей пользователя точки во всплывающей подсказке при наведении над ней указателя мыши.

www.thebanmappingproject.com

http://hivegroup.com

Дано:
многомерный набор данных любой формы, в любом представлении;
фиксированный набор свойств (атрибутов) данных, интересующий пользователя.
Нужно:
увидеть те фрагменты данных, которые соответствуют определённым критериям;
понять взаимосвязи между разными свойствами данных;
упростить способ исследования данных.
Решение:
возможность настраивать фильтрацию данных с помощью простых стандартных элементов управления;
немедленная, интерактивная визуализация фильтрации.

http://hivegroup.com

Выбор элементов управления (зависит от типа данных и от типов запросов пользователей):
ползунки (выбор одного числа в определённом диапазоне);
двойные ползунки (выбор поддиапазона);
переключатели и раскрывающиеся списки (выбор одного из нескольких возможных элементов);
флажки (выбор значений бинарных атрибутов);
иногда текстовые поля (ввод значений с ш. Заполнение пропусков).

Выставка в Музее современного искусства,
http://www.moma.org/interactives/exhibitions/2002/brucke/flash.html

Дано:
многомерные данные.
Нужно:
обеспечить средство визуального анализа взаимосвязей в данных.
Решение:
согласованные (связанные) представления данных в виде разных проекций;
мгновенная синхронизация манипуляций (выделение, масштабирование, панорамирование) в разных представлениях.

http://www.yenka.com/

http://www.yenka.com/

Способ выделения данных:
рамка;
щёлчок мыши на объекте;
+ Shift/+Ctrl;
лассо;
инвертирование;
спец. указатель мыши.
Например:
линейные графики + точечные диаграммы;
точечные диаграммы + таблицы;
диаграммы + дерево;
карта + дерево и др.

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

«Рыбий глаз» с веб-сайта AT&T

не для неопытных пользователей

Приложение Inxight TableLens

http://www.windsorinterfaces.com/datelens-screenshots.shtml

Выбран один день на представлении «Три месяца»

http://www.windsorinterfaces.com/datelens-screenshots.shtml

Выбран один день на представлении «Один месяца»

iTunes

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

Дополнительно:
один из цветов может быть цветом фона страницы;
отпадает необходимость отображать границы таблицы и её ячеек.

Проводник Windows

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

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

Сортировка:
по площади дома;
по числу спальных комнат.

=> взаимосвязи атрибутов (переменных)

В таблице чем длиннее синий прямоугольник, тем больше значение атрибута

Дано:
список с прокруткой (таблица, раскрывающееся меню, комбинированное поле, дерево с большим числом узлов).
Нужно:
быстрый доступ к конкретному элементу списка, предпочтительно с клавиатуры.
Решение:
обеспечить ввод имени элемента с клавиатуры и немедленный переход к нему и его выделение;
выделенным остаётся последний найденный/выбранный.

Mac OS X Finder

Примеры:
поиск файлов, меню для выбора региона или страны;
числовые списки (год, сумма)
др.

Брайзер Chrome

Дано:
«вертикальное» представление данных (таблица, список, дерево и др.).
Нужно:
обеспечить возможность добавление нового элемента, экономя пространство на экране и сокращая объём навигации.
Решение:
объединить акт создания нового элемента с местом, где постоянного расположения этого элемента;
ввод нового элемента в пустую строку таблицы.

MS Outlook

Ш. Хорошие варианты по умолчанию (Good Defaults)
Ш. Приглашение к вводу (Input Prompt)

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

Диалог выбора шрифта

Примеры иерархий:
буквенные: файловые системы;
концептуальные: навигация и выбор элементов в категориях или выбор в последовательности взаимосвязанных элементов;
др.

Mac OS X Finder

MS Excel

Дано:
.
Нужно:
.
Решение:
.

Actions в Adobe Photoshop

Дано:
.
Нужно:
.
Решение:
.

Actions в Adobe Photoshop

Дано:
.
Нужно:
.
Решение:
.

Actions в Adobe Photoshop

http://www.smartmoney.com/map-of-the-market/

=> уловить связи между размером и цветом, размером и местоположением, местоположением и цветом – быстро проникнуть вглубь происходящих процессов.

История древовидных карт:
http://www.cs.umd.edu/hcil/treemap-history/

http://www.smartmoney.com/map-of-the-market/

размер прямоугольника ~ размер сектора рынка;
красный – потери; зелёный – выгода.

NewsMap (http://newsmap.jp) по новостям Google News

размер блока и шрифта – популярность;
цветовой тон – тема;
значение цвета – давность.