Что не так с новым кардридером HSL. Или откуда берется 135 часов в сутках.

Общественный транспорт Хельсинки один из самых удобных, экологический чистых и безопасных в Европе, а может и в мире. С августа 2016 года HSL стала внедрять новые терминалы по считыванию трэвел карт в Хельсинки. Событие масштабное, учитывая, что на новые терминалы было потрачено очень много денег. Судя по рекламе, которая до сих пор висит — главной чертой новых терминалов стал тач-дисплей.

Анализ креатива оставим для следующего раза, а сегодня речь пойдет об UX этих устройств.

Наследие

Давайте посмотрим, как выглядело предыдущее поколение кардридеров.

Previous HSL Cardreader

Интерфейс старого терминала до банальности прост:
4 кнопки с зонами (Хельсинки, как и многие города разделен на зоны) площадка, к которой нужно поднести тревел карту для считывания.

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

Плюсы старого терминала

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

Минусы старого терминала

тут надо подумать, так как я чет- пока не понимаю.

Юзер джерни.

User Journey: the experiences a person has when utilizing/interacting with something

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

Месячный абонемент. Пользователь прикладывает карту к считывателю в середине кардридера. Система выдает цветовой и звуковой сигнал, на экране появляется дата окончания действия абонемента. Очень просто, всего одно действие.

видео с работой устройства

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

видео с работой устройства

Если вам нужно заплатить за еще одного пассажира — вы просто повторяете ваши действия после небольшой паузы.

Так было со старыми терминалами. А что предлагает современный вариант?

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

Оплата проезда за деньги. Для этих пассажиров теперь много изменилось. Картинка с юзер джерни для тех, кто платит

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

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

Going deep

Дальше мы рассмотрим каждый экран терминала в отдельности.

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

Экран 1. Кнопки с зонами занимают примерно 1/3 экрана, что странно: интерфейс теперь основан на тач технологии и терминал — это гигантский дисплей. Я не смог найти причину, почему раньше кнопки занимали всю полезную площадь старого терминала, а теперь нет. Даже для людей с 100% зрением сначала сложно сориентироваться, тем более все помнят и знают старый терминал.

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

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

Картинка с новым терминалом и нашей версией первого экрана

Экран 2. Ок, мы выбрали, куда едем. Что теперь?

Картинка с вторым экраном (добавление людей, кнопка ок)

Терминал предлагает нам выбрать:

добавить еще пассажиров подтвердить поездку, тапнув на ОК отменить выбранную зону, тапнув на красный крестик справа вверху.

Верстка интерфейса становится крайне запутанной и фрустрирует пользователя.

Давайте выделим проблемные места:

кнопка ОК — когда ее действие можно заменить простым прикладыванием карты к ридеру, тем самым соглашаясь с тем, что на экране (то же прикладывание карты является естественным поведением человека) кнопка Отмена — при такой верстке кнопка может быть заменена простым нажатием на кнопку другой зоны.

Мы проанализировали более 300 пассажиров, которые осуществляли эти действия и наши предположения подтвердились: пассажиры сразу стремятся приложить карту с считывателю.

Мы уже говорили, что желательно сохранить максимальную преемственность с предыдущей версией, поэтому будем логичным отказаться от кнопки “отмена” (ее функцию можно возложить на таймер + пользователь может тапнуть в другую зону).

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

Картинка с нашей версией второго экрана

Экран 2б. Добавление и оплата дополнительных пассажиров. В старой версии это решалось простым повторением юзер джерни (приложил ≥ нажал на кнопку). То есть, для каждого нового пассажира процедура повторялась. Новая версия должна была решить “проблему” с доп. пассажирами, но по факту количество действий опять увеличилось. Однако, отметим, что при оплате для более чем 5 пассажиров — количество времени у терминала уменьшается. Это хорошо, но во время нашего исследования на маршрутах — мы ни разу не встретили ситуации с оплатой проезда для более чем двоих-троих пассажиров. Как итог, сейчас это увеличивает время простоя автобуса на остановках. Картинка с интерфейсом добавления пассажиров.

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

изображение отдельной кнопки с новыми пассажирами.

