version 0.1
SOFIA
Система интерфейсов из 5 форм, обслужмвающая функции регистрации, авторизации, верификации и изменения контактных данных пользователей
Agenda
Реализация личного кабинета предполагает доступ к интерфейсам и функциональности ЛК, т.е. — добавление в текущую систему навигации по сайту точек входа, а так же навигацию внутри самого лк.

Система интерфейсов Sofia version 0.1 описывает как интерфейсы взаимодействия с функционалом регистрации/входа/верификации данных и их изменений, так и структурные корректировки в текущей навигации, а так же навигацию внутри самого лк. Ключевой особенностью которой служит разделение навигаций между сайтом/витриной и ЛК.
В документации используются обозначения и нумерации точек входа и форм, утвержденных ранее в Miro структуре проекта.
Точка входа 01
Menu_bar
-- //--
Добавление точки входа в Menu_bar для desktop, mobile адаптивной версии и mobile сайта. Элементы точки входа также уведомляют пользователя о статусе авторизованный/ неяавторизованный, в зависимости от чего отображают разных набор элементов навигации.
СПЕЦИФИКА

Реализация всех без исключения интерфейсов через Точку входа 01 — это реализация без pop-up'ов. Поэтому, в некоторых местах есть «особенности» такого подхода, как например оставшаяся в меню кнопка «войти» в интерфейсах самого входа (desktop) или дублирование вызова меню из точки входа (иконки) и меню ЛК (desktop и mobile). Это сделано для сохранения преемственности навигации между устройствами и сохранения целостности общего меню.
БЫЛО
СТАЛО

Интерфейс неавторизованного пользователя
Интерфейс авторизованного пользователя
Поскольку функционал и страницы лк не доступны для неавторизованных пользователей, именно в данной точке входа нет списка внутренней навигации по лк, тк без авторизации все пункты будут вести на буферные интерфейсы входа — «форму-2».

Поэтому для упрощения интерфейса используется только элемент — кнопка «Войти», которая ведет на «форму-2»
После авторизации, пользователю доступна навигация по лк. Для Desktop — это выпадающий список, когда пользователь находится на страницах витрины, а не самого лк.
MOBILE

Мобильные интерфейсы, как для адаптивной версии, так и для отдельной, используют ту же логику и набор элементов, за одним исключением — иконка вместо кнопки «войти»
Та же логика в доступе к навигации для ЛК. Неавторизованный пользователь по клику на иконку попадает на интерфейсы формы-2, аторизованному доступно выпадающее меню ЛК.
DEMOSTEND /
ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ
Интерактивный прототип работы точки входа Desktop.
сокращенный путь авторизации (все поля ведены корректно)

Вход / заполнение формы-2 / попадание в ЛК / выход из лк в интерфейс витрины / доступ к навигации ЛК / выход

Link
Интерактивный прототип работы точки входа Mobile.
сокращенный путь авторизации (все поля ведены корректно)

Вход / заполнение формы-2 / попадание в ЛК / выход из лк в интерфейс витрины / доступ к навигации ЛК / выход

Link
ЗАЧЕМ ТАК СЛОЖНО /
ПОЧЕМУ ЛК НЕ ОТДЕЛЬНЫЙ ИНТЕРФЕЙС СО СВОЕЙ НАВИГАЦИЕЙ?

Сквозная навигация, т.е. интеграция ЛК в текущую систему навигации необходима для «моментального» переключения между интерфейсами ЛК и Витрины, что необходимо для удобства использования функций «избранное» и «сравнение»
--
ФОРМА-2
Форма авторизации
Наиболее востребованная форма из всех. Именно она дает доступ к «форме-1», «форме-3» и интерфейсам восстановления доступа.

Авторизуется человек чаще чем восстанавливает пароль или регистрируется. Например не сохранив пароль по умолчанию в связке ключей браузера или используя другое устройство.
DEMOSTEND /
ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ /
КЛЮЧЕВЫЕ КОМПОНЕНТЫ
Интерактивный прототип формы-2 для Mobile.
Полный путь авторизации через email идентичный авторизации через телефон.

Вход / заполнение формы-2 / ошибка учетной записи / ошибка пароля / вход в ЛК (в целях демонстрации профиль пользователя, но может быть любая страница внутри лк)

Link

