| { |
Автор: Строков Денис
§20. Красивые и удобные веб формы16 Декабрь 2009 |
|
Сегодня я хотел бы поговорить о «веб формах». О том, как лучше их делать и о удобстве их использования.Ежедневно мы заполняем приличное кол-во веб форм регистрация\обратная связь\служба поддержки и прочее. Вообще пользователи в большинстве своем не очень любят их заполнять т.к. тут действует принцип »я уже это заполнял». Итак, начнем сначала – какой должна быть веб форма ?
1. Форма должна быть удобная и доступная для пользователя, желательно с минимальным количеством полей. Очень часто регестрируясь на сайте, от которого мне нужно допустим скачать только один файл (а это могут делать только зарегестрированные пользователи), я ввожу свое Имя\Фамилию\Год рождения\Логин\Пароль, а порой еще обязательно ставят пункт «Немного о себе» – на кой черт все это нужно знать владельцам сайтов, если я все равно уйду с него после того, как скачаю нужный мне файл ? В итоге я просто трачу драгоценное время. Вывод – при создании веб формы, нужно ставить только нужные поля для заполнения, а второстепенные – либо делать необязательным, либо убрать их вовсе или же поставить, как дополнительные поля в профиле после регистрации (к примеру), где каждый пользователь уже по своему усмотрению может решить, стоит ли ему заполнять эти поля или нет. Сегодня я хотел бы рассмотерть и привести пример – обычной формы которую вы встречали не один раз, это форма для связи с техподдержкой или вообще администрацией какого-нибудь сайта.
Собственно вроде бы все понятно. Логин нужен для администрации сайта\хостинга, Имя для дальнейшей связи с вами, email также для дальнейшей связи с вами, тема вопроса и собственно его подробное описание. Что в ней не так? Изначально, все нормально и вроде понятно, но мы же будем стремиться к совершенству и обустроим нашу формочку.
Первое что бросается в глаза, так это пробелы между словами и полями для ввода. Чтобы определить какое слово к какому полю принадлежит, нужно провести глазами визуальную черту, что при заполнении формы, увеличивает продолжительность ее заполнения и удобство восприятия формы в целом. Такие формы имеют огромный минус при неумелой «резиновой верстке», когда форма растягивается на большом разрешении – выглядит убого. Переделываем.
Теперь форму можно заполнять не отрывая глаз от названия поля ввода и текста для нее. Продолжим (дальше от части идет мое мнение и я могу быть не прав, прошу это учесть), на мой взгляд форма выглядит «не очень ровно» и при заполнении формы с ипспользованием клавиши TAB прихиодится вовзращать взгляд обратно, что на мой взгляд не очень удобно и я предпочитаю оформлять веб формы в таком виде:
Форма выглядит более удобной и компактной нежели в предыдущем варианте, что помогает экономить драгоценное пространство на сайте. Также кстати обратите внимание на поля «Логин» и «Имя» они стали гораздо короче. При построении веб формы нужно учитывать также, что именно в нее будут вводить т.к. не имеет смысла делать допустим textarea для логина, на мой взгляд поля длинной в 20 символов для логина\пароля вполне достаточно, а вот для Темы Вопроса и его описания нужны поля гораздо больше\длиннее. Теперь поговорим о подсказках, в моем примере я думаю нужна подсказка только для email и формы вопроса т.к. не очень ясно.
Для удобства пользователя и администратора, я добавил выпадающий список со службами в которые можно обратиться. Это удобно для пользователя т.к. он уверен в том, что обратился в нужную ему службу и удобно для администрации т.к. легче разбирать различные заявки и сортировать их. Что касается e-mail адреса, теперь пользователь знает, что после заполнения им формы и ее отправки, ему придет письмо на email с дальнейшими инструкциями\ответами и что нужно проверить почту (как показывает статистика, мало кто пользуется почтовыми программами, большая часть обращается к почте через веб интерфейс). Теперь можно добавить немного «дружелюбности» нашей веб формочке. К примеру это можнос делать так:
Согласитесь, получилась довольно симпотичная и легкая для восприятия веб форма. Остались нюансы.
На мой взгляд очень глупо использовать в форме кнопку «Сбросить» или «Очисить» т.к. ей по идее никто не пользуется. Если я ввожу какие-то данные и понимаю, что они неправильные, я стираю сам всего одно поле для ввода, а не начинаю заполнять всю форму заного. Также кстати очень много косяков, допустим при регистрации или неправильном заполнении формы т.е. когда я полностью заполнил всю форму и отправил ее, мне выдают ошибку аля «некорректный e-mail» или же «такой логин уже существует» и приходится заполнять всю форму заного. Есть 2 пути решения, либо оставлять введенные данные и выводить ошибку, чтобы пользователь просто переоформил некоторые поля или же проверять «на ходу» правильность заполнения формы, что являеется очень удобным т.е. прям во время заполнения формы я вижу правильно ли она заполнена или нет.
На этом у меня все, если есть впоросы – задавайте в комментариях, постараюсь ответить или дополнить статью.
p.s. Кстати один %username% пнул меня и сказал, что я пишу самые самые азы и что все это знают. На мой взгляд может это и азы, но к сожалению их достаточно редко применяют на практике многие веб мастера, что очень печально.
Постовые:
Прикольные красочные футболки и просто интересные заметки на ArtMen creative blog.
Компания АртСаттера предостовляет услуги по автоматизации управления бизнес процессами.
ну вот кстати на мой взгляд вот эта форма проигрывает
раньше было удобней и проще, без лишних элементов))
так что, как среднестатистический юзер, я за третий вариант!!!)))
по мне так последний вариант формы хорош )
Для интерфейсщика нет понятия "по мне".
Опять же, довольно банальное превращение формы, не раз расписывавшееся. Да и предпроверка аяксом давно уже установившийся факт, повсеместно используемый.
Но можно еще улучшить:
1) Убрать поле логина. Если подразумевается система с пользователями, то тогда убираем и email – он вообще-то будет в профиле, все это можно не заставлять заполнять. Если же нужно давать возможность неавторизованным пользователям, то имя-мыла достаточно.
2) Заголовки сильно разделяют филдсеты на две отдельные формы, хотя это не так. Плюс лишняя подпись "категория" – мало того, что она дублирует заголовок-вопрос, так и "Причина обращения" было бы куда логичнее. Если же есть пункт "прочее", то нужно аяксом подгребать инпут, где можно вбить ручками эту самую причину.
3) Подпись "будет выслан бла-бла" совсем лишняя – иначе зачем требуется указать емэйл???
4) Помимо подробностей вопроса, в некоторых случаях (например, при "технических проблемах") можно делать инпут для указания ссылки, где произошла ошибка, или даже загрузку файла скриншота.
Если убрать лишние отступы, мешающие заголовки (лейблы сами о себе должны быть объяснением, для чего поля в форме) и даже добавить лишние поля из 4 пункта – то форма все равно станет удобнее и компактнее.
Но, конечно, клевые скриншоты под сафари, да.
(А интенс дебат с дискусом – так вообще извращение)
Я не" интерфейсщик" и высказал личное имхо и признаю, что могу быть не прав.
1) Стоит убирать, если используется система тикетов, вообще 2 последних поля будет достаточно, я этот случай не рассматривал.
2) Ты слишком углубился, я описывал азы, а не полное руководство по созданию форм (1 постом я бы тогда не отделался).
3) Мейл требуется в поле ввода достаточно часто, а вот письма на него не всегда приходят, скажу больше, только в 50% случаев приходят письмо – будет уместно все же указать, что на мейл будет выслано письмо.
4) Почти всегда высылают скриншоты по требованию хостера\\админа, сколько раз обращался через такие формы, скрины высылал очень редко, это скорее исключение, чем обыденность.
p.s. Чем не устраивает интенс дебат и дискус ?
Прав, Денис, я никогда не обращала внимания на формы на моем сайте. Поставила, какие есть и даже не задумывалась об удобстве. Работают, и ладно, мне есть чем еще заниматься…
Пометила для себя: поработать над формами ввода. Спасибо.
Вот и я о том же – "азы" без понимания сути того, что делаешь, абсолютно бесполезны.
По дискусу хорошо сказано http://ilnovikov.ru/2009/11/04/disqus/ хотя минусы очевидны были с самого начала запуска этих проектов и их клонов.
Т.е. это намек, что я не понимаю то, о чем пишу ? Хм…может быть ты и прав, но я остаюсь при своем мнении, я подвел под свои доводы основательную базу, а ты расписал отдельные моменты которые нужно рассматривать уже в отдельных случаях, а не в общих чертах.
По поводу инстанса – пока минусов не вижу, все работает отлично, будут косяки – уберу. Хз почему такого мнения о этих системах т.к. уже пару человек спросило, как поставить и настроить такую же шнягу (вижу минус в том, что у всех одинаковые поля для комментов получаются).
Это намек, что приведенный пример – сферический конь в вакууме.
Кстати Ярослав Бирзул, писал о веб-формах интересную статью)