Чужие мысли

Переводы и статьи по дизайну интерфейсов, юзабилити и web-разработке

Паттерны дизайна взаимодействия

Interaction Design Patterns
Автор: Eelke Folmer
Источник: Interaction-Design.org

Паттерн дизайна взаимодействия (Interaction design, ID) – универсальное решение часто повторяющейся проблемы в дизайне интерфейсов или в дизайне взаимодействия. В дизайне взаимодействия паттерн обычно состоит из следующих элементов:

  • Проблема. Должна быть проблема, связанная с эксплуатацией системы и имеющая отношение к пользователям.
  • Условия. Ситуации (зависящие от задач, пользователей и контекста) в которых проблема мешает достижению цели. Этот раздел в основном содержит описание ситуаций, в которых возникает проблема.
  • Принципы. Паттерн, как правило, основывается на одном или нескольких принципах эргономики.
  • Решение. Проверенное решение проблемы. Описывается только суть решения, дизайнер может сам выбрать конкретный способ его применения.
  • Объяснение. Описание, как и почему паттерн работает. Обоснование и аргументация того, каким образом, паттерн влияет на удобство использования. Какие аспекты взаимодействия можно улучшить, а какие наоборот – могут пострадать.
  • Примеры. Примеры показывают, как паттерн применяется в реальных системах.
  • Реализация. Некоторые паттерны включают элементы реализации.

Паттерны дизайна взаимодействия известны в разных областях под разными названиями, например, паттерны взаимодействия (interaction patterns), паттерны пользовательского интерфейса (user interface patterns), паттерны юзабилити (usability patterns), паттерны web-дизайна (web design patterns). Эти понятия во многом схожи и предназначены для решения проблем, связанных с взаимодействием и дизайном интерфейсов.

История паттернов взаимодействия

Паттерны появились как элементы концепции Кристофера Александра (1977 год). Паттерны и созданный для их описания язык оказались подходящим способом для описания примеров хорошего дизайна и передачи опыта для повторного использования. В области разработки программного обеспечения паттерны стали популярны после появления объектно-ориентированного программирования. Сейчас паттерны стали универсальным способом решения проблем в различных областях: архитектура, объектно-ориентированное программирование, моделирование бизнес-процессов, дизайн взаимодействия.

Первая значительная коллекция паттернов «Common Ground» была собрана Дженифер Тидуэл (Jenifer Tidwell). Сейчас собраны коллекции паттернов на многих языках.

Вот несколько недавно вышедших книг, содержащих описание паттернов (все они на английском языке):

  • A Pattern Approach to Interaction Design, by Jan Borchers (2001)
  • A Pattern Language for Web Usability, by Ian Graham (2003)
  • The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience, by Douglas K. van Duyne, James A. Landay, and Jason I. Hong (2002)
  • Designing Interfaces: Patterns for Effective Interaction Design, by Jenifer Tidwell (2005)

Пример паттерна взаимодействия: многоуровневая отмена действий

Паттерны дизайна взаимодействия

Автор

