В свете довольно бурной дискуссии с людьми по поводу Идеальной регистрации ^[1] я решил продолжить серию записей в разделе «Идеалы ^[2]». Формат написания остался такой же как и в предыдущей заметке — а именно сборником «невредных советов». Обязательно воспользуйтесь ими если не хотите что-бы люди входящие на ваш сайт пугались и убегали в ужасе. Иногда эти советы будут дополняться не мение полезными изображениями, ведь текстовая информация вкупе с графической закрепляется на порядок лучше, чем просто текстовая. За сим — оставлю вас наедине с моими текстами.

^[3]

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

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

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

Давайте же закрепим на примерах. Самыми явными и частоиспользуемыми формами являются:

1. Формы поиска.

2. Формы регистрации.

3. Формы авторизации (входа на сайт).

С определением мы окончили, давайте приступим к моделированию ситуации.

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

Правильно расставляйте поля

Шаг 1. Первое задание

Итак: у нас есть по-умолчанию два стандартных поля, без которых поиск не может быть поиском. Это поле для ввода поисковой фразы и кнопка.

Не похоже на поиск — не правда ли? Продолжим.

Для начала нам нужно что-то написать на кнопке — не так ли?

А давайте напишем «тыыыщь» и всем будет красиво? Нет? Не будет? Точно, не будет. Может «искать»? Забудьте о приказательной форме надписей на кнопках. Не приказывайте пользователю, даже таким образом — он ведь не верный пес, которому вы кинули палку. Давайте напишем «Поиск». Думаю вполне уместный и распространенный компромисс.

Едем дальше. Мы уже знаем, что элементы интерфейса приводящие к следующему шагу должны находится справа ^[4], следовательно кнопку мы тоже должны поместить туда, ведь выдача результатов это несомненно следующий шаг в поиске.

Уже более похоже на поисковую форму, не так ли? Но возникает проблема — слишком много пространства для одного поля и кнопки, следовательно нужно экономить пространство. Сразу напрашивается разместить кнопку прямо напротив поля. Это и делаем. Вот только кнопку нужно располагать не как-то так, а именно вблизи поля, в которое вводится запрос. Именно этим нехитрым решением мы достигаем того, что 2 совершенно разных элемента воспринимаются как единое целое. Часто подобное описывается в книгах по юзабилити, это один из самых главных штампов, который следует запомнить. Можете взглянуть теорию близости ^[5] для этого.

Группируйте поля

Очень важный пункт, который просто нужно запомнить. Возьмем для примера среднестатистическую регистрацию на сайте (да, опять — очень наглядный пример).

Исходные данные: есть 6 полей (Логин, пароль, подтверждение пароля, e-mail, страна, и город), кнопка, и чекбокс для согласия с правилами.

Вот их вид в ряд. Вполне себе удобоваримо, но можно лучше.

Давайте улучшим тем, что сгруппируем поля по исполняемым функциям.

Таким нехитрым действием мы разделили регистрацию на 5 независимых друг от друга зон: зона логина, зона пароля, зона e-mail, зона местонахождения, и вспомогательная зона.

Расставляйте кнопки правильно ^[4]

В данном пункте рассказывать особо нечего, всё я уже рассказал. Пройдите по ссылке.

Общие положения

Просто сгруппированный список из нескольких пунктов посвященных разным элементам форм.

Поле

1. Если нужно разместить подсказку к полю — пропишите эту подсказку непосредственно в нем, и убирайте её при клике на поле.
2. Если полей много — группируйте их, очень поможет в плане удобства.
3. Если полей мало — располагайте их наиболее близко к друг другу, чтобы глаз пользователя их не «потерял».
4. Если есть такая возможность, и это не мешает концепции дизайна — не оставляйте поля по умолчанию пустыми
5. Если это поле каптчи — ставьте картинку справа от поля. Не под, не над, а именно справа. Экономьте пользовательский моск.
6. Если есть подпись к полю — располагайте его в непосредственной близости именно от этого поля. Еще лучше — группируйте или выделяйте как-либо визуально.
7. Делайте пояснительные надписи к полям, либо проясняйте для чего это поле непосредственно внутри него.

Кнопка

1. Если кнопка относится к полю — располагайте кнопку справа от поля. Вы уже знаете что нужно экономить и место и мозг пользователя.
2. Если кнопка относится к чему-либо — располагайте её в непосредственной близости к этому «чему-то», ведь никому не нравится рыться на странице в поисках.
3. Если кнопка относится к группе полей — располагайте её к низу от группы, но в непосредственной близости от полей, чтобы сделать визуальную группировку.
4. Если кнопка переносит пользователя на следующий шаг — располагайте её справа.
5. Если это кнопка поиска — не пишите там всякую чушь.
6. Если эта кнопка приводит к удалению, отмене и другим подобным действиям — располагайте её слева, напротив кнопки перехода к следующему шагу. Кнопку удаления же располагайте на видном месте, но так, чтобы она не сразу бросалась в глаза — пользователь не должен нажать её по ошибке.
7. Не употребляйте повелительное наклонение в надписях на кнопках. Пользователь не ваша любимая собачка, апорт не возьмет.
8. Если действие нельзя повторить — делайте кнопку после нажатия неактивной.

Выпадающий список

1. Если список большой — сделайте группировку элементов.
2. Не выдавайте список раскрытым, кому нужно — тот нажмет сам.
3. Если это список товаров — лучше разделите его на несколько списков.

Общие рекомендации для всех типов

1. Не мешайте разные типы форм, лучше создайте несколько визуальных групп из одинаковых (кроме случаев, когда уже произошла группировка по другим признакам)
2. Не применяйте к формам какое-то особенное оформление. Наверняка можно найти компромисс с вашим дизайном, и интегрировать стандартный вид поля удобно и красиво. Польза от этого такова: пользователь уже привык к определенному виду форм, и не захочет изменять своим привычкам ради вашего сервиса.
3. Не изменяйте стандартный шрифт на кнопках, не применяйте полужирность, или курсив, вообще и «для красоты» в том числе. Такой вид самодеятельности больше раздражает, чем помогает пользователю. Сужу по своему примеру.

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

Сила контраста

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

1. Memori ^[6]

2. Live4Fun ^[7]

3. Imhonet ^[8]

4. Отдыхали ^[9]

5. БобрДобр ^[10]

Пишите свои мнения и методики улучшения в комментариях. Буду рад.