Юзабилити интерфейсов платежных терминалов

У большинства из нас есть мобильные телефоны, которые нужно регулярно оплачивать. Теоретически, платежные терминалы позволяют это сделать где угодно и когда угодно, быстро и без очередей. Однако в какой-то момент вы сталкиваетесь с такими проблемами, как «Ну и где тут мой интернет-провайдер?», «Что это за личный кабинет?», «Как оплачивать квартиру?», «Ой, я положил деньги не тот телефон – что делать?!»… Итак, как можно оценить потребительские качества платежных терминалов?

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

Вообще, платежные терминалы для оплаты услуг распространены только в России и еще в нескольких странах СНГ. Это связано с "предоплатными" тарифами на сотовую связь, распространением наличных денег и неразвитостью оплаты по пластиковым картам.

Нигде в Европе, США и других западных странах не увидеть терминалов, подобных нашим. Зато там есть другие – торговые автоматы для продажи воды, шоколадок, билетов, нижнего белья, живых цветов и еще много чего.

Чтобы избежать проблем при эксплуатации платежных терминалов, важно на раннем этапе провести юзабилити-тестирование прототипов платежных программ, а затем тестирование уже готового интерфейса платежного терминала.

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

Что такое платежный терминал

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

О чем важно помнить при проектировании интерфейсов платежных терминалов для людей:

* Кто ваш пользователь?
* Что ему нужно? Что для него важно?
* Какие у него есть возможности и ограничения?

Пользователи платежных терминалов

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

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

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

Что важно для пользователей

1. Быстро совершить платеж;
2. Простой, логичный, понятный программный интерфейс;
3. Уверенность, что деньги не пропадут.

Принципы проектирования экранов с тачскрином

Обязательные функции:

* Если печать чеков в данный момент невозможна, терминал должен информировать пользователя об этом, до совершения оплаты;
* На терминале должна быть размещена заметная информация с контактным телефоном фирмы, которая будет решать вопросы с начислением средств на счет, в случае возникновения проблем;
* Комиссия должна обязательно отображаться на терминале;

Кликабельные области

Из когнитивной психологии известно, что:
* Области, куда можно нажимать, должны выглядеть так, чтобы пользователь понимал, что они кликабельны;
* Кликабельные области должны быть большими (больше 2,6 см2);
* Кнопки должны быть объемными на вид (например, как в Windows), с тенью. При нажатии на кнопку она должна откликаться;
* Пользователь делает меньше ошибок при наборе текстра/цифр, если кнопки на виртуальной клавиатуре расположены на небольшом расстоянии друг от друга;

Ввод символов:

* На экране должно быть четко видно поле для ввода символов и позиция курсора;
* Всегда должна быть возможность исправить неправильно введенные символы;

Оформление и отображение текста:

* Контраст между текстом и фоном должен быть высоким (таким, чтобы у пользователей не было проблем при чтении надписей);
* Текст должен быть крупным (более 16 pt);
* В тексте должны использоваться простые шрифты без засечек;
* Количество основных цветов в интерфейсе должно быть не более 4-5 (чтобы создать визуально приятный образ);
* Информация не должна кодироваться только цветом. Важно, чтобы была и другая кодировка, кроме цвета;
* Текст должен быть простым и понятным, и иметь однозначное толкование;

Время отклика:

* В идеале время отклика системы на действия пользователя не должно превышать 2-3 сек; если оно больше, то человек начинает нервничать;
* Если операция длительная и время ожидания может достигнуть 10 сек или больше, то нужно показывать пользователю прогресс-бар (или что-то подобное), информирующий его о времени ожидания.

Навигация:

* Везде должна быть возможность вернуться назад;
* У кнопок «Выход», «Назад», «В меню», «Помощь», «Далее» (желательно) должны быть фиксированные позиции на всех экранах;
* Необходимо всегда информировать пользователя, где он сейчас находится (заголовки разделов, например «Провайдеры Интернет») и т. п.;
* Желательно, чтобы иерархия объектов насчитывала не более 3 уровней вложенности;
* Должна быть простая возможность перехода в главное меню с большинства экранов (например, со страницы оплаты, списка провайдеров и т. п.);
* Необходимо избегать разбивания меню терминала на несколько экранов;
* Большие списки (например, «провайдеры») должны быть отсортированы (например, по алфавиту);
* В больших списках должен быть поиск.

