Лекция 8. ПроектированиеИнтерфейса

1.

Проектирование человекомашинных интерфейсов
Пользовательский интерфейс.
Основные понятия

2.

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

3.

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

4.

Эргономика и usability (def)
• Эргономика (от греч. ergon работа и
nomos закон) — научно-прикладная
дисциплина, занимающаяся изучением и
созданием эффективных систем,
управляемых человеком.
• Юзабилити (usability) — степень, в
которой продукт может быть использован
определенными пользователями для
достижения поставленных целей
эффективно, экономично и с
удовольствием.
(Пункт 3.1 стандарта ISO 9241-11)
3

5.

«Айсберг» пользовательского
интерфейса

6.

Свойства и принципы разработки
интерфейса
Естественность
Дружественность
Простота
Согласованность
Принципы
разработки
пользовательского
интерфейса
Эстетическая
привлекательность
Принцип
«обратной связи»
Гибкость

7.

Особенности графического
пользовательского интерфейса
• GUI – это система средств для
взаимодействия пользователя с
компьютером, основанная на представлении
всех доступных пользователю системных
объектов и функций в виде графических
компонентов экрана.
• Интерфейсы прямого манипулирования WYSIWYG (What You See Is What You Get),
обеспечивают непосредственное
подтверждение введенных действий.

8.

Основные компоненты GUIинтерфейса

9.

Основные компоненты GUI-интерфейса (2)

10.

Объектный подход к
проектированию GUI
• Объект – это файлы, пиктограммы, устройства
для хранения и обработки информации

11.

Элементы
управления
в
GUI

12.

Этапы проектирования
пользовательского интерфейса
• Этап 1. Выбор структуры диалога
– Диалог типа «вопрос-ответ».
– Диалог на основе меню.
– Диалог на основе экранных форм.
– Диалог на основе командного языка.
• Этап 2. Разработка сценария диалога

13.

Пример шага диалога

14.

Этапы проектирования
пользовательского интерфейса
• Этап 3. Темп ведения диалога
• Этап 4. Адаптация интерфейса
– фиксированная
– полная
– косметическая
– использование умолчаний;
– использование сокращений;
– опережающий ввод ответов;
– многоуровневая помощь;
– многоязычность

15.

Этапы проектирования
пользовательского интерфейса
• Этап 5. Проектирование визуальных
атрибутов отображаемой информации
– Композиция и организация
– Цвет
– Шрифт
– «Многомерность» экрана
– Пространственное размещение
визуальных компонентов
– Визуализация выполняемых операций

16.

Цветовой круг
А - оттенок; Б - насыщенность; В - яркость; Г - оттенок

17.

Пример неправильного
использования цвета

18.

Поддержка пользователей
Система сообщений и справочной
информации – для конечных
пользователей.
Комплект документации по процессам
проектирования и разработки ИС –
для конечных пользователей и
разработчиков.

19.

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

20.

Контекстно-зависимая подсказка
Ответ на один из вопросов:
• «Что это?»
• «Почему?»
• «Каким образом?»

21.

Контекстная помощь
Команда «Что это?»
Кнопка «Справка»
Всплывающая подсказка
Сообщение в строке состояния

22.

Проблемно-ориентированная
помощь
Описание последовательности шагов,
необходимых для выполнения задания.
Способы организации:
• кнопки в окне «Раздел задания»
• кнопки-акселераторы

23.

Справочник
• Предоставляет справочную
информацию в интерактивной форме.
• Помогает уяснить характеристики
программного продукта.

24.

Пример мастера
(Excel, мастер создания диаграмм)

25.

На мировом рынке ПО
• ПИ составляет от 47 до 60 процентов
кода программы;
• на разработку ПИ уходит как минимум
29 процентов проектного бюджета и в
среднем 40 процентов всех усилий
разработчиков по созданию системы.

26.

Типы программ (5 миров)
1. Встроенное программное
обеспечение
2. Внутреннее корпоративное ПО
3. Массовое (коробочное) ПО
4. Игры
5. Одноразовые программы

27.

Встроенное ПО
Прочно связано с железом
Редко обновляется – «второго
шанса не будет»
Требует оптимизации кода
Средства ввода-вывода
ограничены
Нет общепризнанного стандарта
элементов интерфейса

28.

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

29.

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

30.

Игры
Только одна версия! Второго шанса
не будет!
Рынок ориентирован на хиты
Дизайн имеет решающее значение
Массовая аудитория очень похожих
пользователей
Можно ограничивать требования к
аппаратному и программному
окружению

31.

Одноразовое ПО
Создается временно для решения
конкретной небольшой задачи
Обычно используется всего один
раз
Интерфейс не имеет значения
Примеры:
Скрипты
Макросы

32.

Преимущества хорошего ПИ
1.
2.
3.
4.
5.
6.
7.
Повышение конкурентоспособности.
Снижение стоимости разработки.
Увеличение аудитории продукта.
Уменьшение затрат на обучение и поддержку
пользователей.
Уменьшение потерь продуктивности
работников при внедрении системы и более
быстрое восстановление утраченной
продуктивности.
Доступность функциональности системы для
максимального количества пользователей.
Снижение риска ошибок.

