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

решения конкретных классов проблем проектирования.

Назначение шаблонов (с точки зрения

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

Назначение шаблонов (точки зрения пользователя):
использовать преимущества идиоматических интерфейсов.

См.:
Дж. Тидвелл Разработка пользовательких интерфйсов;
Коллекцию шаблонов М. ван Велие по адресу: http://www.welie.com/patterns/;
Б. Скотт и др. Проектирование веб-интерфейсов;
др.

программу, не теряясь в ней и не попадая в

неприятности»

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

Шаблон. Многоуровневая отмена

сделать прямо сейчас, а не потом»
Идея:
предположить, что в первую

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

Я не хочу тратить время на то, чтобы выучить

что-то еще»

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

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

пока делал что-то»
Идея:
первоначальные цели пользователя могут измениться.

Следствия для проектирования:
дайте

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

отвечать на этот вопрос прямо сейчас, позвольте мне закончить!»
Идея:
следствие

желания пользователя получать мгновенное вознаграждение;
Иногда дело в нежелании отвечать на вопрос. в других случаях у пользователя может быть недостаточно информации, чтобы дать ответ прямо сейчас.

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

изменить. Нет, опять неправильно. Попробую еще раз. Вот так-то

лучше»

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

почему же он не работает здесь?»
Идея:
часто используемые физические действия

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

Ctrl+A, Ctrl+X и Ctrl+S

была здесь секунду назад! Куда она пропала?»
Идея:
в сложных

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

чтобы не забыть заняться этим позже»
Идея:
создать поддержку проспективной памяти

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

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

нужно это повторить?»
Идея:
предложить пользователям способы упрощения повторяющихся задач, которые

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

Следствие:
непосредственное наблюдение за пользователями поможет вам выяснить, поддержку каких типов повторяемых задач вам следует реализовать.

меня использовать мышь»
Идея:
у некоторых людей возникают физические проблемы при

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

Следствие:
определить клавишные сочетания быстрого вызова для операций, включаемых через меню (см. руководство по стилю оформления для конкретной платформы);
множественный выбор в списках – при помощи стрелок на клавиатуре в сочетании с модификаторами (Shift или Ctrl);
«обход по Tab»: Tab и Shift+Tab – перемещение клавиатурного фокуса;
многие стандартные элементы управления позволяют менять выбранное значение при помощи нажатия стрелок, клавиши Return или пробела;
в диалоговых окнах и на веб-страницах предусматривается кнопка по умолчанию; клавиша Return – и выполняется именно эта операция по умолчанию, после этого система переводит на следующую страницу или возвращает в предыдущее окно.

другие говорят об этом?»
Идея:
Советы коллег, непосредственные или косвенные, влияют

на процесс принятия решений людьми.

Следствия:
подумайте поможет ли это повысить эффективность работы пользователей? Как убедить пользователей конструктивно принимать участие? Как интегрировать социальный компонент в рабочий процесс типичного пользователя?
например, интерактивное сообщество, где пользователь находит поддержку, может стать ценной частью справочной системы для некоторых приложений;

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

другие говорят об этом?»
Идея:
Советы коллег, непосредственные или косвенные, влияют

на процесс принятия решений людьми.

Следствия:
подумайте поможет ли это повысить эффективность работы пользователей? Как убедить пользователей конструктивно принимать участие? Как интегрировать социальный компонент в рабочий процесс типичного пользователя?
например, интерактивное сообщество, где пользователь находит поддержку, может стать ценной частью справочной системы для некоторых приложений;

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

сущностей – организация объектов и поток выполнения задач:
списки объектов

(«над чем вы планируете работать?»):
линейное представление (с сортировкой);
двумерные таблицы;
иерархические структуры;
пространственные модели (карты, планы, диаграммы);
списки задач («что вы хотите сделать?»);
списки тематических категорий;
списки инструментов (календарь, адресная книга, блокнот).
Б. Физическая структура – представление материала на экране:

Три разные физические структуры

Selector)
From Windows Explorer
Mac Mail
Blackberry
Дано:
список объектов

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

(?): выбор шаблона представления списка

Plus Palette)
Дано:
разработка графического редактора;
Нужно:
создание новых графических объектов;
размещение их

в некотором пространстве.

Adobe Photoshop

http://www.mrpicassohead.com

+ Двухпанельный селектор

(One-Window Drilldown)
Дано:
приложение состоит из множества страниц, связанных гиперссылками;
или

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

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

Меню iPod

