Во время работы над Картой туров мы использовали несколько простых приемов, позволяющих облегчить разработку и сделать сайт лучше.
Сайты обычно делаются программистами. Поэтому, когда пользователь хочет что-то купить, он совершенно логично получает сообщение: «Системная ошибка! Вы не зарегистрированы».
Дизайнеры же знают, что главная задача сайта — продавать. И еще они знают, что интерфейс — это фильтр. На вход подаются 100 покупателей, на выходе остаются только 25 или 75. Остальных отсеял интерфейс.
Обычная регистрация, включенная в обычный процесс покупки, выглядит так:
Регистрация и аутентификация сами по себе — большое и, на данный момент, непобедимое зло.
Однако мы можем сильно сгладить последствия с помощью интерфейса, который отсеет не 80% покупателей, а только 20%. Наша задача заключается в том, чтобы каждое действие было прозрачным для пользователя и требовало как можно меньше усилий. (Чем сложнее действие, тем меньше вероятность его выполнения).
Мы строим процесс оплаты так, как будто мы уже знаем всю регистрационную информацию, и лишь изредка задаем уточняющие вопросы (е-майл, наименование организации, номер банковской карты).
На «Карте туров» мы позаботились о том, чтобы каждый из способов оплаты был как можно меньшим препятствием для покупателя.
Для оплаты кредитной картой, например, мы не спрашиваем информацию, необходимую для печати квитанции Сбербанка. А при зачислении оплаты через Сбербанк (которая произойдет через несколько дней) мы отправляем пользователю письмо с секретной ссылкой, которая позволит зайти на сайт без пароля и закончить покупку.
Если ваш сайт принимает деньги от пользователя, сделайте каждый из сценариев максимально простым и быстрым, а не проверяйте пользователя на целеустремленность, быстрообучаемость и стрессоустойчивость.
Такой интерфейс мы назвали отложенной, или ленивой регистрацией (lazy registration, по аналогии с lazy instantiation).
P.S. Люди никогда не приходят на сайт для того, чтобы зарегистрироваться.
Если вы можете обойтись без регистрации (даже без ленивой) — обходитесь!
«Карта туров» стартовала как типичный сайт, генерируемый на сервере. Но чем дальше, тем больше на ней появлялось клиентской генерации.
Например, любая страница «редактировать» — это страница «создать», поля которой заполняются на клиенте, а кнопка «Создать» изменяется на «Сохранить изменения» (опять же, на клиенте). Добавление нового поля не приводит к созданию двух страниц и двух валидаций. Это одна страница.
Страница «создать» превращается в страницу «редактировать» вызовом одной функции:
setAdvert($("#tourCreation").attr('data-tour-id'));
В целом, генерация на клиенте помогает ускорить и улучшить реакцию на любые изменения. Особенно это касается технически сложных дизайнерских интерфейсных решений. Они легко реализуются в случае генерации на клиенте и требуют больших усилий для внедрения при серверной генерации.
Видение конечного результата помогает в любой работе. В частности, видение итогового объявления помогает лучше заполнить форму из множества полей:
Особенно приятно получать подсказки, помогающие заполнению формы, и прямо во время редактирования видеть, как изменяется объявление.
Чтобы не прокручивать страницу вверх-вниз, от предпросмотра к редактированию и назад, мы сделали отцепляющийся плавающий блок, который виден всегда.