- О юзабилити простыми словами - http://www.birzool.com -

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

Posted By Ярослав Бирзул On 8 декабря, 2007 @ 4:49 In Теория | 23 Comments

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

[1]

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

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

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

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

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

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

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

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

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

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

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

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

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

3. Опрос

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

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

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

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

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

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

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

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

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

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

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

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


Article printed from О юзабилити простыми словами: http://www.birzool.com

URL to article: http://www.birzool.com/button-functions/

URLs in this post:

[1] Image: http://www.birzool.com/button-functions/

[2] кнопочной навигации: http://www.birzool.com/knopochnaya-navigaciya/

[3] киберкукушке: http://www.design-freak.com/2007/12/06/cybercuckoo/

[4] над внешним видом: http://blog.dotfix.ru/2007-12-03/im-freak-free-or-im-not-freak-free/

[5] рекламе онлайновых сервисов: http://s13.by/2007/12/07/offlayn-reklama-onlayn-proektov/

© 2007-2008. Блог Ярослава Бирзул о юзабилити веб интерфейсов.