Пермская группа пользователей Linux

Сейчас мы поговорим про формы. Форма — это шаблон для ввода данных, состоящий из элементов: текстовых полей, выпадающих списков и прочего. Часто элементы форм называют словом «виджет». Этот термин довольно удобный, поэтому далее мы будет его использовать.
Наверняка все не единожды сталкивались с формами на сайтах. Как минимум, с формой регистрации, где надо ввести логин, пароль и адрес электронной почты. Поэтому все хорошо представляют, о чем пойдет речь. Сейчас мы перечислим все виды виджетов и поговорим об их назначении и возможностях.

1.1. Текстовое поле.

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

Именно текстовые поля часто стилизуют под Макинтош: http://www.apple.com/ Технология тут простая: у поля отключаются фон и границы, ему задаётся фиксированная ширина, а под него подкладывается изображение. Минус в том, что при медленном канале изображение может не загрузиться, и тогда поле будет выглядеть некрасиво.

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

1.2. Текстовая область (textarea).

Отличается от поля тем, что позволяет вводить текстовые данные с переносом строк. Может иметь скроллбар.

Тоже очень хорошо поддаётся изменениям. У текстовой области тоже можно изменять и отключать фон и границы, изменять цвет текста. Ей можно задавать произвольные ширину и высоту. Есть возможность изменять скроллбар, как, например, здесь: http://mdrag.nestor-online.ru/ (leo / leo)

Ниже я вернусь к этому вопросу, а сейчас просто кратко отмечу: не стоит менять стандартный скроллбар, если вы не уверены на 100%, что ваш вариант будет выглядеть интереснее и работать лучше стандартного.

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

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

Также можно использовать для выбора нескольких вариантов: http://www.yandex.ru (Настроить/Телепрограмма). Однако лучше для этих целей использовать чекбоксы, о которых мы поговорим позднее.

Выпадающий список поддается визуальным изменениям очень плохо. Ему можно только изменить цвет фона и текста. Браузер Internet Explorer не позволяет изменять границы виджета, а внешний вид кнопки и элементов списка вообще не поддаются изменению. Единственная возможность изменить внешний вид выпадающего списка — это полная эмуляция. Это трудоемкий и длительный процесс, который можно начинать только если это действительно крайне необходимо и имеет смысл. Кроме того, эмуляция не работает в браузере Internet Explorer 6 версии. Там приходится использовать стандартный вид.

Пример эмуляции можно посмотреть здесь (на второй странице формы): http://lego.nestor-online.ru/ (leo / leo)
Этот сайт состоит фактически из одной страницы и одной формы регистрации. На изготовление одной этой формы ушло несколько рабочих дней. Но здесь это имело смысл, потому что главная задача этого сайта — заставить пользователя зарегистрироваться. На других сайтах за регистрацией обычно сразу следует какая-то выгода, у пользователя появляются какие-то возможности: скачать музыку, сыграть в игру и так далее. Но здесь непосредственно после регистрации пользователь ничего не получает. Он всего лишь подписывается на участие в конкурсе, который будет еще не скоро, и вообще неизвестно, победит ли он в этом конкурсе. Поэтому форма регистрации должна быть максимально интересной, чтобы пользователю был приятен сам процесс регистрации.

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

3.1. Радиобаттон.

Этот виджет предназначен для выбора одного из нескольких вариантов. В отличие от выпадающего списка применяется там, где набор ограничен 4-5 опциями. Удобен тем, что пользователь видит сразу все варианты и может сделать выбор, кликнув всего один раз, тогда как в случае с выпадающим списком необходимо кликнуть минимум два раза (еще ведь надо будет покрутить колесо мыши или понажимать на кнопки вверх-вниз, чтобы найти нужную опцию).

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

3.2. Чекбокс.

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

Часто снабжается псевдоссылками «выделить все» и «снять выделение», пример: http://ancorenergy.ru/careers/

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

4. Выбор файла.

Это самый проблемный виджет.

Во-первых, он и в своем стандартном виде выглядит в разных браузерах совершенно по-разному. Это можно увидеть на примере страницы http://www.permlug.org/form/

Браузер Firefox не умеет растягивать этот виджет на 100% по ширине, это доступно только в браузерах Opera и Internet Explorer. А браузеры Safari и Chrome вообще не показывают поле как таковое — только кнопку и путь к файлу. Причем, путь к файлу написан черным цветом, который на темном фоне не виден. Но если указать белый или другой светлый цвет этому виджету, то в других браузерах, где у этого виджета есть поле, текст не будет виден на белом фоне. К счастью, есть возможность этого избежать: для каждого браузера приходится писать отдельные правила. А в случае с браузером Opera — даже для каждой версии.

