Эргономика и юзабилити: Элементы пользовательского интерфейса Лекция 7 Компьютерная графика 3 курс кафедра ЭВА МИЭМ Москва, 2005 г.

2 Основные темы Определения Элементы пользовательского интерфейса

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

4 Определение эргономики Эргономика (от греч. ergon работа и nomos закон) -- научно-прикладная дисциплина, занимающаяся изучением и созданием эффективных систем, управляемых человеком. Эргономика -- отрасль науки, изучающая человека (или группу людей) и его (их) деятельность в условиях производства с целью совершенствования орудий, условий и процесса труда. Основной объект исследования эргономики -- системы «человек-машина», в т. ч. и т. н. эргатические системы; метод исследования -- системный подход. (Энциклопедия «Кирилл и Мефодий»)

5 Определение usability юзабилити (usability ): степень, в которой продукт может быть использован определенными пользователями для достижения поставленных целей эффективно, экономично и с удовольствием в заданном контексте использования. (Пункт 3.1 стандарта ISO )

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

7 Ситуация на российском рынке ПО Конкуренция обостряется, что заставляет всё время повышать качество продукта. Наступает фаза зрелости отечественных программных продуктов (ПП). Рост количества пользователей, не имеющих навыков работы с компьютером.

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

9 Элементы пользовательского интерфейса 1. Кнопки 2. Списки 3. Поля ввода 4. Меню 5. Окна 6. Пиктограммы 7. Курсоры

10 1. Кнопки Командные кнопки Командные кнопки Кнопки доступа к меню Кнопки доступа к меню Чекбоксы и радиокнопки Чекбоксы и радиокнопки

11 1. Кнопки Командные кнопки Нажатие на такую кнопку запускает какое-либо явное действие.

12 1. Кнопки Размеры и поля По закону Фитса, чем больше кнопка, тем легче попасть в нее курсором. Пользователю должно быть трудно нажать не на ту кнопку. Неправильно:Правильно: 09

13 1. Кнопки Объем Направление теней снизу справа. В интернете кнопка должна быть оформлена как текстовая ссылка, если она перемещает пользователя на другой фрагмент контента, и как кнопка – если она запускает действие. нейтральноенажатое Нейтральное с установленным фокусом ввода состояние кнопки по умолчанию заблокированное Состояния 10

14 1. Кнопки Текст и пиктограммы Командные кнопки должны иметь названия в виде глаголов в форме инфинитива. Правильные и неправильные формулировки названий кнопок Правильное решение (предварительный просмотр)

15 1. Кнопки 11

16 1. Кнопки Кнопки доступа к меню Размещение меню в условиях ограниченного пространства. Использование кнопки доступа к меню «отмена действий» 12

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

18 1. Кнопки Чекбоксы и радиокнопки Кнопки отложенного действия Кнопки отложенного действия В группе радиокнопок как минимум одна радиокнопка должна быть проставлена по умолчанию В группе радиокнопок как минимум одна радиокнопка должна быть проставлена по умолчанию Чекбоксы выглядят как квадраты, а радиокнопки – как кружки.

19 1. Кнопки Текст подписей Подпись должна однозначно показывать эффект от выбора соответствующего элемента Формулировать подписи к чекбоксам и радиокнопкам лучше всего в форме существительных, возможно использование глаголов, если изменяется не свойство данных, а запускается какое-либо действие Формулировать подписи к чекбоксам и радиокнопкам лучше всего в форме существительных, возможно использование глаголов, если изменяется не свойство данных, а запускается какое-либо действие

20 1. Кнопки Взаимодействие В радиокнопках и чекбоксах должны нажиматься не только визуальный индикатор переключения, т.е. кружок или квадратик, но ещё и подпись. В радиокнопках и чекбоксах должны нажиматься не только визуальный индикатор переключения, т.е. кружок или квадратик, но ещё и подпись. при необходимости заблокировать элемент, желательно визуально ослаблять не только квадрат или круг, но и подпись 17

21 2. Списки Раскрывающие списки Пролистываемые списки Комбобоксы 18

22 2. Списки Ширина списка как минимум должна быть достаточна для того, чтобы пользователь мог определить различия между элементами Наиболее популярные элементы списка выносят в начало Идеальный вариантом сортировки элементов списка по типу Однотипные элементы сортируются по алфавиту Полезно снабжать элементы списка пиктограммами 18

23 2. Списки 2.1.Раскрывающиеся списки Если используются метаэлементы «все значения», «ни одно из значений», их нужно явно указывать, не оставляя строку пустой. 19

