Бильфельд Н.В., Затонский А.В. Основы разработки интерфейсов: Реализация в системе Borland Delphi

Подождите немного. Документ загружается.

Метод выбора команды из меню плох тем, что состоит из большого

количества действий. С другой стороны, он имеет то достоинство, что

пользователь, вообще ничего не знающий о системе, просмотрев меню,

может узнать, что файлы вообще можно стирать (собственно говоря, эта

обучающая функция составляет главное достоинство меню как метода

взаимодействия пользователя с системой. Но поскольку это достоинство не

имеет прямого отношения к скорости работы, можно смело сказать, что

меню не является самым понятным методом).

Таблица 1

Детализация действий при удалении файла

Метод

Выбор

команд из

меню

Использование

горячих

клавиш

Использование

инструмента на

панели

Непосредственное

манипулирование

Формирование цели действий и общего замысла

Определение необходимых действий и их последовательности

Выбор файла

Поиск меню,

где есть

пункт

удаления

Поиск в

памяти

команды

стирания

Поиск на экране

соответствующей

пиктограммы

Поиск на экране

иконки корзины

Поиск

элемента

меню,

вызывающего

удаление

Поиск

клавиши

Delete на

клавиатуре

Нажатие на

пиктограмму

Перенос файла в

корзину

Действия

Выбор

нужного

элемента

меню

Нажатие

клавиши

Delete

Количество элементов второго метода, использующего горячую

клавишу, также велико, но у него есть определенные плюсы. При

достаточной степени автоматизма нет ни необходимости искать клавишу на

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

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

Третий способ, нажатие на кнопку в панели инструментов, состоит из

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

сожалению, он не слишком универсален. Количество элементов в любой

панели инструментов ограничено, не говоря уже о том, что для многих

действий невозможно подобрать пиктограмму. В то же время способ этот

имеет одно существенное достоинство – подсказка к действию постоянно

находится на экране, так что пользователю не приходится копаться в своей

памяти (что может быть долгим).

И, наконец, четвертый способ – непосредственное манипулирование.

Помимо того, что он сам по себе состоит из небольшого количества атомов, в

определенных ситуациях он оказывается еще короче. Дело в том, что когда

расположение корзины (пусть даже и в общих чертах) пользователю

известно, процесс удаления файла начинает состоять из одного единого

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

перетаскивает туда файл одним движением (основной признак единого

действия).

Несмотря на то, что пример с корзиной наиболее известен, назвать его

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

только может сделать с объектом что-либо одно, но может сделать несколько

разных действий. Например, одно и то же действие (перетаскивание)

работает и при удалении, и при перемещении файла. Более того, если

перетащить файл в окно электронного письма, которое пользователь в

данный момент пишет, файл будет вставлен в письмо как вложение. Это

значит, что непосредственное манипулирование позволяет серьезно снизить

как количество команд в системе, так и длительность обучения.

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

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

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

сработают – элемент можно будет превентивно заблокировать. Если же

пользователь попытается стереть файл, нажав на Delete, система окажется

неспособна как-то показать неправомочность его действий (разве что писком

или сообщением об ошибке, что нехорошо). А теперь предположим, что

пользователь собрался стереть важный файл, который стирать не

рекомендуется. Ни один из методов, кроме непосредственного

манипулирования (можно будет поменять пиктограмму корзины на время,

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

сработает, т. е. этот метод отличается от остальных своей гибкостью.

Для достижения достаточной эффективности не обязательно стараться

наиболее реалистично отразить действие, значительно важнее возможно

более реалистично отразить объект, над которым это действие совершается.

Например, компьютерную панель управления работой осветительных

приборов необязательно снабжать точными имитациями выключателей.

Главное реалистично отразить на ней план помещения и расположение

источников света, равно как и показать прямую связь между этой

информацией и собственно выключателями. Бывают ситуации, когда

эффективность непосредственного манипулирования уравновешивается

неэффективностью физических действий пользователя.

Скорость работы

Складывается из:

1. Времени восприятия исходной информации. Примерное время

совершения типовых действий следующее:

1.1. Распознавание визуального образа – 0,1 с.

1.2. Перевод взгляда, переключение на другой объект – 0,25 с. Поскольку

у человека только один фокус внимания, при любом переключении

внимания, старый фокус теряется. Привлечение внимания можно

осуществить:

1.2.1. Движением (поэтому лучше открывать новые окна в зоне

действия, а не в центре экрана).

1.2.2. Ярким цветом.

1.2.3. Всем остальным.

1.3. Восстановление фокуса внимания занимает более длительное время.

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

воздействиями извне, при этом содержимое кратковременной памяти

замещается. Для восстановления фокуса в каждый момент времени

надо знать:

1.3.1. На каком шаге пользователь остановился (рис. 3).

Рис. 3. Три варианта индикации степени заполнения экранной формы.

Второй и третий варианты значительно визуальнее

1.3.2. Какие команды уже дал и какие параметры уже ввел (очень

сложно отобразить адекватно в интерфейсе).

1.3.3. Что именно должен сделать на этом шаге (значительно проще).

1.3.4. Куда было обращено внимание в момент отвлечения (можно

использовать яркий фокус ввода, если он совпадает с фокусом

внимания).

2. Длительность интеллектуальной работы (пользователь думает).

2.1. Выбор из двух альтернатив (простейшее решение) занимает примерно

1,25 с.

2.2. Взаимодействие пользователя и системы включает.

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

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

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

2.2.4. Выполнение действий (не входит в интеллектуальную работу).

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

2.2.6. Интерпретация нового состояния.

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

3. Длительность физических реакций пользователя (или точных, или

быстрых).

3.1. Нажатие на клавишу – 0,2 … 1,25 с.

3.2. Нажатие на кнопку мыши – 0,1 с.

3.3. Перемещение курсора мыши – 1,0 … 1,5 с в соответствии с законом

Фиттса

(

)

log

T a b

= + , где

– расстояние,

– размер объекта.

То есть быстрее всего либо в близкий, либо в большой объект, а на

границе экрана объект бесконечно большой. Нулевая дистанция до

кнопки возникает, например, при использовании контекстного меню.

3.4. Переключение с клавиш на мышь (или обратно) – 0,36 с.

4. Время реакции информационной системы (ИС) или программы обычно

пренебрежимо мало, исключая время выполнения сложных запросов к

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

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

параметрах распечатки может задержаться до бесконечности. Поэтому

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

умолчанию) все затянувшиеся диалоги и обеспечивать адекватность

индикаторов. Если индикатор движется неравномерно, пользователь

может неправильно предположить время окончания продолжительной

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

системой.

Количество (частота) ошибок

Ошибка – действия, не совпадающие с целью пользователя. ИС должна

быть терпима к ошибкам пользователей, они неизбежны. В разговорах мы

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

ожидаем от собеседника понимания. В такой ситуации ИС неспособна, но все

же должна «правильно» понять пользователя. Виды ошибок:

1. Ошибки от недостаточного знания предметной области. Исправляются

обучением.

2. Опечатки.

3. Несчитывание показаний системы: опытные – думают, что знают;

неопытные – не знают, что считать. Иначе – сниженная бдительность,

которую невозможно поддерживать продолжительное время.

4. Моторные ошибки (нажал на соседнюю кнопку).

Отсюда возможные пути борьбы с ошибками следующие:

Использование форматов ввода, наряду с объяснениями возможных

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

цветом).

2. Плавное обучение в ходе работы.

3. Снижение требовательности к бдительности (помочь восстановить

фокус внимания в нужном месте).

4. Наглядность и разборчивость индикаторов. Индикаторов ошибок

(сообщений) быть или не должно, или они должны быть вежливыми и,

главное, информативными (рис. 4).

Рис. 4. Пример неинформативного сообщения об ошибке: непонятно,

почему она возникла, и какое число может оказаться верным.

5. Снижение чувствительности к ошибкам:

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

подтверждения. Последовательность «удалить» →

«подтвердить» (которую можно по ошибке выполнить, не глядя)

лучше заменить на «временно разблокировать» → «удалить» →

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

выставлять на них фокус при автоматическом перемещении по

элементам;

б). проверка перед действиями, включая элементы наглядности:

анимацию предстоящего, ползунки или крутилки, диапазон во

всплывающем окне подсказки;

