В бюро спроектировали инфраструктурные интерфейсы на сайте Ворлд Чесс: регистрацию, выбор тарифа, настройку паспорта ФИДЕ, оплату и продление подписки, личный кабинет. Чтобы ускорить внедрение и тестирование, мы унифицировали десятки разрозненных ситуаций и сценариев.
Раньше на сайте была одна платная услуга: доступ к трансляциям.
Недавно появилась вторая: гейминг с онлайн‑рейтингом ФИДЕ.
Можно пользоваться сайтом и без платных услуг, добавляя их после регистрации по желанию.
С появлением гейминга в регистрации и оплате появилось множество сложных сценариев.
Решением «в лоб» был бы дизайн полусотни экранов и состояний для всех случаев, блок‑схема со множеством стрелочек и условий.
Наша задача была всё это распутать: минимизировать число различных элементов и состояний, чтобы держать под контролем сроки и качество разработки.
Решением «в лоб» был бы дизайн полусотни экранов и состояний для всех случаев, блок‑схема со множеством стрелочек и условий.
Наша задача была всё это распутать: минимизировать число различных элементов и состояний, чтобы держать под контролем сроки и качество разработки.
Мы придумали линейную последовательность из пяти экранов, которые покрывают все перечисленные выше сценарии, причём регистрация — это просто последовательное прохождение трёх, четырёх или пяти из них:
Интерфейс перекрашивается из тёмного‑серого в сиреневый при подключении платных услуг.
На экране 1 мы наглядно объясняем пользу обеих платных услуг и предлагаем их подключить. Здесь же просим указать почту:
Если платных услуг не выбрано, остаётся 2: подтвердить почту и 3: придумать пароль.
Если есть платные услуги, следует экран 4: оплата. Можно заплатить сразу или отложить оплату:
Чтобы играть с официальным онлайн‑рейтингом, нужен паспорт ФИДЕ. Шахматисты получают его перед участием в офлайн‑соревнованиях по всему миру. Если паспорта ФИДЕ ещё нет, самое время его создать:
После регистрации — поздравление. На самом деле, это не отдельный экран, а уже личный кабинет, просто в заголовке написано «Поздравляем!». Если страницу перезагрузить, поздравление пропадёт, а остальное останется на месте:
Как видите, здесь используется тот же блок с платными функциями, что и на шаге 1 регистрации, так что финал регистрации — это не шестой экран, а снова первый.
Из этих пяти экранов собраны все возможные сценарии регистрации, оплаты, привязки паспорта ФИДЕ, работы в личном кабинете и апгрейда.
Раз личный кабинет — это тот же экран 1, что и в регистрации, то здесь точно так же можно подключать платные услуги. Только место главной кнопки «Зарегистрироваться» тут занимает кнопка «Сделать подарок»:
Включаешь любой тумблер, например правый, — кнопка превращается в «Завершить апгрейд», а чёрная стрелка призывает её скорее нажать:
Это состояние «хочу подключить онлайн‑рейтинг, но ещё не подключил». Точно такое же состояние человек увидит, если пропустит оплату при регистрации или она почему‑то не пройдёт. Чтобы передумать, достаточно выключить тумблер.
У подключённой услуги вместо тумблера — галочка. Под ней показано, когда предстоит следующая оплата:
К подключению официального онлайн‑рейтинга мы также ведём из игровых интерфейсов.
Когда всё, что человек захотел, у него уже подключено, место главной кнопки в личном кабинете снова занимает приглашение сделать подарок:
Даритель выбирает услуги, оплачивает и получает промокод, по которому одариваемый регистрируется бесплатно:
С другой стороны, на экране 4: оплата — хоть во время регистрации, хоть во время продления, хоть во время апгрейда — можно скопировать платёжную ссылку, чтобы за тебя заплатил кто‑то другой:
По этой платёжной ссылке — только интерфейс оплаты:
— Но вы просто показываете одни и те же картинки с разными подписями!
— В этом и состоит достижение этого проекта.
Илья Бирман
Константин Мозговой
Евгений Клепнёв
Юрий Лобанов
Николай Пасынков
Зорикто Самбялов
Александр Синичкин
Станислав Стасенко
Павел Шведов
Дмитрий Шиловский
Благодарим Илью Мерензона за активное участие в работе.
См. также: интерфейс игры