24 2. Списки 2.1.Раскрывающиеся списки В Интернет следует аккуратно использовать списки, случайная ошибка пользователя приводит к значительным потерям времени. Недопустимо автоматическое открывание списка без клика мышью. 20

25 2. Списки 2.2. Пролистываемые списки 20 Пролистываемые списки могут позволять пользователям совершать как единственный, так и множественный выбор.

26 2. Списки Размер 20 По вертикали: больше 4 элементов. Пустое место в конце списка нежелательно Прокрутка нежелательна, но допустима, если не хватает места для размещения списка целиком.

27 2. Списки Списки единственного выбора 20 Компактнее группы радиокнопок с аналогичным числом элементов Больше раскрывающегося списка Используется, в основном, для экономии места на экране

28 2. Списки Списки множественного выбора 2121 Для выбора нескольких элементов используется клавиша Ctrl, для выбора нескольких элементов подряд – Shift. Из-за привязки к клавиатуре редко используются, особенно в интернет. Фрагмент администраторской панели веб-форума PHPBB2

29 2. Списки Списки множественного выбора 2121 В ПО возможно выведение чекбоксов, это упрощает работу, здесь этот вид списков используются чаще. Фрагмент администраторской панели Windows

30 2. Списки Комбобоксы 2121 гибриды списка c полем ввода: пользователь может выбрать существующий элемент, либо ввести свой.

31 2. Списки Раскрывающиеся комбобоксы 22 Выглядят в точности как раскрывающиеся списки, визуально отличаясь от них только наличием индикатора фокуса ввода Отсутствуют в интернете как класс. Поддержки их нет ни в браузерах, ни в HTML

32 2. Списки Расширенные комбобоксы 22 Визуально отличимы от списков выбора Cравнительно трудно (хотя и гораздо легче, чем в интернете) реализовать в ПО, в интернете – через JavaScript. Потребляют много места на экране

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

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

35 3. Поля ввода 24 Крутилки Чтобы ввести значение в крутилку, пользователю не обязательно бросать мышь и переносить руку на клавиатуру При вводе значения мышью система может позволить пользователям вводить только корректные данные, в корректном формате Палитра CorelDraw.

36 3. Поля ввода 25 Ползунки возможность выбрать значение, стоящее в хорошо ранжирующемся ряду, если: значений в ряду много; нужно передать пользователям ранжируемость значений; необходимо дать возможность пользователям быстро выбрать значение из большого их количества Диалоговое окно Adobe PhotoShop Элемент настройки параметров дисплея в Windows

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

38 4. Меню 25 Типы меню (по динамике) Статические меню Постоянно присутствует на экране. Характерным примером такого типа меню является панель инструментов. Динамические меню Пользователь должен вызвать меню, чтобы выбрать какой-либо элемент. Примером является обычное контекстное меню.

39 4. Меню 25 Типы меню (по разворачиванию) Разворачиваемое в пространстве Например, обычное выпадающее меню. Всякий раз, когда пользователь выбирает элемент нижнего уровня, верхние элементы остаются видимыми Разворачиваемое во времени При использовании таких меню элементы верхнего уровня (или, понимая шире, уже пройденные элементы) по тем или иным причинам исчезают с экрана.

40 4. Меню 26 Характеристика типов меню Статические меню обеспечивают высокую скорость работы, лучше обучают пользователей, занимают место на экране. Для динамических меню ситуация обратная. Разворачивающиеся в пространстве обеспечивает большую поддержку контекста поддержка обходится в потерю экранного пространства. Для разворачивающихся во времени ситуация обратная.

41 4. Меню 27 Устройство отдельных элементов Самым важным свойством хорошего элемента меню является его название Элементы, запускающие действия должны обозначаться глаголами в форме инфинитива Наиболее значимое слово в элементе должно стоять в этом элементе первым Короткий текст элемента, быстро читаясь, совершенно необязательно быстро распознается.

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

43 4. Меню 28 Переключаемые элементы Чтобы обозначить переключаемый элемент можно: 1. Поместить перед переключателем галочку, показывая, что он включен 2. Если элемент снабжен пиктограммой, утапливать ее. 3. Инвертировать текст элемента В интерфейсе желательно не употреблять ничего негативного, поэтому галочка предпочтительнее. Слева: PhotoShop 6, Справа: PhotoShop 7.

44 4. Меню 29 Предсказуемость действия По виду элемента пользователи должны догадываться, что произойдет после выбора: 1. По умолчанию команды выполняются немедленно. 2. Команды с многоточием вызывают диалоговое окно 3. Команды со стрелкой справа открывают вложенное меню.

