- О юзабилити простыми словами - http://www.birzool.com -
Функциональность кнопок
Posted By Ярослав Бирзул On 8 декабря, 2007 @ 4:49 In Теория | 23 Comments
Кнопка — инструмент очень важный, поэтому я пожалуй напишу о них еще раз. Но на этот раз говорить буду преимущественно о размерах кнопок. Наверняка каждого из вас довольно сильно раздражали маленькие кнопки, по которым еще нужно умудрится попасть. Такая себе тренировка на снайперские умения, да.
Вывод который сразу напрашивается сам — нужно увеличить размеры кнопок и всем будет красиво. На самом деле это далеко не так, и каждый случай нужно рассматривать отдельно. Ведь с размерами играться нужно очень осторожно — при неумелом использовании можно сместить центр общей композиции на макете, что чревато потерей интереса пользователя и соответственно его ухода с сайта.
Кнопка справа
Довольно часто используется в поисковых формах — там ей самое место, если судить по моих словам о кнопочной навигации [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/
Click here to print.
© 2007-2008. Блог Ярослава Бирзул о юзабилити веб интерфейсов.