Любое мобильное приложение можно раскритиковать, было бы желание. Но мы так не делаем — слишком велик соблазн докопаться до визуальных решений. Поэтому используем инструменты, которые помогают увидеть продукт целиком и воспринять его глазами пользователя, а не внешнего наблюдателя «про красивенькое». Один из таких инструментов — сценарии.

Как использовать сценарии в разработке мобильных приложений. На примере «Помощника ОСАГО»

Собака Павлова

ИНТЕРФЕЙСЫ

2019
В.И.Шевченко, «Сломалась телега»
Легче всего показать силу сценариев в «приложениях одной задачи». Например, в «Помощнике ОСАГО» (iOS, Android), которое помогает водителям оформлять европротоколы. У него всего одна задача, но очень важная. А еще — это приложение с некоторой степенью риска. Пользователь может не дойти до финала, и тогда оба водителя, попавшие в ДТП, потеряют время (мы потратили 40 минут) и будут обязаны вызвать наряд ГИБДД. Сценарий как раз и покажет, удалось ли разработчикам создать стопроцентно проходимый путь.
В общем, почти идеальный для нашего материала случай.
Скажем больше: если вы разрабатываете приложение, выполняющее всего одну задачу, сценария будет достаточно, чтобы начать делать дизайн и даже разработку. А еще — заранее оценить, где пользователю будет неудобно, как он себя поведет на каждом этапе, что ему не пригодится. И все это — сразу, не написав и строчки кода.
В статье мы намеренно выбрали формат диалога, чтобы проявить в сценарии его сущность: протяженность во времени, сложность шагов, риски каждого шага. Поэтому у нас такой разговорный диалог. Вы можете использовать любые другие форматы.

Что мы ожидали от приложения и что получилось?

0. Приложение объяснит, как работает и что от нас понадобится при оформлении ДТП.
1. Приложение расскажет про правила поведения при ДТП, предупредит о необходимых документах и других требованиях к участникам.
2. Предупредит об обязательных условиях, когда мы можем и не можем оформить ДТП онлайн.
3. Попросит документы у обоих участников ДТП.
4. Зафиксирует повреждения.
5. Попросит описать, при каких обстоятельствах произошло ДТП.
6. Проверит всю введенную информацию, попросит подтверждение у обоих участников.
7. Объяснит, что нам делать дальше.
Примерно так и получилось. В приложении реализован именно этот сценарий. Но отличий тоже хватило.
Чем реальный сценарий отличается от вымышленного:
  • не хватает сценария обучения, который объяснил бы, как пользоваться приложением;
  • участники ДТП неравноправны — один оформляет, другой ждет и нервничает, все ли заполнено верно;
  • приложение не предупреждает, что оба водителя должны быть зарегистрированы в «Госуслугах»;
  • последний этап оформления ДТП проводится в «Госуслугах», а не внутри приложения.
Это были краткие предварительные итоги. А вот процесс.
В качестве вводных у нас был образец кофепойнта нашего потенциального заказчика и некоторое количество ограничений: использование стандартной кофемашины, общая площадь не более двух квадратных метров, приём платежей наличными и банковскими картами. Места установки — бизнес-центры и крупные торговые центры.
Вводные были, конкретной задачи не было. Добро пожаловать в нашу сумасшедшую реальность, где ценят не «решателей бизнес-проблем», а инициаторов изменений.

0. Обучение

Сценарий, который используется один раз.
Мы установили приложение, сидя дома, и хотим знать, что можно сделать, чтобы быть лучше подготовленным к оформлению ДТП. Вдруг есть какие-то нюансы? А может, мне стоит заранее загрузить все документы в приложении?
Зимой в разбитой машине не хочется тратить время и зарядку, чтобы знакомиться с новым интерфейсом. Лучше подготовиться заранее.

