Andrew KolpakovSoftware engineering
Карта туров

Кунг-фу

Во время работы над Картой туров мы использовали несколько простых приемов, позволяющих облегчить разработку и сделать сайт лучше.

Ленивая регистрация

Сайты обычно делаются программистами. Поэтому, когда пользователь хочет что-то купить, он совершенно логично получает сообщение: «Системная ошибка! Вы не зарегистрированы».

Дизайнеры же знают, что главная задача сайта — продавать. И еще они знают, что интерфейс — это фильтр. На вход подаются 100 покупателей, на выходе остаются только 25 или 75. Остальных отсеял интерфейс.

Обычная регистрация, включенная в обычный процесс покупки, выглядит так:

1. Попробуйте оплатить
2. Заполните 20 полей
3. Вспомните, зачем вы вообще регистрировались

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

Однако мы можем сильно сгладить последствия с помощью интерфейса, который отсеет не 80% покупателей, а только 20%. Наша задача заключается в том, чтобы каждое действие было прозрачным для пользователя и требовало как можно меньше усилий. (Чем сложнее действие, тем меньше вероятность его выполнения).

Мы строим процесс оплаты так, как будто мы уже знаем всю регистрационную информацию, и лишь изредка задаем уточняющие вопросы (е-майл, наименование организации, номер банковской карты).

Кнопка «купить» говорит сама за себя.

Выберите себе имя и пароль. Не ходите в почту и не кликайте по ссылке для подтверждения.
Сообщите нам пару юридических формальностей и платите.
Спасибо вам за ваши деньги! Они уже у нас.
И только теперь мы попросим вам ввести еще немножко регистрационной информации.

На «Карте туров» мы позаботились о том, чтобы каждый из способов оплаты был как можно меньшим препятствием для покупателя.

Для оплаты кредитной картой, например, мы не спрашиваем информацию, необходимую для печати квитанции Сбербанка. А при зачислении оплаты через Сбербанк (которая произойдет через несколько дней) мы отправляем пользователю письмо с секретной ссылкой, которая позволит зайти на сайт без пароля и закончить покупку.

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

Такой интерфейс мы назвали отложенной, или ленивой регистрацией (lazy registration, по аналогии с lazy instantiation).

P.S. Люди никогда не приходят на сайт для того, чтобы зарегистрироваться.
Если вы можете обойтись без регистрации (даже без ленивой) — обходитесь!

Генерация на стороне клиента

«Карта туров» стартовала как типичный сайт, генерируемый на сервере. Но чем дальше, тем больше на ней появлялось клиентской генерации.

Например, любая страница «редактировать» — это страница «создать», поля которой заполняются на клиенте, а кнопка «Создать» изменяется на «Сохранить изменения» (опять же, на клиенте). Добавление нового поля не приводит к созданию двух страниц и двух валидаций. Это одна страница.

Страница «создать» превращается в страницу «редактировать» вызовом одной функции:

    setAdvert($("#tourCreation").attr('data-tour-id'));

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

Живой предпросмотр

Видение конечного результата помогает в любой работе. В частности, видение итогового объявления помогает лучше заполнить форму из множества полей:

Особенно приятно получать подсказки, помогающие заполнению формы, и прямо во время редактирования видеть, как изменяется объявление.

Чтобы не прокручивать страницу вверх-вниз, от предпросмотра к редактированию и назад, мы сделали отцепляющийся плавающий блок, который виден всегда.