Записки лондонского фрилансера

Юзабилити: увеличение кликабельной зоны

Рубрики: Верстка, Дизайн, Переводная статья, Фриланс

Статьи о принципах и правилах юзабилити – статьи полезные. К сожалению, 99% всех статей на эту тему повторяют или перефразируют Якоба Нильсена. Но есть и тот 1%, который несет в себе новое и интересное.

Журнал для дизайнеров SmashingMagazine.com в очередной раз обратился к проблеме юзабилити (http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/). Одна из идей статьи показалась мне вполне заслуживающей внимания и отдельного поста.

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

и как удобно кликать по ссылке, когда околоссылочное пространство достаточно велико

Чтобы увеличить пространство вокруг ссылки, можно либо увеличить размер самой ссылки, либо увеличить padding вокруг ссылки. Последнее достигается добавлением “padding” в стили ссылок:

<a href=”http://www.examplesite.com” style=”padding: 5px”>Example Site</a>

Паддинг можно вынести в CSS:

<style>

  div.nav a { padding: 5px; }

</style>

<div class="nav">

  <a href="">First link</a><a href="">Second link</a>

</div>

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