как правильно настроить размер области клика
У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?
Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:
В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.
UX-решения
Рекомендации WCAG
Согласно WCAG 2.1 (руководство по обеспечению доступности web-контента), минимальный размер для тач-элемента должен быть 44×44 CSS пикселя. Размер не фиксирован, но его можно взять за основу.
Закон Фиттса
Это закон, который описывает поведение пользователей на основе физиологических реакций и используется при проектировании UX. Если не вдаваться в подробности, его смысл в том, что на большой элемент, расположенный рядом с другими элементами, пользователь нажмёт быстрее, чем на маленький и отдалённый.
На рисунке ниже показаны два варианта расположения кнопки. С левой стороны кнопка меньше и дальше от поля ввода, чем справа, — пользователю понадобится больше времени для взаимодействия с ней. С правой же стороны кнопка большая и находится близко к полю ввода, что помогает быстро сориентироваться.
Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.
Кнопки
При необходимости можно использовать элемент <button>
. Рассмотрим этот случай на существующей системе интернет-банкинга:
<div>Next</div>
Вот так выглядит эта кнопка:
При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.
Благодаря HTML-элементу <button>
, пользователь сможет:
- выбирать кнопку с помощью клавиатуры;
- нажимать на кнопку с помощью мыши, клавиатуры или касания.
Кроме того, его можно реализовать без JavaScript.
Кнопкам нужны внутренние отступы, и вот почему:
- тексту не должно быть «тесно»;
- большую кнопку проще заметить (Закон Фиттса).
Ссылки
Эта ошибка встречается в интернете довольно часто. Если перед вами меню навигации,
padding
должен быть у элемента <a>
, а не <li>
.<nav> <ul> <li><a href="#">Home</a></li> <li><nav href="#">Products</nav></li> <li><a href="#">Store</a></li> <li><a href="#">Team</a></li> </ul> </nav>
.nav-item { padding: 12px 16px; }
С таким кодом кликнуть можно будет только на текст:
Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы.
block
, inline-element
или flex
..nav-item a { display: block; padding: 12px 16px; }
Теперь вся область ссылки станет доступна для клика:
Гамбургер-меню
У гамбургер-меню должна быть достаточно большая область для клика, потому что в основном оно используется на сенсорных устройствах.
Предположим, что так выглядит область нажатия:
Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:
Можете попробовать самостоятельно в этом демо.
Чекбоксы и радио-кнопки
При наличии чекбокса или радио-кнопки пользователь ожидает, что он сможет нажать на него или связанный с ним текст.
На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:
Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for
:
<input type="checkbox"> <label for="option1">Option 1</label>
Или поместить input внутрь label:
<label for="option1"> Option 1 <input type="checkbox"> </label>
После нужно добавить padding для <label>
, чтобы область клика стала больше:
Сайдбар
Часто на страницах с категориями кликабельная область ссылок не распространяется на всю ширину элемента списка.
Чтобы исправить эту ситуацию, нужно:
- Удалить отступ из элемента
<li>
и переместить его в элемент<a>
, как в пункте «Ссылки». - Добавить
display: block
.
.nav-item a { /*Other styles*/ padding: 12px 16px; display: block; }
После того, как будут выполнены эти действия, получим:
Примеры
В недавнем обновлении Твиттера появилась проблема с навигационным дизайном, связанная с размером кликабельной области. Сначала она была ограничена только текстом, как на скриншоте ниже, но после получения обратной связи её исправили:
Заголовок раздела
В некоторых случаях есть необходимость добавить кнопку «Показать ещё» или стрелку на краю заголовка раздела. В примере ниже стрелку поместили в искусственный круг, чтобы правильно центрировать её.
Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.
Использование псевдоэлементов для увеличения области клика
Не всегда возможно сделать кликабельную зону больше просто за счёт изменения ширины и высоты элемента или отступа. В этом случае на помощь приходят псевдоэлементы.
Как это работает?
Идея в том, что псевдоэлементы принадлежат своему родителю, поэтому, когда мы создаём такой элемент с определённой шириной и высотой, он будет вести себя как область клика/касания/наведения своего родителя.
Ниже псевдоэлемент :after
добавлен к кнопке меню:
.menu-2:after { content: ""; position: absolute; left: 55px; top: 0; width: 50px; height: 50px; background: #e83474; /*Other styles*/ }
Квадрат 55px
специально расположен справа от элемента для наглядности.
Смотрите гифку ниже или попробуйте демо на Codepen.
Пример с нашего сайта
Недавно мы обнаружили на нашем сайте проблему: при попытке нажать на лайк с телефона на главной странице происходит переход на статью.
Чтобы решить эту проблему, нужно увеличить площадь клика за счёт паддингов, но при этом сохранить визуальное расположение элементов. Т.е. добавить положительный паддинг и отрицательный маргин, например. Или уменьшить внешние отступы.
Сейчас вот так:
Нужно вот так:
Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.
Один из вариантов для лайков (не самый красивый, но рабочий)
.post-votes { margin: 0 5px; } .svelte-15n67pa { padding: 9px; margin: -9px; } /* кнопки вверх/вниз */
Ещё круче вот так:
Код для правой кнопки (для левой зеркально):
padding: 14px 14px 14px 7px; margin: -14px -14px -14px -7px;
Адаптированный перевод статьи «Enhancing The Clickable Area Size»
Кнопки для сайта онлайн за пять минут
Кнопка является обязательным графическим элементом в дизайне любого сайта. Она украшает оформление, весьма полезна при пользовании, помогает активному ведению бизнеса. Ведь кнопка – это прекрасная возможность угадывать каждый шаг посетителя сайта. Чтоб удачно разработать ее внешний вид, надо применять режим онлайн. Поэтому, вашему вниманию будет представлено рассмотрение наиболее приемлемых и практичных сервисов, при помощи которых можно делать кнопки для сайта.
Где сделать кнопки?
Если разобраться, то путей создания кнопок есть очень много. Но лучшим будет обратить внимание на сервисы бесплатные, то есть, являющиеся онлайн-генераторами. С их помощью можно сформировать кнопки за минимальное количество времени, самостоятельно и без употребления специально предназначенных программ. Такого типа сервисы сочетают в себе огромные возможности в функционировании, доступность использования и отличное качество полученного результата.
Сервисами предложены сделанные шаблоны кнопок – их можно слегка проредактировать, употребляя различные функции и эффекты. На подобных сайтах кнопки делаются в два этапа. Первый этап – это выбор соответствующего стиля кнопки и шрифта текста. Второй этап — редактирование и обеспечение нужного внешнего вида при помощи функций. Хочется рассмотреть два, довольно продуктивных сервиса для делания кнопок.
Da Button Factory
dabuttonfactory.com
Сайт является весьма удобным для любого пользователя. На первой странице отражается комплект инструментов, при употреблении которых, можно вводить текст кнопки, определиться с видом и размером шрифта, выбрать нужный цвет и многое другое. Кроме этого, имеется возможность настройки всяческих эффектов кнопки – можно определить нужный параметр, сменить оттенок. В общем, сделать кнопку для онлайн сайта на Da Button Factory, не составляет особого труда.
В ходе делания кнопок отражается пример окончательного результата, поэтому можно легко отрегулировать цвет и форму. Сервис является англоязычным, но это нисколько не усложняет поставленную задачу. Все является очень простым, к примеру, «Size» — это размеры кнопки, «Color» — цвет, «Text» — это внутренний текст, «Font» — нужный шрифт. При помощи «Style» выбирают стиль уголков кнопки. «Border» предназначается для того, чтоб определить рамки кнопки, а «Download» позволяет загрузить сделанную кнопку на компьютер в выбранном вами расширении. Если дать оценку сервису, то это будет твердая четверка. Единственный минус – незамысловатость оформления и не особо широкие возможности в функционировании.
Cool Text
cooltext.com
Этот сервис тоже весьма прост и понятен для любого пользователя. Делание в нем кнопок для сайта, предполагает простейшие действия с графическими редакторами и имеющимися шрифтами. База сервиса включает больше, чем 1200 разного рода шрифтов, способных поддерживать кириллицу. Надписи на создаваемых кнопках можно производить и на русском языке.
Кроме всего перечисленного, здесь есть доступ ко всяческим эффектам, предназначенным для оформления внешности кнопок. Существуют эффекты стекла, геля, накладывания теней и образование изображений 3D. Можно создать кнопку, которая бы меняла собственный оттенок при наведении на нее курсора. Все клавиши, которые здесь имеются, работают согласно принципу, описываемому выше (предыдущий сервис). В ходе работы не предполагается особых затруднений. Этой программе также можно поставить твердую четверку. Кнопки красиво выглядят, функционируют очень просто. Вся программа располагает эргономичным дизайном, а ее широкие возможности разрешают производить обычные и, одновременно, красивые кнопки.
33 CSS 3D Buttons
Коллекция отобранных бесплатных HTML и CSS 3D кнопок примеров кода из Codepen, GitHub и других ресурсов. Обновление ноябрьской коллекции 2021 года. 4 новых предмета.
- Кнопки CSS
- Эффекты наведения на кнопку CSS
- Кнопки отправки CSS
- Кнопки градиента CSS
- Плоские кнопки CSS
- Кнопки закрытия CSS
- Кнопки загрузки CSS
- Кнопки воспроизведения/паузы CSS
- Эффекты нажатия кнопки CSS
- Библиотеки кнопок CSS
О коде
Кнопки режима наложения CSS 3D
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка 3D Fip
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка перекоса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Только CSS Кнопка с эффектом голограммы 3D Icon
Это кнопка без Javascript; когда вы наводите указатель мыши на кнопку, появляется трехмерный значок, похожий на эффект голограммы. Кнопку можно повернуть, наведя указатель мыши на кнопку.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка наведения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Тьма
Ответ: нет
Зависимости: —
О коде
Анимированные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Не нажимайте на меня кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Скейморфная кнопка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Скевоморфные кнопки с реалистичным 3D-эффектом
io/jouanmarcel/details/RwweKqb»>Скевоморфизм использовался в более ранних iPhone и благодаря этому стал популярным и для дизайна пользовательского интерфейса. В основном он устарел из-за плоского дизайна, поскольку скевоморфные элементы сложнее создавать, поддерживать и масштабировать на разных платформах. Вы заметите, что стиль не работает хорошо, когда вы меняете один цвет, например фон. Поиграйте с ним, узнайте, что происходит и как это делается, но я бы не рекомендовал использовать его на своем веб-сайте/в приложении. В любом случае, сейчас 2020 год, и скевоморфизм все еще отсутствует, в противном случае вам следует подождать хотя бы пару лет, пока он снова не будет считаться винтажным, ретро и модным.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка 3D
Одноэлементная 3D-кнопка с эффектами наведения и щелчка.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Большая желейная кнопка
Я старался максимально соответствовать первоисточнику. К сожалению, было несколько эффектов, которые я не мог реализовать с помощью CSS. В первую очередь тонкая текстура шума. Я рассматривал возможность использования наложения шаблона шума в кодировке base64, но чувствовал, что это обман. Я также не мог сделать настоящий эффект скоса на этикетке, так как CSS не имеет опции вставки тени текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Кнопка перспективы
Кнопка перспективы HTML и CSS с эффектом наведения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффект наведения на кнопку
Эффект наведения кнопки перспективы в HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Адаптивные 3D-кнопки
Довольно отзывчивые 3D-кнопки.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Нажмите на меня, пожалуйста: кнопки
Куча стилизованных кнопок. Проверьте их детали! Каждый использует один элемент