Силы, вложенные в разработку модели поведения программного продукта, будут потрачены впустую, если вы не сумеете должным образом донести до пользователей принципы этого поведения. В случае мобильных продуктов это делается визуальными средствами - путем отображения объектов на дисплее (в некоторых случаях целесообразно использовать тактильные ощущения от нажатия).
Цель художника - создать объект, взгляд на который вызывает эстетический отклик.
Дизайнеры создают объекты, которыми будут пользоваться другие люди. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей. Разумеется, визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса.
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того - привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь - прозрачность и понятность информации и лишь затем - передача информации о поведении посредством ожидаемого назначения.
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, но они должны еще обладать глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы - с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы и что делать с когнитивными аспектами пользовательского восприятия функций.
Информационные дизайнеры работают над визуализацией данных, содержимого и средств навигации. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб. Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации.
Чтобы создавать привлекательные и удобные пользовательские интерфейсы, дизайнер интерфейсов должен владеть базовыми визуальными навыками - пониманием цвета, типографики, формы и композиции - и знать, как их можно эффективно применять для передачи поведения и представления информации, для создания настроения и стимулирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта.
Вольный перевод статьи Якуба Линовски — «A Good User Interface» .
Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.
Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного
Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.
Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности. Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.
Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.
Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз
Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.
Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти. Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
На картинке приведен пример, где синий цвет выбран, чтобы отметить все, что может нажиматься, а черный для всего, что было выбрано или указывает на то, где мы. При правильном применении, людям будет гораздо легче ориентироваться среди таких подсказок. Не усложняйте жизнь пользователям — не нарушайте смысловое кодирование.
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано. Чтобы не допустить такой аналитический паралич, старайтесь подчеркивать и выделять одни варианты на фоне других.
Идея 8: Попробуйте отмену действия вместо запросов на подтверждения
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.
Идея 9: Объясните, для кого предназначен продукт. Не пытайтесь адресовать сообщение всем подряд
Вы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.
Идея 10: Говорите прямо вместо предположений
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение. Кто знает, быть может, иногда стоит подсказать людям следующий шаг на пути оптимизации конверсии?
Идея 11: Больше контраста вместо однородности
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.
Идея 12: Покажите место происхождения продукта вместо обобщений
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом. Хороший способ рассказать о себе - упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.
Идея 13: Сокращайте количество полей, не спрашивайте слишком много
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы. Расширить форму несложно, но меньшее количество полей позволяют увеличить конверсию.
Идея 14: Раскройте все опции сразу
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.
Идея 15: Предлагайте последовательность вместо страниц с двойным дном
Страницы с двойным дном — убийцы конверсии. Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете. Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.
Шаблоны проектирования решают целые классы проблем проектирования, возникающие путем выявления и обобщения ценных проектных находок. Деятельность по формализации знания и фиксации наилучших решений в области проектирования служит многим важным целям:
- сократить время и усилия, затрачиваемые на проектирование в новых проектах;
- повысить качество проектных решений;
- способствовать улучшению коммуникации между проектировщиками и программистами;
- повысить профессиональный уровень проектировщиков.
Шаблоны всегда применяются в рамках некоторого контекста и конструируются так, чтобы быть применимыми в типичных ситуациях, которые имеют схожий контекст использования, схожие ограничения и условия. Описывая шаблон, важно четко задать ситуацию, в которой применимо решение, дать один или несколько конкретных примеров, перечислить абстрактные признаки, характерные для всех примеров, а также рассуждения, объясняющие, почему решение является хорошим.
Шаблоны проектирования не являются рецептами или готовыми решениями. В своей книге "Designing Interfaces" – объемистом и полезном собрании шаблонов проектирования взаимодействия – Дженифер Тидвелл (Jenifer Tidwell) предостерегает нас: "[Шаблоны] – это не готовые к употреблению компоненты; каждая реализация шаблона немного отличается от всех других" [ 3.1 ] .
Типы шаблонов проектирования взаимодействия
Шаблоны проектирования взаимодействия можно выстроить в иерархию. Их можно применять на различных уровнях инфраструктуры интерфейса:
- Шаблоны позиционирования могут применяться на концептуальном уровне и помогают определить тип продукта в отношении к пользователю.
- Структурные шаблоны решают проблемы, связанные с управлением отображением информации и функциональных элементов на экране.
- Поведенческие шаблоны решают широкий спектр проблем, относящихся к конкретным взаимодействиям с теми или иными элементами интерфейса.
Структурные шаблоны являются, по всей видимости, наименее документированными, однако при этом они распространены повсеместно. На рис. 3.1 представлен один из наиболее широко применяемых высокоуровневых структурных: навигационная панель слева, обзорная панель справа вверху, панель подробностей справа внизу.
Данный шаблон является оптимальным для приложений, в которых пользователю требуется работать с разнообразными объектами, объединять объекты в группы, а также просматривать содержимое или свойства отдельных объектов или документов, не переходя на другой экран.
Рис.
3.1.
Многие программы для электронной почты (в том числе и мобильные) используют этот шаблон ( рис. 3.2), а его вариации встречаются в программах для создания и управления информацией, где часто требуется быстрый доступ и управление объектами многих типов.
Однако все не так просто. Этот шаблон в чистом виде, безусловно, удобен в случае относительно большого экрана (монитор или планшет), однако на мобильном телефоне он малоприменим. Решением проблемы является отказ от единого экрана: выделив каждому разделу собственную экранную сущность и организовав связь между ними, можно получить высокофункциональное приложение ( рис. 3.3).
Визуальный дизайн интерфейсов
Силы, вложенные в разработку модели поведения программного продукта, будут потрачены впустую, если вы не сумеете должным образом донести до пользователей принципы этого поведения. В случае мобильных продуктов это делается визуальными средствами – путем отображения объектов на дисплее (в некоторых случаях целесообразно использовать тактильные ощущения от нажатия).
Визуальный дизайн интерфейсов – очень нужная и уникальная дисциплина, которую следует применять в сочетании с проектированием взаимодействия и промышленным дизайном. Она способна серьезно повлиять на эффективность и привлекательность продукта, но для полной реализации этого потенциала нужно не откладывать визуальный дизайн на потом, а сделать его одним из основных инструментов удовлетворения потребностей пользователей и бизнеса.
Изобразительное искусство, визуальный дизайн интерфейсов и прочие дисциплины дизайна
Художники и визуальные дизайнеры работают с одними и теми же изобразительными средствами, однако их деятельность служит различным целям. Цель художника – создать объект, взгляд на который вызывает эстетический отклик. Изобразительное искусство – способ самовыражения художника. Художник не связан почти никакими ограничениями. Чем необычнее и своеобразнее продукт его усилий, тем выше он ценится.
Дизайнеры создают объекты, которыми будут пользоваться другие люди. Если говорить о дизайнерах визуальных интерфейсов, то они ищут наилучшее представление, доносящее информацию о поведении программы, в проектировании которой они принимают участие. Придерживаясь целеориентированного подхода, они должны стремиться представлять поведение и информацию в понятном и полезном виде, который поддерживает маркетинговые цели организации и эмоциональные цели персонажей. Разумеется, визуальный дизайн пользовательских интерфейсов не исключает эстетических соображений, но такие соображения не должны выходить за рамки функционального каркаса.
Графический дизайн и пользовательские интерфейсы
Графические дизайнеры обычно очень хорошо разбираются в визуальных аспектах и хуже представляют себе понятия, лежащие в основе поведения программного продукта и взаимодействия с ним. Они способны создавать красивую и адекватную внешность интерфейсов, а кроме того – привносить фирменный стиль во внешний вид и поведение программного продукта. Для таких специалистов дизайн или проектирование интерфейса есть в первую очередь тон, стиль, композиция, которые являются атрибутами бренда, во вторую очередь –прозрачность и понятность информации и лишь затем – передача информации о поведении посредством ожидаемого назначения.
Дизайнерам визуальной части интерфейса необходимы некоторые навыки, которые присущи графическим дизайнерам, но они должны еще обладать глубоким пониманием и правильным восприятием роли поведения. Их усилия в значительной степени сосредоточены на организационных аспектах проектирования. В центре их внимания находится соответствие между визуальной структурой интерфейса с одной стороны и логической структурой пользовательской ментальной модели и поведения программы – с другой. Кроме того, их заботит вопрос о том, как сообщать пользователю о состояниях программы и что делать с когнитивными аспектами пользовательского восприятия функций.
Визуальный информационный дизайн
Информационные дизайнеры работают над визуализацией данных, содержимого и средств навигации. Усилия информационного дизайнера направлены на то, чтобы представить данные в форме, способствующей их верному истолкованию. Результат достигается через управление визуальной иерархией при помощи таких средств, как цвет, форма, расположение и масштаб. Распространенными объектами информационного дизайна являются всевозможные графики, диаграммы и прочие способы отображения количественной информации.
Чтобы создавать привлекательные и удобные пользовательские интерфейсы, дизайнер интерфейсов должен владеть базовыми визуальными навыками – пониманием цвета, типографики, формы и композиции – и знать, как их можно эффективно применять для передачи поведения и представления информации, для создания настроения и стимулирования физиологических реакций. Дизайнеру интерфейса также требуется глубокое понимание принципов взаимодействия и идиом интерфейса, определяющих поведение продукта.
Строительные блоки визуального дизайна интерфейсов
Дизайн интерфейсов сводится к вопросу о том, как оформить и расположить визуальные элементы таким образом, чтобы внятно отразить поведение и представить информацию. Каждый элемент визуальной композиции имеет ряд свойств, и сочетание этих свойств придает элементу смысл. Пользователь получает возможность разобраться в интерфейсе благодаря различным способам приложения этих свойств к каждому из элементов интерфейса. В тех случаях, когда два объекта обладают общими свойствами, пользователь предположит, что эти объекты связаны или похожи. Когда пользователи видят, что свойства отличаются, они предполагают, что объекты не связаны.
Создавая пользовательский интерфейс, проанализируйте перечисленные ниже визуальные свойства каждого элемента или группы элементов. Чтобы создать полезный и привлекательный пользовательский интерфейс, следует тщательно поработать с каждым из этих свойств.
Форма
Форма – главный признак сущности объекта для человека. Мы узнаем объекты по контурам. Если мы увидим на картинке синий ананас, мы его сразу опознаем, потому что мы помним его форму. И лишь потом мы удивимся странному цвету. При этом различение форм требует большей концентрации внимания, чем анализ цвета или размера. Поэтому форма – не лучшее свойство для создания контраста, если требуется привлечь внимание пользователя.
Размер
Более крупные элементы привлекают больше внимания, особенно если они значительно превосходят размерами окружающие элементы. Люди автоматически упорядочивают объекты по размеру и склонны оценивать их по размеру; если у нас есть текст в четырех размерах, предполагается, что относительная важность текста растет вместе с размером и что полужирный текст более важен, чем текст с нормальным начертанием. Таким образом, размер – полезное свойство для обозначения информационных иерархий.
Цвет
Цветовые различия быстро привлекают внимание. В некоторых профессиональных областях цвета имеют конкретные значения, и этим можно пользоваться. Так, для бухгалтера красный цвет – отрицательные результаты, а черный – положительные.
Цвета приобретают смыслы и благодаря социальным контекстам, в которых проходит наше взросление. Например, белый цвет на Западе ассоциируется с чистотой и миром, а в Азии и арабских странах – с похоронами и смертью. При этом цвет изначально не обладает свойством упорядоченности и не выражается количественно, поэтому далеко не идеален для передачи информации такого рода. Кроме того, не следует делать цвет единственным способом передачи информации, поскольку цветовая слепота встречается довольно часто.
Применяйте цвет с умом. Чтобы создать эффективную визуальную систему, позволяющую пользователю выявлять сходства и различия объектов, используйте ограниченный набор цветов – эффект радуги перегружает восприятие пользователя и ограничивает возможности по передаче ему информации.
Яркость
Понятия темного и светлого обретают смысл преимущественно в контексте яркости фона. На темном фоне темный текст почти не виден, тогда как на светлом он будет резко выделяться. Контрастность люди воспринимают легко и быстро, так что значение яркости может стать хорошим инструментом привлечения внимания к тем элементам, которые требуется подчеркнуть. Значение яркости – также упорядоченная переменная, например, более темные (с более низкой яркостью) цвета на карте легко интерпретируются: они обозначают большие глубины или большие значения других параметров.
Направление
Направление полезно, когда требуется передавать информацию об ориентации (вверх или вниз, вперед или назад). Помните, что восприятие направления может быть затруднено в случае некоторых форм и при малых размерах объектов, поэтому ее лучше использовать в качестве вторичного признака. Так, если требуется показать, что рынок акций пошел вниз, можно использовать направленную вниз стрелку красного цвета.
Текстура
Разумеется, изображенные на экране элементы не обладают настоящей текстурой, но способны создавать ее видимость. Текстура редко бывает полезна для передачи различий или привлечения внимания, поскольку требует значительной концентрации на деталях. И тем не менее текстура может быть важной подсказкой. Засечки и выпуклости на элементах пользовательского интерфейса обычно указывают, что элемент можно перетаскивать, а фаски или тени у кнопки усиливают ощущение, что ее можно нажать.
Расположение
Расположение – это переменная упорядоченная и выражаемая количественно, а значит, полезная для передачи иерархии. Расположение также может служить средством создания пространственных отношений между объектами на экране и объектами реального мира (например, небо в верхней половине, земля в нижней).
