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

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

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

Лекция раскрывает некоторые подробности разработки пользовательских интерфейсов, необходимые для профессиональной разработки мобильных приложений. Часть материала повторяет изложенные в первой части курса сведения, но далеко не все. За более подробной информацией обращайтесь к лекции 3 первой части.

Для подготовки данной лекции в качестве основного источника информации была использована книга "Алан Купер об интерфейсе"[ 1.1 ] , однако задекларированные в ней принципы были переработаны в контексте программирования для мобильных устройств, а примеры заменены на более подходящие в рамках данного курса. Скриншоты приложений взяты из магазина приложений Google Playили сделаны самостоятельно с использованием смартфона Мегафон SP-A20i Mint на платформе Intel Medfield.

Создание качественного интерфейса: принципы и шаблоны

Принципы проектирования взаимодействия

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

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

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

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

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

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

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

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

Принципы – это правила, ведущие к действиям и обычно опирающиеся на ряд ценностей и убеждений. Приведенный ниже набор ценностей создали Роберт Рейман, Хью Дабберли (Hugh Dubberly), Ким Гудвин, Дэвид Фор (David Fore) и Джонатан Корман (Jonathan Korman). Он применим к любой дисциплине проектирования, которая служит потребностям человека.

Задача проектировщиков взаимодействия – создавать такие проектные решения, которые:

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

Проектирование этичного взаимодействия

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

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

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

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

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

Второй принцип этичного взаимодействия состоит в улучшении положения человека.

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

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

Проектировщикам, начинающим работу над новым проектом, необходимо в глубине души осознавать эти глобальные вопросы.

Проектирование целенаправленного взаимодействия

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

Проектирование прагматичного взаимодействия

Чтобы иметь ценность, проектирование должно воплощаться в продукте. Будучи созданным, продукт должен увидеть свет. А увидев свет, он должен приносить прибыль создателям.

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

Проектирование элегантного взаимодействия

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

• Создавай простые, но полноценные решения.
  Один из классических элементов качественного дизайна – это экономия формы, достижение большего меньшими затратами. В проектировании мобильных интерфейсов это означает, что интерфейс должен содержать лишь те экраны и элементы, которые требуются для решения поставленной задачи. Это касается и поведения: следует дать пользователю простой набор инструментов, позволяющий ему добиваться великолепных результатов. Такой подход хорошо знаком программистам, которые признают, что лучшие алгоритмы коротки и понятны.
• Добивайся внутренней целостности.
  Качественно спроектированный продукт оставляет ощущение единого целого, в котором все составные части сбалансированы и гармоничны. Некачественно спроектированный продукт или продукт, вообще не проектировавшийся, обычно создает впечатление, будто его наспех сколотили из выбранных случайным образом разрозненных кусков. Часто такой продукт – результат конструирования на основе модели реализации, когда различные команды разработчиков трудятся над различными модулями интерфейса, не общаясь между собой, или когда продукт проектируются без учета особенностей мобильной платформы. Целеориентированный процесс проектирования, в котором концепция продукта зарождается сразу и полностью на высшем уровне с последующей поэтапной детализацией, дает идеальную среду для создания внутренне целостных проектов.
• Учитывай и пробуждай эмоции и познавательные процессы.
  Многие проектировщики традиционной школы часто говорят о желаниях и важности желаний при проектировании коммуникаций и продуктов. Однако делая такой сильный упор на одну эмоцию, они временами теряют из виду полную картину. Желание – ограниченная эмоция, если речь идет о продукте, у которого есть определенное назначение, особенно узкопрофессиональное. Пользователь должен получать стимулы и поддержку при работе с продуктом, поэтому вместо желания лучше использовать элегантность.

Шаблоны проектирования взаимодействия

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

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

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

Шаблоны проектирования не являются рецептами или готовыми решениями. В своей книге "Designing Interfaces" – объемистом и полезном собрании шаблонов проектирования взаимодействия – Дженифер Тидвелл (Jenifer Tidwell) предостерегает нас: "[Шаблоны] – это не готовые к употреблению компоненты; каждая реализация шаблона немного отличается от всех других" [ 3.1 ] .

Типы шаблонов проектирования взаимодействия

Шаблоны проектирования взаимодействия можно выстроить в иерархию. Их можно применять на различных уровнях инфраструктуры интерфейса:

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

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

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

Рис. 3.1. Навигационная схема приложения

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

увеличить изображение
Рис. 3.2. Почтовый клиент gmail ориентирован на планшеты

Однако все не так просто. Этот шаблон в чистом виде, безусловно, удобен в случае относительно большого экрана (монитор или планшет), однако на мобильном телефоне он малоприменим. Решением проблемы является отказ от единого экрана: выделив каждому разделу собственную экранную сущность и организовав связь между ними, можно получить высокофункциональное приложение ( рис. 3.3).

увеличить изображение
Рис. 3.3. Почтовый клиент Яндекс хорошо подходит для телефона

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

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

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

Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна

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

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

Графический дизайн и пользовательские интерфейсы

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

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

Визуальный информационный дизайн

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

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

Строительные блоки визуального дизайна интерфейсов

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

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

Форма

