59. Элементы дизайна при проектировании интерфейса: шрифты, эффекты, цвета.

Большое разнообразие шрифтов и различных эффектов оформления рассеивает внимание, заставляя взгляд метаться по экрану. При этом легко пропустить важную информацию. Чувствуя это, человек прилагает дополнительные усилия для концентрации внимания, что приводит к быстрой утомляемости [17,18].

Текстовые шрифты

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

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

Декоративные шрифты

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

• Архаические. Например, готические или старославянские. Эти шрифты, как и «рукописные», оказывают весьма сильное ассоциативное воздействие, которое существенно различается в зависимости от возраста, профессиональной деятельности и прочих личностных факторов. Кроме того, применение подобных шрифтов требует соблюдения особых орфографических правил. В наше время текст, написанный подобным образом, способны воспринимать лишь немногие люди, особенно при быстром чтении.

Начертания

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

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

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

Эффекты

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

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

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

Выравнивание текста

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

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

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

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

Цветовое оформление

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

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

• характер создаваемого программного продукта;

• психологические характеристики группы пользователей, зависящие от ее социального и профессионального состава;

• средства и технологии передачи цвета.

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

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

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

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

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

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

• для больших прямоугольников используйте цвет фона;

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

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

• используйте цвет в соответствии с представлениями пользователя о нем;

• поэкспериментируйте с различными цветовыми оттенками на реальном экране [5].

По степени ухудшения восприятия цветовые сочетания располагаются следующим образом:

1) синий на белом; 2) черный на желтом; 3) зеленый на белом; 4) черный на белом; 5) зеленый на красном; 6) красный на желтом; 7) красный на белом; 8) оранжевый на черном; 9) черный на пурпурном; 10) оранжевый на белом; 11) красный на зеленом.