Martijn van Welie (http://www.welie.com/patterns/gui/undo.html)

Проблема

После того, как пользователь сделал действие, он хочет его отменить (например, потому что понял, что совершил ошибку).

Условия

Вы проектируете настольное или web-приложение, в котором пользователи могут работать с информацией и создавать некоторые новые артефакты. Как правило, такие системы включают текстовые редакторы, средства для вычислений, графические пакеты или среды разработки. Как правило, такие системы работают с собственными данными и могут выполнять несколько необратимых действий (например, таких как отправка электронной почты). Отмена не подходит для систем, где большинство действий имеет необратимый характер (например, для операционных систем).

Отменять свои действия захотят как новички, так и продвинутые пользователи. Продвинутым пользователям может понадобиться история действий для более сложных манипуляций с отменой. Например, в графических программах может потребоваться отменить действия над одним объектом, не отменяя при этом действия с другими объектами.

Принцип

Управление ошибками (Норман, 1998).

Решение

Вести список действий пользователя и позволить пользователям отменять выбранные действия.

Каждое действие пользователя регистрируется и добавляется в список. Этот список затем становится историей действий, и пользователи могут отменить свои действия, начиная с последнего и двигаясь к началу списка. Это называется линейной многоуровневой отменой.

Работа с историей

Есть два способа показать историю действий пользователя. Первый вариант – «как в офисе»: в меню «Правка» доступны функции «Отменить» и «Повторить» (которые доступны также по горячим клавишам). Иногда используются виджеты со списком действий. Перетаскивая элементы можно отменять действия. Второй вариант – работать непосредственно со списком действий и, используя ползунок, возвращаться к состоянию в прошлом и отменять действия. Такой вариант использует Photoshop.

Отображение действий

Действия в списке, как правило, обозначаются с помощью меток, например, «Создать круг», «Ввод символов», «Новый контакт». Такие метки содержат только названия функций, но не содержат объектов, над которыми выполняются действия. В некоторых программах можно использовать названия объектов – «Изменить цвет Объекта 1 на красный».

Детализация действий

При проектировании отмены важно определить желаемые пределы отмены. Например, в текстовом редакторе нет необходимости регистрировать нажатие каждой клавиши. В качестве единицы отмены используются слова. При проектировании необходимо определить, в каких единицах будут измеряться действия.

Необратимые действия

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

Избирательная отмена

В некоторых случаях может потребоваться исключить одно действие из истории. Это тот случай, когда нужно отменить часть действий, сохранив результаты более поздних. Избирательная отмена гораздо сложнее линейной, поскольку между действиями существуют зависимости, определяющие последствия отмены действий. Например, если отменяется действие «Создать объект», то все последующие действия с этим объектом теряют смысл и должны быть удалены из истории.

Объектно-ориентированная отмена

Объектно-ориентированную отмену можно рассматривать как альтернативу избирательной. При объектном подходе каждый объект имеет свою собственную историю действий. После выбора объекта пользователь может отменять действии непосредственно с этим объектом.

Многопользовательская отмена

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

Объяснение

Возможность отменить действия придает пользователям чувство уверенности. Пользователи считают, что они контролируют систему, а не наоборот. Они могут изучать, совершать ошибки или просто вернуться на несколько шагов назад, чтобы понять, как это работает. Также уходит необходимость показывать большое количество предупреждений.

Примеры

Паттерны дизайна взаимодействия

Как и во всех приложениях MS Office в Word пользователи могут видеть свои действия и отменять последние из них. Действия имеют краткие описания. После отмены действие можно вернуть.

Паттерны дизайна взаимодействия

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

Реализация

Большинство реализаций основано на паттерне Command. Идея состоит в том, чтобы иметь базовый класс, один метод которого будет выполнять, а другой отменять действия объектов других классов. Затем на каждое действие базовый класс сохраняет код, который позволит это действие отменить.






Комментарии



Ярослав Бирзул 08.12.2007 04:33

В photoshop cs3 не каждое действие можно отменить, хоть интерфейс отмены и стал гораздо лучше.

Антон, в который раз благодарю за шикарный перевод :)

Dreamer 25.03.2008 01:38

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

Первый автор убейся об стену, спамер. И походу не только епрвый.

safarov 01.06.2008 04:40

По теме:

Книга Designing Interfaces: Patterns for Effective Interaction Design, by Jenifer Tidwell (2005) уже есть на русском
Дж. Тидвелл. Разработка пользовательских интерфейсов.- СПб.: Питер, 2008. - 416 с.

References

* Коллекция шаблонов Martijn van Welie (http://www.welie.com/patterns/gui/undo.html). Часть переведена здесь http://www.webmascon.com/topics/planning/16a.asp
* Designing Interfaces: Patterns for Effective Interaction Design (http://designinginterfaces.com/)
* Information Design Patterns (http://niceone.org/infodesign/)
* Patterns из книги Дж. Тидвелл. Разработка пользовательских интерфейсов. http://time-tripper.com/uipatterns/About_Patterns
* Небольшой набор шаблонов для визуализации данных http://geography.uoregon.edu/datagraphics/patterns/index.htm

P.S. А все-таки Дженифер Тидуэл (Jenifer Tidwell) = Дженифер Тидвелл.

safarov 01.06.2008 04:44

А, да забыл ссылка http://www.welie.com/patterns/gui/undo.html сейчас битая
Верная http://www.welie.com/patterns/index.php



Оставьте комментарий

You must be logged in to post a comment. Log in