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

img--.jpg

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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


© 2017 sndesign-market.ru. Блог о коммуникационном дизайне