1. Использование * и обязательные поля.
2. Будь прощающим с входами
3. Полезные сообщения об ошибках
4. Вот и все!

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

• используя '*' для обозначения обязательного поля,
• прощать с различными форматами входов, таких как кредитные карты, и
• предоставление пользователям полезных сообщений об ошибках.

Для этого мы рассмотрели ряд их форм, в том числе их профиль создания, изображенный ниже.

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

Использование * и обязательные поля.

Большинство пользователей поймут, что «*» обозначает обязательное поле, но не все. Форма IKEA, изображенная выше, не указывает, что означает «*», и должна включать «обозначает / обозначает обязательное поле». Люк Вроблевски, среди прочего, рекомендует, чтобы, если большинство полей было обязательным, вы должны просто указать это в верхней части формы и указать вместо этого дополнительные поля. Это руководство от CX Partners показывает, как это сделать. Эта статья также предоставляет вам несколько примеров того, как большие сайты делают это.

Еще один интересный пример с сайта ИКЕА - это когда вы добавляете платежный адрес:

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

Лучшим вариантом здесь будет просто объединить поля в одно поле ввода, сделать это обязательным требованием, а также объяснить, почему вы запрашиваете его (в случае проблем с доставкой и т. Д.).

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

Также стоит упомянуть о вышеупомянутом и, вероятно, показательно, что он не менялся ОЧЕНЬ долгое время, так как он запрашивает номер факса. Вздох.

Будь прощающим с входами

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

Телефонный номер является одним из таких примеров, который я мог бы написать как 0161 848 4300, но можно записать как 01618484300 или (0161) 848 4300 или +44 (0) 161 848 4300. Почтовые и почтовые индексы тоже могут совпадать с M17 1DZ можно также записать как M171DZ.

Однако сайт ИКЕА не позволяет этого:

Другой пользователь Formisimo также не разрешал использовать неразнесенные почтовые индексы, и это было второе по величине исправленное поле. Номер карты (который также не позволял вводить пробелы) был наивысшим, с очень большим количеством перефокусировок (когда пользователь должен вернуться в поле, чтобы что-то исправить) и удалял (возможно, чтобы удалить пробелы, которые он введено изначально):

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

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

Полезные сообщения об ошибках

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

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

Также убедитесь, что ваши сообщения ясны, поучительны и однозначны. IKEA не очень хорошо здесь:

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

Если это поле пароля, почему я могу ввести имя пользователя?

И это становится хуже:

Здесь говорится о минимальной длине, но большинство этого не увидит.

Нильсен группа произвела эти рекомендации по сообщениям об ошибках в 2001 году (хотя они все еще применяются), но для более обновленной версии, эта статья в Smashing Magazine о защитном дизайне. В статье предполагается, что лучшие сообщения об ошибках делают следующее:

• Сохраняет данные о посетителях
  Когда пользователь возвращается к форме для заполнения недостающих данных, веб-сайт должен сохранять заполненные поля заполненными. Посетитель должен иметь возможность исправить свои ошибки, не вводя заново всю форму.
• Выделяет ошибки с четкой графикой и текстом
  Исправление и заполнение записей должно быть очевидным и простым.
• Не заставляет посетителя чувствовать себя преступником
  Сообщения с полными заглавными буквами, говорящие посетителю о том, что «ВЫ НЕПРАВИЛЬНО ЗАВЕРШИЛИ ФОРМУ», не очень приятны.

Вот и все!

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

- Том Нью

Последний взгляд
Улучшение страховых форм. Пересмотр 31 страховой формы.

Похожие