в). самостоятельный выбор команд (рис. 5), при котором от

пользователя требуется только подтверждение, как в мастере

печати. Система может сама узнать большинство параметров из:

i). здравого смысла (если в системе установлен только один

принтер – не из чего выбирать; обычно печатается одна

копия документа и т.п.);

ii). предыдущих установленных параметров (формат бумаги);

iii).

наиболее часто устанавливаемых параметров (почта yandex

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

Рис. 5. Зачем заставлять пользователя каждый раз выбирать принтер

и вводить число копий?

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

1. Ошибки во время совершения действия (потащил в корзину не тот

файл).

2. Исправляемые после ошибочного действия (можно достать файл из

корзины).

3. С трудом исправляемые ошибки (отформатирован диск).

4. Не исправляемые, то есть те, которые невозможно обнаружить

формальной проверкой (смысловая ошибка в тексте).

Первые ошибки лучше, так как не воспринимаются в качестве ошибок

вовсе и не раздражают пользователя. Вообще, наличие человеческих ошибок,

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

действия, всегда свидетельствует о недостаточно хорошем дизайне.

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

Пользователи воспринимают одинаково положительно как убогие, но

приятные интерфейсы, так и простые, эффективные, но сухие и скучные.

Таким образом, субъективные факторы имеют тот же вес, что и объективные.

Значительно легче и приятнее пользоваться эстетически

привлекательными объектами. Это наблюдение породило весь

промышленный дизайн, включая дизайн одежды, интерьеров и так далее.

Эстетичность по-разному понимается для дизайна интерьеров,

устройств, типографского дизайна, произведений искусства и т.п. При этом, в

целом, сохраняются основные принципы эстетичности, например:

1. Внимание к деталям. Интерфейс ИС состоит из функциональных

деталей, и не воспринимается в целом.

Интерфейс не самоценен.

3. Интерфейс передает пользователю информацию.

4. Интерфейс предназначен для длительного использования.

Интерфейс функционален (компромисс между эстетикой и

функциональностью).

6. Интерфейс ограничен технологическими рамками.

В дизайне интерфейса могут использоваться приемы:

1. Предмет должен быть незаметен в процессе использования. Для этого

существуют следующие простые правила:

а). избегать развязности;

б). избегать ярких цветов;

в). избегать острых углов;

г). делать легким и воздушным;

д). контраста надо добиваться не сменой насыщенности цвета, а

расположением пустот.

2. Элегантность и гармония, в отличие от красоты, не надоедают, не

ощущаются, удовлетворяют независимо от уровня пользователя,

удобнее в производстве:

а). интерфейс должен быть насыщен визуальными

закономерностями;

б). использовать привязочные сетки, одинаковые во всех

интерфейсах ИС;

в). привязывать все размеры и координаты к «золотому сечению»

0,618⋅0,382, при этом достаточно 1 … 2-х переменных для

разметки интерфейса (рис. 6).

Рис. 6. Проектирование интерфейса с привязкой к «золотому сечению»

3. Повышение субъективного восприятия скорости работы (для

самоощущения) достигается приемами:

а). заполнение пауз между событиями;

б). разделение крупных действий на более мелкие (но увеличивает

усталость);

в). повышение объективной скорости работы.

4. Снижение стресса, который возникает:

а). от ощущения возможности совершения ошибки и невозможности

ее исправить;

б). от необходимости поддерживать высокий уровень внимания,

много запоминать;

в). от отсутствия контроля над системой, когда она выполняет

непонятные действия;

г). от изменчивости интерфейса, не позволяющей построить в

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

д). от частых, категоричных и неинформативных сообщений об

ошибках.

5. Сообщения об ошибках:

а). недостаточная гибкость («указано неверное число», рис. 4);

б). нежелание показать границы действия;

в). самоуверенность ИС: любое сообщение пользователь не любит и

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

Сообщение об ошибке должно быть вежливым, коротким, русским,

отвечать на вопросы:

• В чем заключается проблема?

• Как исправить эту проблему сейчас?

• Что сделать, чтобы проблема не повторялась?

В идеале, сообщений об ошибках быть совсем не должно (исправление

ошибки лучше осуществлять до того, как действия пользователя приведут к

ошибке).

