4 правила для отличного UI

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

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

1. Что такое дизайн пользовательского интерфейса?

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

Наиболее распространенные формы UI-дизайна:

• Графические интерфейсы — это визуальные оформление кнопок, меню или панелей управления, по сути, всего, с чем взаимодействует пользователь. Примером может служить рабочий стол вашего компьютера или интерфейс вашего мобильного телефона.
• Интерфейсы с голосовым управлением — это, как следует из названия, интерфейсы, в которых для инициирования действия требуется голос. В последнее время, они становятся все более популярными. В качестве примера можно привести Siri от Apple, Alexa от Amazon или Bixby от Google.
• Интерфейсы на основе жестов — это интерфейсы, в которых жесты пользователя влияют на действия. Примером могут служить игры виртуальной реальности.

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

2. Что такое хороший UI-дизайн?

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

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

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

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

3. Важные правила хорошего UI-дизайна

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

1. Хороший UI-дизайн единообразен на всем сайте.

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

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

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

2. Хороший UI-дизайн избавляет пользователя от лишней работы

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

Визуальная четкость

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

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

Баланс текста и изображений

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

‍Упрощенный процесс работы

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

4. Хороший UI-дизайн дает пользователям возможность контролировать ситуацию

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

Существует несколько способов добиться этого, и вот наиболее часто встречающиеся из них:

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

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

5. Хороший UI-дизайн обеспечивает комфорт пользователям

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

Избегать жаргона

Не используйте лексику, которую ваши пользователи могут не понять. Всегда думайте о своей целевой аудитории и употребляйте те термины и слова, которые она знает и использует. Например, люди, работающие в сфере производства одежды, могут называть предложение "два по цене одного" термином BOGO (от англ. Buy One Get One — Купи Один Получи Два). Однако, если вы разместите на сайте фразу "BOGO бесплатно" для продвижения этого предложения, она не будет иметь смысла для большинства посетителей. Кроме того, это может запутать и отпугнуть клиентов от вашего сайта.

Инклюзивность

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

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

Ознакомьтесь с нашим руководством по инклюзивному дизайну >>

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

6. Используйте подсказки, которые пользователи уже знают

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

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

7. Последнее слово о дизайне пользовательского интерфейса

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

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