Текст книги "Человеко-компьютерное взаимодействие"

6.2. Разработка визуальной среды мультимедиа-приложений

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

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

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

Регистр, интервал. Обычно должен использоваться и верхний, и нижний регистры (строчные и прописные символы), так как чтение в этом случае быстрее, чем при использовании только верхнего регистра. Надписи одними прописными буквами оправданы, если текст должен привлечь внимание, например в предупреждениях, в сигнальных сообщениях. Интервал между строками должен быть между 1: 2 и 1: 2,7, т.е. расстояние между основанием строки и верхней границей знаков нижележащей строки должно быть равно высоте самих букв или немного больше. Для оптимальной скорости чтения длина строки должна составлять приблизительно 60 знаков, что в русском языке соответствует приблизительно 10 словам. Только треть предъявляемого пространства должна быть заполнена текстом. Пропорциональное распределение пространства и выравнивание по левому краю либо по ширине визуально предпочтительнее.

Шрифт. Отношение толщины линии к высоте в шрифтах должно быть в интервале 1: 6 – 1: 8 для черных букв на белом фоне и 1: 8 – 1: 10 для белых букв на черном фоне. Отношение ширины знака к высоте должно быть около 2: 3. Число различных шрифтов на одном экране не должно превышать трех. Шрифт переменной ширины (MS Sans Serif, например) рекомендуется для ярлыков, маркировки и короткого текста. Шрифты без засечек или с малым их числом должны выбираться для оптимальной разборчивости (например, Helvetica более пригодна, чем Times, хотя с эстетической точки зрения Times более привлекательный). Для выбора типа шрифта важно знать расстояние между пользователем и дисплеем. На практике размер шрифта 12 для экранов современных персональных компьютеров – практический минимум, лучше же использовать размер 14 или больше, особенно при меньшей разрешающей способности дисплея или при расчете на массового потребителя (в публичных местах).

Изложение материала. Предпочтительнее использовать короткие слова, они легче читаются и их удобнее располагать на экране. Предложения должны быть лаконичными и по возможности не переходить на другую страницу. Так как пользователь нуждается в легко понимаемых, явных и неявных «поводырях», сообщения о состоянии системы должны быть соотнесены с текущей задачей, а не с внутренними операциями компьютерной системы, например более правильно выводить сообщение «Документ с именем Sales1.doc уже существует», чем «Имя встречается в файловой структуре». Сообщения должны строиться с точки зрения пользователя, а не программиста или операционной системы компьютера. Используйте технические выражения только в случаях, когда пользователь знаком с ними из ежедневной практики, но всегда, когда возможно, стремитесь быть понятными для большинства. Например, правильнее было бы сообщение «Вы сейчас контактируете с Василием Пряниковым», чем «Контакт с коммутационным блоком».

Последовательность представления информации должна соответствовать последовательности выполнения задачи. Избегайте обвинений в адрес пользователя или того, что может его обидеть; вместо этого сообщите пользователю, почему действие не может быть выполнено. Например, более правильным является выражение «Пожалуйста, измените имя файла, чтобы в нем было не более 24 букв», чем «Имя файла слишком длинное! Оно превышает 24 буквы». Если предложение содержит больше одного слова, на первые места следует ставить слова, несущие основную смысловую нагрузку, например более правильным является сообщение «Откройте папку предпочтений Claris Draw», чем «Откройте Claris Draw и найдите папку предпочтений» (подробнее об этом см. в разд. 4.3).

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

Каждый текстовый документ должен быть разделен на фрагменты. В web-страницах, в частности, такие фрагменты являются чаще всего составляющими объектами, а сам документ рассматривается как еще один объект, содержащий внутри себя другие объекты, которые, подобно матрешке, содержат другие объекты и так вплоть до бесконечности. Объекты такого рода должны быть информативны, всегда начинаться с указания категории. Они должны обязательно содержать атрибуты, позволяющие вести по ним поиск, и образовывать группы (например, для создания персонализированного контента), классы должны иметь стандартную структуру. В этом случае облегчаются процедуры обнаружения и упорядочения материала сообразно запросам аудитории. Заголовки должны иметь 2-3 уровня и позволять обнаруживать взаимосвязи между фрагментами текста. Ключевые слова, фразы и ссылки должны быть выделены, любые перечисления представлены в виде списка. Основную идею, заключение и выводы лучше помещать в первом абзаце, минимизируя умственные затраты читателя.

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

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

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

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

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