Ожидание

 — Я скачал приложение. Надеюсь, оно мне не понадобится, но на всякий случай пусть будет. Чем оно мне поможет?
 — Если никто не пострадал, вы собственник и все согласны друг с другом, вы сможете быстро оформить ДТП без вызова ГИБДД.
 — Без подводных камней?
 — Есть одна мелочь: вы должны быть зарегистрированы на «Госуслугах».
 — А как оформиться?
 — Сделайте вот это.
 — А как с документами? Что нужно заполнить?
 — Вот документы, которые нужны от вас, вот форма для информации, сюда загрузите фотографии.
 — И все, смогу уехать и получить деньги?
 — Не совсем, нужно будет написать обстоятельства ДТП на «Госуслугах».
 — Хорошо, зарегистрируюсь, пожалуй.

Реальность

Никакого обучения в реальности нет.
Этот сценарий разработчики не отработали.

1. Информированное согласие

Ожидание

 — Я попал в ДТП.
 — Оформлять будете?
 — Да.
 — Давайте проверим, что вы сможете это сделать через приложение. Ваше ДТП такое-то и такое-то?
 — Да.
 — Второй участник готов участвовать в оформлении через приложение?
 — Да.
 — У вас у обоих есть доступ к «Госуслугам»? Проверьте, кстати.
 — Проверили, есть.
 — Достаньте бумаги. Понадобятся права, полис страхования и что-то там еще. Всё есть?
 — Да, всё есть.
 — Проверим технические условия: у вас у обоих должны быть смартфоны с интернетом и работающей фотокамерой.
 — Есть.
 — Вы понимаете, что нельзя никуда уходить и перемещать автомобили, пока я не скажу?
 — Да.
 — Если что-то пойдет не так (например, у кого-то сядет батарейка), вам все-таки придется вызвать ГИБДД. Согласны?
 — Угу.
 — План такой: сначала то-то сделаем, потом то-то, а в конце то-то. Поехали?
 — Да.

Реальность

В приложение можно войти только через аккаунт в «Госуслугах». По-другому — никак. Это означает, что, если у вас нет подтвержденного аккаунта, воспользоваться «Помощником» вы не сможете. Зарегистрироваться на ходу не получится — сперва данные должны проверить в ФМС РФ и Пенсионном фонде РФ.
Для удобства приложение сразу спрашивает права и ОСАГО. Этот этап можно пропустить — потом попросит еще раз. Но если вы при входе заполнили данные, они сами подставятся в поля позже.
Интерфейс мобтльного приложения | SobakaPav.ru
Приложение разделено на три вкладки. Центральная вкладка — оформление ДТП. Нажимаем на нее — приложение просит доступ к геопозиции, а потом предупреждает, что работает не везде. Затем сразу начинается транзакция.
Отличия от сценария
  • Непонятно, будет ли участвовать в оформлении второй участник ДТП.
  • Неизвестно, какие понадобятся данные.
  • Про смартфоны и камеры приложение не предупреждает. А вдруг у одного из участников старый телефон или разбита камера?
  • Что делать сейчас и что понадобится сделать во время оформления, ни слова.
  • Приложение не предупреждает, что у второго участника тоже должен быть подтвержденный профиль на «Госуслугах». Иначе все зря. Но мы узнаем об этом позже.
Главное отличие — в этом этапе не участвует второй участник ДТП. Мы оформляемся, а он стоит рядом и нервничает. Вдруг мы как-то его обманем? Может, обстоятельства ДТП опишем неправильно? Или оформим неверно, а потом окажется, что оба покинули место ДТП.

2. Старт транзакции

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

Ожидание

— Вот код вашего ДТП. Он понадобится для разного. На всякий случай сохраните. Но сейчас важно другое: попросите второго участника присоединиться к оформлению ДТП по этому коду.
— (1) Прошу.
— (2) Присоединяюсь.
— Порядок. Все в сборе. Теперь назначим крайнего. Кто из вас виноват в ДТП?
— (1) Я виноват.
— (2) Ага, он виноват.
— Договорились.

Реальность