Во-вторых, эмулировать этот виджет очень трудно. Мне пока неизвестен хороший способ эмуляции. Те варианты, которые реализованы сейчас на разных сайтах, либо работают не совсем корректно и аккуратно, либо слишком сложны. Например, в интерфейсе Gmail для загрузки файлов используется флеш-объект.

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

5. Виджет ввода даты.

Этот виджет является составным и обычно состоит из двух полей ввода (день и год) и выпадающего списка (для выбора месяца), но часто к нему добавляется возможность выбора даты из календаря. Посмотрим пример: http://zforms.ru/docs/widgets/date-input/
Календарь удобен для выбора ближайших дат, то есть около двух месяцев в каждую сторону от текущей даты. Однако если требуется, чтобы пользователь ввел дату своего рождения, то использовать календарь неразумно — пользователь будет очень долго кликать, чтобы выставить свой год.

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

6. Слайдер.

Слайдер (или ползунок) — очень специфический виджет. Он позволяет быстро вводить с определенной степенью точности большие числа и диапазоны. Обычно он используется во всяких кредитных калькуляторах на сайтах банков: http://www.vtb24.ru/personal/loans/auto/autostandard/calculator/

Но этим не ограничивается область применения слайдеров. Например, если пользователь заполняет анкету о своих вкусах и предпочтениях или выполняет психологический тест, где нужно на каждый вопрос отвечать числом по шкале, допустим, от 1 до 6. Пример такой анкеты можно посмотреть здесь: http://importal.nestor-online.ru/profile/questions_form.html (leo / leo)

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

7. Подпись (label).

Каждый вид должен иметь подпись. И обычно имеет. В большинстве случаев подпись расположена слева от виджета. Как, например, здесь: http://vidizokna.ru/registration/

Однако в небольших формах можно располагать над виджетами. Вот хороший пример такой формы: http://autokadabra.ru/register/. Как видите, такое расположение даёт свои преимущества: оно позволяет использовать более крупный шрифт и длинные поля ввода.

Часто виджеты сопровождаются не только подписью, но и комментарием — краткой подсказкой, которая помогает пользователю с первого раза правильно заполнить поле. Это может быть пример вида «+7 (987) 123-45-67» или «01.01.1901», чтобы пользователь понимал, какой формат ввода от него ждут. Это может быть небольшой текст: «Допустимые символы: A-z, 0-9, - и _ / длина — не менее 3 символов».

Чтобы не увеличивать пространство, занимаемое формой, но при этом предоставить пользователю развернутую информацию по каждому полю, можно использовать «хинты» — всплывающие подсказки. Как, например, здесь: http://zforms.ru/examples/form-feedback/

8. Страница.

Форма может состоять из нескольких страниц, которые пользователь как бы «перелистывает», заполняя их одну за другой. Важно всегда показывать пользователю, на каком шаге он находится и сколько впереди. Причем, желательно показать пользователю не только количество страниц, но и их сущность, чтобы пользователь заранее представлял, какие данные от него могут потребоваться.
Хороший пример можно увидеть в интернет-магазине Евросети: http://euroset.ru/order/

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

Поэтому большие формы лучше разбивать. Например, эту форму http://bond.nestor-online.ru/reg.html (leo / leo) можно было бы разбить на две: личная информация и контактная информация. Тогда не пришлось бы лепить кучу полей на одну страницу, можно было бы написать к каждому полю небольшое пояснение и выводить ошибку для каждого поля отдельно, а не одну на все, как сейчас.

9. Ошибка.

Формально сообщение об ошибке не является виджетом, но при этом является неотъемлемой частью любой формы.

Где-то выводится одна ошибка на всю форму: http://bond.nestor-online.ru/reg.html (leo / leo)
А где-то — отдельно для каждого виджета. Технологически это сложнее, но с точки зрения пользователя значительно удобнее, ведь индивидуальные сообщения об ошибках одновременно являются индикаторами: пользователю даже не всегда обязательно читать текст, чтобы увидеть, какое поле он заполнил неправильно и какую именно ошибку совершил. Ведь чаще всего ошибки совершаются по невнимательности: забыл переключить язык, поставил лишнюю цифру в номере телефона и т.п. И в этих случаях нам достаточно просто привлечь внимание пользователя к ошибочному виджету, чтобы он сразу заметил и исправил ошибку.

Ошибки можно выводить справа от виджетов: http://zforms.ru/examples/form-registration/
Или под ними: http://autokadabra.ru/register/
Или над ними: http://vidizokna.ru/registration/

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

10. Кнопка.

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

Очень часто дизайнеры совершают ошибку, изображая кнопки в виде ссылок. Или наоборот, изображают ссылки в виде кнопок. Например, здесь http://bond.nestor-online.ru/ (leo / leo) ссылки «забыли пароль» и «регистрация» выглядят как кнопки.

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

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

Пример неумелого обращения с кнопками (leo / leo):
http://chester.nestor-online.ru/ru/ — кнопка «войти» стилизована под Макинтош,
http://chester.nestor-online.ru/ru/reg.html — стандартная системная кнопка «далее»,
http://chester.nestor-online.ru/ru/inside/profile/ — плоские кнопки «изменить».

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

Кнопки должны быть одного типа, но не одного размера или цвета. Цвет и размер позволяют выделить кнопки среди прочих или наоборот заглушить. Вот хороший пример: http://mishanga.ya.ru/, здесь кнопки «пригласить», «заполнить» и «настроить» небольшого размера и белого цвета, а кнопка «загрузить фотки» — большая и синяя. Ведь главная задача этого сайта (этой страницы) — заставить пользователя залить свои фотографии, а значит, именно эта функция должна быть выделена.

Что касается возможностей стилизации, то у кнопок они самые богатые. Во-первых, кнопки отлично поддаются изменению внешнего вида стандартными средствами. А во-вторых, эмулировать кнопки проще, чем другие виджеты. Именно поэтому очень часто можно встретить формы, где все виджеты стандартного вида, а кнопки «кастомные» (custom), то есть стилизованные под общий дизайн сайта.

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

Я попытаюсь сформулировать некоторые правила, которые помогут принимать правильное решение в каждом конкретном случае.

1. Если задачи сайта не связаны напрямую с работой формы (как, например, работа фотосайта напрямую связана с формой заливки фотографий) — используйте стандартные виджеты.
2. Если вы не уверены, что сможете сделать виджеты более красивыми и функциональными, чем в MacOS и Windows Vista — используйте стандартные виджеты.
3. Если у вас на сайте много больших форм и при этом нет возможности эмулировать все без исключения виджеты — используйте стандартные виджеты.

Можно также сформулировать «антиправило»:
1. Если вы уверены, что внешний вид стандартных виджетов никак не подходит под стилистику вашего сайта — используйте стилизованные виджеты.

Давайте попробуем применить эти правила на практике:
А) Форма регистрации на сайте MyChesterfield: https://www.mychesterfield.ru/registration.shtml
1. Задачи сайта связаны с формой регистрации? Нет, потому что задача сайта — реклама сигарет Chesterfield.
2. Удалось бы здесь сделать виджеты по-настоящему удобными и красивыми? Нет, потому что здесь есть выпадающие списки, которые очень тяжело эмулируются.
3. Кроме формы регистрации на этом сайте еще много форм, где есть, помимо прочего, виджеты загрузки файлов, которые, как я уже говорил, крайне сложно эмулировать. Поэтому и здесь мы следуем правилу — выбираем стандартные виджеты.

Что касается «антиправила», то этот сайт тоже не проходит, потому что стилистика у него вполне абстрактная, то есть не связана напрямую с брендом или продукцией Chesterfield, а поэтому и стандартные виджеты тут вполне уместны.

Б) Форма регистрации на сайте http://lego.nestor-online.ru/ (leo / leo)
1. Задача этого сайта в том, чтобы привлечь пользователей к участию в конкурсе, то есть непосредственно связана с регистрацией.
2. Здесь ограниченное количество виджетов и все они достаточно легко эмулируются, поэтому их удалось сделать вполне удобными и красивыми (в том числе выпадающие списки).
3. Здесь всего одна форма и нет серьезных препятствий к использованию стилизованных виджетов.
Как видите, по всем трем пунктам этот сайт проходит проверку.

Более того, антиправило тут тоже срабатывает в пользу самодельных виджетов: дизайн сайта непосредственно связан с брендом Lego и линейкой продукции Duplo, предназначенной для детей от полутора до семи лет. Эта продукция отличается тем, что её элементы имеют довольно большой размер, яркие цвета и гладкие формы (чтобы дети не могли проглотить деталь или пораниться), поэтому виджеты были оформлены в этом же стиле.

Продолжение следует...