#ВсёПеределать в Цюрихе: улучшаем интерфейс билетного автомата

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

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

SBB (Schweizerische Bundesbahnen, Швейцарские федеральные железные дороги) управляют 1400 билетными автоматами на более чем 700 станциях. Помимо собственно разовых билетов и абонементов на проезд в общественном транспорте, через автоматы покупают билеты в зоопарк, театр, музеи, на различные культурные мероприятия, а также пополняют мобильный телефон и даже биткоин-кошелек. Все функции автомата доступны через тач-интерфейс на четырех языках.

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

Таким образом, улучшение пользовательского опыта возможно, если:

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

Начинаю с главного экрана: разбираюсь, как он устроен.

Собираю в таблицу проблемы этого экрана и идеи по их исправлению.

Перепроектирование первого экрана занимает три часа. Чтобы облегчить себе работу по созданию библиотеки элементов в Axure, я нашел на сайте SBB симулятор билетного автомата и сразу нарезал все нужные элементы и их состояния. Voilà:

Для обозначания центрального вокзала я использовал пиктограмму City Center, которая в различных вариациях встречается на дорожных знаках в некоторых европейских и арабских странах, а также в Японии. Насколько я понял, эта иконка не является стандартом, закрепленным правилами дорожного движения, но ничего лучшего не нашлось. Если у вас есть идеи для обозначения центра — поделитесь в комментариях, пожалуйста.

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

Несколько кнопок получили новые названия и функции:

Голубым цветом выделил только те кнопки, которые не находятся на главном экране постоянно, а появляются там по заданным правилам. Например:

На этом я считаю основные сценарии покупки разовых билетов достаточными для тестирования сделанных улучшений.

Время углубляться в детали туристического сценария: покупка Zürich Card. Выбор этой карты начинается с нажатия желтой кнопки «Tourism / Events / Leisure». Напомню, в оригинальном дизайне она была голубого цвета и называлась «Specials / Leisure / Fairs».

Вот что пользователь видел раньше, выбрав этот пункт:

Проблемы:

Чтобы улучшить этот экран, придется сначала заглянуть на следующий— в раздел «Events / Leisure / RailAway». Нет ли там чего-то такого, что можно было бы вытащить на один уровень вверх?

Тап:

Ой! Это же так называемая прокси-страница: типичный антипаттерн в проектировании интерфейсов. Если страница существует только для того, чтобы пользователь выбрал страну, город, язык, кодировку и т. п., то в большинстве сценариев ее можно безболезненно убрать, заменив настройками по умолчанию, которые должны удовлетворять большинство пользователей. Этот паттерн называется «обоснованное предположение» (educated guess) и для его реализации не нужен искусственный интеллект, машинное обучение и прочий блокчейн.

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

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

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

Хотелось бы, но давайте проверим несколько сценариев.

Общепринятый способ навигации по Швейцарии, используемый как местными, так и туристами, — по названиям кантонов, которые часто совпадают с названиями их столиц. Потому решаю отказаться от смеси из кнопок с названиями кантонов (Graubünden), регионов (Basel, Zürich) и географических направлений (Central, Eastern…). Все кнопки в моем решении будут перечислять только кантоны. Для компактности небольшие соседние кантоны объединяю на одной кнопке: как в случае с «Jura / Neuchâtel» на исходном экране:

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

Финишная прямая — покупка выбранного билета. Тут снова не обошлось без уже известного антипаттерна. Логика подсказывает, что интерфейс, ориентированный на группу туристов (например, на семью), отлично подойдет и для одиночек. Значит, есть смысл сразу же спросить, каких и сколько билетов нужно, то есть перейти к экрану «Several tickets», минуя этот прокси-экран:

Здесь будет обоснованно предположить, что билет покупает как минимум один взрослый пассажир, который может ехать в компании ребенка или других взрослых:

Предполагаю, что автомат сумеет пересчитать стоимость билетов «на лету», потому на кнопке показываю общую сумму.

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

Последний экран в сценарии — приглашение к оплате.

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

Готово!

Было:

Стало:

Общие трудозатраты — два рабочих дня на прототип и этот текст, размазанные на два календарных месяца. Кликабельный прототип с экранами сценария покупки Zürich Card доступен всем желающим без регистрации и SMS.

В предыдущих выпусках:

Интерфейсы, в которых нужно #ВсёПеределать, мы анонсировали через рассылку КБ «Собака Павлова» и наш канал в Телеграмме. Возможно, мы еще вернемся к этому проекту. Подписывайтесь, если интересно участвовать или просто наблюдать.