Mac OS X System Properties (Системные настройки)

Пункт Dock

Дано:
приложение отображает форматированное содержимое любого рода.
Нужно:
оптимизация представления содержимого под

разные платформы (ПК, КПК, смартфон);
возможность пользовательской модификации ПИ для работы в разных условиях (вывод на печать и др.);
возможность увидеть данные по-другому в поисках смысла.

Проводник
MS Windows

http://www.osp.ru

длинной или сложной задачи;
пользователь – новичок (редко посещает);
создатель

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

Flight Wizard (http://expedia.com)

Ш. Именованные разделы
Ш. Ответное включение
Ш. Ответное обнаружение
Ш. Пачка карточек
Ш. Предварительный просмотр

http://thetrain.com

Инсталлятор программы

Demand)
Дано:
слишком много элементов, чтобы размещать на одном представлении;
некоторые элементы

не очень важны.
Нужно:
упростить интерфейс – спрятать нечасто используемые элементы;
дать простой доступ к этим элементам;
сэкономить пространство в интерфейсе.

Ш. Закрываемые панели

Выбор цвета в Windows 2000

http://cnn.com

Поиск файлов Windows 2000

и дополнительное (примеры, определения терминов, справка) содержимое приложения;
связи между

элементами содержимого.
Нужно:
привлечь внимание любознательного пользователя;
организовать непрерывное увлекательное путешествие по содержимому.

http://www.kuro5hin.org/

информационный ссылки

Справка, помощь

Gmail.com

http://www.flickr.com

«боковые ходы» к другим коллекциям изображений

к ПО.

Нужно:
«легкие» справки для середняков;
полнофункциональные справочные системы для опытных

пользователей;
подсказки для новичков.

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

Points)
Дано:
приложение для решения определённого набора задач;
приложение временного типа.
Нужно:
на входе

сориентировать пользователя, какую задачу и как он будет решать.

Online Banking на http://home.ingdirect.com/

Ш. Мгновенное вознаграждение

несколько выделенных разделов или инструментов;
нет необходимость строго экономить экранное

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

MS Money

Palm

Spoke)
Дано:
приложение состоит из отдельных задач, субприложений или автономных элементов

содержимого;
физические ограничения пространства;
подчёркнутая разобщённость задач.

Нужно:
намеренно ограничить пользователя в последовательности операций: явно завершать по отдельности каждую задачу;
исключить визуальную и когнитивную перегрузку.

Интерфейс телефона Nokia серии 60

Одни вход и один выход – главная страница

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

– точка входа.

Нужно:
уменьшить число переходов между страницами;
явно продемонстрировать логическую связь между страницами.

Выставка «Самые высокие здания в мире» на сайте Музея современных искусств, http://moma.org/interactives/exhibitions/2004/tallbuildings/main.html

Типичная топология ссылок типа «Пирамида»

Примеры: слайд-шоу, главы книги, мастера, наборы продуктов и др.

Ш. Погружение в одно окно

приложения возникла проблема, которую оно не может решить без

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

Google News

пользователя при взаимодействии с приложением является линейным;
путь разбит на

шаги.
Нужно:
отобразить текущее положение в пути (сколько пройдено, сколько осталось).

TurboTax, 2004

пользователя при взаимодействии с приложением имеет иерархическую организацию;
Нужно:
отобразить текущее

положение в пути;
постоянный доступ к навигации в родительские представления;
линейный «срез» общей карты веб-сайта или приложения.

Страница выбранного альбома в iTunes

Amazon.com

Scroll Bar)
Дано:
приложение, ориентированное на работу с документами;
приложение, имеющее большое

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

tkdiff

Ш. Обзор и детали

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

указательный знак;
подчеркнуть различие разделов (по целевой аудитории, по назначению, по тематике).

www.apple.com

виртуальное пространство, которое возможно масштабировать, прокручивать, поворачивать вокруг оси;
приложение

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

«Эффект джина» в Mac OS X при сворачивании окна

Ш. Закрываемые панели

Плавное масштабирование гистограммы на странице «The Secret Lives of Numbers», http://www.turbulence.org/Works/nums/applet.html

процесс блокирует пользователя в ограниченном числе навигационных путей;
используется шаблон

Спицы колеса или Модальная панель.
Нужно:
возможность быстрого перехода в «безопасное место».

Аварийный люк не нужен, если используются Карта последовательности или Хлебные крошки

Ш. Спицы колеса
Ш. Модальная панель
Ш. Безопасное исследование