Павел Моисеенко

форма

Форма оплаты картой

Об этом не рассказывают на UI/UX-вебинарах. Имя держателя карты необязательно для заполнения:

unitpay
Unitpay.ru

rocketbank
Рокетбанк

5 комментариев

, ,

Чему стоит поучится у Гугла: поиск авиабилетов

1. Пункт назначения и отправления человеческим языком
Интерфейс поисковиков оперирует кодами аэропортов. С точки зрения интерфейса, я лечу в SVO (код аэропорта Шереметьево). Но в одном городе бывает много аэропортов (Домодедово, Шереметьево и Внуково в Москве), поэтому есть отдельный код города (Москва — это MOW). Эта агрегация помогает быстрее найти рейс: достаточно указать Москву и я буду искать во всех трех аэропортах. Гугл пошел дальше. Он агрегирует аэропорты на всех уровнях: город, область, страна, континент.

А вот автобусные кампании еще толком не научились агрегировать остановки. На сайте перевозчика Люксэкспресс предлагают выбрать одну из восьми остановок. Откуда я знаю!
luxeexpress
Я был вынужден просмотреть по порядку все варианты, чтобы найти нужный автобус

Зачем нужна агрегация. Например, я хочу на Корсику. Я понятию не имею какие города есть на Корсике. Я, конечно, не знаю, что там 4 аэропорта и тем более не знаю в какой лететь дешевле. Стандартная форма поиска оставляет один на один с моим незнанием:

Ты ничтожный болван! Это же BIA, CLY, AJA и FSC, глупое создание!

Гугл все поймет:

И даже так:

2. Отображение на карте
google_flight_map
Самый естественный формат визуализации перелетов. Карта наглядна и информационно насыщенна.

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

Карта поможет найти более выгодные билеты в окрестностях моего пункта назначения:
google_flight_map
Как-то дорого в Касабланку. Лучше прилететь в Марракеш, а оттуда в Касабланку на автобусе

3. Показ результатов поиска без заполнения формы
В Бюро этот принцип называется «сначала данные, потом фильтры».

Чтобы найти авиабилет, поисковику надо скормить параметры:

  1. аэропорт отправления,
  2. аэропорт прибытия,
  3. дата,
  4. количество пассажиров,
  5. класс (эконом, бизнес и т.д.).

Все кроме пункта назначения поисковики научились заполнять по дефолту:

  1. аэропорт отправления: определяет город по айпишнику и выбирает все аэропорты в этом городе
  2. аэропорт прибытия,
  3. дата: через две недели,
  4. количество пассажиров: один,
  5. класс (эконом, бизнес и т.д.): эконом.

Гуглу необязательно скармливать аэропорт прибытия, потому что он все покажет на карте.

Нет комментариев

, , , , , ,

Приемы верстки сложных форм

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

1. Форма читается как связное предложение. Такой подход помогает быстрее считывать содержимое. Еще это хорошо для порядка — все поля формы устроены одинаково.
Group 5@2x
Если пункт начинается с предлога, пишу его с маленькой буквы

Усложним. Добавим инпут:
Group6@2x

Еще усложним. Добавим вложенность:
Group7@2x
Заголовок «Интересы» объединяет все пункты формы

Такую форму можно наращивать слой за слоем. Крепкая конструкция выдержит.

Запутанные формулировки — частая беда форм. Антипример:
Снимок экрана 2016-03-28 в 13.02.19
Три раза сказали одно и то же, но понятнее не стало. Гугл Эдвордз

booking_form
Расплывчатая подпись к чекбоксу дезориентирует. Что произойдет по нажатию? Букинг

Мой вариант:
booking_form_after

2. Управляющие элементы скрыты пока не нажат чекбокс. Удобно когда надо спрятать необязательные функции.
screencast 2016-03-24 00-19-09
Формулировка начинается с действия (показать, расширить, указать, исключить)

Свитч-переключатель — это тот же чекбокс:
ios_switch

3. По дефолту предзаполнены максимально широкие настройки. Протыкивая форму, человек уточняет параметры. Такую форму, вообще, можно не заполнять, если человек согласен с дефолтной настройкой.
пол_возраст@2x
Максимально широкая настройка по дефолту. Если человеку надо, он уточнит пол и возраст

По похожему принципу устроены настройки на Маке:
macos_setting
Все уже нормально работает, но, если надо, можно уточнить настройку

Прием работает не во всех предметных сферах.

4. Чередование ритма. Эстетически мне нравится сбивать ритм однообразных чекбоксов и радиобатонов нестандартным контролом. Чтобы выделение было осмысленно, нужно взять наиболее важный пункт.
Group3@2x
Способ траты бюджета — важная опция. От нее существенно зависит ход рекламной кампании. Поэтому выделяем контролы выбора (по логике — это обычный радиобатон) и пишем подсказки

Какие знаете примеры хорошо сделанных форм?

13 комментариев

, , ,

Школа стажеров Бюро Горбунова

Поступил в школу Бюро Горбунова. По коллективной оценке бюрошников, моя вступительная работа заняла 14-е место из 100.

Вступительное задание звучало следующим образом:
«Спроектируйте страницу записи на приём к доктору в крупной универсальной клинике. Пациент должен попасть к нужному специалисту, не разбираясь в медицине — у него заболел живот или беспокоят кошмары. Кто-то идёт к знакомому врачу. Удобное для пациента время может быть занято.
Результат будет оцениваться по простоте, удобству пациента и реалистичности. Смелость сценария приветствуется, но не стоит наделять сайт интеллектом доктора Хауса и ставить диагноз. Оцениваем интерфейс, а не знание медицины: анализ предмета улучшит оценку, но „медицинские“ огрехи простительны».

Мое вступительное задание

Уже задним числом я сообразил, где допустил ошибку. Нужно было докопаться до формулировки, связаться с бюрошниками и уточнить исходные данные. Зачем клинике понадобилась форма? Может и не нужна вовсе — достаточно телефона? Может нужно снять нагрузку с регистратуры путем переноса процесса записи на пациента. Или с терапевтов, о чем намекает исходное задание (оттого, мне кажется, появились фантастические интерфейсы самодиагностики). Возможно, анализ метрик на странице записи показал блокирующие для пользователя факторы — достаточно их убрать. Не пришло в голову заняться этим, мол — это же условность, сугубо для проверки навыков.

Нет комментариев

, , ,