Проверка сайта на удобство нажатия пальцем по кнопкам

Что такое пальцеприятность?

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

Размер области касания пальца и размер кнопки на экране смартфона.

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

Какие элементы должны быть пальцеприятными?

Все элементы по которым нажимают пальцем.

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

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

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

Насколько это важно?

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

• Возрастает скорость работы пользователя. Чем быстрее он взаимодействует с сайтом, тем больше страниц он успеет посетить.
• Растёт фокусировка пользователя на контенте сайта. Пользователь не отвлекается на то, чтобы прицелиться и попасть по кнопкам. Он всецело погружается в процесс изучения сайта.
• Пользователь не промахивается и не раздражается.
• Визуально все привыкли, к большим кнопкам. Маленькие кнопки воспринимаются, как ошибка или недоработка на сайте. Это негативно влияет на его имидж.

Как исправить?

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

Что означает «Не все элементы отображены»?

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