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

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

Эволюция стиля

Трехмерная кнопка

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

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

Скевоморфная кнопка

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

Кнопка плоского дизайна

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

Когда все плоско, как пользователи узнают, какие части являются кнопками?

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

Почти плоский дизайн и плавающая кнопка действия

Почти плоский дизайн был развитием оригинального (или ультра) плоского дизайна. Этот стиль в основном плоский, но использует тонкие тени, блики и слои, чтобы создать некоторую глубину в пользовательском интерфейсе. Язык Material Design от Google является одним из примеров почти плоского дизайна с правильными приоритетами и предлагает новый тип кнопок: плавающую кнопку действия . Эти кнопки расположены в верхней части интерфейса и привлекают внимание к продвигаемым или основным действиям. Они действуют как кнопки призыва к действию («используются для продвигаемого действия»), предназначенные для представления одного действия, которое пользователи выполняют чаще всего на этом конкретном экране.

Карты от Google — отличный пример того, что FAB сделано правильно. Основное действие, выполняемое пользователями на Картах, — проложить маршрут, поэтому FAB, который занимается именно этим, имеет смысл.

Еще один хороший пример использования FAB в дизайне пользовательского интерфейса — Evernote. Несмотря на в основном плоский пользовательский интерфейс, приложение предоставляет несколько тонких теней на панели навигации и плавающей кнопке действия («добавить новый»).

Призрачная кнопка

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

Кнопки-призраки произошли от революции плоского дизайна, а кнопки-призраки стали модными, когда Apple выпустила iOS 7. Многие кнопки в пользовательском интерфейсе iOS — это то, что мы бы назвали кнопками-призраками. Простая и незамысловатая прямоугольная форма в сочетании с аккуратным шрифтом внутри рамки отлично смотрятся в плоском интерфейсе.

Чаще всего они выглядят как кнопки призыва к действию (CTA) и выглядят аккуратно. Сайт Specular — хороший пример использования кнопок такого типа.

Основные рекомендации для кнопок

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

• Сделайте кнопки похожими на кнопки (см. Форма )
• Упростите взаимодействие пользователя с кнопками (см. раздел « Размер и отступы» ) .
• Пометьте кнопки тем, что они делают (см. Метка )
• Используйте цветовой контраст, чтобы побудить пользователей к действию (см. Цвет ) .

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

Форма

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

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

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

Размер и заполнение

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

Размер. Когда касание используется в качестве основного метода ввода для вашего приложения или сайта, вы можете положиться на исследование MIT Touch Lab , чтобы выбрать правильный размер для ваших кнопок. Исследование Массачусетского технологического института показало, что средний размер подушечек пальцев составляет 10–14 мм, а кончиков пальцев — 8–10 мм, что делает 10 мм x 10 мм хорошим минимальным размером мишени для касания.

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

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

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

Этикетка

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

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

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

Цвет

Выбирая цветовую палитру , не забудьте подумать о том, как цвета помогут пользователям ориентироваться и понимать действие :

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

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

Вывод

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