Соблюдайте принципы

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

* Недостаточный контраст: белый текст на бледно-сером фоне;
* Непонятные названия разделов: А-мега, Витрина, Оферта (не все пользователи понимают этот термин);
* Одна кнопка «А-мега» выглядит, как неактивная.

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

1. Сотовую связь;
2. Интернет;
3. Услуги ЖКХ и другие.

Оплата сотовой связи

При оплате сотового телефона через разные терминалы у пользователей бывают следующие проблемы:

1. Непонятен формат ввода номера телефона (с «восьмеркой» или без нее?).
2. Если нужно стереть неправильный символ, то непонятно, на какую кнопку нажимать: на «С» или на «?».
3. Часто пользователи нажимают на «С» по аналогии со своими мобильными телефонами, думая, что она сотрет один символ. Но эта кнопка стирает весь текст;
4. Нет возможности проверить введенный номер телефона, перед совершением оплаты.
5. На экране оплаты нет кнопки «Назад» (даже когда пользователь еще не вставил купюру).
6. Если между кнопками для ввода символов нет пустых областей, то пользователи вводят символы дольше по времени и совершают при этом больше ошибок.
Например, на экране, приведенном ниже, есть проблемы 2 и 3.

Не понятно, как вводить и как стирать символы

Что можно порекомендовать в этом случае (скриншот - ниже):

1. Поле ввода телефона должно быть оформлено так, чтобы было понятно в каком формате нужно вводить телефон. Например: «8-(***)-***-**-**».
2. Достаточно одной кнопки «С», которая стирает один последний символ. Также желательно, чтобы она отличалась по цвету от других кнопок.
3. На экране оплаты (когда уже можно вставить деньги в купюроприемник) должен отображаться введенный номер телефона.
4. На экране оплаты должна быть кнопка назад, чтобы пользователь мог откорректировать номер телефона.
5. Удобно, когда поле ввода номера телефона находится сразу над виртуальной клавиатурой.
6. На виртуальной клавиатуре между кнопками должно быть небольшое расстояние.

Оплата интернета

Задача «оплатить интернет» состоит из трех этапов:

1. Найти нужного провайдера интернет в списке.
2. Ввести логин или номер контракта.
3. Оплатить.

Рассмотрим эти этапы по порядку.
Найти нужного интернет-провайдера

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

1. Экран со списком провайдеров не имеет соответствующего заголовка, поэтому пользователь теряет контекст.
2. На некоторых терминалах для пролистывания списка провайдеров используются кнопки «Вперед» и «Назад». Это неудачное решение. Не все пользователи понимают, что эти кнопки позволяют перелистывать страницы со списком операторов.
3. На других терминалах нет возможности быстро перейти из середины списка операторов в главное меню. Там есть только одна кнопка «Назад», которая и перелистывает страницы и возвращает в верхнее меню (см. скриншот Cyberplat).
4. Список операторов никак не отсортирован (логический порядок не угадывается).
5. В списке беспорядочно представлены интернет-провайдеры данного региона и других регионов Российской Федерации. Из-за этого список перегружен большим количеством операторов, некоторые из которых даже не работают в данном регионе.
6. В многостраничных списках провайдеров Интернет нет возможности поиска.
7. Провайдеров Интернет и другие услуги в Интернете (хостинг, домены, интернет-реклама) нужно разбивать в разные категории, иначе список операторов растягивается на очень большое количество страниц.
8. Все операторы в списке представлены в виде логотипов, без хороших подписей, в итоге пользователи не могут разобраться, какую кнопку нажимать.

Последний пункт хорошо иллюстрирует следующий пример:

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

Но это еще не так страшно. Хуже всего то, что все различие между двумя этими логотипами – в надписи мелким шрифтом. (Одна из них «Интернет DISEL», другая «Аренда оборудования»). То есть это разные услуги! Люди с ослабленным зрением различить их не смогут.

(Кстати, это логотип оператора под названием «ЮТК». Кто отгадал, тот молодец!)

Для более близкого знакомства с проблемой рассмотрим скриншот, сделанный во время тестирования Cyberplat (старая версия интерфейса). Это скриншот не простой: кроме экрана со списком операторов изображена трасса движения глаз пользователя (сделана с помощью eye-tracking камеры Tobii). Сиреневые кружки с линиями – это трасса движения глаз, желтый кружок – нажатие на кнопку.

Здесь можно увидеть, как пользователь искал в списке операторов «Бит Телеком». Не найдя нужного провайдера, он кликнул на следующую страницу.

Почему это произошло?

* Пользователь не знал, как выглядит логотип «Бит Телеком»;
* Логотипы не отсортированы по алфавиту;
* Все логотипы представлены в графическом виде и у них нет подписей;
* В списке терминала, установленного в Москве области присутствуют операторы, которые здесь не работают, например: «Волгателеком»;
* В список провайдеров Интернет добавлены фирмы предоставляющие услуги хостинга, доменов и т. п.
Кроме того, на данном экране есть еще проблемы с интерфейсом. Попробуйте их найти.

Рекомендации по улучшению «Списка провайдеров»:

1. Добавить заголовок к «Списку провайдеров».
2. Отсортировать провайдеров.
3. Провайдеров данного региона отображать отдельно от провайдеров других регионов.
4. Добавить поиск.
5. Кроме логотипов операторов должны отображаться их названия.
6. Должно быть понятное перелистывание страниц. Есть различные варианты, например, добавить стрелки, или кнопки «След. стр» и «Пред. стр», или цифровые кнопки (но это не всегда понятно).
7. Кнопка возвращения в главное меню «В меню».

Все эти рекомендации, если их реализовать, можно схематично представить так:

Ввести логин или номер договора для оплаты интернет

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

Клавиатуры для ввода логина поражают своим разнообразием, но все они совершают одни и те же ошибки:

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

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

Вот типичный пример неудачных решений:

Типичный пример неудачных решений

Здесь можно увидеть несколько ошибок:

1. Кнопка «Shift» переключает заглавные и строчные буквы. Вместо того, чтобы кнопку назвать по-русски, ее назвали по-английски, а под клавиатурой добавили справку «Для переключения с заглавных на строчные буквы используйте клавишу Shift».
2. Пользователю может быть непонятно, что делает кнопка «Цифры»
3. В данный момент на клавиатуре отображается английская раскладка, поэтому в кнопке «Eng» нет необходимости.
4. На клавиатуре нет важных символов: @ и _
5. Поле ввода однострочное, поэтому в кнопке «Enter» необходимости нет.
6. Кнопка удаления символов «?» может быть понятна не всем пользователям.

Рекомендации по улучшению клавиатуры могут быть следующие:

1. Для переключения между строчными и заглавными буквами достаточно одной кнопки. Когда буквы заглавные, то на ней отображается «Строч.», когда строчные – «Загл.»
2. Для переключения языка должна быть одна кнопка. Когда на клавиатуре английская раскладка, на кнопке отображается «Рус», когда русская – «Eng».
3. На клавиатуре должны присутствовать все символы, необходимые для ввода логина/номера договора операторов.
4. Кнопка «Enter» не нужна, достаточно кнопки «Далее» (для соблюдения единообразия).
5. Кнопка для удаления символов должна быть понятна пользователю.

Вот как мог бы выглядеть улучшенный вариант того же интерфейса:

Оплата квартплаты

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

Реализация оплаты услуг ЖКХ в разных интерфейсах довольно часто страдает от ошибок. Но я лучше просто похвалю, как хорошо сделана оплата квартплаты в новом интерфейсе Cyberplat (для Москвы и Московской области) и просто приведу скриншоты.

Сначала вводят «Код абонента»:

Единственный недостаток цифровой клавиатуры – это две кнопки для удаления символов.

Затем «Месяц оплаты» и так далее.

Давайте резюмируем положительный опыт Cyberplat:

1. Все поля, которые нужно заполнить, находятся на одном экране. В любой момент можно исправить неправильно введенные символы.
2. Наглядно видно, какое поле активно в данный момент.
3. Чтобы выбрать месяц и год, нужно лишь нажав кнопку с соответствующим названием.
4. И самое важное: не нужно просить пользователя вводить с цифровой клавиатуры значение суммы на квитанции. Потому что, к примеру, сумму в 2155 руб. 25 коп. терминал не примет. А пользователь в свою очередь предпочтет, чтобы деньги сверх этой суммы были также перечислены на квартплату и перенеслись на другой месяц.