ЛЕКЦИЯ 20 �� ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЯ

Проектирование информационных систем

Литература

• Влад В. Головач. Дизайн пользовательского интерфейса v 1.2 – электронное издание
• Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных систем. Символ - Плюс; 2003, 272 стр.

​

Интерфейс

• (от interface  – поверхность раздела, перегородка)
• совокупность средств и методов взаимодействия между элементами системы.
• В зависимости от контекста, понятие применимо как к отдельному элементу (интерфейс элемента),
• так и к связкам элементов (интерфейс сопряжения элементов).

Интерфе́йс по́льзователя

• он же по́льзовательский интерфейс
• (UI,  user interface)  – разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной/устройством.
• Представляет собой совокупность средств и методов, при помощи которых пользователь взаимодействует с различными, чаще всего сложными, с множеством элементов, машинами и устройствами.

​

Средства интерфейса пользователя

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

Средства интерфейса пользователя (2)

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

Методы интерфейса пользователя

• набор правил, заложенных разработчиком устройства,
• согласно которым совокупность действий пользователя должна привести к необходимой реакции устройства и выполнения требуемой задачи
• Эти правила должны быть достаточно ясны для понимания, естественны и легки для запоминания
• (всё это входит в понятие usability)

​

Юзабилити VS Эргономика

• Юзабилити – «возможность использования», «способность быть использованным», «полезность» ) обозначает итоговый уровень удобности предмета для использования в заявленных целях.
• ISO 9241-11: «степень, с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью»

​

Эргономика

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

​

Графический пользовательский интерфейс

• (Graphical User Interface - GUI)
• Стиль взаимодействия «пользователь-компьютер»,
• в котором применяются четыре фундаментальных элемента:
• окна,
• пиктограммы,
• меню и
• курсоры.

​

Основные принципы построения интерфейса

• Контроль на стороне пользователя
• Согласованность
• Индивидуализация и настройка
• Эстетичность и удобство

​

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

© А.Ю. Сидоров

11

Человеческий фактор

• Устойчивое выражение, которым обозначают
• психологические способности человека,
• как потенциальный и актуальный источник
• информационных проблем
• при использовании современных технологий

​

​

Оценка интерфейса пользователя

• Неформальный просмотр
• Эвристический просмотр
• Сквозной контроль
• Традиционные испытания на практичность
• Сравнительные оценки практичности
• Оценка на территории заказчика

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

© А.Ю. Сидоров

13

ЭЛЕМЕНТЫ УПРАВЛЕНИЯ

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа (пользователь думает, что он должен сделать)
• Физические действия пользователя
• Реакция системы

​

​

​

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа

​

• Физические действия пользователя
• Реакция системы

​

​

​

Интеллектуальная работа

• Цикл взаимодействия
• Непосредственное манипулирование и другие формы диалога
• Потеря фокуса внимания

Интеллектуальная работа

• Цикл взаимодействия
• Непосредственное манипулирование и другие формы диалога
• Потеря фокуса внимания

Цикл взаимодействия пользователя с системой (Д.Норман)

1. Формирование цели действий

2. Определение общей направленности действий

3. Определение конкретных действий

4. Выполнение действий

5. Восприятие нового состояния системы

6. Интерпретация состояния системы

7. Оценка результата

​

ПРИМЕР С ЧАЙНИКОМ

Цель действий - желание выпить чаю.

Алгоритм:

Подойти к чайнику и открыть крышку. Если воды в чайнике мало или нет вовсе, перенести чайник к раковине и наполнить его водой, после чего поставить его на плиту.

Если воды в чайнике достаточно, сразу поставить его на плиту. Закрыть чайник крышкой.

Найти спички. И.т.д.

Разумеется, в реальной жизни такую сложную программу пользователь не

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

Требования к пользователю

Он должен знать:

1. Что он хочет получить на выходе (чай)
2. Как минимум одну последовательность действий, приводящую к успешному результату (наполнить чайник, поставить его на плиту, дождаться закипания, налить кипяток в стакан с заваркой)
3. Где ему найти все объекты, участвующие в процедуре (где, черт побери, спички?)
4. Как определять годность объектов к использованию (есть ли вода в чайнике)
5. Как управляться с объектами (как включить газ)

Интеллектуальная работа

• Цикл взаимодействия
• Непосредственное манипулирование и другие формы диалога
• Потеря фокуса внимания

НЕПОСРЕДСТВЕННОЕ МАНИПУЛИРОВАНИЕ

С первым пунктом проблем обычно не

возникает, с остальными приходится

повозиться.

Плохая новость заключается в том, что

остальных пунктов много.

Хорошая новость – в том, что решение всех этих проблем единое.

Оно называется

непосредственным манипулированием

(direct manipulation).

​

ПРИМЕР С КОРЗИНОЙ

АТОМЫ

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

МЕНЮ

- Метод выбора команды из меню плох уже тем, что

состоит из большого количества атомов.

+ Пользователь, вообще ничего не знающий о системе, просмотрев меню, может узнать, что файлы вообще можно стирать.

​

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

ГОРЯЧИЕ КЛАВИШИ

- Количество элементов метода,

использующего горячую клавишу, также велико.

+ При достаточной степени автоматизма нет ни

необходимости искать клавишу на клавиатуре, ни думать, какую клавишу нажать.

Для опытных пользователей этот метод очень хорош.

ПАНЕЛЬ ИНСТРУМЕНТОВ

+ Нажатие на кнопку в панели инструментов, состоит из не

столь большого количества элементов, так что формально он хорош.

– Количество элементов в любой панели инструментов ограничено, так что особенно с этим способом не развернешься.

​

– Для многих действий невозможно подобрать пиктограмму.

​

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

НЕПОСРЕДСТЕННОЕ МАНИПУЛИРОВАНИЕ

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

Интеллектуальная работа

• Цикл взаимодействия
• Непосредственное манипулирование и другие формы диалога
• Потеря фокуса внимания

ПОТЕРЯ ФОКУСА ВНИМАНИЯ

Пользователи работают с системой не всё время, в течение которого они работают с системой.

Каждое отвлечение сбивает фокус внимания, т. е. обработку текущего действия.

​

Для возвращения к работе от пользователя требуется заново поместить в свою память нужную информацию.

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

Для продолжения работы пользователь должен знать:

• На каком шаге он остановился
• Какие команды и параметры он уже дал системе
• Что именно он должен сделать на текущем шаге
• Куда было обращено его внимание на момент отвлечения.

На каком шаге он остановился

Чтобы показать пользователю, на каком шаге он остановился, традиционно используют конструкцию «Страница N из M».

Второй и третий варианты значительно визуальнее. Не используйте в подобных случаях ползунки

РАНЕЕ ОТДАННЫЕ КОМАНДЫ

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

ТЕКУЩИЙ ШАГ

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

ВНИМАНИЕ ДО МОМЕНТА ОТВЛЕЧЕНИЯ

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

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа
• Физические действия пользователя
• Реакция системы

​

​

​

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа
• Физические действия пользователя
• Реакция системы

​

​

​

Длительность физических действий

пользователя, прежде всего, зависит

от степени автоматизации работы и

степени необходимой точности работы.

БЫСТРЫЙ И ТОЧНЫЙ

Любое физическое действие,

совершаемое с помощью мускулатуры,

может быть

или точным,

или быстрым.

Вместе точность и быстрота встречаются

исключительно редко, поскольку для

этого нужно выработать существенную

степень автоматизма.

​

«Мышь» и клавиатура

• Клавиатура не требует особой точности движений.
• Мышь не является прецизионным инструментом
• Оптимизация физических действий – в первую очередь в работе с мышью

ЗАКОН Поля Фитса (1954)

​

Время достижения цели прямо пропорционально дистанции до цели и обратно пропорционально размеру цели.

Закон Фитса (формализация)

​

​

​

• Время (мс) = a + b log2 (D/S + 1)
• Константы a и b устанавливаются опытным путем по параметрам производительности человека
• Для приближенных вычислений a=50, b=150.

​

​

КНОПКА БЕСКОНЕЧНОГО РАЗМЕРА

Кнопка, расположенная вплотную к верхнему или нижнему краю экрана, имеет бесконечную высоту.

Кнопка, расположенная в углу экрана, имеет «еще более бесконечные» размеры.Это делает такие кнопки наиболее доступными

для пользователя.

Нулевая дистанция до кнопки

Контекстное меню, вызываемое по нажатию правой кнопки мыши является чуть ли не самым быстрым и эффективным элементом.

Оно всегда открывается под курсором, соответственно расстояние до любого его элемента всегда минимально.

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

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа
• Физические действия пользователя
• Реакция системы

​

​

​

Скорость работы пользователей

• Длительность выполнения работы пользователя:
• Восприятие исходной информации
• Интеллектуальная работа
• Физические действия пользователя
• Реакция системы

​

​

​

• если процесс предположительно будет длительным,
• система должна убедиться, что она получила
• всю информацию от пользователя до начала этого процесса.

