К глубокому сожалению, эргономические знания в нашем обществе не только не углубляются, а даже, наоборот, теряют те завоеванные во времена «мирного сосуществования двух систем» позиции, которые в первую очередь были связаны с военно-промышленным комплексом. Именно тогда создавалась передовая методологическая база эргономического обеспечения разработки и производства технических средств. Мы до сих пор успешно пользуемся плодами прежних исследований в основном благодаря конверсии оборонных предприятий. В общественном сознании понятие «эргономика» стало терять свое первоначальное значение, и есть опасения, что лет через 20 придется «изобретать велосипед» снова, как, впрочем, уже неоднократно бывало в истории развития цивилизации. На Западе потеря преемственности произошла по несколько иным причинам. В информационные технологии пришли люди преимущественно с математическим или гуманитарным образованием, незнакомые с достижениями техники в данной области и часто с пренебрежением относящиеся ко всему, что было сделано до них. Вот пример: кнопки-пиктограммы с легкой руки таких дилетантов получили почему-то название «иконки» (Icon), хотя понятие «пиктограмма» (от англ. picture), известное эргономистам всего мира (в том числе и США), еще со времен появления мнемосхем считалось самодостаточным и общепринятым.

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

Представление информации

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

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

Например, конструируя баннеры, часто сталкиваешься с проблемой рационального использования пространства. Такая характеристика, как острота зрения, определяет способность человека-оператора обнаруживать мелкие детали информационной модели. Можно предположить, что будет заметен элемент, равный минимально различимому глазом пятну (угловой размер 1?). В действительности же он может быть много меньше. Это объясняется тем, что острота зрения напрямую зависит от яркости и вида контраста — прямого или обратного. При увеличении яркости размеры объекта кажутся больше, а при ослаблении — меньше, чем они есть. Иллюзии усиления яркости можно достичь, используя так называемые резонансные частоты. Например, при частоте мелькания объекта 10 Гц яркость воспринимается примерно в два раза большей, чем при равномерном свечении.

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

Палочки и колбочки распределены по сетчатке глаза неравномерно. Первых больше на периферии, тогда как вторых —- в центре. При слабом освещении функционируют палочки, которые позволяют замечать только оттенки серого цвета; в условиях дневного света — колбочки, они обеспечивают цветовые (хроматические) ощущения. Поэтому при низкой яркости наиболее чувствительна область 10—20? к периферии от середины сетчатки, а в дневных условиях — ее центр. В связи с этим цветовое кодирование зрительных элементов информационной модели следует производить в центральной области.

Время фиксации сигнала (метки, знака) должно быть не менее 0,2 с при многократном предъявлении и не менее 2,0 с — при однократном. Интервалы между появлениями знаков, требующих дискретных ответных движений, не должны быть менее 0,5 с. При представлении текущих алфавитно-цифровых данных, если нужно точное дискретное считывание параметров, следует установить периодичность не более одного раза в секунду, а если необходимо аналоговое (определение тенденции изменения) или грубое считывание, темп может быть и выше, но все же в пределах от пяти до двух раз в секунду. Потому оправданность демонстрации на сайтах текущего времени с точностью более десятых долей секунды, от которых только рябит в глазах, вызывает сомнение. Если уж это действительно необходимо (что, поверьте, маловероятно), лучше ввести режим запроса и при дальнейшей расшифровке записи им пользоваться.

Расположение предъявляемой информации должно производиться таким образом, чтобы минимизировать зрительные маршруты по экрану. Размещение последовательно воспринимаемой информации не должно вызывать переноса взгляда более чем на 20?. Чтение слева направо и по горизонтали предпочтительнее вертикального, так как оно почти в два раза быстрее.

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

Кодирование информации

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

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

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

«Продвинутая» публика, знакомая с парой-тройкой программных пакетов (MS Office не в счет), должно быть, уже заметила, что тамошние их создатели в своих продуктах не особо привечают такие возможности эргономического кодирования, как частота мельканий, яркость, размер. Формой, правда, балуются иногда, но опять же в меру понимания, которое чаще всего ограничивается дизайнерскими изысками. А ведь все виды кодирования можно использовать по прямому назначению.

При кодировании формой основной признак объекта обозначается контуром или силуэтом и дает представление о его типе (классе).

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

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

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

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

Кодирование Пространственной ориентацией для асимметричной фигуры достигается путем ее поворота в поле зрения наблюдателя; для симметричной — утолщением одной из линий контура знака. Отклонение от осей координат должно быть не менее 1?, что уже замечается человеком.

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

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

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

