Состояние кнопки ошибка

Cостояния кнопок в веб дизайне. Static, Focus, Hover, Click

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

CTA-кнопка (call to action) — важнейший элемент в вебе. Она должна призывать к действию, побуждать зарегистрироваться,
оставить контакты, что-то купить и т.д. Лучше использовать такие кнопки в дизайне с закругленными
краями — они больше привлекают внимание.

Кнопка первичного действия — служит сильным визуальным индикатором, который дает человеку возможность
путешествовать по сайту: «Начать», «Читать далее», «Завершить» и т.п.

Кнопка вторичного действия — это возврат назад или отмена рядом с первичной кнопкой «Далее».
Служит альтернативой первичному действию.

Кнопки третичного действия менее важны, но они не соответствуют серфингу по сайту и основным целям.
Например, это «Изменить», «Добавить друга», «Подписаться на статьи» (если это не первичные кнопки).

В каких состояниях могут находиться кнопки

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

Активная и неактивная

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

Наведение курсора

На ПК пользователь должен знать, что на кнопку можно нажать. Поэтому при наведении курсора элемент может изменять свое состояние.
На планшете и смартфоне анимация не нужна, так как пальцы не «зависают» над кнопками — эффекта наведения курсора нет.

Фокус внимания

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

Фокус по умолчанию — голубоватое свечение по контуру элемента.

Нажатие

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

• Normal — элемент ждет вашего действия.

• Focus — пользователь выделил кнопку.

• Hover — курсор наведен.

• Active — нажатие.

• Progress/Loading — процесс загрузки, «обдумывание» действия.

• Disabled — кнопка неактивная, ее нельзя нажать.

Как разобраться в типах и стилях?

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

Цвет

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

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

Закругление углов

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

Радиус закругления должен быть кратным 2 — такие кнопки лучше сочетаются с другими
закругленными элементами.

Градиент и тень

А вот градиента лучше избегать. Обычно он упрощает дизайн, а текст на кнопке становится нечитабельным.
Для добавления объема лучше наложить тени на элемент. Они создают ощущение, что кнопка «ушла» за
пределы страницы, что привлекает внимание пользователя. Также тень используется для обозначения
состояний кнопок — наведение мышки, выделение, нажатие (клик) и т.п.

Шрифты

Они должны быть разборчивыми и читабельными.

Как шрифт сделать более читабельным

• В начале строки используйте заглавные буквы.

• Хотя все буквы могут быть строчными: «читать далее», «заказать звонок».

• Можно делать все буквы заглавными или капитализировать начальную букву каждого слова, например: «Читать Далее». Но такой текст может быть сложно читаемым.

• Цвет текста должен хорошо контрастировать с фоном кнопки.

• Плотность шрифта должна быть средней.

Вертикальный отступ между текстом и фоном

Для пользователя важное значение имеет размер кнопки, который должен строиться по формуле:
размер шрифта + отступы вокруг кнопки. Например, надпись на кнопке имеет высоту 14 px, а сверху и снизу прибавляется по 6 px в качестве паддинга.

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

Горизонтальные отступы

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

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

Надписи

Большинство дизайнеров используют глаголы действия: «Сохранить», «Заказать», «Подписаться» и т.д. Слова «Назад» и «Подробнее»
— не глаголы, но в контексте интерфейса их также часто применяют. Хорошо работает связка «глагол» + «существительное»:
«Сделать заказ», «Подписаться на новости» и т.д.

Сенсорика

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

Размещение

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

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

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

Согласованность

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

Самые популярные стили

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

Сплошные кнопки — это элементы со сплошной заливкой.

Контурные кнопки не имеют заливки. А элементы на темном фоне называются призрачными.

У закругленных кнопок углы максимально скруглены. Но если вы расположили несколько кнопок с максимально
скругленными краями рядом — где-то вдалеке рвет на себе волосы UI-дизайнер.

Плавающая кнопка CTA — это дизайнерское решение для первичного действия.

