Лекция № 2 - Губин Максим Владимирович

Download Report

Transcript Лекция № 2 - Губин Максим Владимирович

Slide 1

ЧЕЛОВЕКО-МАШИННОЕ
ВЗАИМОДЕСТВИЕ
Лекция 2
преподаватель кафедры ТМСИ
Губин Максим Владимирович


Slide 2

Пол Рэнд
«Проектировать —
не означает просто собрать
воедино функции,
упорядочить и поместить на
белый лист.
Суть проектирования в
добавлении содержимому
значимости, в выделении,
упрощении, прояснении,
акцентировании,
облагораживании, убеждении
и, возможно, даже
развлечении»
Пол Ренд 20 принципов проектирования интерфейсов
2


Slide 3

Самая известная работа Пола в области создания
логотипов — это символ компании IBM.
Первая версия была создана в 1952 году, а через 16 лет
логотип был изменен до того вида, который нам всем
знаком.

3


Slide 4

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

4


Slide 5

Перечень принципов
Естественность интерфейса

Структурный принцип

Согласованность интерфейса

Принцип простоты

Дружественность интерфейса

Принцип видимости

Принцип «обратной связи»

Принцип «обратной связи»

Простота интерфейса

Принцип толерантности

Гибкость интерфейса

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

Эстетическая привлекательность

Другие правила

5


Slide 6

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

Пример: наследуемость моделей графических интерфейсов
ОС в семействах MS Windows.

6


Slide 7

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

7


Slide 8

Весь интерфейс – метафора

8


Slide 9

Интерфейсы будущего должны быть
простыми и естественными

9


Slide 10

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

10


Slide 11

11


Slide 12

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

12


Slide 13

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

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

13


Slide 14

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

14


Slide 15

Дружественность интерфейса
Пользователи обычно изучают особенности работы с новым
программным продуктом методом проб и ошибок. Эффективный
интерфейс должен принимать во внимание такой подход.

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


Slide 16

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

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

16


Slide 17

Принцип «обратной связи»
Всегда обеспечивайте обратную связь для действий
пользователя.
Каждое действие пользователя должно получать визуальное
или звуковое подтверждение того, что программное
обеспечение восприняло введенную команду; при этом вид
реакции, по возможности, должен учитывать природу
выполненного действия.
Обратная связь эффективна в том случае, если она
реализуется своевременно, т.е. как можно ближе к точке
последнего взаимодействия пользователя с системой.
Ничто так не смущает неопытного пользователя, как
заблокированный экран, который никак не реагирует на его
действия. Типичный пользователь способен вытерпеть
только несколько секунд ожидания ответной реакции от
своего электронного «собеседника».
17


Slide 18

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

Противоречивые требования:


интерфейс должен быть простым, но не пустым;



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

Решение противоречий:


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



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


Slide 19

19


Slide 20

20


Slide 21

GNOM 3
Рабочий стол

Главное меню

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


Slide 22

22


Slide 23

DP Howler

23


Slide 24

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

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


Slide 25

25


Slide 26

26


Slide 27

Гибкость интерфейса
Гибкость интерфейса — это его способность учитывать
уровень подготовки и производительность труда
пользователя.
Гибкость предполагает возможность изменения структуры
диалога и/или входных данных.
Концепция гибкого (адаптивного) интерфейса в настоящее
время является одной из основных областей исследования
взаимодействия человека и ЭВМ.
Основная проблема состоит не в том, как организовать
изменения в диалоге, а в том, какие признаки нужно
использовать для определения необходимости внесения
изменений и их сути.
27


Slide 28

Отзывчивый дизайн на HTML
Подразумевает оптимизацию сайта для работы при
любом разрешении и любой ориентации экрана.
Для этого используются:
резиновая верстка — позволяет наиболее
эффективно использовать экранное пространство.
гибкие изображения — вместе с резиновой версткой
позволяют содержать контент в пределах заданной
ширины.
CSS3 медиа-запросы — позволяют учесть различные
диапазоны разрешений.
28


Slide 29

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

29


Slide 30

Другие подходы
Якоб Нильсен создал один из лучших наборов эвристических правил
практичности, объясняющих 95% наиболее серьезных проблем:
1. Зрительное восприятие/указание, а не запоминание/набор на
клавиатуре.

2. Непротиворечивость (похожие действия реализуются похожим
образом).
3. Своевременная и продуманная обратная связь.
4. Ярко выраженный набор действий.

5. Снисходительность (возможность отмены действий).
6. Близкая пользователю концептуальная модель.
7. Обратная связь (подтверждение введенных данных).
8. Предотвращение возможных ошибок.
9. Четко различимый выбор действий.
10.Немодальное взаимодействие.
30


Slide 31

Дополнение к правилам Нильсона
В дополнение к десяти правилам существуют еще пять,
поясняющие все проблемы независимо от степени их
серьезности.
1. Общение с пользователем должно вестись на его
языке.
2. Эстетическая целостность (простой дизайн).
3. Сокращенный клавишный набор и ускоренный доступ
к командам.
4. Договоренности, имеющие практический смысл.
5. Помощь в обнаружении и исправлении ошибок.
31


Slide 32

Еще три правила Нильсона
Якоб Нильсен добавил еще три правила, завершив тем
самым пересмотр набора из десяти эвристик.
1. Эстетичный, минималистский дизайн (сокращение не
относящейся к делу или редко используемой
информации).
2. Помощь в распознавании, диагностике ошибок и
восстановлении после них.
3. Хорошая справочная система и документация.

32


Slide 33

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

33


Slide 34

Blizzard World of Warcraft

34


Slide 35

Maya

35


Slide 36

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

4. Субъективная удовлетворенность пользователя при работе с
системой (которая количественно может быть выражена в процентах
или оценкой по n-бальной шкале).
36


Slide 37

Стандартизация
пользовательского интерфейса
Стремление к стандартизации пользовательского
интерфейса налицо, и оно обусловлено не только
коммерческими интересами ведущих производителей
ПО.
Вместе с тем, единого официально утвержденного
стандарта пока нет, но хотелось бы знать, по каким
параметрам может оцениваться «степень
стандартизации» пользовательского интерфейса.

37


Slide 38

История вопроса стандартизации
пользовательского интерфейса
Длительное время основной формой общения пользователя с
компьютером оставался диалог в форме «вопрос-ответ».
в 1986 году было опубликовано «Руководство по разработке
программного пользовательского интерфейса», содержащее 944
принципа, касающихся ввода и отображения данных, поддержки
пользователя, защиты данных и т.д.
в 1987 г. корпорация IBM объявила о намерении создать единую среду
разработки приложений (Systems Application Architecture — SAA).
Исследованиями и практической реализацией графических интерфейсов
в то время уже занимались такие фирмы как Xerox, Apple, Digital
Research и Microsoft.

В марте 1997 года фирма Microsoft выпустила пакет Visual Studio 97, в
который вошли все созданные ею инструментальные средства
разработки приложений, а также средства автоматизации
сопровождения программных продуктов (Visual SourceSafe).
38


Slide 39

Systems Application Architecture – SAA
Целями проекта являются:
1. Повышение производительности труда программистов и конечных
пользователей.
2. Облегчение эксплуатации и сопровождения программного
обеспечения.
3. Повышение эффективности распределенной обработки информации.
4. Увеличение отдачи инвестиций в разработку информационных систем.

Проект SAA содержит 4 компонента:
1. Соглашения по интерфейсу пользователя (Common User Access — CUA);
2. Соглашения по программному интерфейсу (Common Programming
Interface — CPI);

3. Соглашения по разработке приложений (Common Applications — СА);
4. Соглашения по коммуникациям (Common Communications Support —
CCS).
39


Slide 40

Common User Access
CUA представлял собой подробную спецификацию и
устанавливал жёсткие правила того, как должны были
выглядеть и работать программы.
Целью было приведение к единообразию программ,
которые ранее имели существенные различия в реализации
пользовательского интерфейса.
Примеры:
• В некоторых программах клавишей Esc действие отменялось, в
других — совершалось; WordPerfect она выполняла повтор символа.
• В одних программах клавиша End делала переход в конец строки, в
других она означала окончание заполнения формы.

• Клавиша F1 использовалась для вызова справки, а в WordPerfect для
этой цели служила F3 .
40


Slide 41

Результаты исследований Xerox,
Apple, Digital Research и Microsoft
Определены основные концепции построения графических
пользовательских интерфейсов:
• использование единой рабочей среды пользователя в виде
так называемого Рабочего стола;
• объектно-ориентированный подход к описанию заданий
пользователей;
• использование графических окон в качестве основной
формы отображения данных;
• применение средств не клавиатурного ввода, основанного
на выборе и указании с помощью манипулятора «мышь».

41


Slide 42

ANSI
Америка́нский национа́льный институ́т станда́ртов
(American National Standards Institute) — объединение
американских промышленных и деловых групп, разрабатывающие
торговые и коммуникационные стандарты. Входит
в ISO и Международную электротехническую комиссию.
Сформирован 19 октября 1918 года как Американский комитет
инженерных стандартов (AESC). Впоследствии — Американская
ассоциация стандартов (ASA, 1928), а после реорганизации в 1966
году — Институт Стандартов США (USASI).
Нынешнее имя принято в 1969 году. В ANSI представлены
американские корпорации, правительственные службы,
международные организации и частные лица.

42


Slide 43

Статья Евгения Волченкова Стандартизация пользовательского
интерфейса. «Открытые системы», № 04, 2002.
Как стандарты соотносятся с различными аспектами
пользовательского интерфейса?
Что такое правильный интерфейс?
Как применять эргономические стандарты при проектировании
и тестировании интерфейса?
Влияет ли стандартизация на качество разрабатываемых
изделий?
Означает ли, что неукоснительное следование стандартам
может обеспечить необходимое качество пользовательского
интерфейса?
43


Slide 44

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

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


Slide 45

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

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

45


Slide 46

Шаблон для Joomla

HTML – РИА новости

46


Slide 47

Неудачный интерфейс

47


Slide 48

Технология — первична.

Интерфейсы — вторичны.

48


Slide 49

Задание
Прочитать статью Пола Ренда Принципы разработки
пользовательского интерфейса.

49