15 мая 2023 года "Исходники.РУ" отмечают своё 23-летие!
Поздравляем всех причастных и неравнодушных с этим событием!
И огромное спасибо всем, кто был и остаётся с нами все эти годы!

Главная Форум Журнал Wiki DRKB Discuz!ML Помощь проекту


Разговоры об интерфейсе программы - использование цветов.

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


What color is your parachute? Несмотря на то, что Windows95 позволяет пользователю выбрать различные цветовые схемы, многие разработчики почему-то думают, что все пользователи используют стандартную серую схему. Если взглянуть на картинку, то сразу станет ясно, о чём идёт речь. Жёстко закодировав цвета в приложении в соответствии с цветовой схемой на своём собственном PC, разработчики данной программы не проверили работоспособность приложения на другой цветовой схеме. В итоге получился неудачный интерфейс.

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


Color misinterpretation? Иногда, даже самые лучшие намериния разработчика только портят дизайн приложения. Эта картинка была заимствована из программы, в которой цвет текста командных кнопок был задан определёнными цветами. Кнопки, подразумававшие положительный ответ (OK, Yes, Open) имели текст зелёного цвета, а кнопки подразумевавшие отрицательный ответ (Cancel, No, Close) имели красный цвет. Давайте посмотрим, какие проблемы в данном случае могут возникнуть.

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

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

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

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


Color Absurdity Изображение взято из приложения RealCD компании IBM. Может показаться, что Голубой Гигант оценивает чёрный цвет как действительно современный, даже необращая внимания на то, что пользователь с трудом может отличить кнопку от фона приложения. С другой стороны, если добавить текст на кнопку, то возможно это немного улучшило воспринимаемость дизайн.

Lack of Contrast Цветовая схема, продиктованная проектировщиками Apple в приложении QuickTime 4.0 Player имеет некоторые недостатки для многих пользователей. Из-за недостатка контрастности между серым фоном кнопок и серыми символами на кнопках, некоторые пользователи наверняка не сразу обнаружат основные элементы управления проигрывателя. Разработчики не приняли во внимание тот факт, что:

количество света, проходящего через глаз шетидесятилетнего человека - это всего навсего одна треть того, сколько способен воспринимать глаз двадцатилетнего.

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


A problem occured

Два изображения, представленные здесь демонстрируют незаметную на первый взгляд проблему дизайна Easy CD Creator, программу для записи CD-ROM-ов. В конце создания CD, можно наблюдать два возможных результата, сообщающих о том, что: процесс был успешно завершён, либо 'произошли какие-то ошибки' (второе сообщение появляется реже чем первое :)

Сообщение об ошибке показано выше, а сообщение об успешном завершении ниже.

Did a problem occur?

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


Очередной пример черезмерного использования цвета. Панель инструментов в приложении WinCim 2.0 компании Compuserve напоминает разноцветных игрушках, висящих в кроватке грудного ребёнка. Данное изображение не просто излишне отвлекает внимание, а представляет собой форменный непрофессионализм.

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


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

  • Отправить
  • Отправить бед переводов каретки (carriage returns)
  • Отправить с кавычками
  • Отправить с кавычками CIS

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


Try to read it - we dare you Здесь изображена строка состояния программы Webforms, разработанной фирмой Q&D Software Development. К сожаления, выбор цвета и использование 3D шрифта делает информацию практически нечитаемой.

Кстати, непонятно как именно написана фраза: "HTML Browse" или "HTML/Browse". Было бы лучше написать "Preview", но так как разобрать что либо невозможно, то это не имеет значения.

 

Перевод одноимённой статьи с сайта www.iarchitect.com