7 нерушимых законов дизайна пользовательского интерфейса (User Interface)

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

Это неизбежно означает больше работы пользователя интерфейса. Итак, давайте посмотрим, что нужно помнить при работе с интерфейсом и опытом взаимодействия пользователя (User Interface и User eXperience).

1. Закон ясности в UI/UX

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

Закон ясности в UI/UX

Вы используете Gmail? Я - да. До последнего обновления в Gmail была очень ясная текст навигация сверху страницы — календарь, диск, листы и другие сервисы Google были доступны по нажатию кнопки. Затем компания Google решила “упростить” и перевести все за абстрактный значок. Каков результат? Большинство людей никогда не замечало значка и Gmail начал получать шквал запросов на поддержку.

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

2. Закон предпочитаемого действия в интерфейсе

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

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

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

3. Закон контекста в UI/UX

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

Закон контекста в UI/UX

Как изменить свое имя на Facebook? Вы зайдите в настройки в верхнем правом углу, выберите «Настройки учетной записи», найдете имя и нажмите кнопку «Редактировать». Как сделать то же самое на Linkedin? Нажмете на карандаш рядом с вашим именем.

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

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

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

4. Закон «настройки интерфейса по умолчанию»

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

- многие имеют по умолчанию фон и мелодии в своих телефонах;

- многие (включая тебя) никогда не изменяют заводские настройки в телевизорах;

- ты никогда не будешь изменять стандартную температуру холодильника

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

5. Закон управляемых действий и опыт пользователя

Скорее всего пользователь сделает то, о чем его попросят.

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

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

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

6. Закон обратной связи

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

Закон обратной связи

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

Gmail - это отличный пример хорошей обратной связи. Ты получаешь четкое уведомление для каждого действия, которое ты совершаешь, включая «Больше узнать» и «Отменить ссылки». Это дает людям чувство управлять и уверенность использовать продукт снова.

7. Закон ослабления в UI/UX

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

Закон ослабления

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

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

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

Законы или указания к руководству?

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

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

Шутки в сторону - дизайн пользовательского интерфейса является деликатной и очень ответственная задачей. Данные законы User Interface и User eXperience помогут тебе сделать страницу лучше, и если ты решишь их нарушить, убедись, что у тебя есть веские причины на это.