Как не нужно создавать веб-формы

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

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

Но это совершенно не так.

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

Везде проставляйте ярлыки, во всех полях

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

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

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

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

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

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

Хотя мне, если честно, все равно.

Добавьте описание

Если хотите использовать ярлыки внутри поля, как-то позаботьтесь, чтобы они не исчезали совсем.

Ни в коем случае не позволяйте мне авторизоваться через соцсети

Ну серьезно, кому понравится такое удобство, как авторизация в один клик?

А если совсем серьезно, то, возможно, не стоит разбрасываться своими личными данными и скармливать их любому приложению, которое этого потребует. Согласен, с точки зрения безопасности это не самая перспективная возможность. Как показало недавнее закрытие Vine, все эти «сети», на которых мы обитаем, могут закрыться в один момент.

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

Обратите внимание, что Medium предоставляет оба варианта авторизации — через соцсети и с помощью электронной почты — и уведомляет меня, что будет делать с моими данными из соцсетей, если я их предоставлю.Создать карусель            

Создать карусель

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

Да, и раз уж вы предоставляете возможность авторизоваться через социальную сеть, то позаботьтесь также сделать следующее:

• оставьте вариант авторизации через e-mail на случай, если пользователь не желает передавать вам свои социальные данные;

• сразу скажите, что будете и что не будете делать с ними, отдельно сообщив, собираетесь ли публиковать что-либо через аккаунт пользователя без его формального разрешения.

Повсеместно в сообщениях об ошибке используйте термины вроде «некорректный»

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

).@kmstatonСкриншот предоставила Кристин Стейтон-Хайт (Создать карусель            

Создать карусель

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

Говорить пользователю, что введенное им в поле имени «некорректно», не только способно оскорбить, но и попросту неконструктивно, так как не объясняет, какой может быть «корректная» запись.

Да, запрашивайте у меня «имя пользователя»

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

Мы что, вернулись в 1990-е, или как?

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

MailChimp запрашивает имя пользователя, но здесь это имеет смысл. В конце концов, один-единственный хакер, взломавший аккаунт MailChimp, может разрушить весь бизнес.Создать карусель            

Создать карусель

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

Но на большинстве сайтов с их веб-формами это просто излишнее неудобство. Для тех же сайтов, где имя пользователя действительно необходимо, короткое объяснение вроде…

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

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

Любой ценой скрывайте от меня необходимую информацию

Вам когда-нибудь приходилось заполнить форму, нажать на «Отправить» и затем узнать какую-то важную вещь о том, как создавать пароль именно для этого сайта, с чем у вас случился облом просто потому, что вам об этом ничего не сказали?

Ну разумеется, я ведь просто сгораю от желания узнать, что сделал что-то не так при составлении пароля именно в тот момент, когда думаю, что я уже в своем аккаунте. Отличный план.

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

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

Не позволяйте мне видеть, что я ввожу в поле

Я понял. Кружочки вместо обычных символов, которые я ввожу в поле, нужны для того, чтобы никто не мог прибегнуть к старому как мир приему хакера — подглядеть поверх моего плеча.

Но ведь вы наверняка можете предоставить мне возможность рискнуть, правда? Вот он я, сижу себе в офисе, в замечательно уютном кресле, никто поблизости не маячит. Могу я хоть взглянуть на то, что набираю?

Улучшаем веб-формы

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

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

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

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

Автор: Джон Мур Уильямс

Источник: https://webflow.com/blog/how-not-to-design-web-forms

Перевод: Hi-Tech English


Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии