Красивый focus-переход между web-элементами

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

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

У каждого элемента формы есть такой css-параметр или правильнее сказать псевдокласс – s, который позволяет задавать свечение “активному” элементу. Когда Вы для активирования web-элемента формы используете мышку, то вас мало волнует наличие этого самого фокуса, но когда вашим основным инструментом ввода является клавиатура, то недальновидность web-разработчика разозлит не по-детски. Как понять где ты находишься в данный момент? Обычно такие сайты я сразу закрываю.

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

Вот две подопытные формы:

У этих форм отсутствует css-псевдокласс s и понять какая форма активна – сложно. Стоит учесть, что в этой форме всего 4 элемента, а если их будет 20?

Если активной форме добавить свечение:

.form-2:focus {
  box-shadow: 0 0 2px 3px #78aeda,
              0 0 2px #78aeda inset;
}

то выглядеть это будет значительно лучше и многие посетители за это Вам скажут спасибо.

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

Добавить анимацию переходов между элементами формы поможет небольшой плагин – flying-focus.js (4 Кб.)

Для его использования добавляем рядом с закрывающимся тегом body html-код:

<script src="http://n12v.com/focus-transition/flying-focus.js"></script>

Как это работает можно увидеть на этом блоге. Просто пощелкайте на клавише TAB>.

Комментарии:

  1. fortresseo опубликовал комментарий 14 Октябрь 2013, 09:38 #

    Класная штука. Только в первом примере у меня текущее поле подсвечивается оранжевым контуром. А во втором плюс еще дополнительно серым, который смешивается с оранжевым и выглядимт грязновато. То есть в первом варианте все великолепно и подсветка и анимация.

    | Ответить
  2. itshaman опубликовал комментарий 16 Октябрь 2013, 05:35 #

    Вы, наверное, пользуетесь браузером Opera, который дополнительно подсечивает оранжево-желтым цветом

    | Ответить
  3. itshaman опубликовал комментарий 16 Октябрь 2013, 05:44 #

    Убрать это можно добавив css-параметр outline: none;

    | Ответить
Имя
e-mail
Сайт
Текст комментария: