Регистрация | 7 шагов к созданию идеальной формы


06.02.2020 Время чтения - 4 минуты 1267

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

Помните ли вы последний раз, когда регистрировались в обычной форме?

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

Тем не менее, мы часто экономим время, регистрируясь через Google и Facebook.

Так всё-таки Google? Или Facebook?

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

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

Наша цель – минимизировать данные, которые мы хотим получить от пользователя при регистрации.

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

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

Приветствие пользователя

Поприветствуйте пользователя, прежде чем он войдёт или зарегистрируется.

«Здравствуйте, как вы?», «Доброе утро!», «Давайте начнем», «Рады вас видеть»

Давайте покажем пользователю, что мы заинтересованы в нем.

Показанное далее приложение для карпула не существует. Все изображения показаны в качестве примера формы регистрации.

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

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

Также можно сделать переход названия поля из его центра в область над ним.

Кроме того, полезно добавлять небольшие подсказки.

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

Рамка поля дополнительно становится красной при наличии ошибки и зелёной – когда всё правильно. Этот способ можно заменить крестиком или галочкой рядом с полем.

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

В моей ситуации, когда поле не заполнено, кнопку «далее» не видно. Однако, если мы не добавили такую ​​кнопку на клавиатуре, стоит добавить её над клавиатурой. Выглядит хорошо, когда неактивная кнопка становится зеленой после заполнения всех полей.

Если всё введено правильно — появляется зеленая стрелка, предлагающая перейти к следующему этапу.

В поле ввода пароля можно добавить кнопку просмотра введенного значения. Благодаря этому нам не потребуется второе поле для проверки пароля.

Конечно, чтобы значок был полезен, он должен быть разборчивым и видимым (открытый глаз предлагает показать пароль, а перечеркнутый глаз – скрыть).

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

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

После ввода номера телефона мы переходим к вводу кода. Мы должны добавить сообщение на экране: «Введите код из текстового сообщения. Подтвердите номер телефона».
Это даст пользователю понять, что нужно дождаться СМС.
Такая информация должна находиться на видном месте.

Предлагаю вводить код автоматически.

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

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

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

Пользователь получает сообщение «Спасибо за регистрацию» и информацию о том, что она прошла успешно.

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

Вот как весь процесс выглядит в полном объёме

Оригинал статьи.

Читайте так же: Неоморфизм — вызов UX/UI-дизайнерам

Неоморфизм — вызов UX/UI-дизайнерам