Опубликован: 06.05.2014 | Доступ: свободный | Студентов: 2618 / 601 | Длительность: 10:33:00
Лекция 2:

Особенности интерфейсов для смартфонов. Принципы юзабилити

Целостные, непротиворечивые и соответствующие контексту образы

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

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

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

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

Пиктограммы

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

В случае очевидных и конкретных функций придерживайтесь следующих правил:

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

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

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

Предварительный просмотр

Вместо того чтобы описывать результаты работы функций в интерфейсе исключительно словами (или, что еще хуже, не давать никаких описаний), показывайте пользователю, какими будут эти результаты. Для этой цели применяйте визуальные элементы. В дополнение к тексту, описывающему параметр или состояние, поместите картинку или диаграмму, описывающую поведение. Хотя визуализация, как правило, требует дополнительного места на экране, ее способность ясно передавать смысл стоит потраченных на это пикселов. Например, функция меню "Эффекты" в Android-приложении Adobe Photoshop показывает, как будет выглядеть документ, если к нему применить один из эффектов ( рис. 3.7).

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

Рис. 3.7. Эффекты реализованы таким образом, чтобы пользователь легко мог понять, к каким результатам приводит тот или иной эффект.

Интеграция визуального стиля с функциональностью

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

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

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

Избегайте визуального шума и беспорядка

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

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

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

Бессмысленные вариации визуальных свойств мешают создавать целостные и удобные интерфейсы.

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

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

Текст в графических интерфейсах

Текст – неотъемлемая составляющая практических всех пользовательских интерфейсов. Следует крайне внимательно относиться к применению текста, поскольку он обладает способностью запутывать и усложнять простые вещи.

Человек распознает буквы исходя из их форм. Чем более узнаваема форма, тем проще распознать букву, поэтому СЛОВА, СОСТОЯЩИЕ СПЛОШЬ ИЗ ЗАГЛАВНЫХ БУКВ, ЧИТАТЬ ТРУДНЕЕ, чем написанные обычным образом: в заглавных буквах отсутствуют привычные глазу начертания, и поэтому чтение требует большего внимания. Избегайте в своих интерфейсах слов, состоящих из заглавных букв.

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

Что касается читаемого текста в интерфейсе, рекомендуется придерживаться некоторых принципов:

  • Используйте контрастный текст. Убедитесь, что текст хорошо контрастирует с фоном и что не используются дополнительные цвета, способные повлиять на удобочитаемость текста.
  • Используйте подходящий шрифт и кегль (размер). Как правило, шрифт без засечек и с резкими контурами, такой как Verdana или Tahoma, читается лучше всего. Текст мельче 10 пикселов в большинстве ситуаций трудно читать.
  • Четко формулируйте мысли. Пользуйтесь минимальным количеством слов, необходимым для ясной передачи смысла. Избегайте сокращений. Если они все-таки необходимы, используйте общепринятые.

Цвет в графических интерфейсах

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

  • Слишком много цветов. Добавление одного цвета, выделяющего важные элементы в наборе, значительно сокращает время поиска. Добавление новых цветов приводит к дополнительному ускорению работы пользователя, но при семи и более цветах скорость поиска значительно падает. Разумно предположить, что сходные результаты будут получены при любом типе навигации по интерфейсу, поскольку число семь отражает количество элементов информации, единовременно сохраняемой в кратковременной памяти человека.
  • Использование насыщенных дополнительных цветов. Дополнительными являются цвета, противоположные друг другу в числовом представлении. Если такие цвета обладают достаточно высокой насыщенностью и расположены рядом, то порождают зрительные эффекты, препятствующие легкому восприятию и мешающие сосредоточить внимание.
  • Чрезмерная насыщенность. Сильно насыщенные цвета выглядят кричаще и привлекают слишком много внимания. Умеренное насыщение цвета допустимо для небольших областей, привлекающих внимание пользователей, но такие области всегда следует создавать с осторожностью.
  • Недостаточный контраст. Когда цвет объекта отличается от цветов фона лишь оттенком, но не насыщенностью или яркостью, объект становится трудно воспринимать. Фигура и фон должны различаться по яркости и насыщенности, а не только по оттенку. Кроме того, необходимо избегать использования цветного текста на цветном фоне везде, где только возможно.
  • Недостаточная забота о людях с нарушениями цветового восприятия. Примерно десять процентов мужского населения страдает цветовой слепотой той или иной степени. Это означает, что при использовании (в частности) оттенков красного и зеленого для передачи важной информации следует проявлять внимательность. Любые цвета, применяемые в интерфейсе, должны заметно различаться по насыщенности или яркости. Если интерфейс остается читаемым после преобразования в черно-белый вариант, люди с нарушениями цветового восприятия смогут работать и с цветным вариантом интерфейса.

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

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

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

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

Информация, представленная визуально, должна:

  • Способствовать визуальному сравнению. Предоставьте пользователям возможность сравнивать взаимосвязанные переменные и тенденции либо сопоставлять варианты "до" и "после". Сравнение создает контекст, делающий информацию более ценной и понятной пользователям (пример см. на рис. 3.7).
  • Показывать причинно-следственную связь. Представляя информацию в графическом виде, четко обозначайте причину и следствие. В интерактивных интерфейсах необходимо обеспечить визуальную обратную связь, чтобы информировать пользователей о последствиях их действий или предоставить им подсказку о том, как следует действовать.
  • Отображать сразу несколько величин. Окна, содержащие информацию о нескольких взаимосвязанных переменных, должны в случае необходимости отображать все эти переменные одновременно без ущерба для ясности. При этом у пользователя должна быть возможность избирательно включать и отключать вывод величин этих переменных в интерактивном режиме, чтобы облегчить их сравнение и поиски корреляции.
  • Объединять текст, графику и данные в одном изображении. Диаграммы, требующие дополнительных подписей, легенд или расшифровок, нагружают пользователя добавочной когнитивной обработкой. Пользователю приходится переключать внимание с диаграммы на подпись и обратно, а затем соотносить их в уме. Гораздо лучше поместить необходимые надписи прямо на диаграмме (см. рис. 3.8).
  • Гарантировать качество, релевантность и целостность данных. Не следует выводить информацию на экран только потому, что это технически возможно. Убедитесь, что любая отображаемая информация помогает пользователю достигать конкретных целей и уместна в данном контексте.
  • Группировать объекты в пространстве, а не во времени. Когда вы отображаете данные, меняющиеся во времени, пользователю легче воспринимать их динамику, если значения выводятся рядом, а не перекрываются.
  • Представлять числовые данные в числовом виде. Даже если вы предпочитаете пользоваться графиками и диаграммами, чтобы облегчать восприятие тенденций и иной количественной информации, не следует полностью отказываться от вывода собственно числовых данных ( рис. 3.8).
Гистограмма Android-приложения Battery HD дает примерное представление  об уровне заряда батареи, но здесь же выводится точное значение.

Рис. 3.8. Гистограмма Android-приложения Battery HD дает примерное представление об уровне заряда батареи, но здесь же выводится точное значение.