Cостояния кнопок в веб дизайне. Static, Focus, Hover, Click
Кнопка - это привычный элемент веб-дизайна, который нужен для взаимодействия с пользователем. Пользователь должен интуитивно понимать, что означает кнопка или клавиша (т.е какое действие выполняет). Для того чтобы кнопка могла рассказать вам больше о себе, она должна быть правильно оформлена: иметь подходящий цвет, размер и стиль, которые будут выражать ее состояние. Давайте взглянем на различные варианты кнопок.
CTA-кнопка (call to action) - важнейший элемент в вебе. Она должна призывать к действию, побуждать зарегистрироваться, оставить контакты, что-то купить и т.д. Лучше использовать такие кнопки в дизайне с закругленными краями - они больше привлекают внимание.
Кнопка первичного действия - служит сильным визуальным индикатором, который дает человеку возможность путешествовать по сайту: "Начать", "Читать далее", "Завершить" и т.п.
Кнопка вторичного действия - это возврат назад или отмена рядом с первичной кнопкой "Далее". Служит альтернативой первичному действию.
Кнопки третичного действия менее важны, но они не соответствуют серфингу по сайту и основным целям. Например, это "Изменить", "Добавить друга", "Подписаться на статьи" (если это не первичные кнопки).
В каких состояниях могут находиться кнопки
После совершения действия (наведение или клик) кнопка должна среагировать на это, чтобы пользователь мог понять, сработало ли его действие.
Активная и неактивная
Активная кнопка реагирует на клик, изменяя свое видимое состояние перед действием пользователя. Но она может быть неактивной, если при заполнении формы человек не ввел какое-то значение в поле.
Наведение курсора
На ПК пользователь должен знать, что на кнопку можно нажать. Поэтому при наведении курсора элемент может изменять свое состояние. На планшете и смартфоне анимация не нужна, так как пальцы не "зависают" над кнопками - эффекта наведения курсора нет.
Фокус внимания
Если у человека плохо с мелкой моторикой, то для него будет проще навигация в виде вкладок. При попадании на вкладку пользователь должен понять, что она кликабельна, но пока не нажата.
Фокус по умолчанию - голубоватое свечение по контуру элемента.
Нажатие
Это клик мышкой по кнопке, когда на нее наведен курсор. Такой элемент должен менять свое состояние.
- Normal - элемент ждет вашего действия.
- Focus - пользователь выделил кнопку.
- Hover - курсор наведен.
- Active - нажатие.
- Progress/Loading - процесс загрузки, "обдумывание" действия.
- Disabled - кнопка неактивная, ее нельзя нажать.
Как разобраться в типах и стилях?
При разработке интерфейсов, приложений и навигации по сайту необходимо учитывать несколько критериев.
Цвет
Цветовые решения должны быть доступны каждому пользователю и контрастировать с фоном. Также следует учитывать язык цветов, иначе несогласованность может запутать пользователя.
Например, зеленый фон на кнопке"Удалить", а красный на "Сохранить" собьет с правильного пути даже опытного пользователя.
Закругление углов
Это придает индивидуальность элементам. Остроугольные кнопки выглядят серьезно, а закругленные настраивают на легкий лад.
Радиус закругления должен быть кратным 2 - такие кнопки лучше сочетаются с другими закругленными элементами.
Градиент и тень
А вот гради