Илья Бирман. Пользовательский интерфейс. Прицеливание

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

Илья Бирман. Пользовательский интерфейс. Прицеливание

Трюк

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

Мой любимый способ увеличить область клика — с помощью псевдоэлемента. Это такой «вир­ту­аль­ный» кусочек разметки, который описывается в ЦСС и добавляется к элементу страницы. При этом клик по псевдоэлементу считается кликом по элементу. А значит, за счёт размеров псевдоэлемента можно увеличить размеры области клика самого элемента!

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

Добавим к ссылке пустой псевдоэлемент и дадим ему отрицательные вытяжки относительно размеров самой ссылки:

a {
  /* position: relative задаёт контекст, относительно которого спозиционируется absolute-псевдоэлемент */
  position: relative;
}
        ​
a:after {
  /* В нашем случае содержимое псевдоэлемента — content — пустое, но без этого свойства, хоть бы и пустого, псевдоэлемент не заработает */
  content: '';
  position: absolute;
        ​
  /* Вытягиваем абсолютный псевдоэлемент на 10 пк за границы родителя — самого элемента */
  inset: -10px;
}

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

Опасность и нюансы

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

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

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

Илья Бирман. Пользовательский интерфейс. Прицеливание

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

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

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

Илья Бирман. Пользовательский интерфейс. Прицеливание

@media (hover: hover) {
  a {
    /* … */
  }
        ​
  a:after { 
    /* … */
  }
}

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

Другие варианты увеличения области клика

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

Этот способ не так удобен, как трюк с псевдоэлементом: обычно у элементов есть свои падинги и маржины, которые придётся корчевать компенсаторами. А вот псевдоэлемент никак не влияет на стили самого элемента, кроме добавления безвредного position: relative.

Знаете ещё варианты увеличить область клика или интересные способы применения такого трюка? Делитесь в коментах :‑)

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы