div.main {margin-left: 20pt; margin-right: 20pt} Разговоры об интерфейсе программы - использование
цветов.
При правильном использовании цвета в оформлении
программы, можно заметно улучшить внешний вид приложения, а так же более
эффективно управлять вниманием пользователя к отдельным частям интерфейса.
С другой стороны, неправильное использование цвета может серьёзно
навредить юзабельности программного продукта.
Несмотря на то, что Windows95 позволяет пользователю выбрать
различные цветовые схемы, многие разработчики почему-то думают, что
все пользователи используют стандартную серую схему. Если взглянуть
на картинку, то сразу станет ясно, о чём идёт речь. Жёстко
закодировав цвета в приложении в соответствии с цветовой схемой на
своём собственном PC, разработчики данной программы не проверили
работоспособность приложения на другой цветовой схеме. В итоге
получился неудачный интерфейс.
Поэтому, желательно в процессе разработки, периодически менять
цветовую схему, а так же обращать внимание на то, как влияют на
дизайн Вашего приложения другие параметры экрана (например размер
шрифта). |
Иногда,
даже самые лучшие намериния разработчика только портят дизайн
приложения. Эта картинка была заимствована из программы, в которой
цвет текста командных кнопок был задан определёнными цветами.
Кнопки, подразумававшие положительный ответ (OK, Yes, Open) имели
текст зелёного цвета, а кнопки подразумевавшие отрицательный ответ
(Cancel, No, Close) имели красный цвет. Давайте посмотрим, какие
проблемы в данном случае могут возникнуть.
Во-первых, цвет фона кнопки определён настройками Windows и, как
показано выше жёстко-заданный цвет текста может трудно читаться, а в
некоторых случаях становиться совсем нечитаемым.
Во-вторых, применение цветов зелёный/красный как
положительный/отрицательный может быть неправильно воспринято в
определённых задачах. Например, применительно к базе данных,
удаление всех записей скорее всего не является
положительным действием.
В дополнение ко всему, ассоциация цвета с вариантами ответов
может быть неправильно воспринята в разных странах. В некоторых
восточных странах, например, красный рассматривается как
положительный цвет.
Та окраска пользовательского интерфейса которая установлена в
Windows поумолчанию, выбрана не случайно. Она обеспечивает
максимальную удобочитаемость приложения при различных освещениях и
состоянии монитора. Если пользоваться стандартными настройками, то
можно быть уверенным, что Ваше приложение не вызовет негодования
пользователей. |
Изображение взято из приложения RealCD компании IBM. Может
показаться, что Голубой Гигант оценивает чёрный цвет как
действительно современный, даже необращая внимания на то, что
пользователь с трудом может отличить кнопку от фона приложения. С
другой стороны, если добавить текст на кнопку, то возможно это
немного улучшило воспринимаемость дизайн. |
Цветовая схема, продиктованная проектировщиками Apple в приложении
QuickTime 4.0 Player имеет некоторые недостатки для многих
пользователей. Из-за недостатка контрастности между серым фоном
кнопок и серыми символами на кнопках, некоторые пользователи
наверняка не сразу обнаружат основные элементы управления
проигрывателя. Разработчики не приняли во внимание тот факт, что:
количество света, проходящего через глаз шетидесятилетнего
человека - это всего навсего одна треть того, сколько способен
воспринимать глаз двадцатилетнего.
Единственный способ гарантировать, что такие пользователи смогут
без особых затруднений различать кнопки, это увеличить контростность
между символами и фоном кнопки. А в данном примере контраст
изменяется только после нажатия кнопки. |
Два изображения, представленные здесь демонстрируют незаметную на
первый взгляд проблему дизайна Easy CD Creator, программу для
записи CD-ROM-ов. В конце создания CD, можно наблюдать два возможных
результата, сообщающих о том, что: процесс был успешно завершён,
либо 'произошли какие-то ошибки' (второе сообщение появляется реже
чем первое :)
Сообщение об ошибке показано выше, а сообщение об успешном
завершении ниже.
Так в чём же здесь проблема? Оба диалога очень похожи и оба
используют похожую иконку с преобладающим красным цветом. То есть, в
обоих случаях, при виде красного цвета, пользователь
настораживается. (прим. вебмастера: не могу удержаться от реплики,
но когда я ставлю диск на запись, то сажусь смотреть телевизор (так
как рекомендуют при записи ничего не делать за компом), при этом
находясь от монитора на расстоянии трёх метров. Естевственно, что я
не могу на таком расстоянии различить сам значёк. И каждый раз,
когда выезжает диск, я иду к компьютеру с тяжёлым чувством того, что
очередная болванка запоролась, однако увидев, что диск нормально
записался, я начинаю радоваться как ребёнок
:) |
Очередной пример черезмерного использования цвета. Панель
инструментов в приложении WinCim 2.0 компании Compuserve
напоминает разноцветных игрушках, висящих в кроватке грудного
ребёнка. Данное изображение не просто излишне отвлекает внимание, а
представляет собой форменный непрофессионализм.
Панель инструментов, используемая в Microsoft Word, имеет
более ограниченный набор цветов. Несмотря на такие различия,
вордовская панель инструментов обеспечивает гораздо большуя
информативность, занимая при этом меньше пространства:
|
Как мы уже выяснили, цвет может искажать ту информацию, которую
Вы хотите донести до пользователя. В данном примере показана панель
инструментов программы для передачи файлов Zoc. Первые четыре
кнопки на панели обозначают различные способы передачи файла. Вот
как они расшифровываются:
Отправить
Отправить бед переводов каретки (carriage returns)
Отправить с кавычками
Отправить с кавычками CIS
Все четыре картинки между собой практически неразличимы,
поскольку каждое изображение имеет синий объект на переднем плане
(чем-то напоминающий телефон). Без всплывающих подсказок
пользователь врят ли бы различил функциональное назначение каждой
кнопки. Такое ощущение, что эти кнопки мешаются приложению и ничего
не изменится, если их просто убрать. |
Здесь изображена строка состояния программы Webforms,
разработанной фирмой Q&D Software Development. К сожаления,
выбор цвета и использование 3D шрифта делает информацию практически
нечитаемой.
Кстати, непонятно как именно написана фраза: "HTML Browse" или
"HTML/Browse". Было бы лучше написать "Preview", но так как
разобрать что либо невозможно, то это не имеет
значения. |
Перевод одноимённой статьи с сайта http://www.iarchitect.com/
|