Факторы, определяющие эффективность дизайна кнопок UI

Дизайн
19.01.2020
961

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

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

  • призыва к действию CTA;
  • текстовая;
  • с выпадающим списком;
  • «гамбургер» (для открытия списка меню);
  • «плюс» (для добавления пользовательского контента);
  • кнопка, предлагающая выбор того или иного варианта;
  • «Поделиться».

Размер

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

В частности, размер считается одним из главных факторов, определяющих значимость составляющей дизайна. CTA-кнопка должна быть сравнительно большой (специалисты Эппл считают, что ее оптимальные «габариты» в мобильном интерфейсе – 44х44 pixel; Майкрософт – 34х26). Однако нужно следить, чтобы CTA-кнопка не была излишне громоздкой и не нарушала структуру макета.

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

Цвет

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

  • цвет фона и CTA-кнопки должны иметь высокую контрастность;
  • кнопки следует визуально выделять среди прочих UI-составляющих.

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

Форма

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

Что касается CTA-кнопок, разработчикам стоит делать их края скругленными. Это направит взор пользователя «внутрь», привлечет внимание к текстовому наполнению. Не стоит забывать и о гармоничном сочетании формы кнопки с общим стилистическим направлением интернет-страницы.

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

Местоположение

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

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

Текст

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

Приступая к выбору и оформлению текста для кнопок, необходимо определиться со структурой надписей. Наиболее распространенное сочетание «глагол+существительное» (например, «Оформить заказ») или только глагол («Заказать»).

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

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку