Создание интерфейса терминалов «Джаст трэвэла»

Первые быстрые эскизы, созданные для иллюстрации общего подхода.

Попробовали «плоский» вариант.

Вернулись к объемному. Начали работу над созданием наглядных и удобных элементов управления.

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

Отрисовка схем вагонов. Нужны крупные активные элементы для выбора мест в вагоне. Делим процесс выбора на две части — выбор купе и мест в нем. Рисуем схемы всех типовых вагонов.

Добавляем сообщения об ошибках и диалоговые окна.

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

После тестирования стало понятно, что окна, появляющиеся сверху, плохо заметны. Решили показывать их в центре, а остальную часть экрана затемнять.

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

Записная книжка переезжает прямо внутрь выбора имени. Бонус: теперь можно показывать в выборке только тех людей, которые подходят по определенным критериям (например, по возрасту) для данных условий. Задание данных для нового путешественника вынесли в отдельную форму. После ее заполнения все данные автоматически сохраняются в записную книжку.

Нетривиальной задачей оказался и подбор номеров для размещения постояльцев в гостинице.

В итоге нашли оптимальный вид экрана и отрисовали весь процесс.

Для презентации сценария выбора номеров в гостинице, тайный советник сочинил неплохой сюжет для сериала:

«На конференцию по внедрению нанотехнологий в процесс сбора урожая клюквы в город Бомбей отправляются:
— Директор компании „Штумпф“ Петров с женой и ребенком 12 лет,
— Заведующий отделом оптимизации документооборота Карлсон с любовницей,
— Простые служащие Шварц, Гопак и Усть-Амазонский,
— Телохранители Петрова: Держиморда и Ломоносов.
Секретарша Эвкалипта Брусничкина отправляется бронировать отель к ближайшему терминалу „Джаст трэвэл“, в гигамаркет „Три корочки“.
На первом экране она выбирает „Индия, Бомбей“ в графе „Место отеля“ и определяет четыре группы: двое взрослых и ребенок (12 лет), двое взрослых, трое взрослых, двое взрослых.
На втором экране она выбирает даты начала и конца конференции: с 30 декабря 2010 по 10 января 2011.
На третьем экране перед Эвкалиптой появляется список всех отелей Бомбея, в которых могут поселиться все наши командировочные. Она выбирает самый дешевый из пятизвездочных отелей — „Рамаяна“.
На четвертом экране Брусничкина пролистывает список доступных для бронирования номеров в отеле „Рамаяна“ и отбирает подходящие, а именно: люкс для двоих, в который можно поставить дополнительную кровать (или в котором уже есть диван, на котором может спать человек); стандартный номер для двоих; стандартный номер на троих; полулюкс для двоих.
На пятом экране Эвкалипте нужно распределить группы по номерам. Разумеется, она в курсе, какие фамилии у телохранителей и кто с кем будет спать. Поэтому для каждого номера она указывает фамилию одного из постояльцев в качестве ответственного.
Теперь ей осталось только оплатить заказ с помощью СМС, и дело в шляпе. При заселении в отель понадобятся четыре паспорта ответственных, этого будет достаточно.
А если любовница Карлсона сбежит к Держиморде, а Ломоносов в это время будет удерживать ревнивца в полулюксе — это отелю не интересно, главное, что в каждом из этих двух номеров живет двое взрослых. Усть-Амазонский, Шварц, и Гопак две недели пьют и режутся в преф, Петров с семьей гуляет по Бомбею. Наноклюква безопасносте».

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

Рисуем иконки для всех возможных гостиничных сервисов.

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

Вспомнили о времени.

Система бронирования может тормозить. Терминалы могут тормозить. Визуализируем тормозные запросы. При медленной работе терминала пользователь может не дождаться окончания процесса, поэтому нам необходимо развлечь его в процессе. Сначала была идея сделать скринсейвер в виде игры «теннис», где пользователь может отбивать мячики индикатором прогресса.

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