Текстовая ссылка — простой вид кнопок. Не забывайте показывать, что надпись — это ссылка.
Выделяйте ее цветом, подчеркиванием, положением или работайте с самим текстом (например,
поясните максимально четко, «Далее» или «Подробнее»).

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

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

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

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

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

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

Правила идеальной кнопки

• Кнопки должны походить на кнопки, а не на другие элементы дизайна.

• Применяйте знакомые пользователям дизайн и цвета.

• Порядок расположения кнопок = вашему разговору с пользователем.

• Самый удобный горизонтальный отступ между фоном кнопки и ее текстом — 32px.

• Лучший и оптимальный вертикальный отступ — 18 px.

• Размер шрифта: 14 — 16 px.

• Если существуют закругления углов, то их радиус кратен 2.

• Никаких градиентов.

• В тексте используются глаголы.

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

Резюме

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

Любая кнопка, если она не заблокирована, может находиться в определённых состояниях, которые связаны с соответствующими псевдоклассами:

• :active — активная кнопка;
• :focus — кнопка, получившая фокус;
• :hover — на кнопку навели курсор мыши.

Далее рассмотрим эти состояния подробнее.

Активная кнопка

Это состояние возникает, когда на кнопку нажали, но ещё не отпустили (через клавишу мыши или палец на смартфоне). Для изменения стиля активной кнопки к селектору button или соответствующему классу добавляется псевдокласс :active. Его задача показать пользователю, что кнопка прореагировала на нажатие.

В примере 1 к кнопке добавлена тень через свойство box-shadow. У псевдокласса :active тень убирается, а сама кнопка сдвигается вниз и вправо на величину тени. Тем самым при щелчке по кнопке возникает эффект её утопления.

Пример 1. Использование :active

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
<style>
.btn {
padding: 0.5em 2em; /* Расстояние от текста до края */
background-color: #ff6600; /* Цвет фона */
color: #fff; /* Белый цвет текста */
border: none; /* Убираем рамку */
font-size: 0.9em; /* Размер шрифта */
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); /* Тень под кнопкой */
transition: 0.3s; /* Время перехода */
position: relative; /* Относительное позиционирование */
top: 0; left: 0; /* Исходное положение */
}
.btn:active {
box-shadow: none; /* Убираем тень */
top: 3px; left: 3px; /* Смещаем кнопку вниз и вправо */
}
</style>
</head>
<body>
<p><button class=»btn»>Кнопка</button></p>
</body>
</html>

Плавность «хода» кнопки достигается через свойство transiton, которое устанавливает время анимации. Если это свойство убрать из кода CSS, то кнопка будет смещаться мгновенно.

Фокус

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

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

Рис. 1. Кнопка, получившая фокус

Используя псевдокласс :focus и добавляя его к селектору button или соответствующему классу, можно установить стиль кнопки с фокусом. В примере 2 вокруг кнопки добавляется контур жёлтого цвета через свойство outline.

Пример 2. Использование :focus

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Расстояние от текста до края */
background-color: #3b4550; /* Цвет фона */
color: #fff; /* Белый цвет текста */
border-radius: 0.4em; /* Радиус скругления */
border: none; /* Убираем рамку */
font-size: 0.9em; /* Размер шрифта */
}
.btn:focus {
outline: 3px solid #f3ae36; /* Жёлтый контур */
}
.btn:active {
outline: 3px solid #f05347; /* Красный контур */
}
</style>
</head>
<body>
<p>
<button class=»btn»>Кнопка</button>
<button class=»btn»>Кнопка</button>
<button class=»btn»>Кнопка</button>
</p>
</body>
</html>

Если вместе с псевдоклассом :focus добавляется :active, то для правильной работы важно сохранить их порядок в коде CSS:

1. сперва идёт :focus;
2. затем идёт :active.

Кнопка при наведении курсора