33.

Типы пользовательского
интерфейса
1. Пакетный интерфейс.
2. Интерфейс командной строки.
3. Графический
4. Диалоговый
5. Текстовый естественно-языковый
6. Речевой
7. Биометрический (Мимический)
8. Нейрокибернетический

34.

Командный язык (набор инструкций)
Достоинства :
Недостатки:
• Быстрый для экспертов • Требуется помнить
инструкции
• Гибкий
• Может быть непонятен
• Эффективен
• Не подходит для
новичков

35.

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

36.

Диалог Вопрос /Ответ
Достоинства:
• Легок для новичков
• Минимальная
информационная
нагрузка
• Несложный ручной
ввод
Недостатки:
• Пользователь теряет
управление
• Медленный
• Может быть
утомителен

37.

Выбор из меню
Достоинства:
• Легок для новичков
• Минимальная
информационная нагрузка
• Компромисс между
командным языком и
диалогом вопрос/ответ
Недостатки:
• Медленный для
экспертов
• Слишком много
альтернатив или
уровней могут
запутать

38.

Естественный язык / виртуальная реальность
Достоинства:
• Очень богат
• Использует
дополнительный
смысл - контекст
Недостатки:
• Нагружает
процессор
• Труден для
реализации

39.

Основная аксиома ПИ
Хороший дизайн
пользовательского
интерфейса подразумевает,
что программа соответствует
ожиданиям пользователей о
том, как она должна себя
вести.
(Все остальное – следствия.)

40.

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

41.

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

42.

Метафора интерфейса
Иногда у пользователей просто нет
конкретного представления о том, как
работает программа и для чего она
предназначена.
В таком случае вам придется найти способ
подсказать им, как функционирует ваша
программа. В графических интерфейсах
используется метод метафор.
Самая известная метафора GUI –
«рабочий стол»

43.

Пример метафоры

44.

Приглашение
Объект своим внешним видом
намекает пользователю на свою
функцию.
Например:
• Кнопки - выпуклые, приглашают
нажать.
• Стрелки.
• Пиктограммы.

45.

Пример приглашения
Кнопка
Тоже кнопка
А это – не кнопка!
Как ни удивительно,
но это тоже кнопки.

46.

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

47.

Что нужно знать о пользователях
• Пользователи ничего не читают.
• Пользователи плохо видят.
• Пользователи не умеют работать с
мышью.
• Пользователи ничего не помнят.

48.

Пользователи не читают
1. У пользователей нет документации,
а если бы она и была, они бы ее не
читали.
2. На самом деле, пользователи не
умеют читать, а если бы и умели, то
не стали бы.
Чем больше слов в диалоговом окне, тем
меньшее число пользователей их читают.

49.

Много слов в диалоговом окне

50.

Пользователи плохо видят
Удобство использования важнее
«стильности» и элегантности.

51.

Пользователи не умеют работать с мышью
1.
2.
3.
4.
5.
Иногда приходится пользоваться не самыми
оптимальными манипуляторами.
Иногда приходится пользоваться мышью не
в самых благоприятных условиях.
Иногда человек, сидящий за компьютером, новичок, не имеющий опыта работы с
мышью.
Некоторые люди никогда не смогут развить
навыки работы с мышью – по медицинским
показаниям.
Некоторые люди считают, что постоянное
применение мыши замедляет работу.

52.

Пример: выпадающий список
• Выпадающий список
нужно сделать таким
длинным, чтобы он
вмещал все элементы.
• Автоматическая
прокрутка.
• Чтобы открыть список,
можно щелкнуть в
любом месте списка, а
не только на
стрелочке.

53.

Пользователи ничего не помнят
Пользователь не должен
запоминать то, что может
запомнить компьютер.
Меню команд.
Списки значений.
«Интеллектуальное завершение ввода»
(auto completion).

54.

Пример: выбор файла с картинкой
Неудобный вариант:

55.

Пример: выбор файла с картинкой

56.

Пример: интеллектуальное завершение ввода

57.

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

58.

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

59.

Итог: алгоритм разработки GUI
1.
2.
3.
4.
5.
6.
Придумать воображаемых пользователей
(персонажей).
Продумать виды деятельности пользователей.
Узнать модель пользователя – как он будет
выполнять деятельность, основываясь на своем
опыте.
Сделать первый набросок дизайна.
Изменять дизайн, все больше и больше делая его
простым в использовании, до тех пор, пока продукт
не окажется в рамках способностей воображаемых
пользователей.
Наблюдать за тем, как реальные пользователи
работают с вашим продуктом. Отметить области, в
которых они испытывают трудности. Эти области,
скорее всего, и демонстрируют несоответствия
модели программы модели пользователя.

60.

Процесс проектирования интерфейса
Анализ
Анализ бизнес-процессов и
деятельности пользователей
Проектирование
Формализация информации в
виде диаграмм бизнес-процессов
и сценариев
Выработка концепции
Прототипирование интерфейса
Реализация
Внедрение
Уточнение прототипов
Тестирование с пользователями
Получение обратной связи от
пользователей и ее анализ

61.

Нормативные документы
ISO 9241
ISO 9126
CIF
Эргономические требования к офисной
работы с визуальными терминалами
(VDTs):
Часть 11 - Руководство по юзабилити
Качество программного
продукта: Характеристики и
подхарактеристики качества. Модель
качества. Показатели Качества в
использовании.
Формат описания юзабилити характеристик
продукта и результатов юзабилити тестов.

62.

Этап концепции.

63.

Процесс проектирования интерфейса
Анализ
Анализ бизнес-процессов и
деятельности пользователей
Проектирование
Формализация информации в
виде диаграмм бизнес-процессов
и сценариев
Выработка концепции
Прототипирование интерфейса
Реализация
Внедрение
Уточнение прототипов
Тестирование с пользователями
Получение обратной связи от
пользователей и ее анализ

64.

Проектирование пользовательских интерфейсов
Что такое концепция?

65.

Проектирование пользовательских интерфейсов
Что такое концепция?
Конце́пция, или конце́пт, (от лат. conceptio — понимание, система)
— определённый способ понимания (трактовки) какого-либо
предмета, явления или процесса; основная точка зрения на предмет;
руководящая идея для их систематического освещения.
Употребляется также для обозначения ведущего замысла,
конструктивного принципа в научной, художественной, технической,
политической и других видах деятельности.

66.

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

67.

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

68.

Проектирование пользовательских интерфейсов
Что на входе?
Персонажи
Список требований
Сценарии
Артефакты (объекты)
Результаты сбора данных
Что на выходе?
Навигация
Ключевые экраны
Внутримодульная структура
Компоновка ключевых экранов
Требования к содержанию (ЧТО и КАК)
Идеи
План работ по детальному проектированию

69.

Проектирование пользовательских интерфейсов
Создание концепции
1. Оптимизировать сценарии
Можно ли выполнить задачу быстрее/с меньшими затратами/сократить
количество шахов/ автоматизировать какие-л. действия?
2. Сгенерировать требования по сценариям
(см. слайды 10-11)
3. Описать связь
персонажей с артефактами
сценариев с артефактами
требований с артефактами

70.

Проектирование пользовательских интерфейсов
У сценария есть
Предусловия
Код
Область
действий
Действия
Название
задачи
Входы в
сценарий
Связи
Выходы из
сценария

71.

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

72.

Проектирование пользовательских интерфейсов
Фиксация требований
Вопросы
Что требуется пользователям?
Насколько важно конкретному персонажу?
Все равно? Мешает?
Методики
Уточнение требований, присваивание
весов
Результат
Таблица требований

73.

Проектирование пользовательских интерфейсов
Фиксация артефактов
Вопросы
Какие объекты фигурируют в
требованиях?
В сценариях решения задач?
Какие объекты использует персонаж
при решении своих задач?
Метод
Последовательный проход по
сценариям и требованиям
Результат
Таблица артефактов

74.

Проектирование пользовательских интерфейсов
Создание концепции
4. Выделить основные типы экранов
(ключевые)
Если это сайт, то, например, главная страница,
страница с тестом, страница со статьей, и
т.д.
5. Создать модель навигации по типам
экранов
Как пользователь, решая свои задачи, будет
взаимодействовать с объектами, в какой
последовательности?

75.

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

76.

Проектирование пользовательских интерфейсов
Создание концепции
7. Описать модель
потоков данных
Какая информация,
откуда и как возникает. С
какого на какой экран
переходит (в соответствии
со сценариями).
8. Определить требования к содержанию
Какая информация будет находится на каждом типе страниц, какой
формат (текст, картинка, видео, т.д.), как она должна быть
оформлена

77.

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

78.

Проектирование пользовательских интерфейсов
Создание концепции
11. Проверить соответствие
компоновочных макетов
сценариям
Для каждого персонажа пройтись
по всем сценариям и проверить
соответствие навигационной
модели и компоновочных макетов
сценариям.

79.

Проектирование пользовательских интерфейсов
Информационные источники
Юзабилити в Википедии (http://ru.wikipedia.org/wiki/Usability)
Один из самых первых информационных ресурсов, поддерживающий сообщество
проектировщиков интерфейсов Usability.ru (http://www.usability.ru/glossary.htm#UI)
Русское отделение ACM SigCHI – RusCHI (http://ruschi.ru/index_ru.htm )
Тематический блог на habrahabr.ru (http://habrahabr.ru/blogs/ui_design_and_usability/ )
Сообщество в ЖЖ: ru_ucdesign (http://livejournal.com/community/ru_ucdesign/)
Блоги о дизайне интерфейсов: события, идеи, методы, обсуждения (Gui.ru и
fresh.gui.ru)
Неформальное профессиональное сообщество проектировщиков пользовательских
интерфейсов (http://friendfeed.com/ruschi )
Основные понятия: «Терминологические войны», Иван Дегтяренко
(http://www.gui.ru/ivan/terminilogy_wars_1)
19