Приложение проводит транзакцию.
  1. Просит подтвердить, что собственниками автомобилей являются физические лица и у водителей, попавших в ДТП, нет разногласий в отношении происшествия.
  2. Предупреждает, что надо включить аварийную сигнализацию, выключить двигатель и поставить знак аварийной остановки.
  3. Спрашивает, пострадал ли кто-нибудь в ДТП.
  4. Удостоверяется, что в ДТП участвуют только два автомобиля, не пострадали третьи лица и их имущество, а у водителей нет разногласий по поводу обстоятельств ДТП, в том числе и видимых повреждений автомобилей.
После этого приложение переходит к документам.
Регистрация ДТП. Интерфейс мобильного приложения | SobakaPav.ru
Отличия от сценария
Отличий нет. Приложение ведет себя именно так, как мы и ожидали.

3. Документы участников

Ожидание

 — Пожалуйста, введите оба информацию из водительских прав.
 — (1) (2) Вводим.
 — ОК. Теперь — информацию о страховом полисе.
 — (1) (2) Вводим.
 — Проверяю… Да, вся информация корректна, можем двигаться дальше.

Реальность

Приложение предупреждает, что карточка участника, А будет отмечаться желтым цветом, а участника Б — синим. Становится понятно, что оформлять ДТП будут оба водителя.
Оформление ДТП. Интерфейс мобильного приложения | SobakaPav.ru
Если вы не ввели документы при входе, приложение потребует их на этом шаге. ФИО, дату рождения и права нужно ввести руками, а вот ОСАГО можно загрузить, если отсканировать QR-код на страховке. Приложение сразу проверит, зарегистрирован ли полис в базе РСА и есть ли совпадения данных по транспортному средству.
Потом все то же самое нужно сделать за участника Б: ввести его ФИО, дату рождения, права и страховку в своем смартфоне. Приложение попросит скинуть специальную ссылку участнику Б, чтобы тот подтвердил верность данных у себя на смартфоне. Можно показать QR-код. По этой ссылке участник Б перейдет на портал ЕПГУ, где ему сперва понадобится авторизоваться и только потом подтвердить, что его данные ввели верно.
Затем приложение просит указать время и место ДТП, указать свидетелей, дать общий план их автомобилей, фотографии госномеров, ФИО, места жительства и номера телефона.
Отличия от сценария
  • Участник, А должен заполнять информацию за двоих — это может нервировать участника Б, потому что неизвестно, что он там напишет.
  • Участник Б тоже должен быть зарегистрирован на «Госуслугах» — это сюрприз.
Потом приложение просит оформить свидетелей.

4. Повреждения автомобилей

Ожидание

 — Теперь прошу каждого зарегистрировать повреждения своих автомобилей. Нужны будут фотографии и названия деталей. Вот инструкция, как это сделать, будьте внимательны. Если тут ошибетесь, будет то-то и то-то.
 — (1) и (2) Фотографируем, вводим буковки… Уф, вроде всё.
 — Посмотрите, что получилось. Все верно?
 — (1) и (2) Ну, по моей машине все верно.
 — А машины друг друга проверьте еще, пожалуйста? Вот информация.
 — (1) и (2) И тут все верно.

Реальность

Приложение просит участника А:
1) выбрать поврежденные детали;
2) сфотографировать каждое повреждение;
3) сфотографировать регистрационный знак;
4) сфотографировать общее расположение автомобилей на фоне неперемещаемой окружающей инфраструктуры.
Регистрация поврежденных частей автомобиля при ДТП. Интерфейс мобильного приложения| SobakaPav.ru
Приложение без предупреждений отправляет фото в Российский союз автостраховщиков.
    Затем то же самое делает участник Б на смартфоне участника А: указывает поврежденные детали и фотографирует свой автомобиль.
      Приложение не просит обоих участников ДТП подтверждать заполненные данные.
        Отличия от сценария
          • Участник Б должен пользоваться смартфоном участника А.
          • Приложение не просит участников подтвердить повреждения.
          • Неизвестно, что произойдет, если кто-то неправильно зафиксирует повреждения.

          5. Обстоятельства

          Ожидание

           — Теперь нужно написать много букв для страховой: как обгонял, как подрезал… Делать нужно правильно и аккуратно, а не то будет то и это. Вот кое-какие пояснения.
           — (1) и (2) Пишем. Написали.
           — Проверяю… И правда написали. Теперь друг друга проверьте.
           — (1) и (2) Всё так, всё так.

          Ральность

          Приложение переносит участников в «ГосУслуги» и предлагает проверить данные именно на портале. То есть, переносит из этапа «Повреждения автомобилей» в «Проверку данных». На той же странице можно описать обстоятельства ДТП.
          Отличия от сценария
          • На этом этапе приложение не дает участникам, А и Б проверить, кто как описал обстоятельства ДТП.
          • Приложение на объясняет и не подсказывает, как правильно описывать обстоятельства ДТП.

          6. Проверка данных

          Ожидание

          — Так, ну вот всё, что вы понаписали. Одной простынёй. Нужно угу от каждого — ну или желание поменять что-то. Подтверждайте или меняйте?
          — (1) и (2) Да верно всё.

          Реальность

          Каждый участник на своем смартфоне переходит в «ГосУслуги» и видит большое полотно текста со всеми введенными данными.
          В полотне есть пустые поля — можно что-то дописать и добавить обстоятельства ДТП.
          Мы закончили на этом этапе — не рискнули оформлять ДТП на государственном портале, в котором пользователи авторизуются по паспорту.

          7. Инструкция по дальнейшему

          Ожидание

           — Ну класс. Теперь я буду пережёвывать всю эту инфу. А вы уже можете идти в страховую вот с этим волшебным кодом. Кстати, прислать вам код и все заполненные анкеты по почте, например? На какие адреса?
           — (1) и (2) Сюда присылай.
           — Отправила. Всё. Можете ехать по своим делам.

          Реальность

          До этого этапа мы не добрались.

          А выводы?

          В начале статьи мы задались целью показать, как использовать сценарии для оценки и создания приложений. У нас не было задачи найти все возможные ошибки в «Помощнике ОСАГО».
          Наш сценарий — это то, что мы ожидали от приложения. Разумеется, мы не претендуем на единственное правильное мнение. Да и вообще на правильное. И да, мы могли придумать другой сценарий. Но взяли этот для примера.
          Главное, что мы хотели сказать: фиксировать сценарий — важно.
          Вот как еще можно использовать сценарий.
          1. Узнать, чего от приложения хотят пользователи и как они им будут пользоваться.
          2. Убрать все лишнее и второстепенное. Каждый раз, когда кто-то предлагают идею в духе «А давайте еще сделаем вот это», можно сверить ее со сценарием и спрогнозировать, как на конкретном этапе изменится поведение человека.
          3. Начать создавать продукт, не привязываясь к технологиям. Например, сценарий может показать, что вам можно не заморачиваться с разработкой приложения и создать чат-бота.
          4. Включить фантазию. Когда команда знает, какую задачу и каким образом выполняет их продукт, она может искать эффективные решения, и не только интерфейсные.
          5. Подготовиться к разработке. Все в команде представляют, что у них должно получиться. Поэтому можно начинать заранее, не дожидаясь, пока коллеги закончат свой этап работы.
          6. Заменить им тестирование продукта. Пройтись по сценарию и посмотреть, где возникают трудности.
          А вывод такой: для «приложений одной задачи» сценарий — важный этап работы над продуктом. Возможно, даже главный. И уж точно — один из самых-самых первых.
          Статья также опубликована на vc.ru
          20 ноября 2019
          Собака Павлова
          Дизайн сложных интерфейсов
          Дизайн приложений от «Собаки Павловой»
          Другие статьи

          Разбираем на 26 кейсах, как можно улучшить интерфейсы сложных систем, наблюдая и общаясь с людьми

          Рассказываем, как бы мы переделали интерфейс старого швейцарского автомата по продаже билетов на транспорт — со всем процессом и объяснением решений.

          Работать строго по методологии — полезно, но что делать, если времени организовать Agile нет? Мы придумали разные способы, и один из них — дать дизайнерам менеджерить проекты.