При БYkвЕНнО-ЦиФроВОМ кодировании, чтобы исключить смешение знаков, выделяют характерные признаки, отличающие их друг от друга. При этом необходимо выдерживать оптимальные соотношения основных параметров: высоты, ширины, толщины линии. Все цифры должны быть арабскими, кроме специальных случаев. Лучшими из начертаний являются шрифт Бергера (знаки составлены прямыми линиями) и шрифт Макворта (линии в знаках расположены под углом 45?). Текстовую информацию можно рассматривать как вариант буквенно-цифрового кодирования. Для ее прочтения пользователю необходим меньший угол зрения, чем для распознавания отдельных букв, не связанных по смыслу.

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

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

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

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

При кодировании Частотой мельканий диапазон должен находиться в пределах 0,5—6,0 Гц2. Наивысшая частота используется в исключительных случаях, например для предупредительной информации — 0,5—1,0 Гц, а для аварийной — 5,0—6,0 Гц.

Глубина модуляции для высокочастотных сигналов (5,0—6,0 Гц) должна составлять 100%, для низкочастотных (0,5—1,0 Гц) — 60-70%. Подача таких сигналов называется мерцанием.

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

Интересно, что даже в тех немногочисленных попытках кодирования информации частотой мельканий, которые имеют место в программных пакетах, дальше формальностей дело не пошло. Ввели этот способ для ряда предупреждающих режимов, а про то, что частота мельканий связана с частотой кадровой развертки (которая зачастую зависит от разрешающей способности монитора), забыли! И получилось, что банальное предупреждение о смене режима работы принтера в старом добром Lexicon?е при частоте развертки в 40 Гц работает, как ему и положено, а при 60—75 Гц превращается в пугающе-тревожный тремор. Некоторые баннеры грешат «ненормативным подмигиванием», что раздражает, хотя цель — обратить на него внимание — достигается с успехом.

Кодирование =>Символом<= предполагает выделение каким-либо специальным знаком объекта или состояния и представляет собой вариации кодирования формой с унифицированными ограничениями. Наиболее распространенный пример — (галочка), проставляемая рядом с необходимой текстовой информацией. Можно использовать не более семи символов, их формообразование должно быть максимально упрощено, но в то же время очертания запоминаемы, стандартны и хорошо знакомы. Этот способ обычно применяется в качестве дополнительного в многомерном кодировании. Обозначаемый им информационный объект целесообразно предварительно выделить, например, рамочкой, абзацем, фоном и т. д.

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

Дополнительно к перечисленным при формировании 3D-изображений (с помощью пакетов, например, LightWave, 3DStudioMax, Maya) может быть использовано кодирование методом представления:

  • плоскими гранями;
  • криволинейными поверхностями и кривыми;
  • линейными развертками;
  • фигурами вращения.

Текстовая информация

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

Для оптимального восприятия текст должен удовлетворять следующим эргономическим требованиям:

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

Часто возникает необходимость сокращения той или иной текстовой информации, например в доменных именах. Поэтому логограммы3 должны согласовываться с существующими в языке способами образования и сокращения слов (см. врезку «Правила построения логограмм»).

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

Принцип системности при образовании логограмм предполагает их единообразное употребление во всех структурах данного сайта. Например, отдельно взятое слово «автоматический» не следует сокращать в одних случаях до «авт», а в других — только до начальной буквы. Логограммы должны быстро усваиваться и запоминаться, а потому — легко проговариваться. Причем и те из них, которые не будут озвучены, так как зрительное восприятие языковых единиц сопровождается их внутренним произнесением. Поэтому, например, понятие «прибор контрольно-измерительный» лучше выразить логограммой КИП, чем ПКИ. Логограммы не изменяются по падежам и числам (меня, признаться, часто коробит от «ГОСТа №...»; надеюсь, что теперь будет коробить и вас).

При применении сокращений и аббревиатур следует учитывать, что недопустимо сочетание букв и цифр с одинаковыми и недостаточно различимыми конфигурациями (например, Pall Mall некоторыми шутниками читается как «Pa одиннадцать Ma одиннадцать»). Наибольшее количество ошибок возникает при использовании букв, сходных по общему начертанию (А-Д-Л, З-Э) и по форме отдельных частей (Б-В-З-Ь-Ъ).

