Проблемы UX-дизайна: как настраивают область клика

Содержание:

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

Решения UX-дизайна: подробнее о каждом

Слушатели курсов программирования DevEducation получат более расширенную информацию по данному вопросу.

Что рекомендует WCAG?

В соответствии с требованиями WCAG 2.1, в которых перечислены рекомендации по обеспечению доступности информации на любом сайте, стандартные габариты для тач-элемента должны быть в пределах 44х44 пикселя. Данный размер не является фиксированным и обязательным, однако в большинстве случаев его берут за стандарт.

По закону Фиттса

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

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

У данной системы область клика достаточно большая. В основном такой ввод используется для устройств сенсорного типа. Если указателем мыши попасть в маленький объект еще можно, то пальцем бывает крайне затруднительно. Расширив этот сектор, вы упростите пользователям взаимодействие с сайтом.

Радио-кнопки (чекбоксы)

При формировании чекбокса клиент сможет кликнуть на него или на соединенный с ним текстовый контент.

Сайдбар

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

Проблемы UX-дизайна: как настраивают область клика

Правила настройки кликабельной области

Итак, поговорим о том, как настроить кликабельную область тега <a> или <button>. Существует 2 варианта применения перечисленных тегов:

  • <a /> для кликабельных ссылок;
  • <button /> для кликабельной кнопки.

Если вам требуется расширить <a />, пропишите к нему CSS display: block;. Далее вы можете варьировать область по размерам.

Чтобы расширить область текстовой ссылки, используйте элемент

a {

display: inline-block;

position: relative;

z-index: 1;

padding: 2em;

margin: -2em;

}

Прописанные отступы увеличат площадь, на которую вы можете кликнуть, чтобы получить ответ от сайта.

GTM – что это и зачем?

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

  • пользователь выполняет заданное условие;
  • установленная форма транспортирует конкретные данные в аналитическую систему.

Возьмем хотя бы тег обратного прозвона, который работает так:

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

  • специалист подсчитывает число заявленных
  • запросов от клиентов, попавших на портал из выдачи;
  • такими элементами программист может управлять сам;
  • каждый пользователь GTM с правами доступа к кабинету в праве управлять скриптами и отрезками кода без вносимых в него изменений.

Разновидности событий мыши

Условно события подразделяются на стандартные и собирательные:

  • Стандартные: mousedown (кликнута над деталью), mouseup (опущена под деталь), mouseover (всплыла над элементом), mouseout (отошла от элемента).
  • Собирательные: click (генерируется при клике, вернее, когда на одном элементе появляется mousedown, а после – mouseup), contextmenu (ПКМ над деталью), dblclick (двойной клик).

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

Единственное действие мышкой способно вызвать сразу ряд событий, к примеру:

  • Mousedown – клик;
  • Mouseup + click – отпускание.

Если действие стимулирует развитие сразу нескольких событий, их череда обязательно фиксируется при разработке сайта.

Настройка тега по кликам

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

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

При помощи прослушки вы сможете наладить отслеживание для:

  • клик на любую кнопку или другой элемент;
  • межстраничная ссылочная перелинковка;
  • отправки заполненной заявки, формы и т.д.;
  • подписку на обновления, переправку в корзину и т.д.

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

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!