Название
страница31/31
Дата публикации22.06.2013
Размер5.84 Mb.
ТипДокументы
100-bal.ru > Информатика > Документы
1   ...   23   24   25   26   27   28   29   30   31
Глава 14. Визуальный дизайн интерфейсов

• Недостаточная забота о людях с нарушениями цветового воспри
ятия. Примерно десять процентов мужского населения страдает
цветовой слепотой той или иной степени. Это означает, что при ис
пользовании (в частности) оттенков красного и зеленого для переда
чи важной информации следует проявлять внимательность. Любые
цвета, применяемые в интерфейсе, должны заметно различаться по
насыщенности или яркости. Если интерфейс остается читаемым по
сле преобразования в черно-белый вариант, люди с нарушениями
цветового восприятия смогут работать и с цветным вариантом ин
терфейса. Существуют приложения и фильтры, в частности, создан
ный Fujitsu ColorDoctor, позволяющие понять, каким увидят ваш
продукт люди с различными нарушениями цветового восприятия.

Визуальный дизайн интерфейсов для портативных и прочих устройств

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

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

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

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



Принципы визуального информационного дизайна 361

  • Используйте крупные шрифты без засечек. Мелкие шрифты с за
    сечками трудно читать; поскольку экраны портативных устройств
    имеют низкое разрешение, следует использовать шрифты без за
    сечек.

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

Принципы визуального информационного дизайна

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

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

  1. Трудно визуализировать многомерную информацию (информацию
    с более чем двумя переменными) на двухмерной поверхности.

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

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

В прекрасно оформленной работе «The Visual Display of Quantitative Information» (Tufte, 1983) Тафти выдвигает семь Великих Принципов,
362

Глава 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 демонстрирует пример интерактивного окна, где интегрированы текст, графика и данные, а также ввод и вывод - весьма эффективное сочетание с точки зрения пользователя.

Обеспечение качества, релевантности, целостности данных

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

Глава 14. Визуальный дизайн интерфейсов




Рис. 14.10. Данный «План коммуникаций» - элемент интерфейса из приложения для управления исходящими маркетинговыми кампаниями, спроектированного компанией Cooper. Элемент обеспечивает визуальную структуру текстовой информации, которая в свою очередь дополняется пиктографическими обозначениями объектов различных типов. Этот инструмент не только организует вывод структуры плана коммуникаций, но и позволяет пользователю напрямую изменять эту структуру посредством перетаскивания элементов

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

Пространственная группировка объектов

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


Единство и стандарты 365

Числовое представление числовых данных

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

Единство и стандарты

Многие юзабилити-команды внутри компаний считают себя кроме прочего стражами единства оформления в дизайне цифровых продуктов. Единство предполагает сходство внешнего вида и поведения различных модулей программного продукта, и в некоторых случаях такой подход распространяется на всю продукцию данного производителя. Особенно актуальны вопросы единства оформления и бренда для крупных фирм, таких как Microsoft и Adobe, которые регулярно приобретают права на программные продукты у мелких фирм. Очевидно, что они заинтересованы в придании каждому приобретенному приложению внешнего вида, свидетельствующего о его принадлежности к первоклассным разработкам компании. Кроме того, Apple и Microsoft заинтересованы в том, чтобы как их собственная продукция, так и приложения, созданные сторонними разработчиками, выглядели и вели себя соответственно операционной системе, в которой они работают. Тогда пользователь будет считать платформу удобной и свободной от внутренних несообразностей.

Выгоды от стандартов на интерфейсы

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

В то же время соблюдение стандартов приносит выгоду и производителям программных продуктов. Затраты на обучение клиентов и техническую поддержку сокращаются, поскольку единство оформления, обеспечиваемое стандартами, упрощает обучение и облегчает работу с программой. Время и средства, потраченные на разработку, также
366 Глава 14. Визуальный дизайн интерфейсов

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

Опасности стандартов на интерфейсы

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

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

Стандарты, рекомендации и общие правила

Стандарты, безусловно, полезны, но они должны эволюционировать в соответствии с развитием технологии и расширением наших знаний о пользователях и их целях. Некоторые проектировщики и программисты относятся к стандартам интерфейса компаний Apple и Microsoft так, словно те были записаны на скрижалях на горе Синай. Обе компании широко публикуют свои стандарты пользовательских интерфейсов, но сами при этом свободно и часто нарушают их, обновляя рекомендации уже по факту. Когда компания Microsoft предлагает стандарт интерфейса, она чувствует себя вправе заменить его чем-то более подходящим в следующей версии. И это совершенно естественно: проектирование интерфейсов все еще переживает период младенчества, и было бы неразумно усматривать пользу в стандартах, которые сдерживают подлинное новаторство. Резкий в визуальном плане
Единство и стандарты 367