В скрипте отдельно не отображены стандартные сообщения об ошибках, формата: не корректно введен адрес или номер телефона, а также сообщения связанные с тайм-аутами ответов от сервера.
Набор ключевых интерфейсов для реализации Desktop формы.
Link
--
ФОРМА-1
Регистрация через Email или Телефон
Форма-1 доступна из интерфейса формы-2 и не имеет отдельного входа для Точки входа-01.

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

Верификация данных: email и телефона вынесена в интерфейс заполнения профиля.

Почему?
— верификация данных в процессе регистрации кратно усложнит цепочку интерфейсов, тк мы запрашиваем 2 параметра одновременно и телефон и email.
— верификация телефона на текущий момент невозможно, тк нет вендора смс уведомлений

+
данный сценарий (без верификации данных) используется при получении проекта незарегистрированным пользователем «Точка входа_06», что так же принесет базу лидов без 2х подтвержденных параметров.
DEMOSTEND /
ИНТЕРАКТИВНЫЕ ПРОТОТИПЫ /
КЛЮЧЕВЫЕ КОМПОНЕНТЫ
Интерактивный прототип формы-1 для Mobile.
Полный путь авторизации.

Вход / переключение на регистрацию / заполнение формы-1 / вход в ЛК (и здесь логично замыкать на профиль, чтобы человек видел, что его данные нуждаются в подтверждении)

Link

В скрипте отдельно не отображены стандартные сообщения об ошибках, формата: не корректно введен адрес или номер телефона, а также сообщения связанные с тайм-аутами ответов от сервера.
Набор ключевых интерфейсов для реализации Desktop формы.
Link
--
ФОРМА-3
Регистрация и авторизация через соц. сети
Регистрация и авторизация через соц. сети, доступна из формы-2 и формы-1. В обоих случаях их последовательность одинакова с одинаковым набором буферных интерфейсов самих соц. сетей. Замыкающей точкой служит страница ЛК — профиль.
Интерактивный прототип формы-3 для Mobile.
Полный путь авторизации.

Link
--
ФОРМА-4, 5 и 6 /
восстановление доступа
Верификация данных
Система интерфейсов актуальная для использования при смене авторизационных и контактных данных пользователя.

Так же участвует в интерфейсах восстановления доступа.

Она имеет кардинальные различия в интерфейсах и реализации, в зависимости от типа данных: email или телефон.
DEMOSTEND
* в интерактивных интерфейсах не отображены внесистемные переходы, такие как Push/sms уведомления с паролем или интерфейсы почтового приложения.
ВОССТАНОВЛЕНИЕ ПАРОЛЯ / ТЕЛЕФОН

через телефон без попытки авторизации (пользователь не вводил ни телефона, ни пароля)
Интерактивный прототип формы-4 и 5 для Mobile.
Полный путь.

Link
ВОССТАНОВЛЕНИЕ ПАРОЛЯ / ТЕЛЕФОН

через телефон при неудачной авторизации (пользователь вводил телефон и пароль) и телефон корректно подтвержден на этапе попытки авторизации
Интерактивный прототип формы-4 и 5 для Mobile.
Полный путь.

Link
ВОССТАНОВЛЕНИЕ ПАРОЛЯ / EMAIL

через email без попытки авторизации (пользователь не вводил ни email, ни пароль)
Usecase предполагает, что сервер отправляет на почту клиента не пароль, а уникальную ссылку для восстановления пароля
Интерактивный прототип формы-4 и 6 для Mobile.
Полный путь.

Link
ВОССТАНОВЛЕНИЕ ПАРОЛЯ / EMAIL

через email при неудачной авторизации (пользователь вводил email и пароль) и email корректно подтвержден существующий на этапе попытки авторизации.
Usecase предполагает, что сервер отправляет на почту клиента не пароль, а уникальную ссылку для восстановления пароля
Интерактивный прототип формы-4 и 6 для Mobile.
Полный путь.

Link
--
ФОРМЫ-4, 5 и 6 при
изменение и добавления контактных данных требующие верификации
Верификация данных
ИЗМЕНЕНИЕ EMAIL

стартовый интерфейс данного функционала — интерфейс профиля ЛК.
Интерактивный прототип формы-4 и 6 для Mobile.
Полный путь.

Link
ИЗМЕНЕНИЕ ТЕЛЕФОНА

стартовый интерфейс данного функционала — интерфейс профиля ЛК.
Интерактивный прототип формы-4 и 5 для Mobile.
Полный путь.

Link
Made on
Tilda