Удобные формы с помощью jQuery
Валидация
Иногда легко определить, что пользователь вводит неправильные данные. В адресе электронной почты не может быть русских символов. Почтовый индекс может состоять только из цифр. В номере телефона могут быть только цифры, скобки, пробелы и тире.
Для таких полей можно задавать ограничения, не позволяющие вводить пользователю неправильные данные.
-
– позволяет указывать, какие символы можно вводить в каждое поле в форме (например, «только символы», «только числа», «только числа, пробелы и тире» и т.д.).
-
– поддерживает проверку длины полей, регулярные выражения, сравнение значений в разных полях (например, пароль и подтверждение пароля).
-
– самый известный и продвинутый плагин для валидации.
Визуальная коммуникация в контекстно-зависимых полях
Visually Communicating Selection Dependent Inputs
Автор:
Источник:
Контекстно-зависимые поля требуют от пользователя ввести дополнительную информацию в зависимости от первоначального выбора, чтобы завершить заполнение формы. В статье (Контекстно-зависимые поля) я описал ряд способов решения этого вопроса.
В каждом из этих решений визуальная часть необходима, чтобы помочь пользователям понять, как их первоначальный выбор связан с последующими вопросами, на которые им нужно ответить. Когда визуальная коммуникация отсутствует, форма становится вксьма запутанной.
Рассмотрим пример с сайта Apple. Первый вопрос, на который нужно ответить в этой форме авторизации: Вы хотите войти с помощью Apple ID или AOL ID? После того как первоначальный выбор сделан, нужно ввести конкретный ID и пароль. Проблема состоит в том, что эта связь визуально не представлена. В результате, вы можете оказаться в такой ситуации: форма просит вас ввести пароль, но визуально кажется, что ошибка связана с выбором AOL.
Кнопка на 300 миллионов
The $300 Million Button
Автор:
Источник:
Как изменение кнопки увеличило годовой доход сайта на 300 миллионов долларов
Сложно представить форму проще: два поля, две кнопки и одна ссылка. Но оказывается, эта форма была препятствием, не позволяющим клиентам покупать товары в одном крупном интернет-магазине на сумму примерно 300 миллионов долларов в год. Хуже всего было то, что дизайнеры сайта даже не догадывались о том, что с этой формой есть проблемы.
Полями были «Адрес электронной почты» и «Пароль». Кнопки – «Вход» и «Регистрация». Ссылка – «Напомнить пароль». Это была форма авторизации на сайте. С такими формами пользователи сталкиваются все время. Какие у них могут быть с ней проблемы?
Размещение кнопок «Вперед» и «Назад» в формах
Previous and Next Actions in Web Forms
Автор:
Источник:
в Interaction Design Association была посвящена расположению активных кнопок в формах, разделенных на несколько страниц. Вопрос, лежащий в основе этого обсуждения, заключается в следующем: можно ли активную кнопку перехода к предыдущему шагу, размещать справа от кнопки перехода к следующему шагу?
Одна сторона поддерживала естественную организацию: действия, двигающие пользователя вперед, располагаются справа, а двигающие назад – слева (это верно для читающих слева направо). Другая сторона придерживалась мнения, что первичность действий, двигающих пользователя вперед, перевешивает это соображение и «вторичные» действия (которые используются реже) можно разместить справа от основного действия, даже если они переводят пользователя к предыдущему шагу. Нахождение заметной кнопки с основным действием на «линии огня» при заполнении формы, позволяет пользователю легче понять, что нужно сделать для завершения заполнения формы. Я проиллюстрировал это в изображении ниже.
Регистрация и вход в систему: ошибки в дизайне (часть 2)
8 More Design Mistakes with Account Sign-in
Автор:
Источник:
Разработка процесса регистрации и входа в систему, который не препятствовал бы пользователям, задача довольно сложная. Она может казаться простой в самом начале, но куча тонкостей может превратить то, что должно быть простым, в стресс для пользователей.
В предыдущей статье я обсудил восемь общих дизайнерских ошибок при разработке процесса входа в систему. В этой статье я опишу еще восемь ошибок, с которыми сталкиваются пользователи при попытке регистрации и при входе в систему.
Ошибка 9: Не сообщать требования к имени пользователя и длине пароля
На сайте , когда пользователь подбирает себе идентификатор, ему сообщается, что имя «должно содержать минимум одну букву, не может содержать пробелов, может содержать цифры». Но после того как пользователь попытается зарегистрироваться с именем из 6 символов, появляется сообщение об ошибке, которое на самом деле изменяет правила – «имя должно быть длиной от 9 до 50 символов».
Не ясно, зачем Cisco удивляет таким дополнительным требованием пользователей, выбравших для себя короткие имена. Ни один из пользователей, принимавших участие в нашем тестировании, не был рад узнать эту дополнительную информацию.
При создании новой учетной записи , пользователю доступна кнопка «Check Availability», которая проинформирует пользователя о требовании минимальной длины (6 символов). Такое решение лучше, чем на сайте Cisco, так как пользователю не нужно заполнять всю форму целиком, чтобы узнать, что учетную запись нельзя зарегистрировать.
поступает еще лучше, проверяя логин после каждого напечатанного символа. По мере того, как пользователь вводит символы, ему сообщается, что логин слишком короткий или содержит недопустимые символы.
Регистрация и вход в систему: ошибки в дизайне
Account Sign-in: 8 Design Mistakes to Avoid
Автор:
Источник:
Наряду с популярной линейкой сетевого оборудования, Cisco Systems предлагает своим посетителям купить кое-что еще: под маркой Cisco продается спортивная одежда и аксессуары, все, от курток до мячей для гольфа. Единственной проблемой является то, что для того чтобы увидеть вторую линейку товаров, вам нужно сначала зарегистрироваться.
Да. Вы правильно прочитали. Просто чтобы увидеть имеющиеся товары, нужно создать учетную запись, нужно заполнить форму из 45 полей на четырех страницах. Если после этого вы вернетесь обратно, то сможете увидеть лазерные брелки с логотипом Cisco.
Есть много других преимуществ, которые можно предложить пользователям, создающих учетную запись и входящих в систему. Вы знаете, кто пользуется вашим сайтом, как часто они его посещают и что делают на сайте. Вы можете хранить информацию, которая, возможно, потребуется им в будущем – история заказов или платежей. И вы можете предложить им информацию и сервисы, зарезервированные для лучших пользователей.
Тем не менее, по результатам юзабилити-тестов известно, что регистрация и вход в систему является постоянной проблемой. Это наиболее распространенная проблема, которая отпугивает пользователей от покупок в электронных магазинах. И увеличивает число звонков в службу поддержки.
Разработка процесса регистрации и входа в систему, который не препятствовал бы пользователям, задача довольно сложная. Она может казаться простой в самом начале, но куча тонкостей может превратить то, что должно быть простым, в стресс для пользователей.
Вот основные ошибки, с которыми пользователи сталкиваются, когда пытаются регистрироваться или входить на сайты.
Формы регистрации должны умереть
Sign Up Forms Must Die
Автор:
Источник:
Формы регистрации должны умереть.
Во введении к этой книге я рассказал о том, как устранять препятствия, мешающие пользователям начать работу с web-сервисом. Теперь вы готовы включиться и начать работу, но что же первым встречает вас на сайте? Форма.
Можно сделать лучше. На самом деле, я считаю, что можно рассказать людям, связанным с информационными технологиями, о том, как работает сервис и почему они должны зарегистрироваться, чтобы его попробовать. Но в то же время, можно это сделать и без обязательной регистрации на первом шаге.
Принципы восприятия форм
Gestalt principles of form perception
Автор:
Источник:
Гештальт-психология изучает психологические явления, рассматривая их как целостные структуры, а не как сумму образующих их отдельных элементов, дистанцируясь, таким образом, от более структурных подходов (с тенденцией анализировать психологические процессы как набор элементарных ощущений).
В 30-х и 40-х годах Макс Вертхаймер, Вольфганг Келер, и Курт Коффка начинают применять гештальт-психологию для исследования визуального восприятия. Их цель состояла в изучении общих процессов восприятия окружающего мира. В частности, они пытались объяснить, каким образом человек воспринимает группы объектов, каким образом может выделять части объекта. Исследования в этой области привели к формулированию законов восприятия. Некоторые из этих законов сейчас применяются в дизайне интерфейсов и взаимодействия.
Дизайн форм: почтовые индексы и адреса
Web Form Design: ZIP Codes & Locations
Автор:
Источник:
Человек должен проанализировать каждый вопрос, который задается ему при заполнении формы, сформулировать свой ответ и ввести его в соответствующие поля. Лучший способ ускорить этот процесс – не требовать обязательного ответа на все вопросы.
Например, если вы хотите определить географическое расположение клиента, вам достаточно узнать его почтовый индекс, а узнавать полный адрес не обязательно. Это значит, что пользователю не нужно будет заполнять четыре дополнительных поля: два поля с адресом, город и страну.
Однако если вам нужно будет отправить клиенту заказ, то одного индекса будет недостаточно. Хотя существует способ узнать адрес по почтовому индексу и номеру кредитной карты, я не знаю ни одного электронного магазина, который бы им пользовался. Исключение этих полей из формы не решает проблему. Значить, нужно придумать способ, чтобы побудить пользователя дать ответ.
Динамические подсказки в web-формах
Dynamic Help in Web Forms
Автор:
Источник:
Многие дизайнеры web-приложений стремятся уменьшить количество текста, использующегося в элементах интерфейса. Отчасти, это происходит из-за одного распространенного заблуждения – если для объяснения принципа работы требуется большая инструкция, то такой интерфейс обычно воспринимается как сложный, и, в таком случае, уменьшая количество текста, мы тем самым упрощаем работу. Есть и другое объяснение – пользователи просто не читают подсказки на экране, так же, как они не читают бумажные руководства (привет Джоэлю).