При необходимости внести сведения о состоянии объекта их добавляют к основной надписи через дефис в виде соответствующей прописной буквы: В — выполнено, Г — готовность, И — исправно, Н — неисправно, Р — разрешено и т.д. (например, блокировка снята — БЛОКИРОВКА-С).

Количество аббревиатур должно быть минимальным. Логограмма не может разбиваться пунктуационными знаками.

Табличное представление информации, как правило, предназначено не для последовательного чтения, а в основном для облегчения выборочного поиска нужных сведений. Желательна горизонтальная организация таблиц. Категорически недопустимо смешанное в рамках одного сайта, пусть даже и на разных страницах, вертикальное и горизонтальное расположение считываемой информации. По ширине таблицы не должны растягиваться более чем на одну страницу. Буквенно-цифровые данные в них следует выравнивать слева, а числовые — справа, до десятичной запятой (что могло бы быть предусмотрено в редакторах по умолчанию либо в мастерах).

К текстовой информации в таблицах предъявляются свои специфические требования:

  • использование простых, односложных, неопределенно-личных или безличных предложений, не имеющих эмоциональной окраски;
  • порядок слов в предложении - прямой;
  • отсутствие сложных предложений с длинным рядом последовательных подчинений;
  • рекомендуемая длина сообщений 7-11 значащих слов;
  • минимальное количество логических связок И/ИЛИ и их сочетаний;
  • отсутствие многоступенчатых подчиненных предложений с неоднократно повторяемыми частицами НЕ (чем часто грешат дословно переведенные тексты);
  • отсутствие аббревиации в ключевых словах, сокращение которых может привести к искажению смысла.

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

Столбиковые диаграммы позволяют отображать соотношение частей, составляющих одно целое. Общим правилом при построении таких форм является наличие рамки, заголовка, обозначений по осям координат, указание единиц измерения отображаемого параметра. Расстояние между столбиками рекомендуется делать равным их собственной ширине, которую, в свою очередь, целесообразно рассчитывать в пределах 1/12—1/15 величины оси. Критические значения и параметры могут быть дополнительно кодированы (цветом, контрастом, мерцанием, яркостью или специальными символами внутри диаграммы). Размеры графика или диаграммы не должны превышать 3/4 площади экрана, а при наличии поясняющих надписей, легенд и т. п. — 1/2 его пространства. На неразграфленном поле допустимо расположение смысловых элементов (например, столбиков) не более чем 6—8 по горизонтали и 4—6 по вертикали; при наличии координатной сетки (например, графики) количество оцифрованных делений не должно превышать 12—15 по горизонтали и 6—8 по вертикали. Загляните в Excel и сравните рекомендуемое с реальным.

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

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

Об авторе

Венедикт Петрович Кляуззе — завотделом НИИ Труда Министерства труда и социальной защиты Республики Беларусь, Service@pkp801.belpak.minsk.by

При кодировании формой важно помнить

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

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

В качестве опознавательных атрибутов в пределах одного алфавита нельзя использовать:

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

Знаки (символы) должны быть ассоциативны, а именно:

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

Многомерное кодирование

Сочетания кодов используются в следующих случаях:

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

1 Светлотный контраст - степень различия серых или цветных элементов информационной модели по их относительной яркости.

назад

2 Для человека-оператора пороговая частота мельканий, т.е. минимальная частота мельканий знака, при которой еще возможна непосредственная визуальная оценка числа мельканий,составляет 4-6 Гц.

назад

3 Логограммы - это аббревиатуры, условные словесные обозначения и т. п.

назад

При кодировании цветом важно помнить

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

Правила построения логограмм

  • Создание из корней и префиксов исходных слов (например, интерактивная графика - ИНТЕРГРАФ);
  • буквенное сокращение сложного слова - из первых букв корней, его составляющих (автогенератор - АГ), однако приемлемыми считаются также и варианты, в которых опускается менее половины букв сложного слова (автопривод - АВТОПРИВ);
  • инициальный способ - образование логограмм по первым буквам (например, ЭЛТ, РС, ПК), допускаются также смешанные виды сокращений (например, жидкокристаллический монитор - ЖК-монитор);
  • начальное (например, включено - ВКЛ, работа - РАБ) и медиальное (например, направо - ПРАВ, налево - ЛЕВ) отсечение, причем сокращение должно быть максимальным и оканчиваться на согласную (при их сочетании - на последнюю); при этом по оставшейся части должно безошибочно восстанавливаться исходное слово;
  • контракция - образование логограмм путем изъятия гласных (например, расчленение - РСЧ, телеграф - ТЛГР).

назад