• усиление логической организации ПИ;

• высокая эффективность при привлечении внимания пользователя к заданным местам интерфейса;

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

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

• дополнение к другим видам кодирования (обозначениям, формам, размерам и пр.), что облегчает процесс обработки информации.

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

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

• неприемлемость для малых объектов;

• слабое цветоразличение у части людей;

• возможность неточного опознания из-за эффектов смешения цветов;

• влияние окружения (освещение, цветовые характеристики фона и пр.) на восприятие цвета;

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

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

• Не следует использовать более пяти цветов, если предполагается их запоминание. Это касается как различных цветов, так и оттенков одного цвета.

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

• Если необходимо помнить значения показателя, лучше использовать надписи.

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

Таблица 6.2

Общие рекомендации по использованию цвета

Цветовой контраст и фоновые цвета. Высокий контраст предпочтителен для различения двух элементов (например, двух линий), это лучше, чем использование оттенков серого цвета. При необходимости различать цвета фона и переднего плана контраст между этими цветами должен быть максимален. Черный текст на белом фоне обеспечивает высокий коэффициент контраста, что оптимально для восприятия текста. Использование цветов из противоположных частей спектра может вести к зрительному утомлению; в частности, следует избегать комбинирования красного и синего/голубого цветов. Фон графического дисплея должен быть темным. Во всем приложении пользовательского интерфейса фоновые цвета должны быть одинаковы, но оттенки их могут варьировать.

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

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

Основные типы графических описаний

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

Рис. 6.1. Гистограмма

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

Рис. 6.2. Графики линейных функций

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

Рис. 6.3. Круговая диаграмма

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

Рис. 6.4. Диаграмма рассеивания

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

Рис. 6.5. Индикатор величины

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

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

• легко ассоциироваться с информацией, которую они несут;

• однозначно трактоваться;

• хорошо отличаться от других символов;

• быть не слишком сложными;

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

• соответствовать международным или внутренним стандартам.

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

• что можно полностью заменить их словами;

• что пиктограммы всегда приводят к облегчению работы пользователей;

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

Проиллюстрировать эти заблуждения можно примером, где явная избыточность пиктограмм, причем очень хороших (что может быть яснее и однозначнее дорожных знаков), очевидна. На рис. 6.6 показан один из перекрестков на Невском проспекте Санкт-Петербурга. В кадр попали 45 знаков, висящих над одним перекрестком, плюс реклама. В реальности еще хуже – столько же знаков висит для водителей, едущих в обратную сторону. Очевидны намерения тех, кто знаки вешал, – им хотелось, чтобы над каждым рядом висели все необходимые указания. Но водитель смотрит на мир шире (область обзора несколько больше 180°), и в его поле зрения попадают все знаки плюс реклама.

Рис. 6.6. Пример перегруженности знаками[10]10
  Фото и комментарии к нему из книги А. Лебедева «Ководство», § 78. http://www.artlebedev.ru/kovodstvo/


[Закрыть]

Фотографии (или любые изображения) отражают детали реальности, можно сказать, «портрет» реальности, в отличие от графики, которая упрощает сложную информацию, выделяя определенные ее характеристики. Фотографии (или изображения) используются для представления фактографической и документальной информации, т.е. когда необходимо показать что-то с максимальным приближением к действительности. Цветные изображения воспринимаются как более жизненные; например, если изображения показывают людей или ландшафты, естественно использовать цвет. Черно-белые изображения пригодны для показа чего-то схематичного, т.е. сравнительно простого и обобщенного.

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

Отличие фотографий и изображений от пиктограмм состоит в том, что пиктограммы более однозначны: если на пиктограмме изображен стакан, то он и имеется в виду, а если на фотографии или изображении, то можно иметь в виду и стакан, и любой алкоголь, и попойку, и стекольную промышленность, и процент пьяных нарушителей и пр. В целом предпочтительнее, чтобы изображение не выходило за рамки экрана или заданной области, так как иначе пользователь будет вынужден его прокручивать, чтобы видеть целиком. Вместе с тем весьма распространенной ошибкой является неоправданное масштабирование (обычно чтобы вписаться в определенное пространство), что часто приводит к потере информации. Масштабирование, как правило, должно сопровождаться количественным показателем, скажем 2, 4 или 100, 200% и т.д.