6. Секретность и пароли. Соблюдение секретности не приносит пользы,

лишь уменьшает возможный вред. Обычно субъективное ощущение

выгоднее потенциальных потерь информации.

7. Возможность самовыражения – настройки ИС «под себя». Хотя бы

выбор вариантов из списка. При обновлении версии ИС настройка

интерфейса должна сохраняться.

Основные элементы интерфейсов

Кнопки

Взаимодействие с кнопкой ограничивается нажатием на нее.

Следовательно, гиперссылки также являются кнопками. Принято на сайтах

делать кнопки, если они запускают действие, и ссылки – если они

перемещают на другую страницу.

Чем больше кнопка, тем выше скорость работы и ниже – вероятность

ошибок. Имеет значение и зазор между кнопками. Хуже, если пользователь

не только нажал не на ту кнопку, но и «зацепил» при этом соседнюю.

Поэтому моментом начала действия лучше считать отпускание мыши над той

же кнопкой, где она была нажата.

Кнопка может иметь несколько состояний, сигнализируемых ее

объемом (рис. 7).

Рис. 7. Состояния кнопки в Windows: нейтральное, нажатое, нейтральное с

установленным фокусом ввода, состояние кнопки по умолчанию, по

умолчанию с установленным фокусом ввода и заблокированное

Главное, чтобы в разных ситуациях одни и те же формы объема не

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

удаляемые с экрана кнопки: их лучше делать недоступными, но оставлять на

форме.

Названия кнопок (за исключением стандартов наподобие «ОК»)

должны быть глаголами или отглагольными существительными. Стандарты

бывают путанными: при наличии «ОК», «Применить» и «Отмена» кнопка

«Применить», фактически, превращает кнопку «ОК» в «Закрыть», так как все

действия уже сделаны. «Отмена» после «Применить» также почти никогда не

работает.

Чекбоксы и радиобоксы

Чекбоксы и радиобоксы являются кнопками отложенного действия.

Стандартом, укоренившемся в ментальной модели, является их назначение –

ввод параметров, которые скажутся после, когда действие будет запущено

иными элементами управления. Нарушать это правило не следует.

Есть несколько простых правил использования:

1. В группе не должно быть меньше двух радиокнопок.

2. Одна радиокнопка в группе должна быть проставлена по умолчанию.

3. Не следует заменять две радиокнопки одним чекбоксом (хотя, по

логике, это одно и то же).

4. Боксы надо размещать по вертикали.

5. Радиобоксы – круглые, чекбоксы – квадратные, и нарушать этот

стандарт обычно не надо.

6. Подписи не должны содержать отрицания («Не показывать то или

это»).

В подписях не должны повторяться слова («Показывать то»,

«Показывать это» – слово «Показывать» надо перенести в рамку

группировки).

8. Подпись бокса (особенно, в Интернет) тоже должна нажиматься и

изменять его состояние (в Windows это предусмотрено автоматически).

9. При необходимости заблокировать надо визуально ослаблять не только

бокс, но и его текст.

На панелях инструментов применяются боксы в виде кнопок (рис. 8).

Там они визуально не различаются. Это не страшно с той точки зрения, что

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

начинающих освоение разницы между ними занимает некоторое время. На

показанной на рисунке панели инструментов боксы являются также

кнопками прямого действия (изменяют выделенный фрагмент текста).

Рис. 8. Боксы в панелях инструментов

Теоретически графические версии боксов можно располагать и в

диалоговых окнах, но там они слишком похожи на обычные кнопки, а

потому вводят пользователя в заблуждение.

Списки

Списки («листбоксы») являются вариантами реализации чекбоксов или

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

наглядность принесены в жертву:

• компактности (они экономят экранное пространство, что актуально,

если количество элементов велико);

• расширяемости (простота загрузки в списки динамически

изменяемых элементов делает их очень удобными при разработке

интерфейса, поскольку это позволяет не показывать пользователю

заведомо неработающие элементы).

Списки бывают:

• пролистываемыми:

 с единственным выбором (аналог радиобокса);

 со множественным выбором (аналог чекбокса);

• раскрывающимися (аналог радиобокса).

Традициями или правилами использования списков являются:

Группа

чекбоксов

Группа

радиобоксов