Дьявол в деталях

4 min readJun 26, 2015

Примеры интерфейсных и поведенческих решений, применяющихся на сайте www.depo.travel

Самый первый совет: не ставьте текст на фоне с мелкими деталями, иначе ничего не будет видно. Даже затемнение фона вам особо не поможет.

Это пост без истории, просто небольшой сборник приемов — чтобы не забыть. Принципы подходят не только для поисковиков авиабилетов. Возможно, со стороны будет смотреться путано. Возможно, будет продолжение.

Модальные окна

Обычно модальные окна вылезают из центра или просто проявляются откуда попало. Мы сделали так, чтобы они появлялись из тех мест, в которых расположены на них ссылки:

При этом модальное окно зафиксировано относительно экрана: прокрутка двигает не выпавшее окно или то, что за ним, а область внутри окна (если там много текста).

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

Общие вход и регистрация

Работает это просто: если почта знакомая, то проверяем пароль, если нет — регистрируем.

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

Если ошибиться паролем, форма помотает собой из стороны в сторону и зальет нужное поле кислотой:

Если забыть пароль, то форма восстановления пароля не забывает почту, которую человек только что ввел (обычно почему-то просят писать заново, что очень бесит):

Персонализация

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

(обратите внимание, что курсор сам ставится в поле комментария — так надо делать всегда с главными полями)

При этом, если в личном кабинете в поле «имя» написать сразу и имя и фамилию, то в обратной связи все равно будет только имя. Если указана только почта или фамилия, то не пишем их в обратной связи: «Иванов / ivanov@gmail.com, чем мы можем вам помочь?» — это как-то не очень, используем упрощенный вариант без имени.

Эл. почта для ответа — не обязательное поле. Не всем нужно, чтобы им ответили. А если человек зашел в свой профиль, то этого поля вообще не будет, потому что почта — это логин.

Отображение данных

Всякие крутилки, которые вертятся, пока загрузится всё — это глупость. Полезные данные нужно показывать сразу, если они есть. Лучше показать пустой интерфейс, а в него загрузить потом содержимое, чем держать людей перед одной крутилкой на пустом фоне.

Например, пока идет поиск, не глушим весь экран, а рисуем фильтр результатов (работающий), направление и все-все, кроме самих результатов, которые потом помещаем на нужное место:

(мигающие точки сделали по мотивам поста Тёмы)

Автоматический выбор

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

Расстановка акцентов

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

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

Когда осталось только «отправить» форму (и мы не можем это сделать сами), мигаем кнопкой:

Склонение

Вообще, склонением городов и всяких остальных параметров из справочников сейчас уже особо никого не удивишь (хотя среди поисковиков билетов таких все равно еще мало), но мы склоняем даже топонимы, оканчивающиеся на «о»:

Еще

В зависимости от типа и времени пересадки делаем разные иконки, текст и цвет. Это настраивает на правильные эмоции: можно посидеть и отдохнуть, нужно бежать (или, может, лучше выбрать другую пересадку) или вообще нужно переезжать в другой аэропорт (и надо бы все получше спланировать)