Форма – главный признак сущности объекта для человека. Мы узнаем объекты по контурам. Если мы увидим на картинке синий ананас, мы его сразу опознаем, потому что мы помним его форму. И лишь потом мы удивимся странному цвету. При этом различение форм требует большей концентрации внимания, чем анализ цвета или размера. Поэтому форма – не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя.

Размер

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

Цвет

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

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

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

Яркость

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

Направление

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

Текстура

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

Расположение

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

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

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

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

При создании графических интерфейсов следует:

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

Рассмотрим их подробнее.

Использование визуальных свойств для группировки элементов и создания четкой иерархии

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

Глядя на любой набор визуальных элементов, пользователь бессознательно задается вопросом: "Что здесь представляет интерес?" – и почти сразу же: "Какая связь между этими объектами?" Мы должны стремиться к тому, чтобы интерфейс содержал в себе ответ на оба вопроса.

Рис. 3.4. Визуализация кнопок и текстовых полей ввода в Android

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

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

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

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

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

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

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

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

Есть хороший способ убедиться, что визуальный дизайн эффективно задействует иерархию и отношения, – дизайнеры называют этот прием тестом с прищуриванием (squint test). Закройте один глаз и посмотрите на экран прищуренным вторым глазом. Обратите внимание на то, какие элементы слишком выпирают, какие стали нечеткими, а какие объединились в группы. Эта процедура часто вскрывает не замеченные ранее проблемы в композиции интерфейса.

Визуальная структура и логические маршруты

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

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

Выравнивание

Выравнивание визуальных элементов – один из главных приемов, позволяющих дизайнеру представить продукт пользователям в систематизированном и упорядоченном виде. Сгруппированные элементы следует выравнивать как по горизонтали, так и по вертикали ( рис. 3.5).

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

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

Рис. 3.5. Приложение uTorrent эффективно использует выравнивание по композиционной сетке. Текст и функциональные элементы четко выравниваются по сетке с фиксированным шагом.

Сетка

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

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

В идеальном случае сетка должна задавать и пропорции различных областей экрана. Такие отношения обычно выражаются дробями. Среди распространенных дробей – прославленное "золотое сечение" (равное примерно 1,62), которое часто встречается в природе и считается особенно приятным для человеческого глаза; величина, обратная квадратному корню из двух (примерно 1:1,41), которая является основой международного стандарта размера бумаги (например, листа A4). В программировании для мобильных устройств не следует полагаться на соотношение сторон дисплеев, так как для устройств на Android не существует единого стандарта размера экранов.

Использование сетки в визуальном дизайне интерфейсов дает ряд преимуществ:

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

Логические маршруты

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

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

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

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

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

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

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

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

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

Пиктограммы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поведение окон и определение компоновки

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

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

Лишние комнаты

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

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

Диалоговое окно – это еще одна комната; не ходите в комнату без веской причины.

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

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

Важные окна

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

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

Инструменты программы рисования следует располагать у границы холста и делать доступными в одно действие. Пользователя не следует отправлять за ними в меню или диалоговое окно ( рис. 3.9).

Рис. 3.9. Главный экран приложения Glow Drow не содержит ничего лишнего.

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

Замусоривание окнами

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

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

Проектирование для различных потребностей

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

Командные векторы, рабочие наборы и персонажи

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

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

Рис. 3.10. Масштаб изображения можно изменять разными способами. На экране есть специальные кнопки; в то же время опытные пользователи сенсорных экранов ими практически не пользуются, предпочитая одновременное сведение/разведение двух пальцев (один из жестов технологии мультитач).

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

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

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

Существует исключение из правила множественных векторов. Опасные команды (такие как Стереть все) не должны иметь легко доступных множественных командных векторов. Их следует защищать посредством меню и диалоговых окон.

Персонализация и настройка

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

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

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

С другой стороны, от перемещения стабильных объектов навигация может пострадать. Украшение стабильных объектов способствует навигации, а перемещение их – препятствует.

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

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

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

Пользовательское тестирование неоднократно демонстрировало, как аудитория расходится во взглядах на эффективность той или иной идиомы, разделяясь на две примерно равные части. Половина пользователей явно предпочитает одну идиому, а вторая половина – другую. Такое четкое разделение аудитории по предпочтениям на две или несколько крупных групп указывает, что эти предпочтения идиосинкратически модальны.

В таких случаях не нужно устраивать дебаты, чтобы понять, какой из способов следует применять, потому что они легко превращаются в холивар (священную войну). Здесь ответ очевиден: применяйте оба! Когда пользовательская аудитория разделена предпочтениями относительно идиом, проектировщики обязаны предложить обе идиомы. Необходимо удовлетворить обе группы. Нельзя удовлетворить одну половину аудитории, оставив в негодовании другую, – и при этом совершенно неважно, к какой группе относите себя вы или ваши разработчики.

Локализация и глобализация

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

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

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

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

Коллекции и шаблоны

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

Справка

Хорошая оперативная справка крайне важна, но она не должна становиться костылем для продукта. Качественно спроектированный интерфейс должен значительно сократить потребность пользователей в справке.

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

Рис. 3.11. В игре Loops! правила игры занимают всего пять экранов, использован очень простой язык, каждое действие снабжено понятной иллюстрацией

Всплывающие подсказки относятся к немодальной оперативной справке и являются невероятно эффективным средством помощи пользователю.