{"id":13563,"url":"\/distributions\/13563\/click?bit=1&hash=7a1c2765d377f463a7849b32148c496d0d86e5839a4216a090578d9381a4c980","title":"\u041a\u0430\u043a\u043e\u0439 \u0414\u041c\u0421 \u0432\u044b\u0431\u0440\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0440\u0430\u0437\u044a\u0435\u0445\u0430\u043b\u0438\u0441\u044c \u043f\u043e \u043c\u0438\u0440\u0443","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}
Дизайн
Glory Mlory

Как создавать профессиональные формы?

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

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

Вот несколько советов по созданию правильных форм:

Подберите ярлыки

Ярлыки над полями — это эффективный способ создания форм и ускорения их заполнения.

Кроме того, формы, разработанные таким образом являются более гибкими и лучше «реагируют» на различные устройства.

Сгруппируйте поля

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

Необязательные поля вместо обязательных

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

Пользователи чувствуют себя более комфортно, если они знают, что это поле необязательно заполнять, а не наоборот.

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

Разделить на группы

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

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

Сообщайте пользователям коды ошибок

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

Заключение:

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

0
7 комментариев
Написать комментарий...
Дмитрий Данилов

Ни о чем

Ответить
Развернуть ветку
Ян Корвин

И даже не добавить ничего ¯\_(ツ)_/¯ 
Вроде что-то написано, но как-то мелко и слишком банальные уж вещи..

Ответить
Развернуть ветку
Сережа Макаров

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

Ответить
Развернуть ветку
Андрей Крамарь

Про необязательные поля - это вообще, с какого потолка?

Ответить
Развернуть ветку
Валерий Крокус

Он художник, он так видит.

Ответить
Развернуть ветку
Ипполит Воробьянинов

Хороша холодная вода, когда хочется пить!

Ответить
Развернуть ветку
Марат Давлетшин

Вроде так все просто, но информация раскрыта. Спасибо

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Читать все 7 комментариев
null