Как создать форму регистрации Sign Up

Sign Up или форма регистрации является неотъемлемой частью пользовательского сценария любого сайта, программного обеспечения или любого приложения. Разберем основные этапы создания формы sign up на примере интернет-магазина "Идеи и мебель для маленьких квартир".

Основные персоны и пользовательские сценарии

Рассмотрим 3 персоны и их сценарии поведения на шаге регистрации

Сценарий 1. Вход через соцсеть

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

Сценарий 2. Вход заполнение формы регистрации

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

Сценарий 3. Вход по ссылке

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

Создадим макеты в Figma

Воспользуемся Figma - бесплатной программой для прототипирования. На новом листе выбираем Frame по Android, размером 360px * 640pх. Это будет наш первый макет. Визуализируем сценарий 1 и 2, в которых предполагается вход через социальные сети и привычную форму регистрации

Авторизация через соц сети и форму регистрации

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

Если пользователь не пользуется соц.сетями или не хочет, чтобы его профиль был доступен, ему предлагается ввести адрес электронной почты и пароль. Согласиться с правилами и условиями Приложения. Если данные введены корректно, то после нажатия на кнопку "Зарегистрироваться", на указанный e-mail отправляется ссылка для авторизации в системе. Если пользователь ввел неверный e-mail или пароль, появится информация об ошибке. Для отображения символов в поле ввода пароля, нужно нажать на иконку справа.

Вход в Приложение через "Забыли пароль?"

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

В результате мы получили макеты формы регистрации в Приложении с реализацией функционала основных пользовательских сценариев.

И еще моя работа на тему формы регистрации "Sign Up"