​

Следует убирать с экрана все диалоги с вопросами, на которые в течение пяти

минут не был дан ответ.

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

�Ошибки, вызванные недостаточным знанием предметной области

​

​

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

​

Опечатки

«Опечатки» происходят в двух случаях:

​

• Во-первых, когда не все внимание уделяется выполнению текущего действия
• Во-вторых, когда в мысленный план выполняемого действия вклинивается фрагмент плана из другого действия

Несчитывание показаний системы

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

Моторные ошибки

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

При борьбе с ошибками нужно направлять усилия на:

​

■ Плавное обучение пользователей в процессе работы

​

■ Снижение требований к бдительности

​

■ Повышение разборчивости и заметности индикаторов

Снижение �чувствительности системы к ошибкам

Три основных способа:

■ Блокировка потенциально опасных действий пользователя до получения подтверждения правильности действия

■ Проверка системой всех действий пользователя перед их принятием

■ Самостоятельный выбор системой необходимых команд или параметров, при котором от пользователя требуется только проверка

Не следует делать опасные для пользователя кнопки кнопками по умолчанию

Всегда показывайте границы диапазона во всплывающей подсказке

Два уровня ошибок �и обратная связь

1. Ошибки, исправляемые во время совершения действия

2. Ошибки, которые исправить можно, но с трудом

3. Ошибки, исправляемые после выполнения действия

4. Ошибки, которые на практике невозможно исправить

Чтобы исправить совершенную �ошибку, от пользователя требуется:�

■ Понять, что ошибка совершена

​

■ Понять, как её исправить

​

■ Потратить время на исправление ошибки

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

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Обучение работе с системой

​

​

Пользователь будет учиться какой-либо функции, только если он знает о её существовании.

Рассчитывайте на средних пользователей, а не новичков или на профессионалов.

Средства обучения

• общая «понятность» системы

​

• обучающие материалы

Понятность системы

«Ментальная модель»

​

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

зависит от контекста

Понятность системы

«Метафора»

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

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

«Метафора»

• Опасно полностью копировать метафору, достаточно взять из неё самое лучшее
• Не обязательно брать метафору из реального мира, её можно

придумать самому

• Эффективнее всего метафорически объяснять значение отдельных объектов
• Если метафора хоть как-то ограничивает систему, от неё необходимо немедленно отказаться

Понятность системы

«Аффорданс»

• Маппинг, или повторение конфигурации объектов конфигурацией

элементов управления

• Видимая принадлежность управляющих элементов объекту
• Визуальное совпадение аффордансов экранных объектов с такими же аффордансами объектов реального мира
• Изменение свойств объекта при подведении к нему курсора

Понятность системы

​

«Стандарт»

​

чтобы стандарт заработал, он должен быть популярен

​

Последовательность в реализации интерфейса

есть первое условие качества результата

Обучающие материалы

• Базовая справка объясняет пользователю сущность и назначение системы.
• Обзорная справка рекламирует пользователю функции системы. Также обычно срабатывает один раз. Нужна и ПО и сайтам.
• Справка предметной области отвечает на вопрос «Как сделать хорошо?»
• Процедурная справка отвечает на вопрос «Как это сделать?»
• Контекстная справка отвечает на вопросы «Что это делает?» и «Зачем это нужно?».

Обучающие материалы

• Справка состояния отвечает на вопрос «Что происходит в настоящий момент?»

Система должна индицировать все свои состояния

• Сообщения об ошибках
• Бумажная книга. На одном листе может быть сконденсировано очень много материала
• Справочная карта. Отдельная краткая бумажная документация

Обучающие материалы

• Структурированная электронная документация
• Фрагменты пространства интерфейса, показывающие справочную информацию
• Всплывающие подсказки. Хорошо справляются с ответом на вопросы «Что это такое» и «Зачем это нужно».

​

Спиральность

Следует всемерно сокращать объем справочной системы, чтобы тем самым сократить длительность неудовольствия

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Критерии качества UI

• Скорость работы пользователей
• Количество человеческих ошибок
• Скорость обучения
• Субъективное удовлетворение

​

Субъективное удовлетворение

• Влад Головач, стр 34

Проектирование и разработка UI

• Выделение контекстов
• Формирование карты диалога
• Выбор интерфейсных элементов
• Дизайн

Литература

• Влад В. Головач. Дизайн пользовательского интерфейса v 1.2 – электронное издание
• Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных систем. Символ - Плюс; 2003, 272 стр.

​