Псевдокласс :hover отвечает за стиль кнопки при наведении на неё курсора мыши. У кнопки таким образом допустимо менять цвет фона, текста и другие параметры. Сама смена происходит мгновенно и для плавности можно добавить свойство transition, указав желаемое время перехода. В примере 3 при наведении на кнопку у неё плавно, в течение полсекунды, меняется цвет фона с тёмного на жёлтый.

Пример 3. Использование :hover

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Расстояние от текста до края */
background-color: #293948; /* Цвет фона */
color: #fff; /* Белый цвет текста */
border-radius: 0.4em; /* Радиус скругления */
border: none; /* Убираем рамку */
font-size: 0.9em; /* Размер шрифта */
transition: 0.5s; /* Время перехода */
}
.btn:hover {
background-color: #f89d13; /* Цвет фона при наведении */
}
.btn:active {
background-color: #f05347; /* Красный фон у активной кнопки */
}
</style>
</head>
<body>
<p>
<button class=»btn»>Кнопка</button>
<button class=»btn»>Кнопка</button>
<button class=»btn»>Кнопка</button>
</p>
</body>
</html>

Свойство transition у класса .btn работает в обе стороны — цвет фона меняется плавно при наведении на кнопку курсора и при его уведении. Если transition перенести из класса .btn в селектор .btn:hover, то при наведении на кнопку цвет фона будет меняться плавно, а при уведении вернётся к исходному значению резко.

.btn {
 background-color: #293948; /* Цвет фона кнопки */
}
.btn:hover {
 background-color: #f89d13; /* Цвет фона при наведении */
 transition: 0.5s; /* Время перехода */
}

При наличии других псевдоклассов опять же важен их порядок в CSS. :hover идёт всегда первым, затем уже добавляется :focus и ::active.

Итоги

• Кнопка может находиться в трёх состояниях: активная кнопка; получившая фокус; на кнопку навели курсор мыши.
• За стиль активной кнопки отвечает псевдокласс :active.
• За стиль кнопки, получившей фокус, отвечает псевдокласс :focus.
• За стиль кнопки, на которую навели курсор мыши, отвечает псевдокласс :hover.
• Важен порядок написания этих псевдоклассов в CSS. :hover идёт первым, :active пишется последним:
  1. :hover
  2. :focus
  3. :active

Перейти к заданиям

Ця стаття українською:

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

Чтобы спроектировать правильное взаимодействие, нам нужно взглянуть на историю и происхождение физических кнопок – прямого предшественника компонента интерфейса, который сегодня широко используется во всех цифровых продуктах. Кнопки потрясающие. Прикосновение пальца приводит в движение прибор, автомобиль или систему, даже, если пользователь не понимает лежащие в основе их работы механизмы или алгоритмы. В своей книге «Power Button» Рэйчел Плотник прослеживает истоки современной культуры использования кнопок и описывает, как нажатие кнопок стало средством цифрового управления, обещающее легкость, компактность и надежность.

«Вы нажимаете кнопку, а мы делаем все остальное», – так, посредством броского и четкого слогана, Kodak обратились к потенциальным покупателям своих фотоаппаратов.

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

Кнопки vs Ссылки

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

• Ссылки используются при переходе в другое место, например: страница «просмотреть все», страница профиля и т. д.
• Кнопки используются при выполнении действия, например: «отправить», «объединить», «создать новый», «загрузить» и т. д.

Состояние кнопки сообщает ее статус пользователю

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

Normal — сообщает, что компонент интерактивен и включен.

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

Hover — сообщает, когда пользователь навел курсор на интерактивный элемент.

Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.

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

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

Кнопки бывают разных цветов, форм и размеров

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

Стили сообщают о важности действия

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

Иногда нет кнопки «по умолчанию»

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

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

Не заставляйте меня думать

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

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

Согласованность повышает скорость и точность

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

— Якоб Нильсен

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

Сделайте кнопки достаточно большими для надежного взаимодействия

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

Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.

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

