Как улучшить кнопки интерфейса – на примере терминала в метро Киева

В 2015 в киевских автоматах для пополнения карточек метрополитена ввели новые интерфейсы. Давайте на практике рассмотрим две ошибки их дизайна, и подумаем, как сделать UI лучше. Я печалюсь, что дизайнеры совершают такие простые промашки при работе с миллионами людей.

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

Нас с вами интересует терминал, куда вставлялась эта карта для пополнения. А точнее, нас интересует первая версия его интерфейса. В ту пору деньги зачислялись на карточку сразу же после нажатия на кнопку «Оплатить». И всё бы ок, если б не выпустили вторую версию интерфейса, где был изъян, приводящий миллионы людей к одной не слишком приятной ситуации, раздражению и растерянности. Я и сам в эту ситуацию попал два раза, а может и вы, читатель.

Для начала, что сделали в новом интерфейсе – двойное подтверждение оплаты. Сначала мы вставляем карту, затем вводим деньги в терминал, и тогда появляется первая кнопка “Сплатити” (рисунок 1). Большая и зелёная.

После первого нажатия интерфейс изменяется. И вторую почти идентичную кнопку “Сплатити” (рисунок 2) нужно нажать, чтобы внесённые деньги перевелись в поездки.

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

Сам ход мыслей проектировщика UI ясен и вполне адекватен. Вторая кнопка скопирована с первой, но чуть изменена, чтобы окно со скидками выглядело гармонично и красиво. Но не продумана реакция пользователя, который воспринимает вторую кнопку “Сплатити” как совершенно иной элемент интерфейса.

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

Дополнительно, дизайнер не учёл предыдущий опыт пользователей. Кнопка была одна, все бабушки и дедушки привыкли – внесли купюру, всё, можно вытаскивать карточку. Но ведь к новому двуступенчатому подтверждению никто и никак не готов, кроме, конечно, внимательных и медленных людей.

Что получилось на практике. Давайте воспроизведём пошагово эту ошибку юзабилити интерфейса.

  1. Человек вводит деньги в терминал, нажимает первую кнопку «Сплатити», всё привычно.
  2. На экране появляется второе окно подтверждения, но человек уже вытаскивает карточку и идёт к турникету. Он ничего не подозревает, ведь вторая кнопка «Сплатити» ему незнакома, плюс, малозаметна из-за разницы в дизайне.
  3. И вот она неприятная ситуация. Человек подходит к турникету и после считывания карточки получает сообщение, что она заблокирована. Конечно, текст сообщения подобран слишком агрессивно, но об этом не будем. Короче, человек видит это, входит в состояние растерянности и фрустрации, пробует ещё разик, затем идёт разбираться к сотруднику метро, либо обратно к терминалу.
  4. И только через минут пять человек узнаёт про второе окно подтверждения оплаты. Деньги уже на карточке, но надо, оказывается, их ещё перевести было в поездки, от жеж, хрень то какая, думает человек, и волей-неволей привыкает к новым реалиям.

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

Что можно было сделать. Самое простое решение для интерфейса — сделать для второй кнопки «Сплатити» тот же самый размер и местоположение, что и у первой. Тогда она бросается в глаза сразу при появлении неизвестного для пользователя окна. Он не отходит, начинает читать, вникать, и в конце концов нажимает оную. Такое дизайнерское решение бы снизило количество «обманутых» людей на 80-90%.

Также неплохо бы сделать на первой кнопке надпись не «Оплатить», а «Зачислить». Тогда при рассмотрении второго окна подтверждения оплаты у пользователя не возникал бы вопрос “почему деньги не зачислились”.

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

А какое решение вы бы использовали в проектировке UI терминала в киевском метрополитене? Поделитесь в комментариях.

Leave a Comment

Your email address will not be published. Required fields are marked *