Психологические основы проектирования интерфейсов.( Массель Л.В.)
67__Принципы проектирования и критерии эффективности интерфейсов.
Существуют некоторые принципы, являющиеся фундаментальными при разработке и реализации эффективных интерфейсов, как традиционных графических, так и Web-интерфейсов. Недопонимание многих из этих принципов, в конечном счете, отражается на эффективности работы программного продукта. Перспективы использования приложения в Internet делают применение этих принципов еще более важными. В числе первоочередных выделяют следующие принципы:
1. Эффективные интерфейсы должны быть очевидными и внушать своему пользователю чувство контроля. Необходимо, чтобы пользователь мог одним взглядом окинуть весь спектр своих возможностей, понять, как достичь своих целей и выполнить работу.
2. Эффективные интерфейсы не должны беспокоить пользователя внутренним взаимодействием с системой. Необходимо бережное и непрерывное сохранение работы, с предоставлением пользователю возможности отменить любого действие в любое время.
3. Эффективные приложения должны выполнять максимум работы, требуя при этом минимум информации от пользователя.
Следствие. Приложения должны пытаться предположить то, чего хочет пользователь. Не следует заставлять пользователя заниматься поиском информации или вызовом необходимых средств, желательно предоставлять ему доступ ко всей информации и всем средствам на каждом шаге.
В соответствии с перечисленными принципами определяются такие критерии эффективности интерфейсов, как обучаемость пользователя, использование метафор, удобная компоновка элементов интерфейса, окна диалогов, применяемая терминология.
Обучаемость пользователя
В идеале программные продукты не должны иметь кривую обучения: пользователи хотели бы сразу начинать работать с системой и быстро достигать определенного мастерства. Но на практике все программы, независимо от сложности, имеют кривую обучения. Для обеспечения безопасности и целостности пользовательского интерфейса в него необходимо вводить четкие указания для пользователя и предусматривать возможность нелогичных действий с его стороны (в программистском сленге для обозначения этого есть термин «дуракоустойчивость» или «защита от дурака»).
Инструкции для пользователей обычно выводятся в виде подсказок либо справочной информации. Характер и количество инструкций должны соответствовать опыту работы пользователя с системой и его намерениям. Справочная информация должна появляться тогда, когда она требуется, и в приемлемой форме.
Сообщения об ошибках часто агрессивны и грубы, останавливают текущую работу и требуют подтверждения, прежде чем позволят продолжить ее. С другой стороны, многие сообщения об ошибках туманны, не способны довести значимую информацию и по временам попросту неверны, в потенциале принося незаслуженные огорчения и моральный ущерб пользователю. Сообщение об ошибке должно точно объяснить, в чем заключается ошибка и какие действия следует предпринять, чтобы ее устранить, а не ограничиваться общими фразами типа «синтаксическая ошибка» или таинственными кодами типа «ОС1».
Существуют несколько способов избежать сообщений об ошибках: 1) сделать ошибки невозможными; 2) дать позитивную обратную связь; 3) проверять, но не редактировать.
Использование метафор
В разработке интерфейса часто употребляются метафоры, чтобы помочь пользователю познакомиться с приложением, используя ассоциации с уже имеющимся знанием. Метафоры понимаются интуитивно. Люди схватывают смысл метафорического элемента управления в интерфейсе, мысленно отождествляя его с каким-либо другим процессом или предметом, на познавание которого они уже затратили время и силы.
Метафоры обычно являются чем-то знакомым, но часто добавляют и новые свойства.
Компоновка интерфейса
Организация пространства
Расположение на экране элементов управления
Расположение информации на экране
Использование различных видов диалогов
Существуют четыре традиционные структуры диалога, каждая из которых основывается на аналогии с определенным типом взаимодействия между людьми и в той или иной степени отвечает перечисленным основным критериям. Эти структуры обеспечивают различный уровень поддержки пользователя .
Меню. Предполагается, что меню следует использовать в тех случаях, когда пользователь неопытен или пользуется преимущественно методом ввода путем указания нужного объекта из ограниченного множества данных, например, при выборе задачи для исполнения.
Язык команд. Предполагается, что эта структура будет использоваться подготовленным пользователем там, где задачи обработки не имеют иерархической структуры и не требуется много данных на входе.
Формы (шаблоны). Удобны там, где можно заранее определить стандартную последовательность вводимых данных, например, при обработке транзакций в виде таблиц. Ее целесообразно использовать для ввода табулированных данных.
Структура диалога типа «вопрос-ответ». Представляет собой разумный компромисс для различных уровней подготовки пользователей. Ее можно использовать вместо любой из приведенных выше структур, но особенно хорошо она подходит там, где диапазон входных величин слишком велик для структуры типа меню или слишком сложен для структуры на основе языков команд, либо когда последующий вопрос зависит от ответа на текущий вопрос.
Несмотря на то, что большинство систем имеют в своей основе структуры диалога типа «вопрос-ответ», меню или структуры на базе команд, редко удается построить диалог для всей системы, используя только одну структуру. Для разных частей диалога нужны различные структуры в зависимости от их конкретных характеристик. Другими словами, большинство диалогов должны базироваться на смешанных структурах, объединяющих в себе несколько основных структур.
Окна диалогов с закладками
Диалоги с закладками группируют несколько связанных функций вместе, теоретически делая работу пользователя более продуктивной с помощью более быстрого доступа к функциональности.
Выбор терминологии
Терминология, используемая во многих приложениях, часто порождает у пользователя чувство, будто интерфейс написан на иностранном языке.
Существует четыре основных критерия качества любого интерфейса:
Скорость работы пользователя.
Количество человеческих ошибок.
Скорость обучения.
Соответствие интерфейса задачам пользователя.
Кроме того, в предлагается использовать следующие показатели эффективности UI:
-
Простота изучения предметной области и системы функционирования программного продукта.
Естественность, привычность действий пользователя при взаимодействии с программным продуктом.
Своевременное и подробное информирование пользователя в режиме запроса справки и его информационное сопровождение в on-line режиме об объектах, действиях и режимах работы.
Сбалансированное, гармоническое использование цветографических возможностей аппаратного и программного обеспечения для отображения информации.
Доброжелательность, эмоциональная выразительность текстов сообщений.
Своевременная и достаточная информация о субъектах автоматизированной деятельности, их действиях и правилах работы с ними.
Установка, настройка отдельных характеристик интерфейса под индивидуальные предпочтения пользователя.
68__Организация пространства при компоновке интерфейса.
Организация пространства
Создавая искусственную среду, человек использует такие принципы организации мира (по аналогии с преобразованием окружающего мира), как ритм, симметрия, пропорции, контраст и др.
Для европейцев характерно читать слева направо, благодаря этой моторно закрепленной привычке глаза человека и по экрану движутся так же. Как результат, левая часть экрана воспринимается связанной с прошлым, с тем, что уже было прежде. Правая часть экрана связана с будущим, с завершением. Середина же ассоциируется с текущим моментом.
Смещение акцента влево от середины будет восприниматься как движение навстречу зрителю. Нагруженная левая часть создает ощущение движения вспять, в прошлое, навстречу «нормальному» ходу событий. Перенос центра масс в левую часть экрана может вызвать иллюзию вращения композиции против часовой стрелки.
Нагруженная правая часть экрана воспринимается как «убегание» от зрителя в пространстве или устремленность в будущее - во времени. В любом случае такой вариант композиции трактуется как девиз «Вперед!» Массивная правая часть может создать иллюзию вращения по часовой стрелке.
Акцент на середину экрана сосредоточивает внимание на текущем моменте и воспринимается как «здесь и сейчас».
Горизонталь, проходящая по середине экрана, отождествляется с линией горизонта, когда человек стоит на горизонтальной поверхности, а его взгляд параллелен земле. Преобладание массы в верхней части экрана создает впечатление неустойчивости, смутной угрозы, эмоциональное ощущение напряженности. Объяснение этого эффекта заключается в подсознательном опасении, что нависающая над головой масса может обрушиться. Массивная же нижняя часть экрана, наоборот, дает ощущение статичности, основательности, надежности и стабильности.
Размещение центра масс по середине экрана вызывает ощущение сбалансированности, уравновешенности, усредненности. Словесные выражения, соответствующие такому положению, «здравый смысл» или «обыденная повседневность».
Вертикаль при отсутствии членений воспринимается как нечто несоизмеримое, бесконечное, легкое, устремленное ввысь, если она имеет утолщения в нижней части или стоит на горизонтальном основании – как нечто более устойчивое. Горизонталь ассоциируется с надежностью, стабильностью.
Диагональ символизирует динамику. Наиболее мощное и энергичное движение передает диагональ «из угла в угол». Чем ближе к прямому угол между диагональю и горизонтальным основанием, тем более резкое и порывистое движение она передает. Приближение к вертикали делает этот рывок все короче, судорожнее, сближая его с напряженным стоянием вертикали. Сближение же с горизонталью передает движение более протяженное, медленное и спокойное.
Соответственно, композиция, построенная на четких горизонталях и вертикалях, тяготеет к устойчивости, статичности, торжественности, а композиция, базирующаяся на диагоналях, - к движению, изменчивости, нестабильности. Горизонтальная композиция будет выглядеть более основательной, тяжеловесной, чем вертикальная. Справедливость этого утверждения в большой степени зависит и от соотношения сторон прямоугольников, и от размещения текста в них.
2. Расположение на экране элементов управления
Очень распространенная ситуация: имеется поле с элементами, над которыми необходимо производить некоторые операции, например, поле ввода текста в окне и управляющие кнопки к нему, либо поле для рисования и набор инструментов к нему и т.д. В этой ситуации возможны различные варианты расположения кнопок относительно поля.
Хотя непосредственное управление программой делается не руками, а мышью, это не влияет на особенности человеческого восприятия. Поэтому было бы более естественно располагать управляющие элементы снизу или справа, то есть так, как они располагаются в реальном мире. Однако, в силу ряда причин, кнопки стали размещать не совсем естественно: сверху и слева. Так за «быстрыми» кнопками закрепилось положение сверху, как и меню. Слева, в некоторых случаях, размещают инструменты и прочие управляющие элементы. Снизу и справа остались лишь управляющие кнопки типа ДА, НЕТ, ОТМЕНА, СПРАВКА и т.д. Желательно придерживаться этой схемы, так как она уже стала привычной для многих пользователей, либо сделать так, чтобы панели управления были «съемными» и могли перемещаться по желанию в произвольные места. Однако предоставлять пользователю слишком большие возможности по конфигурированию интерфейса тоже не следует, так как это может привести к тому, что пользователь просто запутается и испытает определенный дискомфорт от внесенных им изменений ( в конечном итоге он придет к мысли о том, что интерфейс, сконфигурированный разработчиком программы, все равно был лучше, так как разработчику лучше известно, «как надо»).
Другая ситуация: текст, поясняющий поле, и само поле. Здесь однозначно: текст слева, поле справа, других вариантов нет. Уточнение: Checkbox и Radiobutton - особый случай, так как поясняющая надпись фактически является продолжением поля, и их относительное расположение будет корректным.
Расположение большого числа элементов
Как правило, такая ситуация возникает при необходимости настройки программы (Options). Здесь, по крайнее мере, следует отметить случай, когда на площади окна не помещаются все необходимые элементы и приходится использовать страницы.
Примером не очень удачного решения может служить элемент типа Pagecontrol (так он называется в Delphi) в Windows, состоящий из страниц корешками вверх. Суть этого решения состоит в том, что если корешки не помещаются на одной линии, то они располагаются в нескольких рядах и выбор какой-либо страницы приводит к перестановке этих корешков, так что пользователь путается и не помнит, на какой странице он был (названия страниц, как правило, не запоминаются за ненадобностью). При использовании этого элемента (или любого аналогичного) желательно уместить все корешки в одну линию. С точки зрения «правильности» расположения корешков элемент с верхним расположением предпочтительней для людей, работающих (или работавших) с картотекой. Если картотеку не учитывать, то правильнее было бы использовать элемент переключения страниц с нижним расположением корешков, так что какой элемент использовать - дело вкуса и особенностей контингента людей, для которых предназначена программа. Наверное, не стоит напоминать, что форматирование на всех страницах должно быть единообразным (т.е. привязанным к неявной таблице), ничто так не раздражает пользователя, как явные «ляпы».
Меню. Известно, что объем человеческой памяти составляет 7 + 2 сущности. Поэтому меню, содержащее число пунктов, не превышающее эти цифры, будет более удобным для пользователей. Это довольно гибкая концепция, так как сущности могут быть как «маленькими», так и «большими». Это свойство может быть очень полезным, так как Вы сможете помочь пользователям организовывать информацию в сущности, удобные для запоминания, просто группируя ее в отдельные блоки.
В меню, если нельзя назвать первый пункт «Файл», то следует назвать его, исходя из соображений системности, например, в качестве первого элемента меню можно выбрать тот предмет (объект), на работу с которым нацелена программа. Желательно придерживаться общепринятого, как уже говорилось выше, порядка расположения пунктов меню и порядка расположения элементов в самих пунктах. Пользователь должен, ничего не зная о программе, быстро найти в меню то, что ему нужно. Например, пробуя что-либо сделать, пользователь знает, что отменить свое действие можно с помощью команды Edit / Undo. Названия пунктов тоже следует подбирать стандартные, чтобы не запутать пользователя и не заставлять его менять привычки.
Быстрые клавиши, такие, как «Ctrl+v» и др., тоже лучше использовать так, как привыкли пользователи.
Быстрое меню, вызываемое обычно с помощью правой кнопки мышки, также следует делать с учетом привычек. Так, если в программе предусмотрена работа через буфер (cut, copy, paste и др.), то следует в соответствующем порядке разместить эти функции в быстром меню, поскольку его все равно по привычке будут вызывать при копировании текста.
Кнопки. Кнопки должны быть хотя бы примерно стандартных размеров (например, размеры кнопок, предлагаемые Delphi по умолчанию, лучше не менять). Если используются кнопки разных идеологий (обычные, быстрые и др.), то желательно объединять их каким-либо признаком, например, высотой, цветом и т.п. Визуальный порядок воспринимается более спокойно и естественно, поэтому элементы, которые возможно сделать одинаковой высоты, следует такими и делать.
Закон Фиттса Этот закон гласит, что время, необходимое для достижения цели, является функцией расстояния до объекта и его размера. Хотя на первый взгляд закон кажется логичным, он чаще всего игнорируется. Хотя, согласно этому закону, самые быстро достижимые цели на любом экране - это его четыре угла, используется это свойство далеко не всегда.
Используйте края, верх, низ и углы экрана. Панель инструментов с кнопками в один ряд, расположенная у самого края экрана, будет во много раз быстрее, чем два ряда иконок тоже у края экрана, но с обводкой шириной в один пиксель, не реагирующей на щелчки мышью.
Используйте большие объекты для важных функций - большие кнопки быстрее, так как их легче находить и по ним легче попасть мышкой .
Перегруженность элементами управления
Перегруженность окон программы элементами управления встречается довольно часто. Когда разработчики программ просто не знают, как сделать по-другому, они располагают всю необходимую в данный момент, по их мнению, информацию на одном окне. Окно при этом превращается в мешанину элементов управления и надписей. Даже опытный пользователь будет работать с такой программой с трудом, не говоря уже о новичке.
Необходимо всегда стремиться к минимизации числа элементов управления на экране: чем их меньше, тем лучше интерфейс. Существуют так называемые программы-агенты, выполняемые в фоновом режиме. Они собирают и накапливают информацию, на основе которой выполняют определенные действия. Примером может быть программа-агент, собирающая информацию о пользовательских привычках и предпочтениях при работе с компьютером, которая в соответствии с этим сама настраивает рабочую среду, выдает напоминания и т.д..
Расположение информации на экране
Плотность расположения данных зависит от конкретного пользователя и задачи. Например, данные на экране, предназначенные для работы опытного пользователя, располагают плотнее, чем данные, предназначенные для работы неопытного. Однако существуют некоторые правила, регулирующие плотность расположения данных на экране с помощью интервалов:
оставлять пустым приблизительно половину экрана;
оставлять пустую строку после каждой пятой строки таблицы;
оставлять 4 или 5 пробелов между столбцами таблицы.
Эти правила определяют лишь общие принципы, иногда они могут быть нарушены, но делать это нужно вполне сознательно].
На экране должна находиться только та информация, которая действительно необходима пользователю на данном этапе работы. Тот факт, что доступна или запомнена вместе с необходимой и другая информация или что существует место для размещения большого объема информации на экране, не имеет значения. Требования пользователя являются решающим фактором, поэтому разработчик должен так продумать процесс доступа к нужной информации, чтобы помочь пользователю выполнить его задачу.
В меню следует помещать список только тех пунктов, из которых пользователь может сделать выбор, независимо от того, традиционное это меню или строка команд, описанная для электронной таблицы. Меню смешанных диалогов также выводят полностью все команды меню независимо от того, доступна ли какая-нибудь команда в данной точке программы или нет. В обоих случаях варианты, недоступные пользователю, нужно выделить на экране (например, другим цветом).
Важно, чтобы на экране отображалась вся информация, относящаяся к решаемой на данном этапе задаче. Не следует заставлять пользователя запоминать информацию на одном экране, чтобы позднее воспользоваться ею для обработки информации на следующем экране. Если вся информация исходного документа не помещается на одном экране, некоторые элементы данных могут повторяться на других экранах для сохранения последовательности обработки. Если данные выводятся на несколько экранов, то делить их нужно так, чтобы сохранялась четкая граница раздела (если таковая имеется). Нельзя нарушать логические связи в группе данных; логически связанные данные должны представляться на экране отдельной группой. Этого можно достичь, оставляя по несколько пробелов с каждой стороны группы либо проводя горизонтальные или вертикальные линии, либо используя различные цвета для полей разных групп.
Один и тот же тип информации должен проявляться всегда в одном и том же месте экрана. Важно учитывать и эстетические характеристики. Легче следить за данными, красиво расположенными на экране, при этом повышается безошибочность работы.
Нужно также располагать на одном экране все данные, необходимые для принятия конкретного решения. Фрагменты текста должны располагаться на экране так, чтобы взгляд пользователя сам перемещался по экрану в нужном направлении. Количество блоков должно быть достаточным. Содержимое полей не должно «прижиматься» к краю экрана, а располагаться около горизонтальных или вертикальных осей. Меню, содержащее относительно небольшой объем информации, должно смещаться в левую верхнюю часть экрана. Для подчеркивания симметрии содержимое и наименования полей, относящиеся к одной группе, должны выравниваться по вертикали. По возможности необходимо выравнивать все логически связанные группы данных.
Важно правильно определить точку начала отсчета. Естественнее всего начать из левого верхнего угла и перемещаться слева направо и сверху вниз. Хотя расположение материала на экране может задавать другую последовательность перемещения, общепринятую последовательность следует менять только обоснованно.
Если расположение данных нужно согласовывать как в пределах одной программы, так и между несколькими программами, важно располагать их на экране соответственно одному и тому же шаблону.
Вспомогательные сообщения требуют тщательной подготовки, так как необходимо, чтобы они полностью соответствовали возникшей проблеме.
В пунктах меню и надписях на кнопках ключевое слово должно быть первым.
69__Элементы дизайна при проектировании интерфейса: шрифты, эффекты, цвета.
Большое разнообразие шрифтов и различных эффектов оформления рассеивает внимание, заставляя взгляд метаться по экрану. При этом легко пропустить важную информацию. Чувствуя это, человек прилагает дополнительные усилия для концентрации внимания, что приводит к быстрой утомляемости.
Шрифты
Текстовые шрифты
С засечками. Шрифты с засечками хорошо смотрятся при малом размере символов и лучше всего подходят для основного текста. Это обусловлено тем, что засечки помогают рассмотреть форму символов, различать буквы с засечками легче. Такие шрифты используются в документах официального характера.
Рубленые. Простота и элегантность шрифтов без засечек делает их наиболее подходящим средством для различных текстовых выделений и заголовков.
Декоративные шрифты
Стилизованные под рукописные. Использование рукописных шрифтов требует особой осторожности, так как они затрудняют чтение. Следует учитывать, что такие шрифты обладают сильным ассоциативным воздействием, создавая впечатление небрежности. Поэтому нецелесообразно их применение при выведении информации технического характера, текстов большого объема и особенно в тех случаях, когда необходимо быстрое прочтение.
Архаические. Например, готические или старославянские. Эти шрифты, как и «рукописные», оказывают весьма сильное ассоциативное воздействие, которое существенно различается в зависимости от возраста, профессиональной деятельности и прочих личностных факторов. Кроме того, применение подобных шрифтов требует соблюдения особых орфографических правил. В наше время текст, написанный подобным образом, способны воспринимать лишь немногие люди, особенно при быстром чтении.
Начертания шрифтов
Каждый шрифт имеет несколько начертаний – светлое, курсивное, полужирное и полужирный курсив. Это позволяет при использовании двух – трех шрифтов иметь достаточный выбор средств для выделения текстовых элементов.
Полужирное начертание. Придает тексту большую весомость и выразительность, поэтому хорошо подходит для заголовков и важных сообщений. Применять его следует очень умеренно, поскольку его избыток делает текст слишком плотным, темным и малопривлекательным.
Курсив. Используется для выделения слов в тексте или сообщения им шутливого или иронического содержания. Придает тексту разговорный оттенок.
Существуют дополнительные начертания – контурное, подчеркнутое и с тенями. Они затрудняют восприятие текста, поэтому использование этих начертаний должно быть ограниченно. Подчеркивание снижает читаемость текста, так как закрывает нижние элементы символов.
Эффекты
Благодаря компьютерам появилось множество способов преобразования шрифтовых элементов в графические. Несмотря на заманчивые перспективы творческого обращения со шрифтами, настоящий успех возможен только при четком представлении того, для чего производится то или иное действие. Важнейшим критерием оценки является читаемость текста, если его прочтение станет затруднительным, заключенный в нем смысл будет теряться. Различные эффекты могут использоваться для выделения важной информации, привлечения внимания пользователя к ней. Однако применение большого количества различных эффектов является дополнительной нагрузкой на психику пользователя и влечет за собой быструю утомляемость.
Светлый текст на темном фоне (Выворотка). Очень хорошо подходит для привлечения внимания, но сильно утомляет глаза. Большие тексты, набранные вывороткой, вызывают эффект психологической усталости, при котором сильный раздражитель приводит к отказу от восприятия всего текста. Поэтому использовать выворотку следует в небольших количествах, а так же следить за тем, что бы шрифт был достаточно крупным. Нецелесообразно оформлять таким образом самую информативную или трудную для восприятия часть текста. Если текст длинный и набран мелким шрифтом, выворотка только затрудняет чтение.
Объемный текст. Может существенно ухудшить читаемость текста, так как изменяет форму букв, что затрудняет их восприятие. Однако как способ привлечения внимания этот прием подходит великолепно.
Мерцание. Самый сильный способ привлечения внимания, как, впрочем, движение вообще. Именно поэтому применять его следует с особой осторожностью. Основное правило использования различных эффектов заключается в том, что их применение должно быть оправдано насущной необходимостью. Удобство восприятия текста гораздо важнее дизайнерских изысков.
Выравнивание текста
Способ выравнивания влияет не только на величину пространства, занятого текстом, но и на его читаемость.
Выравнивание по левому краю. Исследования читаемости текстов показывают, что большинство людей предпочитают выравнивание по левому краю, то есть когда первые буквы всех строк находятся на одной линии по вертикали, а сами строки при этом имеют разную длину. Такое оформление придает тексту неофициальный, современный и «открытый» характер. Читать такой текст очень удобно, так как одинаковые интервалы между словами облегчают выделение групп слов при чтении, а малое количество переносов и одинаковое расп… Продолжение »