Таком образом вы сможем использовать максимально объем дисплея, без ущерба для юзабилити, и элиминируем необходимость дополнительных действий (теперь нет иконки для перехода в экран добавления пассажиров. Информация о кол-ве пассажиров может выводиться в рамках это кнопки. Если пассажир передумал — он может или нажать на другу зону или уменьшить кол-во пассажиров. Отмена действия — просто так по кнопке зоны, которая выбрана (более safe вариант — появление иконки отмена на кнопке зоны)

Что здорово, добавить можно до 39 пассажиров (всего 40) и прокатить с ветерком половину автобуса за свой счет, но на этом экране отсутствует часть очень важной информации, которую можно добавить без ущерба для общей юзабилити. А для пассажиров — жирный плюс к лояльности HSL.

Картинка с нашей версией добавления пассажиров (плюс показываем общую стоимость, кнопка “отмена”)

В варианте HSL вам еще нужно нажать на кнопку ОК, что, как мы показали выше, можно заменить простым прикладыванием карты к считывателю, тем самым экономив время.

Экран 3. Приглашение к прикладыванию карты.

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

Картинка с версией третьего экрана (приглашение к прикладыванию карты)

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

Самые важные элементы этого экрана: сообщение какое действие надо совершить, направление действия с дублированием подсказки светом. Дизайн карты, не обязательно должен быть продемонстрирован целиком, а кнопка “отмена”/“возврат” должна быть четко обозначена.

Экран 4. Пост-оплата. Информационный.

Пожалуй, самый информативный экран. Однако, к его верстке подошли не самым лучшим образом.

Картинка с четвертым экраном (информация о поездке)

На экране появляется зеленая галочка с подтверждением оплаты: какая зона оплачена, стоимость проезда, действие проездного билета (период действия) и сколько денег осталось на карте. Но прочитать это невозможно — очень мелко. А учитывая, что пассажир торопится войти внутрь — информация остается проигнорированной. Также, время жизни экрана крайне мало, чтобы успеть сориентироваться где какая информация находится. Учитывая размеры экрана и то, что он цветной — становится очень жаль, что место используется так нерационально. По версии HSL самым важным на экране является зеленая галочка, а остальная информация лишь фон. Стилистически это похоже на билетик, приобретаемый у водителя, только видно его 5 секунд и он очень мелкий. Давайте попробуем использовать экран более рационально и информативно, ведь у нас теперь есть такая возможность.

Картинка с нашей версией четвертого экрана

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

Итог И вот, что получилось.

HSL версия Imaginary Friends версия

У нас получилось уменьшить количество действий у терминала с 3 до 2 для поездки одного пассажира. И с 4 до 3 — для поездки группой, тем значительно уменьшив время работы с терминалом.

Почему юзабилити так важно.

В процессе разбора у нас сложилось ощущение, что интерфейс верстался в большой спешке и не было выделено время на полноценное тестирование, а возможно, не было даже команды для интерфейса. Мы не претендуем на истину в последней инстанции и наш пример оптимизации UX лишь один из многочисленных вариантов (множество публикаций можно найти в гугле). Но игнорировать такую важную деталь повседневной жизни города нельзя. Каждый день общественным транспортом к Хельсинки пользуются сотни тысяч человек, совершается множество действий. Каждый раз, стоя у терминала, пассажир теряет от 5 до 10+ лишних секунд (в 2013 году было совершенно 355.8 млн поездок > https://www.hsl.fi/sites/default/files/uploads/hsl_moves_us_all_1.pdf). А потерянная минута отзывается негативной динамикой экономики. Ведь все взаимосвязано: автобусы начинают опаздывать (трата топлива, меньше перевезли людей), люди не успевают вовремя доехать, пропускают поезд в метро. Получается, что, даже если взять 1/4 от всех, кто совершил поездку в 2012-2013 году — город потерял 338 часов, а значит денег. Да, это очень утрировано, но дает представление о масштабах.

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

В 2018 году будут изменения в тарифной политике HSL, и вполне вероятно, что текущий дизайн — переходный, поэтому мы ждем нового дизайна. Надеемся, что HSL изучит те публикации, которые можно найти в интернете и сделает по-настоящему удобный и красивый интерфейс.

Подписывайтесь на наш блог, чтобы быть в курсе новых анализов креативных и дизайн решений.

Ваши, Imaginary Friends.

links: http://www.aalto.fi/fi/current/news/2016-11-14-006/ http://mediafactory.aalto.fi/wp-content/uploads/2016/12/HAPLAB_report_2016_eng.pdf https://www.hsl.fi/tyyliopas

This article is my oldest. It is 1896 words long