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

Положение дел

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

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

Смертельный удар

Если вы быстро перейдете по ссылке на YouTube, вы увидите множество учебных пособий о том, как купить билет в парижском метро. Когда я это обнаружил, я должен был что-то сделать. А еще спасибо Эрику за то, что показал мне это:

Даже Симпсоны распространяют эту идею

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

Покупка билетов на метро в Париже - 6-я линия на мосту Бир-Хакейм
6-я линия на мосту Бир-Хакейм

Цель этого исследования — интегрировать процесс покупки билетов в более глобальный парижский опыт.

План

Покупка билетов на метро в Париже - Google дизайн спринт
Понимание — Определение — Отход от стандарта — Решение — Прототипирование — Проверка
Я решил провести 5-дневный спринт с понедельника по пятницу. И это будет побочный проект после работы. Я последовал за Google Ventures процессом для этого спринта.

Официальное руководство по Google Design Sprint

Понедельник — Понимание, Определение

Полевые исследования

В первый день этого спринта мне нужно было выяснить, почему автомат расстраивает людей. Иначе говоря, я должен был определить проблему.

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

Я выбрал станцию Шоссе д’Антен — Лафайет (Chaussée d'Antin Lafayette), я знал, что здесь бывают различные типы пассажиров: туристы, французы, группы людей - что обогатит исследование.

Действительно, лучший способ понять потребность людей — это пойти в их среду и выяснить их контекст использования:

  • Кто они?
  • Каковы их цели?
  • Каково их окружение?

Покупка билетов на метро в Париже - Контекст использования
Контекст использования
После этого я также проверил удобство использования, просмотрев текущую систему относительно набора эвристик.
Покупка билетов на метро в Париже - Парижский автомат для покупки билетов
Парижский автомат для покупки билетов
Чтобы дать вам представление об автомате для покупки билетов, я начну с проверки удобства использования, а затем перейду на пользовательские тесты.

Проверка юзабилити

Навигация

Основное действие, которое я заснял ниже, это покупка обычного билета на метро (называемого ticket t+ выпускается RATP (Автономный Оператор Парижского Транспорта). Вы можете использовать его в метро, а также в парижских автобусах, трамваях и поездах).

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

Покупка билетов на метро в Париже - информационная архитектура системы
Текущая информационная архитектура системы

Анализ

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

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

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

Покупка билетов на метро в Париже – UX кейс-стади

Покупка билетов на метро в Париже – UX кейс-стади
То что вы видите — это не то что вы набираете
Также очень сложно правильно нажимать в нижней части экрана. Это связано с углом экрана и толщиной стекла (около 1,5 см). Как показано на этом рисунке, область проекции кнопки не соответствует области набора. Это приводит к некоторым ошибкам. Нижняя пятая часть экрана должна содержать не призывы к действию, а такую информацию, как статус.

Примечание:

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

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

Главное меню

Покупка билетов на метро в Париже – UX кейс-стади

Главное меню дает вам 7 вариантов, которые на самом деле не отличаются графически, пространственно не разделены для создания кластеров. Это может удручать. Хотя есть некоторые категории, которые представлены:

  • 2 наиболее часто покупаемых вида билетов (ticket t+ и парижский регион),
  • Билеты на специальные направления (Disneyland и билеты в аэропорты)
  • Билеты в зоны (проездная карта Paris visite, проездной на день Mobilis).

Также меню не запоминается пользователю.

Когда я спросил людей, что они помнят из интерфейса, они рассказали очень мало. Все выглядело очень похоже.

Поиск названия станции

Когда вы берете билет в регион Париж (за пределами города Париж), вы должны ввести название станции, на которую вы хотите поехать.

Покупка билетов на метро в Париже - ABCDE клавиатура автомата для покупки билетов
ABCDE клавиатура автомата для покупки билетов
Прежде всего, клавиатура нарушает принятое правило QWERTY. Она должна адаптироваться к языку, выбранному путешественником: AZERTY для французов, QWERTY для людей, говорящих на английском, испанском, немецком и итальянском языках.

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

Кроме того, французское написание довольно сложное для иностранцев, вот примеры названия некоторых станций:

  • Arcueil-Cachan
  • Falguière
  • Neuilly-Porte Maillot
  • St Rémy Les Chevreuse

К сожалению, для них автомат не помогает. Поисковая система довольно проста и не даст вам никакой гибкости или помощи с исправлением орфографических ошибок.

Вам нужно ввести точное название, начиная с первых букв. Например, если вы хотите отправиться в Le Bourget, набор «Bourget» не сработает.

Кроме того, названия некоторых парижских станций носят имена святых, что может быть сокращено как «St». Некоторые станции используют слово Saint, другие используют сокращение St (только RATP знает почему…). Вы должны использовать правильный вариант для своей станции, даже, если вы подумали, что написание St может сэкономить вам время. Вот результаты для обоих случаев:

Покупка билетов на метро в Париже - автомат для покупки билетов

Покупка билетов на метро в Париже – UX кейс-стади
«Saint» — 37 результатов vs «St» — 5 результатов

Юзабилити тесты

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

Покупка билетов на метро в Париже - результаты юзабилити тестов
Результаты юзабилити теста
На основе этих тестов, после сортировки карт было сформировано 4 пользовательских профиля:
Покупка билетов на метро в Париже - пользовательские профили
4 пользовательских профиля
Но эта сортировка карт заставила меня понять, что использование персонажей для проекта с такой массовой аудиторией приведет к неточным результатам.

Действительно, я знал, что во время полевого исследования я не сталкивался с каждым профилем: используя только эти 3 оси, это всего 2×2×2 = 8 возможных профилей.

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

Я решил раскрыть их Jobs To Be Done. Персонажи сосредоточены на том, для кого вы разрабатываете. Jobs To Be Done, сосредоточены на целях ваших пользователей и ставит их в перспективе.

Здесь это особенно актуально: каждый человек, использующий метро, отличается от других, но их Jobs To Be Done, могут быть похожи.

Вот Jobs To Be Done, которые я определил, используя Job Stories фреймворк:

Покупка билетов на метро в Париже - Jobs Story фреймворк
Jobs Story фреймворк

Покупка билетов на метро в Париже - Jobs stories пользователей метро
Jobs stories пользователей метро

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

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

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

Определение проблемы

Контекст

1.

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

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

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

2.

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

3.

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

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

Цели

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

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

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

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

Проблемные вопросы, которые нужно решить:

  • Проблемный вопрос #1: Покупка билетов часто скучна и медленна
  • Проблемный вопрос #2: Покупка билетов в Регион Париж сложная и запутанная
  • Проблемный вопрос #3: Совокупное предложение не понятно и не организовано

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

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

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

Вторник — Отход от стандарта

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

Я хотел собрать вдохновения из разных горизонтов. Для этого я создал вкладку Pinterest и начал рисовать эскизы:

Покупка билетов на метро в Париже - Сбор вдохновения
Сбор вдохновения

Покупка билетов на метро в Париже - прототипы
Быстрые эскизы не позволяют вам привязываться к вашему решению, а позволяют сосредоточиться на проблеме

Новая информационная архитектура

Покупка билетов на метро в Париже - информационная архитектура
Новая информационная архитектура

Детали

Моя первая идея состояла в том, чтобы обратить внимание на самые часто покупаемые билеты: Ticket t + и Ticket для парижского региона.

Поступая таким образом, мы добавляем метод прогрессивного раскрытия. В зависимости от ситуации вы можете позволить пользователю быть более эффективным, предоставляя ему больше контроля или направляя его.

Покупка билетов на метро в Париже - эффективности

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

С другой стороны, вы хотите поехать из Парижа в Савиньи-ле-Бон (Savigny Lès Beaune) — почему бы и нет? Такие небольшие города, как этот, не будут указаны прямо из Парижа, сначала вам нужно будет проследовать в направлении более крупного города, чтобы затем встретить знак меньшего города. Благодаря такому прогрессивному раскрытию, Париж не поглотил все знаки французских городов. Это также связано с Законом Хика, с которым вы можете ознакомится здесь.

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

Для опытных пользователей было бы неплохо предоставить клавиши быстрого доступа для их обычного выбора (ticket t+).

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

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

Визуальный дизайн

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

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

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

  • Два оттенка синего станут основными цветами,
  • Темно серый и белый для текста,
  • Последним штрихом будет бирюзовый цвет RATP используемый в качестве акцентного цвета.

Покупка билетов на метро в Париже - RATP

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

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

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

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

Среда — Решение

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

Идея, которую я выбрал, основывалась на следующем:

  • Добавить клавиши быстрого доступа для покупки билета в метро (эффективность посредством контроля)
  • руководство неопытных пользователей с постепенным раскрытием и добавление строки поиска прямо из экрана меню,
  • наличии интеллектуальной системы поиска, которая терпима к орфографическим ошибкам,
  • добавить сочетания клавиш для основных французских артиклей, чтобы облегчить поиск: Le, La, Les, Saint, Sainte, De, Du, Des. С этой же целью добавить QWERTY/AZERTY клавиатуры,
  • создать понятные и визуальные группы билетов, перенеся основное внимание к двум наиболее часто используемым билетам (эффективность благодаря прогрессивному раскрытию).

Элементы интерфейса

Следующий шаг — я сделал черно-белый макет, чтобы сначала сосредоточиться на контрасте:

Покупка билетов на метро в Париже – Прототипирование концепта
Прототипирование концепта

Четверг — Работающий прототип

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

Если вы дочитали так далеко, поздравляю! Вы однозначно заработали себе право немного повеселиться: 👇 Нажмите здесь, чтобы поиграться с моим метро автоматом 👇

Нажмите здесь, чтобы увидеть проект `метро`

Покупка билетов на метро в Париже – UX кейс-стади

Скриншоты нового меню
Скриншоты нового меню

Элементы интерфейса после первой итерации

Покупка билетов на метро в Париже – UX кейс-стади

Пятница — Проверка

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

Целью было проверить были ли решены 3 проблемных вопроса. У меня были некоторые познавательные результаты, которые заставляют меня делать некоторые итерации интерфейса (теперь прототип обновлен с учетом этих изменений). Например, кнопка быстрой покупки не была достаточно заметна, некоторые детали были добавлены в результаты поиска. Так ticket t+/Paris region превратились в ticket inside/outside Paris, и тесты дали мне идею показывать маршрут во время печати билетов.