Share This
Связаться со мной
Крути в низ
Categories
//Хотел кликнуть, но не смог: как правильно настроить размер области клика

Хотел кликнуть, но не смог: как правильно настроить размер области клика

Адаптированный перевод статьи «Enhancing The Clickable Area Size»

У вас бывало такое, что элемент на странице не реагировал на клик, пока вы не нажмёте на определённую его область?

Это происходило потому, что не весь элемент был кликабельным. Чтобы стало понятнее, посмотрите на картинку ниже — на ней видно, какой должна и не должна быть область клика:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 0260458 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

В этой статье, мы рассмотрим несколько распространённых проблем с UX, а в конце покажем наглядный пример с нашего сайта.

UX-решения

Рекомендации WCAG

Согласно WCAG 2.1 (руководство по обеспечению доступности web-контента), минимальный размер для тач-элемента должен быть 44×44 CSS пикселя. Размер не фиксирован, но его можно взять за основу.

Закон Фиттса

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

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

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 5615f8f - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Далее рассмотрим реальные примеры, в которых также учитываются рекомендации WCAG 2.5.5 и закон Фиттса.

Кнопки

При необходимости можно использовать элемент <button>. Рассмотрим этот случай на существующей системе интернет-банкинга:

<div class="navig next" onclick="validateLogin()">Next</div>

Вот так выглядит эта кнопка:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 4178f4e - Хотел кликнуть, но не смог: как правильно настроить размер области клика

При наведении курсора на кнопку он всё ещё выглядит, как указатель, и это нормально. Но если выделить текст, то появляется текстовый курсор. Такого не случится, если использовать правильные элементы.

Meta/conf Frontend Meetup

19 сентября в 12:00, Онлайн, Беcплатно

tproger.ru События и курсы на tproger.ru

Благодаря HTML-элементу <button>, пользователь сможет:

  • выбирать кнопку с помощью клавиатуры;
  • нажимать на кнопку с помощью мыши, клавиатуры или касания.

Кроме того, его можно реализовать без JavaScript.

Кнопкам нужны внутренние отступы, и вот почему:

  • тексту не должно быть «тесно»;
  • большую кнопку проще заметить (Закон Фиттса).

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika cbfbde5 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Ссылки

Эта ошибка встречается в интернете довольно часто. Если перед вами меню навигации, padding должен быть у элемента <a>, а не <li>.

<nav>   <ul>     <li class="nav-item"><a href="#">Home</a></li>     <li class="nav-item"><nav href="#">Products</nav></li>     <li class="nav-item"><a href="#">Store</a></li>     <li class="nav-item"><a href="#">Team</a></li>   </ul> </nav>
.nav-item {   padding: 12px 16px; }

С таким кодом кликнуть можно будет только на текст:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 4b3fa92 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Чтобы этого избежать, необходимо добавить padding к самой ссылке. Обратите внимание, что нижний и верхний отступ не будут работать по умолчанию, так как это встроенные элементы. Для этого можно использовать block, inline-element или flex.

.nav-item a {   display: block;   padding: 12px 16px; }

Теперь вся область ссылки станет доступна для клика:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 9ad3958 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Гамбургер-меню

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

Предположим, что так выглядит область нажатия:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika e4a42a0 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Попасть пальцем в такой маленький объект сложно. Но если увеличить эту область, то всё станет гораздо проще:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika c63a149 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Можете попробовать самостоятельно в этом демо.

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 6944b56 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Чекбоксы и радио-кнопки

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

На скриншоте ниже область клика привязана только к переключателю поэтому нажатие на текст ни к чему не приведёт:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 4062930 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Эту ситуацию можно решить, если в HTML связать label и input, используя атрибут for:

<input type="checkbox" id="option1"> <label for="option1">Option 1</label>

Или поместить input внутрь label:

<label for="option1">     Option 1     <input type="checkbox" id="option1"> </label>

После нужно добавить padding для <label>, чтобы область клика стала больше:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 18b0154 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Сайдбар

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

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 5bea7da - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Чтобы исправить эту ситуацию, нужно:

  1. Удалить отступ из элемента <li> и переместить его в элемент <a>, как в пункте «Ссылки».
  2. Добавить display: block.
.nav-item a {     /*Other styles*/     padding: 12px 16px;     display: block; }

После того, как будут выполнены эти действия, получим:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 0a20d87 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Примеры

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

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 89b66be - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Заголовок раздела

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

Как правило, интервал вокруг стрелки может быть сделан в CSS, с помощью свойства padding или width и height.

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 3b4648d - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Использование псевдоэлементов для увеличения области клика

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

Как это работает?

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

Ниже псевдоэлемент :after добавлен к кнопке меню:

.menu-2:after {   content: "";   position: absolute;   left: 55px;   top: 0;   width: 50px;   height: 50px;   background: #e83474;   /*Other styles*/ }

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 65fea1e - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Квадрат 55px специально расположен справа от элемента для наглядности.

Смотрите гифку ниже или попробуйте демо на Codepen.

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 69aeadd - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Пример с нашего сайта

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

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

Сейчас вот так:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 000dd32 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Нужно вот так:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 787f13a - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Как видно, кнопка осталась на своём месте, но область клика/тапа стала больше. При этом важно следить, чтобы области не пересекались.

Один из вариантов для лайков (не самый красивый, но рабочий)

.post-votes {  margin: 0 5px; }   .svelte-15n67pa {  padding: 9px;  margin: -9px; } /* кнопки вверх/вниз */ 

Ещё круче вот так:

hotel kliknut no ne smog kak pravilno nastroit razmer oblasti klika 6c2c046 - Хотел кликнуть, но не смог: как правильно настроить размер области клика

Код для правой кнопки (для левой зеркально):

padding: 14px 14px 14px 7px;  margin: -14px -14px -14px -7px;

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

Перейти к регистрации

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Свежие комментарии

    Рубрики

    About Author 01.

    Roman Spiridonov
    Roman Spiridonov

    Привет ! Мне 38 лет, я работаю в области информационных технологий более 4 лет. Тут собрано самое интересное.

    Our Instagram 04.

    Categories 05.

    © Speccy 2020 / All rights reserved

    Связаться со мной
    Close