переход компании Apple от OS 9 к OS X в некоторой степени способствовал рассеиванию бытовавшего среди поклонников Мас убеждения, что стандарты высечены на граните. Первая версия Macintosh была выдающимся достижением именно потому, что выходила за рамки всех предыдущих платформ и стандартов компании Apple. С другой стороны, успех пришел к Мас благодаря тому, что производители программных продуктов следовали образцу, заданному Apple, и создавали интерфейсы, которые выглядели, работали и вели себя как продукция этой компании. Аналогично, многие успешные программы для Windows без тени смущения копируют Word, Excel и Outlook.

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

Когда можно нарушать рекомендации

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

Придерживайтесь стандарта, если нет действительно стоя принцип щей альтернативы.

проектирования

Но что такое «веская причина»? Более удачная идиома? Оценка удач-ности идиомы, как правило, весьма затруднительна, поскольку не может быть выполнена исключительно количественными методами. Лучший ответ на этот вопрос будет таким: если большинство целевых пользователей (персонажей), проверивших некоторую идиому на практике, согласны с тем, что она значительно лучше, имеет смысл использовать именно ее. Именно так получили право на существование панели инструментов, представление разметки страницы, вкладки и другие идиомы. Возможно, исследователи и изучали их в лабораториях, но успех к этим идиомам пришел благодаря их полезному присутствию в реальных программных продуктах.

Может оказаться, что причины, по которым разработчик решил отклониться от стандарта, недостаточно оправданны, - и конечный продукт пострадает. Однако вы и другие проектировщики сможете извлечь урок из своей ошибки. Кристофер Александер называл это «спонтанно-естественным процессом», имея в виду врожденный и малоизученный процесс медленного продвижения в попытке улучшить принятое решение. Новые идиомы (а также новые способы использования старых идиом) - фактор риска. Вот почему так важны тщатель-
368 Глава 14. Визуальный дизайн интерфейсов

ное целеориентированное проектирование и соответствующее тестирование на реальных пользователях в реальной рабочей обстановке.

Единство и стандарты за рамками одного приложения

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

Как говорилось выше, это имеет смысл с точки зрения создания и поддержки визуального бренда, хотя и влечет за собой определенные сложности. Если анализ персонажей и рынков показывает, что пользователи двух разных продуктов образуют непересекающиеся группы, а их цели и потребности расходятся, то возникает вопрос: а не разумнее ли разработать два разных визуальных бренда, адресованных конкретным категориям пользователей, чем продвигать один, не имеющий четкого адресата? Когда речь заходит о поведении программного продукта, вопрос становится еще более животрепещущим. Единый стандарт может играть важную роль, если клиенты пользуются несколькими продуктами как единым комплексом. Но даже в этом случае разумно спросить: должно ли графическое приложение для презентаций, такое как PowerPoint, иметь интерфейс, сходный с интерфейсом текстового редактора, например Word? Компания Microsoft имела благие намерения, но зашла слишком далеко в реализации глобального стилевого стандарта. Приложение PowerPoint мало выиграло, получив структуру меню, аналогичную меню Excel и Word, зато много потеряло в простоте использования, поскольку придерживается чуждого интерфейса, не соответствующего ментальным моделям пользователей. С другой стороны, проектировщики где-то все же провели границу - и в PowerPoint появилось окно сортировки слайдов - элемент интерфейса, не встречающийся больше нигде.

Единство оформления не подразумевает косности в реше-

ПРИНЦИП ниях.

проектирования

Таким образом, проектировщики должны помнить, что поддержание единообразия не заменяет гибкости в принятии решений, особенно когда эта гибкость жизненно необходима. Рекомендации, касающиеся интерфейса и взаимодействия, должны развиваться и эволюционировать вместе с программной продукцией, к которой они относятся. Иногда приходится отклоняться от правил, чтобы лучше обслужить пользователей и поработать на их цели (а иногда и на цели вашей компании). Когда возникает такая ситуация, старайтесь вносить изменения и новые рекомендации таким образом, чтобы не противоречить стандартам. Руководствуйтесь духом, а не буквой закона.
1   ...   23   24   25   26   27   28   29   30   31



Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
100-bal.ru
Поиск