Проектируйте для доступности

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

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

Жесты становятся достаточно широко распространенными

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

Хорошая метка кнопки приглашает пользователей действовать

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

Хорошая метка кнопки приглашает пользователей действовать. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Вы хотите (добавить в корзину)?» или «Хотите (подтвердить заказ)?».

Избегайте использования «Да», «Нет» или слишком общих меток, таких как «Отправить».

Ok/Cancel или Cancel/Ok? Оба варианта хороши

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

• Размещая на первом месте действие OK, вы поддерживаете естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК на первое место.
• Размещая кнопку OK в конце, вы улучшаете юзерфлоу. Кто-то может поспорить, что OK, как кнопка «Следующий», переместит пользователя вперед. Если поставите OK в конце, вы поможете пользователям оценить все варианты, прежде чем предпринимать действия, и поможете избежать ошибок и поспешных решений. Apple ставит ОК на последнее место

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

Отключенные кнопки — отстой

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

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

О каких компонентах вы хотели бы узнать в следующей статье? Дайте знать в комментариях.

7 основных правил проектирования кнопок

Дизайн и проектирование лучших кнопок

---

Перевод статьи uxdesign.cc

Время на прочтение
6 мин

Количество просмотров 149K

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи

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

Советы по созданию кнопок

Кнопки должны выглядеть как кнопки

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

Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

Расположение и порядок

Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.

Не забывайте о порядке размещения и положении кнопок. Порядок, в котором идут кнопки, особенно если есть парные кнопки (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что основной акцент в дизайне сделан на основном или самом важном действии пользователя.

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

Надписи

Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.

Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?

Призыв к действию (CTA)

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

Форма кнопки

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

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

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

Типы кнопок и поведение

1. Объемная кнопка

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

Применение

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

Поведение

Объемные кнопки приподнимаются и заполняются цветом при нажатии.

Пример

Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

2. Плоские кнопки

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

Применение

В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

На панели инструментов

Расположение снизу, чтобы пользователь быстрее их нашел

Поведение

Пример

Плоская кнопка в диалоговом окне приложения на Android.

3. Переключатель

Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.

Применение

Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

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

· В группе должно быть не менее трех кнопок

· На кнопках должен быть текст, иконка или и то, и другое.

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

Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».

Пример

В Apple iOS переключатели использованы в разделе «Настройки».

4. Контурные кнопки

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

Применение

Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.

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

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

Поведение

Пример

На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».

5. Плавающая кнопка с выпадающим меню

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

Применение

Плавающие кнопки с выпадающим меню применяются для вызова функциональных клавиш.

Поведение

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

Выбор типа кнопки.

Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.

Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?

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

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

Состояния кнопок

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

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

Нормальное состояние

Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.

Состояние в фокусе

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

Нажатое состояние

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

Неактивное состояние

Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.

Преимущества скрытой кнопки:

• · Ясность. Отображается только то, что необходимо для текущей задачи.
• · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.

Преимущества использования неактивного состояния:

• Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.

Контроль размещения. Пользователь понимает, где в интерфейсе размещено управление и кнопки.

Заключение

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

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

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

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

1. По умолчанию

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

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

Также важно выбирать цвета с адекватным контрастом для большинства пользователей. Я использую приложение Contrast для тестирования моих проектов на соответствие WCAG 2.0:

2. Фокус

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

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

Отлично! С этой точки зрения, вот что нужно иметь в виду при разработке пользовательского стиля фокуса:

3. Раскрытие / Переключение / Выбор

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

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

4. Отключенные кнопки

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

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

5. Состояния наведения и активное

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

Теперь мы можем знать, какие эффекты будут пересекаться с другими состояниями:

Мы также знаем достаточно, чтобы изящно переходить между этими состояниями и подчеркивать их через цвет, масштаб и анимацию:

Это только верхушка айсберга…

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

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

Автор: Tyler Sticka

Источник: //cloudfour.com/

Редакция: Команда webformyself.