Задача:
Результат:
За три месяца в результате нескольких итераций мы реализовали интерфейс регистрации кассы для разных сценариев.
![Каталог сессий отображает список проводимых в системе регистраций касс.](https://userhouse.ru/i/project/result/images/01-ATOL_rezult_catlogue_hr.jpg)
Каталог сессий отображает список проводимых в системе регистраций касс.
![Регистрация состоит из нескольких шагов. Каждый шаг фокусирует пользователя на отдельной задаче, не отвлекая лишней информацией. Для примера приведена форма заведения нового электронного ключа.](https://userhouse.ru/i/project/result/images/02-ATOL_rezult_reg_key_hr.jpg)
Регистрация состоит из нескольких шагов. Каждый шаг фокусирует пользователя на отдельной задаче, не отвлекая лишней информацией. Для примера приведена форма заведения нового электронного ключа.
![Данные о точке продаж. Это контекстно зависимая форма, набор полей меняется в зависимости от типа точки. Такой подход позволяет показывать только важную информацию, скрывая все лишнее.](https://userhouse.ru/i/project/result/images/03-ATOL_rezult_reg_form_hr.jpg)
Данные о точке продаж. Это контекстно зависимая форма, набор полей меняется в зависимости от типа точки. Такой подход позволяет показывать только важную информацию, скрывая все лишнее.
![Экран подачи заявления о регистрации. Данные отправляются на сервера ОФД и проходят длительную проверку. Пока идет проверка можно выйти из процесса, и вернуться, когда она закончится.](https://userhouse.ru/i/project/result/images/04-ATOL_rezult_reg_data_checking_test1_hr.jpg)
Экран подачи заявления о регистрации. Данные отправляются на сервера ОФД и проходят длительную проверку. Пока идет проверка можно выйти из процесса, и вернуться, когда она закончится.
Процесс:
На первом этапе мы изучили процесс регистрации кассы. Сценарии регистрации мы оформили в виде структурной схемы. Благодаря этому можно наглядно увидеть все особенности процесса регистрации, согласовать их, быстро внести изменения и только потом начинать рисовать макеты. Разумеется, все нюансы схема учесть не может, но помогает значительно уменьшить число переделок на последующих этапах.
![](/i/project/pictures/ATOL/01-ATOL_process_scheme_test2_hr.jpg)
Однако, несмотря на наличие схемы, в процессе проектирования появлялись новые вводные, которые существенно влияли на последовательность шагов и их набор.
Например, для подписания документов заявитель использует квалифицированную электронную подпись (КЭП). В начальной постановке задачи был предусмотрен только один тип КЭП, но впоследствии добавились еще два. Также была добавлена процедура регистрации новой облачной подписи для тех, у кого еще нет КЭП.
Это привело к существенным сценарным ветвлениям. Пример интерфейсов при работе с разными типами КЭП:
![](/i/project/pictures/ATOL/02-ATOL_process_scenario_comparsion_test6_hr.jpg)
При ветвлении сценариев отличается не только набор полей, но последовательность и набор экранов.
Например, если у заявителя облачный КЭП, то часть полей автоматически заполняется данными из КЭП. Документы подписываются мгновенно непосредственно в интерфейсе самого сервиса.
Если же у заявителя КЭП на USB-носителе, то для подписания необходимо скачивать электронную копию каждого документа, подписывать его в стороннем приложении, а потом снова загружать его в сервис.
![](/i/project/pictures/ATOL/03-ATOL_process_scenario_comparsion_test6_hr.jpg)
Для продуктов АТОЛ внутри компании существует свой собственный UI Kit. Однако для нашей задачи этого набора было недостаточно. Основываясь на имеющихся стилях и элементах, мы доработали UI Kit и составили дополнительный набор, который был отправлен разработчикам.
![](/i/project/pictures/ATOL/04-ATOL_process_styleguide_test2_hr.jpg)
В итоге, чтобы проиллюстрировать не самый сложный с виду процесс, нам пришлось отрисовать 110+ экранов:
![](/i/project/pictures/ATOL/05-ATOL_process_collage_test5_hr.jpg)
Поделиться в соцсетях
Другие проекты по проектированию интерфейсов
![Маркет Красок](https://userhouse.ru/i/client/logos/_Market_Krasok_2_hr.png)
![Mail.ru Group](https://userhouse.ru/i/client/logos/_Mail_2_hr.png)
![Ultima](https://userhouse.ru/i/client/logos/_Ultima_2_hr.png)
![Happy Bottle](https://userhouse.ru/i/client/logos/_hb_2.png)
![Yota](https://userhouse.ru/i/client/logos/_Yota_2_hr.png)
![Forex Club](https://userhouse.ru/i/client/logos/_ForexClub_2_hr.png)
![ILP Agency](https://userhouse.ru/i/client/logos/_ILP_2_1_hr.png)
![VVP Group](https://userhouse.ru/i/client/logos/_VVP_2_1_hr.png)
![ТрансКонтейнер](https://userhouse.ru/i/client/logos/_TK_2_hr.png)