 |
Глава 14. Визуальный дизайн интерфейсов
|
|
|
|
• Недостаточная забота о людях с нарушениями цветового воспри
ятия. Примерно десять процентов мужского населения страдает
цветовой слепотой той или иной степени. Это означает, что при ис
пользовании (в частности) оттенков красного и зеленого для переда
чи важной информации следует проявлять внимательность. Любые
цвета, применяемые в интерфейсе, должны заметно различаться по
насыщенности или яркости. Если интерфейс остается читаемым по
сле преобразования в черно-белый вариант, люди с нарушениями
цветового восприятия смогут работать и с цветным вариантом ин
терфейса. Существуют приложения и фильтры, в частности, создан
ный Fujitsu ColorDoctor, позволяющие понять, каким увидят ваш
продукт люди с различными нарушениями цветового восприятия.
Визуальный дизайн интерфейсов для портативных и прочих устройств
Многие из подходов, обсуждавшихся в этой главе, выросли из проектирования для настольных компьютеров и, соответственно, предполагают большой размер экрана и стационарный контекст использования. Очевидно, проектирование для портативного компьютера, мобильного телефона или медицинского прибора связано с иным набором проблем: здесь и маленький экран, и мобильный контекст использования, и другие методы ввода. Приводимый далее список, конечно же, неполон, но следует принимать во внимание хотя бы эти тонкости:
• Элементы управления на экране должны бросаться в глаза. Порта
тивные устройства используются людьми, которые стоят, ходят,
перемещаются на тряских поездах, а также находятся в разнооб
разном оживленном производственном или медицинском окруже
нии, так что элементы управления на экране должны быть гораздо
более очевидными, чем их аналоги в настольных приложениях.
Иное аппаратное обеспечение и иные контексты требуют другой
тактики, но в целом неплохо работают высококонтрастные схемы.
Если устройство имеет ограниченные возможности в плане контра
ста, возможно, для достижения нужного эффекта придется под
страивать размер, цвет или толщину линий.
|
|
|
• Создавайте визуальные якоря. Для решения задачи пользователю
портативного устройства часто приходится пройти через несколько
экранов. Следовательно, важно применять визуальные якоря, по
могающие пользователя ориентироваться.
• Элементы управления на сенсорном экране должны быть крупнее.
Если ваше устройство содержит сенсорный экран, элементы управ
ления следует делать достаточно крупными, чтобы их можно было
активировать пальцами. Перья часто теряются, и потому (а еще из-
за максимализма компьютерных фанатов) более молодые пользова
тели не воспринимают работу с пером.
Принципы визуального информационного дизайна 361
• Используйте крупные шрифты без засечек. Мелкие шрифты с за
сечками трудно читать; поскольку экраны портативных устройств
имеют низкое разрешение, следует использовать шрифты без за
сечек.
• Четко указывайте наличие дополнительной информации за преде
лами экрана. Многие люди не привыкли к идее маленького экрана,
требующего прокрутки информации. Если данных больше, чем по
мещается на экране, не забудьте подчеркнуть это обстоятельство.
В идеале дайте пользователю понять, как получить доступ к допол
нительным данным.
Принципы визуального информационного дизайна
Подобно разработке визуального интерфейса разработка визуального представления информации имеет свои принципы, и дизайнер может применять их для достижения наилучшего результата. Специалист в области представления информации Эдвард Тафти утверждает, что хороший визуальный дизайн - это «визуализированная ясная мысль» и что такой дизайн достигается через понимание «когнитивной задачи» (цели) зрителя путем использования ряда принципов проектирования.
|
|
|
Тафти утверждает, что в сфере визуального представления информации существуют две важных проблемы:
1. Трудно визуализировать многомерную информацию (информацию
с более чем двумя переменными) на двухмерной поверхности.
2. Разрешение конечного носителя не всегда достаточно велико для
вывода плотной информации. Вывод информации на дисплей ком
пьютера представляет особую трудность: хотя компьютер позволя
ет добавить динамику и интерактивность, разрешение дисплея ни
же разрешения, достижимого на бумажном носителе.
И хотя оба утверждения справедливы, дизайнер графического интерфейса имеет одно преимуществом перед информационным дизайнером, работающим с бумагой: интерактивность. Бумажный носитель должен передавать сразу весь объем информации, тогда как электронный дисплей может раскрывать информацию постепенно - сообразно потребностям пользователя. Это позволяет компенсировать (по крайней мере частично) ограничения, накладываемые разрешением. Несмотря на различия между печатной и цифровой средами, существуют универсальные принципы информационного дизайна, не зависящие от языка, культуры и времени, которые помогают повысить эффективность любого представления информации.
В прекрасно оформленной работе «The Visual Display of Quantitative Information» (Tufte, 1983) Тафти выдвигает семь Великих Принципов,
Глава 14. Визуальный дизайн интерфейсов
которые кратко обсуждаются в следующих разделах, поскольку они имеют отношение к цифровой информации и интерфейсам.
По Тафти, информация, представленная визуально, должна:
• способствовать визуальному сравнению;
• показывать причинно-следственную связь;
• отображать сразу несколько величин;
• объединять текст, графику и данные в одном изображении;
• гарантировать качество, релевантность и целостность данных;
• группировать объекты в пространстве, а не во времени;
• представлять числовые данные в числовом виде.
Кратко обсудим эти принципы в той степени, в какой они применимы к визуальному представлению информации в цифровых средах.
|
|
|
Визуальное сравнение
Предоставьте пользователям возможность сравнивать взаимосвязанные переменные и тенденции либо сопоставлять варианты «до» и «после». Сравнение создает контекст, делающий информацию более ценной и понятной пользователям (пример см. на рис. 14.9). Adobe Photoshop, как и многие другие инструменты для работы с графикой, активно использует предварительный просмотр, что позволяет пользователям
Рис. 14.9. Этот график из приложения Google Finance сравнивает показатели двух компаний с индексом S&P 500 за определенный период времени. Визуально наблюдаемые закономерности позволяют зрителю понять, что между акциями Barclays Bank (BCS) и UBS существует корреляция, но акции обеих компаний достаточно слабо связаны с индексом S&P 500
Принципы визуального информационного дизайна 363
легко сравнивать в интерактивном режиме картину до и после выполнения операции (см. рис. 2.2).
Причинно-следственная связь
Представляя информацию в графическом виде, четко обозначайте причину и следствие. В своей книге Тафти приводит классический пример - катастрофу многоразового космического корабля «Челленд-жер», которую можно было предотвратить, если бы данные, графически представленные специалистами NASA, более ясно отражали связь между температурой воздуха при старте и серьезностью последствий, вызванных дефектом уплотнительного кольца. В интерактивных интерфейсах необходимо обеспечить немодальную визуальную обратную связь (см. главу 25), чтобы информировать пользователей о последствиях их действий или предоставить им подсказку о том, как следует действовать.
Множественные величины
Окна, содержащие информацию о нескольких взаимосвязанных переменных, должны в случае необходимости отображать все эти переменные одновременно без ущерба для ясности. При этом у пользователя должна быть возможность избирательно включать и отключать вывод величин этих переменных в интерактивном режиме, чтобы облегчить их сравнение и поиски корреляции (причинно-следственной связи). Инвесторы обычно интересуются корреляциями различных ценных бумаг, индексов и индикаторов. Построение графиков изменения нескольких переменных по времени позволяет выявлять такие зависимости (рис. 14.9).
|
|
|
Объединение текста, графики и данных
Диаграммы, требующие дополнительных подписей, легенд или расшифровок, нагружают пользователя добавочной когнитивной обработкой. Чтение и расшифровка дополнительных подписей - еще одна форма навигационного интерфейсного налога. Пользователю приходится переключать внимание с диаграммы на подпись и обратно, а затем соотносить их в уме. Рисунок 14.10 демонстрирует пример интерактивного окна, где интегрированы текст, графика и данные, а также ввод и вывод - весьма эффективное сочетание с точки зрения пользователя.
Обеспечение качества, релевантности, целостности данных
Не следует выводить информацию на экран только потому, что это технически возможно. Убедитесь, что любая отображаемая информация помогает пользователю достигать конкретных целей и уместна в дан-
|
|
|
