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

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

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

Особые категории пользователей. Дети Проектирование интерфейса пользователя. Лекция Интерфейсные принципы 2

Особые категории пользователей. Дети Проектирование интерфейса пользователя. Лекция Интерфейсные принципы 2

Особые категории пользователей. Дети Проектирование интерфейса пользователя. Лекция Интерфейсные принципы 2

Особые категории пользователей. Слабовидящие люли Проектирование интерфейса пользователя. Лекция Интерфейсные принципы 2

Особые категории пользователей. Люди, с ограниченными возможностями Проектирование интерфейса пользователя. Лекция 10.8 Голосовой интерфейс Виды нарушений: нарушение зрения; нарушение слуха. тактильная дисфункция Технологии: увеличение контраста и яркости изображения на экране; системы экранного увеличения (лупа); системы считывания экранной информации (звуковые синтезаторы); сканер + OCR + звуковой синтезатор; системы распознавания естественной речи; устройства ввода: педали, заменяющие клавиши Alt, Shift и Ctrl, световые перья, мыши в форме ручки и альтернативные клавиатуры и др. Альтернативная клавиатура IntelliKeys Навигационное программное обеспечение WinSCAN Интерфейсные принципы 2

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

Шаблоны проектирования взаимодействия. Примеры интерфейсов-идиом Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Формы Текстовые редакторыГрафические редакторыВеб-страницы Места для общения Интернет-магазины Электронные таблицыОбозревателиКалендари Мультимедийные проигрыватели Информационная графика Игры с эффектом погружения

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 1. Безопасное исследование «Позвольте мне исследовать программу, не теряясь в ней и не попадая в неприятности» Идея: пользователя легко отпугнуть от добровольного исследования ПО; подготовьте для пользователя безопасные способы его изучения, чтобы пользователи могли поэкспериментировать, не опасаясь никаких последствий. Шаблон. Многоуровневая отмена

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 2. Мгновенное вознаграждение «Я хочу это сделать прямо сейчас, а не потом» Идея: предположить, что в первую очередь будет делать новый пользователь, и разработать ПИ так, чтобы это первое действие оказалось потрясающе простым. если пользователю необходимо выполнить какую- либо задачу, то подскажите ему типичную отправную точку. не следует прятать начальную функциональность за тем, что должно быть прочитано, или тем, чего нужно долго ждать, например регистрационным экраном, длинными инструкциями, медленно загружающимися страницами или объявлениями.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 3. Разумная достаточность «Меня это устраивает. Я не хочу тратить время на то, чтобы выучить что-то еще» Идея: наблюдения социологов: люди предпочитают довольствоваться достаточно хорошим, а не наилучшим, если изучение всех альтернативных вариантов может требовать траты лишнего времени или усилий; разумная достаточность мешает многим пользователям избавиться от странных привычек даже после длительной работы с системой; сложный интерфейс предъявляет высокие когнитивные требования к новым пользователям – часто склоняет их к тому, чтобы довольствоваться малым: они ищут первое, чем смогут успешно воспользоваться. Следствия для проектирования: делайте метки короткими и используйте простые слова, позволяющие их быстро прочитать; макет интерфейса должен отражать суть приложения; продумайте простой способ перемещения по интерфейсу; предусмотрите «аварийные люки».

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 5. Отложенный выбор «Я не хочу отвечать на этот вопрос прямо сейчас, позвольте мне закончить!» Идея: следствие желания пользователя получать мгновенное вознаграждение; Иногда дело в нежелании отвечать на вопрос. в других случаях у пользователя может быть недостаточно информации, чтобы дать ответ прямо сейчас. Следствия для проектирования: не выдавайте слишком много вопросов и вариантов выбора с самого начала; в формах четко помечайте не обходимые поля и не делайте обязательными слишком много полей; иногда можно отделять несколько важных вопросов или настроек от остальных, менее значительных. См. шаблон «Дополнения по требованию»; по возможности используйте шаблон «Хорошие варианты по умолчанию»; сделайте доступ к отложенным полям очевидным; на веб-сайтах с услугами сначала вовлеките и увлеките пользователя сервисом, и только потом требуйте регистрации.

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 7. Привыкание «Этот способ работает везде, почему же он не работает здесь?» Идея: часто используемые физические действия становятся рефлекторными; с одной стороны, эта тенденция помогает людям становиться опытными пользователями инструментов; с другой стороны, скрывает ловушки, когда пользователь пытается применить привычное действие в ситуации, где оно не работает или, что еще хуже, делает что-то разрушительное. Следствия: соблюдайте единообразие в приложениях и в пределах одного приложения; диалоговые окна с подтверждением операции часто не помогают защитить пользователя от случайных изменений. Ctrl+A, Ctrl+X и Ctrl+S

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 8. Пространственная память «Клянусь, эта кнопка была здесь секунду назад! Куда она пропала?» Идея: в сложных приложениях люди могут находить объекты, запоминая, где они находятся по отношению к другим элементам: инструментам на панелях инструментов, объектам в иерархических списках и т. д. Следствие: без особой необходимости не следует перемещать существующие элементы управления; необходимость единообразия как среди разных программ, так и в пределах одного приложения (люди ожидают найти определенную функциональность в привычных местах). полезно предоставлять области для хранения документов и объектов, где порядок может наводить сам пользователь; не изменяйте его, пока они сами не попросят об этом; динамическое изменение меню может иметь неприятные последствия.

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 10. Организованное повторение «Сколько раз мне нужно это повторить?» Идея: предложить пользователям способы упрощения повторяющихся задач, которые в противном случае могут требовать больших временных затрат, быть скучными и вести к возникновению ошибок. Следствие: непосредственное наблюдение за пользователями поможет вам выяснить, поддержку каких типов повторяемых задач вам следует реализовать.

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 12. Советы других людей «А что другие говорят об этом?» Идея: Советы коллег, непосредственные или косвенные, влияют на процесс принятия решений людьми. Следствия: подумайте поможет ли это повысить эффективность работы пользователей? Как убедить пользователей конструктивно принимать участие? Как интегрировать социальный компонент в рабочий процесс типичного пользователя? например, интерактивное сообщество, где пользователь находит поддержку, может стать ценной частью справочной системы для некоторых приложений; при творческом процессе можно поощрять представление творений пользователей для публичной оценки; если цель – поиск некоторого факта или объекта, подумайте о способе упростить для пользователей проверку, не выполняли ли другие люди подобные исследования.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Поведенческие шаблоны, или «чем занимаются люди» 1 Шаблон 12. Советы других людей «А что другие говорят об этом?» Идея: Советы коллег, непосредственные или косвенные, влияют на процесс принятия решений людьми. Следствия: подумайте поможет ли это повысить эффективность работы пользователей? Как убедить пользователей конструктивно принимать участие? Как интегрировать социальный компонент в рабочий процесс типичного пользователя? например, интерактивное сообщество, где пользователь находит поддержку, может стать ценной частью справочной системы для некоторых приложений; при творческом процессе можно поощрять представление творений пользователей для публичной оценки; если цель – поиск некоторого факта или объекта, подумайте о способе упростить для пользователей проверку, не выполняли ли другие люди подобные исследования.

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Два аспекта информационной архитектуры Информационная архитектура и структура приложения 2 А. Разделение сущностей – организация объектов и поток выполнения задач: 1)списки объектов («над чем вы планируете работать?»): линейное представление (с сортировкой); двумерные таблицы; иерархические структуры; пространственные модели (карты, планы, диаграммы); 2)списки задач («что вы хотите сделать?»); 3)списки тематических категорий; 4)списки инструментов (календарь, адресная книга, блокнот). Б. Физическая структура – представление материала на экране: Три разные физические структуры

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 13. Двухпанельный селектор (Two-Panel Selector) Информационная архитектура и структура приложения 2 From Windows Explorer Mac Mail Blackberry Дано: список объектов (категорий, действий); с каждым элементом списка связано интересное содержимое; Нужно: навигация по списку; одновременный просмотр содержимого, связанного с выбранным элементом. (?): выбор шаблона представления списка

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 14. Холст и палитра (Canvas Plus Palette) Информационная архитектура и структура приложения 2 Дано: разработка графического редактора; Нужно: создание новых графических объектов; размещение их в некотором пространстве. Adobe Photoshop + Двухпанельный селектор

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 15. Погружение в одном окне (One-Window Drilldown) Информационная архитектура и структура приложения 2 Дано: приложение состоит из множества страниц, связанных гиперссылками; или есть иерархическое меню; ограниченное пространство (миниатюрный экран); отсутствие удобного устройства ввода (затруднён переход между панелями); ограничение сложности приложения. Нужно: линейная навигация по страницам – последовательный просмотр содержимого; упросить взаимодействие (постараться сделать варианты дальнейших действий очевидными). Меню iPod Mac OS X System Properties (Системные настройки) Пункт Dock

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 16. Альтернативные представления (Alternative Views) Информационная архитектура и структура приложения 2 Дано: приложение отображает форматированное содержимое любого рода. Нужно: оптимизация представления содержимого под разные платформы (ПК, КПК, смартфон); возможность пользовательской модификации ПИ для работы в разных условиях (вывод на печать и др.); возможность увидеть данные по-другому в поисках смысла. Проводник MS Windows

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

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 18. Дополнения по требованию (Extras on Demand) Информационная архитектура и структура приложения 2 Дано: слишком много элементов, чтобы размещать на одном представлении; некоторые элементы не очень важны. Нужно: упростить интерфейс – спрятать нечасто используемые элементы; дать простой доступ к этим элементам; сэкономить пространство в интерфейсе. Ш. Закрываемые панели Выбор цвета в Windows Поиск файлов Windows 2000

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 19. Интригующие ветвления (Intriguing Branches) Информационная архитектура и структура приложения 2 Дано: основное и дополнительное (примеры, определения терминов, справка) содержимое приложения; связи между элементами содержимого. Нужно: привлечь внимание любознательного пользователя; организовать непрерывное увлекательное путешествие по содержимому. информационный ссылки Справка, помощь Gmail.com «боковые ходы» к другим коллекциям изображений

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 20. Многоуровневая помощь (Multi-Level Help) Информационная архитектура и структура приложения 2 Дано: справочная информация к ПО. Нужно: «легкие» справки для середняков; полнофункциональные справочные системы для опытных пользователей; подсказки для новичков. Варианты справок: шаблоны Подсказки при вводе и Приглашения к вводу; всплывающие подсказки (1-2 строки); динамические подсказки (абзац) в специально отведённом месте экрана; длинные справочные тексты на закрываемых панелях; полное справочное руководство в отдельном окне; «живая» техническая поддержка; неформальная помощь сообщества (в сети).

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 21. Понятные точки входа (Clear Entry Points) Дано: приложение для решения определённого набора задач; приложение временного типа. Нужно: на входе сориентировать пользователя, какую задачу и как он будет решать. Ориентация на местности 3 Online Banking на Ш. Мгновенное вознаграждение

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 22. Глобальная навигация (Global Navigation) Дано: приложение имеет несколько выделенных разделов или инструментов; нет необходимость строго экономить экранное пространство; Нужно: постоянно доступная возможность быстрого перехода в основные разделы или к основным инструментам. Ориентация на местности 3 MS Money Palm

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 23. Спицы колеса (Hub and Spoke) Дано: приложение состоит из отдельных задач, субприложений или автономных элементов содержимого; физические ограничения пространства; подчёркнутая разобщённость задач. Нужно: намеренно ограничить пользователя в последовательности операций: явно завершать по отдельности каждую задачу; исключить визуальную и когнитивную перегрузку. Ориентация на местности 3 Интерфейс телефона Nokia серии 60 Одни вход и один выход – главная страница

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 24. Пирамида (Pyramid) Дано: набор страниц, который пользователь просматривает последовательно одну за другой; одна страница – родительская – точка входа. Нужно: уменьшить число переходов между страницами; явно продемонстрировать логическую связь между страницами. Ориентация на местности 3 Выставка «Самые высокие здания в мире» на сайте Музея современных искусств, ldings/main.html Типичная топология ссылок типа «Пирамида» Примеры: слайд-шоу, главы книги, мастера, наборы продуктов и др. Ш. Погружение в одно окно

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 25. Модальная панель (Modal Panel) Дано: у приложения возникла проблема, которую оно не может решить без участия пользователя; или пользователю нужно решить «небольшую» задачу. Нужно: показать окно для указания решения без прочих вариантов навигации до тех пор, пока пользователь не решить конкретную проблему; ограничить число выходов (1-3). Ориентация на местности 3 Google News

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 26. Карта последовательностей (Sequence Map) Дано: путь пользователя при взаимодействии с приложением является линейным; путь разбит на шаги. Нужно: отобразить текущее положение в пути (сколько пройдено, сколько осталось). Ориентация на местности 3 TurboTax, 2004

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 27. Хлебные крошки (Breadcrumbs) Дано: путь пользователя при взаимодействии с приложением имеет иерархическую организацию; Нужно: отобразить текущее положение в пути; постоянный доступ к навигации в родительские представления; линейный «срез» общей карты веб-сайта или приложения. Ориентация на местности 3 Страница выбранного альбома в iTunes Amazon.com

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 28. Полоса прокрутки с примечаниями (Annotated Scroll Bar) Дано: приложение, ориентированное на работу с документами; приложение, имеющее большое виртуальное пространство с возможностью прокрутки. Нужно: всплывающее средство отображения карты содержимого и указательного знака «Вы находитесь здесь»; отображать там, где фокус пользователя в момент прокрутки. Ориентация на местности 3 tkdiff Ш. Обзор и детали

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 29. Цветокодированные разделы (Color-Coded Sections) Дано: приложение с множеством страниц, организованных по разделам. Нужно: использовать визуальный стиль страниц как указательный знак; подчеркнуть различие разделов (по целевой аудитории, по назначению, по тематике). Ориентация на местности 3

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 30. Анимированный переход (Animated Transition) Дано: приложение, содержащее виртуальное пространство, которое возможно масштабировать, прокручивать, поворачивать вокруг оси; приложение с информационной графикой (карты, планы, схемы); приложение с множеством страниц, панелей, часто открываемых и закрываемых. Нужно: сгладить дезориентирующие переходы или трансформации содержимого при помощи анимации. Ориентация на местности 3 «Эффект джина» в Mac OS X при сворачивании окна Ш. Закрываемые панели Плавное масштабирование гистограммы на странице «The Secret Lives of Numbers»,

Проектирование интерфейса пользователя. Лекция © Дж. Тидвелл Шаблон 31. Аварийный люк (Escape Hatch) Дано: некоторый процесс блокирует пользователя в ограниченном числе навигационных путей; используется шаблон Спицы колеса или Модальная панель. Нужно: возможность быстрого перехода в «безопасное место». Ориентация на местности 3 Аварийный люк не нужен, если используются Карта последовательности или Хлебные крошки Ш. Спицы колеса Ш. Модальная панель Ш. Безопасное исследование