Задачка: регистрация с фото и паспортом

Я предложил читателям телеграм-канала «интерфейсов без шелухи» такую задачку:

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

Регистрация с фото и паспортом

Интерфейс достаточно аккуратный, явно делал дизайнер. Но, думаю, есть что улучшить. Попробуем?

Спасибо всем, кто прислал свои варианты! Давайте разберём решение. Начнём с исправления проблем в существующем интерфейсе, а закончим альтернативными вариантами.

Будем исходить из того, что и личное фото, и фото паспорта действительно нужны сервису (допустим, юристы требуют). В противном случае решение было бы слишком простым ツ

Редизайн: личное фото

Непонятно, зачем на первом экране крестик, да ещё в левом верхнем углу. Если фото требуется для продолжения регистрации, какой смысл закрывать? Если это возврат к предыдущему шагу, то для него на Андроиде есть кнопка «назад».

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

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

Сфотографируйте себя
Предлагаем сделать селфи…
Селфи
…и делаем его

В поясняющем тексте было много мусора. «Пожалуйста» лишнее, «для продолжения регистрации» — тоже. Требование загрузки в формате .jpg — просто абсурд. А поскольку мы убрали вариант с загрузкой, от пояснения удалось целиком избавиться.

Редизайн: фото паспорта

Текст под заголовком повторяет очевидное — из заголовка и следующих двух блоков и так понятно, что надо сделать.

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

Крестик удаления фото микроскопический — сложно будет попасть пальцем. Да и зачем удалять фотографию? Если получилась неудачная, можно просто переснять.

Исправляем:

Сфотографируйте паспорт

Схематичные изображения страниц помогут открыть нужный разворот паспорта

Альтернатива: отдельные экраны

С первым экраном (личное фото) есть проблема: он предлагает лишнее действие. Можно без потери смысла фотографировать сразу на нём. Тогда логично и фото паспорта разнести по отдельным экранам. Такой вариант предложил Алексей Демьяновских (макеты участника с моими правками):

Селфи
Не предлагаем сделать фото, а сразу включаем фронтальную камеру
Паспорт — первый разворот
Рамки помогут правильно расположить паспорт
Паспорт — регистрация
Шагов много, не забываем показывать прогресс вверху
Все документы
Если какое-то фото не получилось, можно ткнуть на него и переснять
Заявка отправлена
Ура!

Альтернатива: длинный экран

Возможно, при регистрации помимо фотографий требуются и другие данные. Если приложение не умеет распознавать текст с фотографий, то придётся указывать и ФИО, и дату рождения, и номер-серию паспорта вручную. Это значит, что получается минимум три экрана: текстовые данные, личное фото, фото паспорта.

Можно упаковать всё в один длинный экран. Чуть менее наглядно, но зато сразу видно всё, что требует приложение для регистрации. И легко вернуться к предыдущему шагу. Пример из приложения Belka Car:

Персональные данные
Вводим персональные данные…
Документы
…и делаем фото

Ну или хотя бы сделать общий экран с фотографиями. Макет прислал анонимный участник:

Фото на одном экране

Первым экраном могут быть текстовые данные, вторым — фото документов

Если оставлять отдельные экраны, хорошо бы добавить индикатор прогресса («шаг 2 из 3»). На это указали многие участники, а Антон Лютиков отрисовал весь сценарий:

Регистрация с индикатором прогресса
Приложение распознаёт текст с фото документов и предлагает исправить, если что-то не так

Альтернатива: чат

Олег Бухтияр обратил внимание на вариант с «чат-ботом», который использует Яндекс.Драйв:

Регистрация через бота
Бот пишет короткими простыми фразами, как это обычно делают люди в чатах

Это, пожалуй, самый естественный по нынешним временам вариант. Бот пишет конкретные короткие указания, пользователь выполняет. Ошибиться почти невозможно. Отсюда и минусы:

  • невозможно вернуться к предыдущему шагу,
  • непонятно, сколько ещё шагов впереди.

Бизнес-логика: пропустить шаги

Слава Соколов справедливо заметил:

Должна быть возможность пропустить шаги с добавлением фотографий. Человек сможет пользоваться приложением, просто не все функции будут доступны. Актуально, если, например, паспорта под рукой нет.

Если разработчики не готовы «пустить» человека в приложение до проверки паспорта, стоит хотя бы сохранять уже введённые данные — и не требовать их, когда пользователь через два дня вернётся с паспортом.

⌘ ⌘ ⌘

Было ещё несколько предложений, которые не кажутся мне удачными:

  • Брать личное фото из паспорта. Паспорт действует 25 лет и больше, люди на фото мало похожи на себя нынешних. Да и фото там так себе. Если брать откуда-то готовое фото, я бы скорее предложил соцсети (заодно и ФИО получаешь автоматом).
  • Регистрация через Госуслуги (ЕСИА). Вообще, идея богатая. Коммерческие компании действительно могут использовать «Единую систему», чтобы идентифицировать пользователей (причём это юридически значимая идентификация). Но пока на Госуслугах зарегистрировано только 50% взрослого населения (в 2018 собираются довести до 70%). Так что регистрация через Госуслуги как единственный вариант не подойдёт.

Ещё раз спасибо всем участникам! Мы продолжим ツ

Решайте задачки на канале «Интерфейсы без шелухи»