20 Заповедей Дизайна Пользовательского Интерфейса

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

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

Но роль интерфейсов не ограничивается только утилитарными вопросами.

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

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

Да, разобраться в интерфейсе может быть сложно с первого раза, но в нем нет места двусмысленности.

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

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

Уже невозможно даже спокойно читать, чтобы что-то не отвлекало от работы.

Внимание пользователя бесценно.

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

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

Цените внимание своих пользователей: от этого выиграют и они, и вы.

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

Постарайтесь удержать его любой ценой.

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

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

И не бойтесь быть Капитаном Очевидностью.

Очевидные вещи не всегда столь очевидны.

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

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

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

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

В идеале пользователи должны чувствовать, что они напрямую управляют объектом.

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

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

Очевидно, что, например, текст не может содержать две или три основные темы – основная тема может быть только одна.

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

Но важно помнить, что нельзя смешивать главные и второстепенные задачи.

Например, вы не пишете статью для того, чтобы пользователи поделились ею в Твиттере, верно? Ваша главная задача в этом случае – чтобы они прочитали и поняли прочитанное.

Второстепенные задачи не должны выходить на первый план: например, их можно представить менее заметно или показывать только после выполнения ключевой задачи.

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

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

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

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

Соответственно, элементы дизайна интерфейса должны выглядеть согласованно со своим поведением.

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

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

Конечно, элементы, схожие по поведению, должны выглядеть одинаково (последовательно).

Но не менее важно и то, что разнородные элементы форматируются по-разному (т. е.

непоследовательно).

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

То есть одни и те же элементы каждый раз отображаются в одном и том же порядке.

Плохо спроектированная визуальная иерархия бесполезна и только сбивает с толку пользователей.

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

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

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

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

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

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

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

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

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

Цвет можно использовать для выделения объектов, привлекая к ним внимание пользователей, но элементы нельзя разделять только по цвету.

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

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

Если пользователям необходимо сделать выбор, предоставьте им ровно столько информации, сколько им необходимо для выбора.

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

Не нужно пытаться объяснить все от А до Я или изложить всю информацию сразу.

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

Благодаря этому взаимодействие с интерфейсом остается ясным и понятным для пользователей.

Но если спуститься на землю, то в идеале подсказки должны быть контекстно-зависимыми и появляться только тогда и там, где они нужны, оставаясь в остальное время скрытыми.

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

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

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

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

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

Большинство сложностей при работе с интерфейсом возникает из-за непродуманного нулевого состояния.

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

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

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

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

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

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

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

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

Они понимают, что довольный пользователь — это молчаливый пользователь.

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

Главное, не смотреть на них свысока и не вступать в язвительные споры о важности той или иной дисциплины.

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

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

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

Дизайнер создает интерфейс не для того, чтобы радовать глаз, а для того, чтобы им пользовались! Автор: Джошуа Портер Примечание пер.

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