Определение кликабельной области элемента.

Автор статьи: Louis Lazaris.    Оригинал:http://www.impressivewebs.com/defining-click-area/

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

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

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

Изображение.

На первый взгляд может показаться, что это меню достаточно простое – кликабельной зоной каждой кнопки по логике должна быть вся ее область. Но на самом деле это не так. В представленном примере только сам текст является чувствительным к клику, по этой причине при наведении указателя мыши имеет место довольно странный эффект, не тот, который ожидается – ближние к краям области кнопки не реагируют на клик мышью. (*Это касается и меню моего сайта (нижняя часть шапки – меню, содержащее рубрики). Но, что поделаешь – шаблон. После праздников обязательно исправлю это безобразие.):

Изображение.

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

Давайте рассмотрим более удачный вариант дизайна, в котором можно наблюдать несколько иной подход. Ниже представлен фрагмент навигационного меню сайта Design Pro:

Изображение.

Имея дело с навигационным меню сайта Design Pro, мы видим лишь текстовые ссылки, представленные в качестве элементов меню, а не кнопки, как в предыдущем примере (сайт WebProNews). В этом случае логично будет предположить, что кликабельным является сам текст элементов меню и небольшое пространство (несколько пикселей) вокруг него. Но дизайнеры немного расширили эту область, что может показаться несколько странным решением, но все же намного лучше, чем в случае с WebProNews:

Изображение.

Нечто подобное можно наблюдать и на сайте Dribble:

Изображение.

При первом взгляде на дополнительное навигационное меню (содержащее «Popular» — популярное, «Everyone» — для всех, и т.д.) может показаться, что мы имеем дело с обычными текстовыми ссылками. Но наводя на элементы этого меню курсор мыши, обнаруживается, что активная область элементов значительно шире, чем только текст, и распространяется намного ниже него:

Изображение.

Скорее всего, дизайнеры, участвовавшие в разработке сайтов Design Pro и Dribbble , имели веские причины, поступая таким образом. Вообще то, используемый в этих случаях подход значительно облегчает пользователю задачу определения области активации элемента меню, а с учетом того, что большинство людей заходят на сайт Dribbble повторно, то, скорее всего они нисколько не удивятся такому оформлению навигационного меню, имея опыт обращения с ним по предыдущим посещениям сайта.

Тем не менее, существует несколько разделяющихся мнений на этот счет. В некоторых случаях удобнее будет, если кликабельным будет лишь текст элемента меню. Иногда более удачным вариантом можно назвать ситуацию, когда при наведении курсора мыши на пункт меню, визуальный эффект активации элемента распространяется на всю его кликабельную область (как это реализовано в главном меню сайта Dribbble). Все зависит от конкретной ситуации и дизайнерского решения.

Временами попадаются и более изощренные случаи оформления. Как яркий пример такого случая можно назвать меню, при наведении мыши на элементы которого, они меняют цвет и слева от текста появляется маленькая пиктограммка. Бывают случаи, когда крайняя правая часть элемента меню хотя и является чувствительной к курсору мыши, визуально активируя элемент, но не входит в кликабельную область пункта меню. В качестве примера можно взять ссылочный блок «Cool Stuff & People I Like», расположенный в правой боковой колонке главной страницы сайта ImpressiveWebs (*Сайт автора статьи Луиса Лазариса.)

Нечто подобное можно наблюдать на сайте CSSwizardy при работе с правой боковой панелью (сайдбар):

Изображение.

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

Изображение.

Давайте рассмотрим противоположный случай. Взгляните на ссылки боковой панели, выполненной на сайте No Starch Press:

Изображение.

В этом случае активная зона пунктов меню минимальна и не расширена вправо. Здесь не применяется даже визуально незаметное расширение кликабельной области элементов меню, как это сделано в рассмотренных выше случаях, на сайтах Design Pro, Dribbble и CSS Wizardry. Вариант, когда кликабельными являются только текстовые ссылки, менее приемлем с точки зрения юзабилити.

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

Как уже упоминалось, наиболее приемлемым вариантом оформления кликабельного элемента можно назвать случай, когда при наведении на элемент визуально выделяется вся активная зона, при клике по которой активируется соответствующий пункт меню (*Таким образом оформлены кнопки переходов на смежные посты на моем сайте. Которые находятся под формой для комментариев.). Обычно такой подход применяется при реализации списков выпадающего меню, как это выполнено на сайте компонентов фреймворка Twitter Bootstrap:

Изображение.

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

Заключение

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

* Примечание переводчика.

Добавить комментарий

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