45 4. Меню 29 Группировка элементов меню По виду элемента пользователи должны догадываться, что произойдет после выбора: 1. Группировка обеспечивает «точки привязки», подобно пиктограммам. 2. Становится очевидной логическая взаимосвязь элементов меню. Для сортировки элементов при тестировании используется карточный метод, позволяющий выявить логику пользователя, а не разработчика.

46 4. Меню 30 Разделение групп Иерархическое Пространственное (полосками/пробелами)

47 4. Меню 30 Глубина меню При перемещении по меню пользователь действует по определенному алгоритму: Выбирая элемент первого уровня, он выбирает элемент, «нужность» которого кажется ему максимальной. После выбора он видит список элементов второго уровня, при этом он оценивает вероятность соответствия всех элементов второго уровня его задаче и одновременно выбирает наиболее вероятный элемент. При этом в уме он держит контекст, т.е. название элемента первого уровня. Если ни один из элементов не кажется пользователю достаточно вероятным, пользователь возвращается на первый уровень. Если какой-то элемент удовлетворяет пользователя, он выбирает его и получает список элементов третьего уровня. Действия из второго и третьего шагов повторяются применительно к новым элементам меню.

48 4. Меню 31 Глубина меню Хранение контекста, как в каскадных меню, нагружает внимание пользователя. Другой вариант: пользователь по самому элементу может предугадать его содержимое, т.е. при поиске элемента в меню не столько оценивает контекст, сколько просто ищет нужный элемент

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

50 4. Меню 33 Контекстные меню Полностью встраиваются в контекст действий пользователей Не занимают места на экране Неспособны чему-либо научить пользователя Часто перекрывают выделенный объект Выводы: 1.Нельзя делать контекстные меню единственным способом вызова какой- либо функции 2.Лучше сокращать размер контекстных меню до ~7 элементов 3.Вложенные меню делать не рекомендуется. 4.Важно помещать релевантные элементы вверху.

51 5. Окна 35 Типы окон 1. Главные окна программы; 2. Окна документа; 3.Режимные (модальные) диалоговые окна; 4.Безрежимные (немодальные) диалоговые окна; 5. Палитры; 6.Окна браузера Окна документов отмирают, заменяясь окнами программ, Режимные диалоговые окна сменяются безрежимными Безрежимные, заменяются палитрами. Палитры сменяются панелями инструментов. Эволюция окон

52 5. Окна 35 Режимное диалоговое окно Если открывшееся окно блокирует доступ к остальной части системы, происходит, фактически, запуск нового режима работы. После того, как окно закрыто, происходит возвращение предыдущего (основного) режима. 1. Всех раздражает, что, вызвав диалоговое окно и обнаружив, что вызвано оно преждевременно, приходится закрывать окно и открывать его в следующий раз заново; 2. В системах, ориентированных на документы, режим сбивает внимание пользователя и вообще лишает его ощущения управляемости (в отличии систем, ориентированных на формы ввода, в которых режим работает лучше, чем его отсутствие); 3. Сама по себе идея сближения интерфейса с реальным миром (в частности, метафора рабочего стола) протестовала против идеи режимов в любом их проявлении, поскольку в реальном мире вообще не бывает режимов, аналогичным интерфейсным.

53 5. Окна 35 Безрежимное диалоговое окно Безрежимное диалоговое окно, это окно которое не запускает новый режим работы. Его можно неограниченное время держать на экране, переключаясь по мере надобности между ним и собственно документом. 1. Безрежимные диалоговые окна нельзя делать тонущими, т.е. позволять пользователю перекрывать их окнами документа или программы. 2. Просто диалоговое окно, даже будучи безрежимным, малополезно, поскольку перекрывает слишком много важного и нужного. Чтобы избавится от этого недостатки, были придуманы палитры.

54 5. Окна 3636 Палитры Занимают мало места Могут быть расставлены в любом порядке Обрезаются подписи элементов Приходится перемещать палитры, чтобы открыть нужный фрагмент рабочей информации Рабочий экран Adobe PhotoShop.

55 5. Окна 3737 Палитры/докеры Могут быть закреплены у края экрана и свернуты в узкую полоску. Рабочий экран CorelDraw.

56 5. Окна 3737 Панели инструментов Могут содержать (и содержат) не только пиктограммы инструментов, но довольно сложные элементы управления. Панели инструментов CorelDraw

57 5. Окна 38 Элементы окна Заголовок Панели инструментов Полосы прокрутки Строка статуса Альтернативные элементы управления Кнопки со стрелками «Рука» Интерактивная прокрутка

58 5. Окна 38 Элементы окна Окно Windows XP.

59 5. Окна 44 Структура окна Окно должно хорошо сканироваться взглядом Окно должно читаться, как текст. «Релевантное – вперед». Должно нормально отображаться в режиме Large Font.

60 5. Окна 46 Структура окна Терминационные кнопки должны быть либо снизу окна, либо в правой его части. Правильное расположение терминационных кнопок.

61 5. Окна 46 Структура окна Терминационные кнопки должны быть либо снизу окна, либо в правой его части. Неправильное расположение терминационных кнопок.

62 5. Окна 48 Вкладки Умещают больше информации в одном окне Скрывают ненужную в текущем контексте информацию Замена вкладкам: Увеличивающиеся окна Раскладные палитры

63 5. Окна 48 Вкладки Терминационные кнопки должны располагаться вне области вкладок.

64 5. Окна 50 Последовательные окна (мастеры) Терминационные кнопки должны располагаться вне области вкладок.

65 5. Окна 52 Последовательные окна Идентификация положения на сайте в Интернет

66 5. Окна 53 Функциональность и окна Существующий подход: на каждую функцию создается окно. Более правильный подход: ориентация на цели и задачи пользователя. Лишние и необходимые окна Разработчик не должны добавлять окно в программу до тех пор, пока оно не будет служить какой-то цели, которой нельзя или невозможно достичь в уже существующих окнах. Когда пользователь хочет выполнить функцию, выпадающую из нормальной последовательности событий, программа должна предоставить ему для этого специальное место.

67 6. Пиктограммы 56 Пиктограммы в традиционном ПО пиктограмма системы; пиктограммы отдельных файлов системы, которые пользователи могут как-либо изменять; пиктограммы документов, которые создаются и редактируются системой; пиктограммы инструментов системы (не всегда, многие системы отлично живут и без них); пиктограммы панели инструментов и меню; пиктограммы объектов, использующихся для реализации непосредственного манипулирования (изредка, к сожалению).

68 6. Пиктограммы 56 Пиктограмма в идеальном случае должна обладать следующими свойствами: она должна иметь внятный и однозначный контекст; её сюжет должен быть пользователям понятен; этот сюжет должен быть удовлетворительно нарисован.

69 6. Пиктограммы 56 Достоинства пиктограмм: они увеличивают скорость поиска элементов взглядом за счет того, что этот элемент становится с пиктограммой более заметен. Однако и здесь пиктограммы не без греха: чтобы скорость поиска увеличилась, не все элементы должны быть снабжены пиктограммами, а только некоторые, в идеале иметь пиктограмму должен только нужный элемент; они служат хорошими индикаторами важности элементов, поскольку элементы с пиктограммами всегда воспринимаются как более важные, по сравнению с теми элементами, у которых пиктограмм нет; в определенных ситуациях они действительно ускоряют скорость обучения.

70 6. Пиктограммы 56 Недостатки пиктограмм: Чтобы распознать смысл пиктограммы, нужно сначала выучить ее значение. Либо нужно знать символику, либо попробовать кнопку в действии (если есть подсказка – дождаться подсказки). Невозможно нарисовать что-либо однозначное из-за маленького размера и изобилия схожих действий и функций, трудновыразимых даже на словах.

71 6. Пиктограммы 56 Какой должна быть хорошая пиктограмма? Разборчивой Стандартной по сюжету и реализации Стандартной по стилистике Эстетически привлекательной Должна иметь полный набор видов для корректного отображения.

72 6. Пиктограммы 60 Полнота набора пиктограмм.

73 6. Курсоры 63 Основное правило работы с внешним видом курсора: используйте индикацию видом курсора во всех случаях, когда вы можете сделать это эстетически привлекательно; в остальных случаях о курсорах даже и не думайте. Окно пользовательских настроек указателей мыши в Windows.

74 Источники информации 68 Ниже перечислено несколько сетевых ресурсов. Каждый из них содержит обширный каталог ссылок, по которым читатель найдет исчерпывающую информацию по эргономике и юзабилити в первоисточнике и в переводе на русский. Влад В. Головач «Дизайн пользовательского интерфейса» Юзабилити в России в России Статьи Якоба Нильсена: Ководство. Артемий Лебедев.

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

76 Спасибо за внимание. 68 Московский государственный институт электроники и математики (технический университет) Кафедра ЭВА Королев Денис Александрович Почта: ICQ: