x
 
Александр Грисенко
4 июня 2009

Добрый день.

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



Вы прислали эту форму в конце мая 2008 года. Я целый год обходил её стороной.

Ниже есть «Информация о туристах». Здесь лучше написать «Клиент» или «Покупатель».

Просто «Тур».

Трасса обещает быть нелёгкой.

Просто «Расчёт».

«Итого»

Десятичный разделитель — запятая.

Подписи — вправо.

Вынести за скобки.

Не надо никак называть эти кнопки, они уже подписаны.

«Туристы»

Куда в конце?

Здесь сразу видна левая рука крепкого прикладного программиста. Правой он собирает формы для «Паруса», «Галактики» или чего там ещё бывает.

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

По логике здесь должно быть три больших блока: «Тур», «Туристы» и «Оплата». Простите, что не рисую, а то совет бы ещё полгода не вышел.

Найдутся смельчаки?


Поделиться
Отправить

Комментарии


4 июня 2009

Для смельчаков перевел форму в векторный формат (Корел 12).

http://www.ksoftware.ru/xlam/Inturist.cdr

Иван Большов
4 июня 2009

Артём, этот пример надо разобрать на тренинге в Питере :) Очень показательный пример.

Михаил Едошин
4 июня 2009

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

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

На первом экране есть два типа параметров: те, которые человек, скорее всего, будет выбирать по цене и те, которые он будет выбирать по другим характеристикам. Скажем, куда и когда лететь, наверное, решается вперёд, а уже потом подбираются варианты. Если не так, не суть, можно переделать.

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

Все ценовые параметры образуют стопку, разделённую на две части: что включено и что нет. К каждому параметру прилагается галочка, которая включает/исключает параметр из списка. У включённых параметров могут быть дополнительные опции; у выключенных они пропадают. У каждого параметра, включая выключенные, есть подробный объясняющий текст, такой, что если распечатать эту стопку, получится приличный план путешествия с нужными деталями.

Каждый параметр надо, конечно, делать индивидуально, чтобы не было регбусов-кроссвордов вроде «типа» и «вида»; что, кстати, они обозначают? Т. е., скажем, отели можно сгруппировать по классу, возможно, вытаскивать информацию об отеле, кроме того, как тут предполагается заказывать несколько номеров?

Всё, что логичным образом не попадает в эти три раздела (качественные параметры, ценовые параметры, конкретные детали) убирается. Например, курсы доллара и евро пусть будут, но за кадром.

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

Юрий Солоницын
5 июня 2009

Прошлой осенью обсуждали с коллегами очень похожую по назначению форму.

Только тогда речь шла о форме, с которой работает менеджер (представитель туроператора).

Тогда получился вот такой набросок (не придирайтесь к типографике, это просто набросок :-)


5 июня 2009

Мне кажется, у нас тоже идёт речь о форме для турагента.

Белов Антон
5 июня 2009

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

Сначала оперируют либо страной либо датами, причём даты могут смещаться.

Потом подбирают отель или курорт, где иногда важны самые разные мелочи, которые и должны ставиться во главу угла. Важными могут быть центр определённого города или звёздность, береговая линия, питание, бизнес-класс перелёта (чего я в форме вообще не увидел), очень важно иметь поле «дополнительная информация», постоянный клиент и вообще история клиента тоже немаловажный факт (но при этом ФИО покупателя я бы поставил в конец, в первого туриста). Группы иногда селят в разные отели, а заявку компоновать приходится одну, кстати и перелёты в несколько дат бывают (долёты).

Ой, сколько всего написал. Выбор отеля — большая часть времени, мне кажется он и должен занимать 90% экрана. Слева: страна-звёздность-курорт-отель, важные (или не важные) для клиента моменты (какие угодно из выпадающего списка), справа — фотки. Сверху — примерные даты со стопами на билеты по курортам, под фотками — стопы на конкретный отель (отели). Под этим всем — туристы, с птичкой справа от заключающего договор. Под этим всем — контактная информация и дополнительные пожелания.

Следует помнить, что у агента эта форма служит для предварительной договорённости. Потом всё ещё уточняется.

Денис Чмель
5 июня 2009

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

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

— Мне в Тунис, 5 звездочек, 10 дней.
(Клик, клик, клик). — Выходит 2000 тыщи, страховки нет?
— Нет.
(Клик). — 2500 тыщ.
— О, и ещё мне очень важно All Inclusive и вид на море.
(клик, клик). — Всё равно 2500 тыщ, похоже, это значения по умолчанию.

Денис Братчук
5 июня 2009

> Всё это время не покидает ощущение неудобства и неправильности.

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

Александр Пономарёв
6 июня 2009

Александр, сначала имеет смысл упорядочить расположение полей внутри блоков, дать им понятные и правильные названия, оттипографить. Методом постепенного улучшения вы быстрее достигнете цели, поскольку видно, что у вас нет готового плана её достижения. У меня тоже его нет. Для этого нужен больший опыт проектирования интерфейсов.

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

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

Скобки не следует ставить там, где от их отсутствия не меняется смысл или не затрудняется понимание.

Если вы даёте полю название «Ф. И. О.», вам могут написать туда: «Х. У. Я.». По известному анекдоту.

Многим не потребуются пояснения к моей картинке, но я их дам.

Везде, где есть возможность вполне обойтись без <textarea>, это надо делать. Подсказки внутри полей и невыбранные значения переключателей логичнее обозначить светлым. «Состав группы» я сделал раскрывающимся. Он сейчас именно в раскрытом состоянии, поэтому возле него стоит минус.

Полностью форму верстать не стал — попробуйте дальше сами. Уверен, её интерьер и экстерфейс улучшатся. ))

Дмитрий Зимин
6 июня 2009

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

Но есть общие рекомендации:

1) Во всех полях, где вводятся рубли и скидки предусмотреть защиту от «случайной цифры». Был такой известный конфуз у трейдеров, если помните: товарищ случайно слил акции «за сущие копейки».

2) Очень важен контекст работы: у оператора в одной руке почти всегда будет телефон. То есть проектировать форму нужно под работу с клавиатуры, а значит:
 — использовать порядок табуляции,
 — подсказки при вводе (например, выбирать Тунис не из списка, а простым вводом с suggest),
 — стоимость должна быть всегда перед глазами, без прокрутки.

3) Возможно, стоит предусмотреть сохранение формы в черновик. На случай обрыва телефонной связи или «спасибо, я подумаю и перезвоню завтра». В дальнейшем, при повторном звонке («Ой, я вам звонил вчера на счет Туниса») не нужно будет заново вводить условия тура.

Александр Цебро
16 июня 2009

«Итого» считается автоматически. Плашка с информацией о туристе переворачивается, как табличка с отгаданной буквой в «Поле чудес»; с обратной стороны — список туристов. Лого операторов, флаги, карты — это всё мусор или «избыточная приятность»?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 23 5 6




Недавно всплыло

Это какие‑то другие пиксели? Как они соотносятся? 2 Расскажите о клише и устойчивых выражениях 13 Как написать хорошее резюме? 7 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5