Формы для людей

    Сейчас мы с вами поговорим о веб-формах. Я с высоты собственного невысокого полета успел накопить кое-какой опыт и жажду непременно им поделится. Все о чем пойдет речь ниже не является черепахой на которой стоят слоны. Речь пойдет о скотче на котором держится черепаха.

    Итак…

    Первое – Откуда ноги?


    Уважаемый друг, для начала, я бы посоветовал отложить средства для рисования и верстки форм. Начнем мы с белого листа. И первым, чем лучше всего руководствоваться, это ряд вопросов самому себе, менеджеру проекта, разработчикам и прочим людям, которые принимают участие в данном эпическом созидательном действии.
    • Для кого делается форма?
    • Какая информация нужна, что бы понять и заполнить форму?
    • Каков результат заполнения формы?
    • Какие у нас есть возможности?


    Для кого?


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



    Рассмотрим простейший пример. Регистрационная форма форума поддержки ПО от ООО «СуперМегаСофт» против формы регистрации для оформления заказа бриллиантов на сайте ювелирного электронного магазина «Бирюлька». Формы по идее об одном и том же. Но, в одном случае мы имеем дело с пользователями, которые интуитивно будут распознавать такие понятия как «E-mail», «Пользовательское соглашение», «Аккаунт», а в другом случае с волшебными организмами, которые возможно впервые будут слышать данные слова.

    Таким образом, мы откладываем ненадолго все эти данные, что бы в дальнейшем у нас фигурировали.

    Какая информация нужна?


    Пожалуй, это самый важный вопрос, на который следует ответить в полной мере.

    Любая форма, это: Элементы непосредственного взаимодействия (constrols) с пользователем и сопроводительная справочная информация. Давайте выведем для себя следующие правила:
    • Форма должна обозначаться. Заголовок, описание, пояснения. Пользователь, даже краем глаза взглянув на форму, должен сразу понимать, с чем ему придется столкнуться. Это правило.
    • Обозначения должны быть понятны. Используйте понятия в пределах одного языка, на котором написан весь сайт, или в пределах выбранной локализации.
    • Каждое поле ввода, текстовое поле подразумевает под собой ввод какой-то информации. Изначально размышляем с самой пессимистической точки зрения – перед нашей формой восседает тупица. Значит, он в упор не понимает, что писать, если даже там подпись «Имя», адресованная к этому полю. Подписывайте, в каком формате, количестве и на каком языке должна вводится в поля. Показывайте абстрактные примеры.
    • Обозначайте и разделяйте последовательность заполнения данным в форме. Разделяйте данные по типу на группы. Предоставляйте заполнение форм в несколько шагов, если она сложная (К примеру, когда форма включает в себя более 10 полей для заполнения).
    • Помогайте пользователям. Придумайте наиболее простые способы заполнения форм для пользователей. Помните, экономия времени посетителей напрямую повышает лояльность посетителей в дальнейшем.
    • Не переусердствуйте. Не надо забывать, что всегда есть возможность избавится от каких-либо элементов в пользу упрощения формы.


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

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

    Каков результат?


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

    Какие возможности?


    У вас есть все! Текущие возможности творцов неограниченны. У нас есть: Клиент и Сервер. Клиентом обычно называют того человека который совершенно не знает тебя, но он видит результат твоей работы и непременно хочет воспользоваться им. Хотя, если честно, все гораздо скучнее, в нашем случае мы будем пользоваться понятием «Форма», «Данные», «Сервер».
    Технологии. Рас уж мы говорим о Веб-формах, то у нас есть целое дерево возможных путей.
    • Обычная форма с подачей ответной информации по мере ее проверки на сервере.
    • Использование javascript для проверки и подачи информации в форме.
    • Использование Ajax технологии.

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

    Дизайн и все такое


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

    Форма в разрезе


    Рассматриваем элементы формы в идеале.

    Лирическое: Обозначения возведенные в тег <label> и привязанные к элементам вдвойне полезны, потому что автоматически фокусируют при клике на них элемент формы для заполнения.

    Поле ввода

    • обозначение (label)
    • описание
    • пояснение к вводу данных, пример
    • поясняющий текст при ошибочных данных (текст об ошибке)
    • Ограничение ввода/коррекция
      • Наборы символов и букв
      • Регистр симоволов
      • Минимальное/максимальное количество введенных данных
      • Режим «только для чтения»



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

    • Обозначение списка (label)
    • Описание
    • Список, и группы
    • Элемент, выбранный по умолчанию.

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



    • Обозначение (label)
    • Описание
    • Текст по умолчанию
    • Расширение функционала ввода данных (форматирование текста)

    Кнопка

    • Обознаничение
    • Режим блокировки нажатия (disabled)

    Списки радио-кнопок, переключателей (radio/checkbox)

    • Обозначение группы
    • Описание
    • Обозначение каждого из элементов (label)
    • Режим блокировки выбора (disabled)

    Элемент указания/выбора даты



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

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

    Пример



    Форма авторизации


    Такого рода формы используются чаще всего. Делать открытия уже поздно. Тем не менее.

    Поля и информация:
    1. Пояснительный текст. Это краткое повествование о том, что в данной форме происходит. Зачем она и к чему приведет. Считается, что об этом знает большинство. Для тех кто не знает ссылаемся на информацию, где подробно изложено о том, что получит пользователь если он сможет воспользоваться данной формой, предварительно зарегистрировавшись.
    2. Имя пользователя / E-mail / ID / Login. Обязательное поле идентефикации пользователя. Мы точно должны дать понять что именно надо вводить в данном поле. Самой частой ошибкой в данном поле делают разработчики, обозначая ее как Login, хотя там надо ввести E-mail в качестве идентификации. Или ID. Или же «Имя пользователя», хотя на первый взгляд это тоже самое что и «Login».
    3. Пароль/Код. Данное поле самое загадочное поле в мире. Могу только сказать, что его лучше всего делать такой длинны что бы среднее количество звездочек было на виду, а не пропадали из за короткой длинны за границами. Это продлевает жизнь.
    4. Возможность сохранять введенные данные на определенный срок в cookies. Обычно – галочка с обозначением (Запомнить меня/Сохранить данные/Запомнить). Очень важно, что не все пользователи понимают, что их тут не фотографируют и не помнят очертания. Пробуйте ссылатся на справочный материал
    5. Кнопка уничтоже отправки данных.
    6. Дополнительная информация, ссылки.

    Авторизация не требует ничего сложного.

    Проверить наличие данных в двух полях, и если что не так – напомнить об этом. Каким способом мы будем проверять – Вам решать. Либо после попытки авторизации выводить данные. Либо во время ввода проверять валидность введенных данных,…
    По завершению авторизации куда-нибудь перенаправить.

    Итого


    Очень надеюсь, что подготовленный материал помог вам, и мир от этого станет заметно добрее. Спасибо за внимание.

    Комментарии 37

      +2
      Отличная статья особенно стиль изложения, плюс вам.
      Коммент:
      В идеале форм нужно избегать, если не избежать то сокращать > упрощать > автозаполнять.
      Если нужно указать адрес в форме, то потрудиться и определить по ip место откуда пользователь заполняет форму и предложить как вариант по умолчанию. Если пользователь вводит емайл то проверить наличие адресата (вдруг пользователь допустил ошибку при вводе, был случай когда перепутали вместо gmail.com написали RU в итоге письмо не пришло, но при проверке наличия пользователя в системе на момент отправки формы можно было бы этого избежать предложив альтернативу).
        0
        Но! Обязательно надо помнить что любая автоматизация процессов такого порядка это жесточайшее перетягивание одеяла ответственности на сторону разработчика!

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

        По моей теории лучше всего образовывать и учить пользователя, нежели делать что-то за него.
          0
          Как показывает практика, не любят думать если что-то не очевидно то напряжение мозга = лишнее время+лешние нервы(например), а предложить варианты исходя из введенной информации или что-то сделать за пользователя с возможностью исправления в дальнейшем со стороны пользователя приветствуется
            +2
            Холивор: лень vs глупость.
              –1
              хм, не разглядел темы для холивара, а своими комментами лишь хотел дополнить сказанное в статье.
                0
                Частично согласен с вами.
                Однако… Многих будет сбивать с толку автоматическое переключение раскладки, замена .ru на .com, невозможность вбить в «числовое» поле символ, нестандартное поведение поля input, на которое натравили javascript для ввода данных определенного формата (телефон или дата — когда автоматически расставляются дефисы). Пример с вводам ключей в Win. Периодически хочется лишний раз нажать tab (а за меня уже это сделали) или нажать на "-" (а за меня опять это сделали).

                К чему это все? Однозначно ни к тому, что это все не стоит делать! Стоит! Однако иногда приходится потратить больше времени, сил и нервов («напряжение мозга = лишнее время+лешние нервы») на то что бы понять как работает «эта долбанная форма» (которая сама постоянно что-то делает и не дает мне ввести данные как я привык).
          +1
          > Если пользователь вводит емайл то проверить наличие адресата
          Это, простите, как? Можно проверить существование домена (кстати, gmail.ru вполне себе существует), но не адресата.
            0
            Единственное что можно придумать, это держать список наиболее популярных почтовых сервисов, и при наборе адреса схожего с ними, но не совпадающего, намекать на то что пользователь мог ошибиться. (например ксли он набрал @male.ru или @yanex.ru)

            Некоторые пытаются решить эту проблему через добавление в форуме поля «подтвердите email» — что считаю полнейшим идиотизмом. Никогда не видел чтобы кто-то её заполнял — все копируют адрес из первого поля
              0
              Первое не спасает от ошибок в написании того, что перед «@», второе — суть истинный маразм. Тоже всегда делаю «copy-paste».
                0
                есть способ на уровне почтового сервера — проверить наличие пользователя. Где то есть реализации данного алгоритма. Я видел.
                  +1
                  Угу, написать пользователю «подождите мы проверим существует ли ваша почта на этом сервере» :)

                  По-моему простых правил валидации на формат хватит, максимум варианты предлагать в процессе ввода, раз уж пользователь ввел после @ «gma» или «yan» предлагать ему gmail.com и yandex.ru причем не из каких-то там своих личных соображений, а тупо выбирая по существующей уже базе ранее зарегавшихся (и подтвердивших мыло, если подтверждение есть).
                    0
                    Нормальный админ уберёт эту возможность с почтового сервера. Чтоб спамеры не могли узнать какие адреса реально существуют.
                0
                1. проверяем синтаксис (регэкспом) на правильность
                2. проверяем существование домена (dns) / доступность домена (не в дауне ли он сейчас)
                3. проверяем существование аккаунта:
                Вычисляем MX запись, подключяемся к серверу и проверяем, примет ли он такой адрес

                Реализаций — куча, но причин, по которым существование e-mail'а может не правильно определиться — тоже очень много. Не стоит допускать такого.
                  0
                  плюс владельцу популярного почтового сервиса может надоесть что такой хост постоянно проверяет и он его забанит полностью
              0
              Если поле телефона, например, содержит несколько телефонов или заполнено в недопустимом формате — не останавливайте регистрацию с просьбами исправьте — вычлените Номер, привидение его к желаемому формату и добавьте в базу — не заставляйте людей думать они от этого себя чувствуют не ловко.
                0
                Хаха! :)

                1. 8-909-000 00 00 (моб), 222-22-22 (дом), 2333-2-33 (доб.22) офис
                2. моб.89090000000 2222222 дом. 2333233 добавочный 22 — офис

                Я думаю, вы понимаете, о чем я.
                Правильней предоставить пользователю заполнять согласно установленным правилам. Зачем вы пытаетесь подстроиться, когда надо сделать так, что бы пользователь захотел сам заполнить так, как надо?
                  –1
                  «Зачем вы пытаетесь подстроиться, когда надо сделать так, что бы пользователь захотел сам заполнить так, как надо? „
                  Чтобы выводить остальным пользователям в удобоваримом виде. Например: информация и контактные о компании в базе данных.

                  На основе уже веденных данных (страна и город вводить прежде телефон в данном случае) либо на основе ip, мы уже узнаем сколько цифр в телефоне и какой код города соотвественно можем проанализировать вводимые данные + доп., дополнительный и тд — конечное количество обозначений — интеллектуальный ввод.
                    +2
                    Так что, чтобы долбоеб не чувствовал себя долбоебом, будем для каждой формы создавать специализированный AI?!
                      0
                      >Чтобы выводить остальным пользователям в удобоваримом виде. Например: информация и контактные о компании в базе данных.
                      Думаю, что в большинстве случаев в формах вводят номера телефонов не для других пользователей, а для внутреннего использования администрацией, начиная от посылки смс-ок или перезваниваний саппорта до сбагривания баз. Наверное тут важнее удосьво пользователя, в конце-концов можно хранить вообще не преобразовывая, можно сделать несколько регэкспов, и можно нерапосзнанные фильтровать в ручную (возможно поплняя базу регэкспов)

                      >мы уже узнаем сколько цифр в телефоне и какой код города соотвественно

                      Какой у меня оператор мобильной связи тоже знаете? А если я по роамингу с другой страны?
                      0
                      >согласно установленным правилам

                      Кем установленными? В России одни традиции записи телефонных номеров, на Западе другие, а записывают (и даже публикуют миллионными тиражами) вообще согласно своим представлениям о правильности, комбинирую пару традиций и вводя что-то свое
                    –1
                    > constrols
                    Может controls или я не знаю сути?
                      –2
                      похоже на главу из книги для чайников
                        –2
                        Скорее основная идея с описанием правильного подхода, не более.
                        Но очень хорошо изложено и в интересной стилистике, была бы карма — дал бы плюс. :)
                          0
                          *имел в виду автора
                        +2
                        Человека который совершенно не знает тебя, но он видит результат твоей работы и непременно хочет воспользоваться им, обычно называют Пользователем. Клиент — Сервер это несколько другое понятие.
                          0
                          Ну, я размышлял немного по другому, извиняюсь за неправильную формулировку. Тэг irony был бы там кстати ;)
                          0
                          позитивные подсказки. а в целом статья понравилась. есть, что извлечь полезного.
                            +2
                            Статья имеет место быть, приятно изложено.
                            — Не думаю что в текстовом поле (textarea) стоит указывать текст по умолчанию — странно но неискушенных пользователей это частенько сбивает с толку.
                            — Считаю, что подсказки и примеры заполнения, если этого позволяет дизайн, лучше писать сбоку (ну или под) элементами ввода.
                              +2
                              Все зависит от дизайна
                              0
                              Мне статья тоже очень понравилась, большое спасибо автору, почерпнул многое. Так же понравилось оформление к статье.
                                0
                                Вот если б автор привёл пример HTML/CSS вёрстки всплывающих подсказок, было бы за статью «5+», а пока — просто «5» :)
                                  0
                                  Ну тултипов существует уже великое множество (как на основе популярных фреймворков типа jquery, так и в чистой реализации). Примеры тут излишни, имхо. А так гугл вам в помощь — для наипростейшего решения в ваш проект с вашими библиотеками
                                    0
                                    Как-нибудь в следующий раз, потому что не только тултипы можно тут описать, а развить тему до десятитомника.
                                    0
                                    спасибо за статью. понравилась идея с подсказками выскакивающими при наведении на поле, нужно будет попробовать реализовать у себя
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Так всё же приведете пример форм для ООО «СуперМегаСофт» и магазина «Бирюлька»? Интересно взглянуть:)
                                          0
                                          А фантазии не хватит? :) Уж поверьте ничего нового вы не откроете.

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

                                        Самое читаемое