Функциональность кнопок

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

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

Кнопка справа

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

Кнопка после формы

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

1. Авторизация

Я думаю нужды объяснять каждому, что такое авторизация нет? Грубо говоря это «войти на сервис». Т.е. довольно стандартные 2 поля для ввода логина и пароля, и кнопка «Войти». Я, например, предпочитаю, когда кнопка большая и расположена справа от полей. Примерно вот так:

Хотя я совершенно не исключаю возможности поставит кнопку и под двумя полями.

2. Регистрация

Регистрация на сайте является явным примером структуры «множество полей + чекбокс + кнопка». Из множества комбинаций стоит выделить всего две.

Первая: когда поле находится каждый на своей строке, соглашение с правилами на своей, и кнопка соответственно тоже.

Вторая: когда поля группируются по надобности, соглашение с правилами и кнопка на отдельной строке, но вместе.

Лично я предпочитаю второй вариант, но не исключаю использование первого — он тоже достаточно удобен, тут уже дело вкуса.

3. Опрос

Я думаю вы часто видели на разнообразных сайтах не менее разнообразные опросники (например — «сколько вам лет?» — более идиотского опроса и придумать нельзя, аудиторию нужно определять до создания сайта, а не после).

Структур как уже повелось всего две. Имеются ввиду адекватные структуры, а не чушь вроде «кнопка голосования над пунктами выбора» (эдакий опрос для мазохистов).

Первая: сверху пункты выбора, снизу кнопка

Вторая: только пункты выбора, без кнопки.

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

Куда же поместить кнопку под опросом? Оптимальный вариант: на некотором расстоянии от пунктов голосования, но всё же достаточно близко, чтобы можно было понять, что это единое целое. Располагать лучше по середине, или с правого края, т.к. нажатие на кнопку переводит на следующий шаг.

4. Кнопки очистки

Я, вообще, противник разнообразных кнопок очистки, по меньшей мере без предупреждения. Нажмешь нечаянно, и будет лень заново кропотливо вводить данные. Но если без кнопки отмены (или очистки) никак не обойтись — делайте её на порядок меньше, чем остальные кнопки, и располагайте на расстоянии от кнопки, которая ведет на следующий шаг.

Защита от дурака:

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

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

PS: А тем временем Миша Квакин пишет о киберкукушке, Аня Галкина размышляет над внешним видом, а Сергей Чаботько о рекламе онлайновых сервисов в офлайне.

• Похожие заметки:

  • Регистрация 2.0
  • Вкладки, табы, 2 ствола
  • Идеальные формы
  • Область реагирования