У большинства из нас есть мобильные телефоны, которые нужно регулярно оплачивать. Теоретически, платежные терминалы позволяют это сделать где угодно и когда угодно, быстро и без очередей. Однако в какой-то момент вы сталкиваетесь с такими проблемами, как «Ну и где тут мой интернет-провайдер?», «Что это за личный кабинет?», «Как оплачивать квартиру?», «Ой, я положил деньги не тот телефон – что делать?!»… Итак, как можно оценить потребительские качества платежных терминалов?
В этой статье вы не узнаете, каким должен быть аппарат внешне, где должен быть купюроприемник и как подобает выглядеть «модному» терминалу.
Зато вы узнаете, какие проблемы возникают у пользователей, когда они пытаются оплатить услуги с помощью платежных терминалов. А также узнаете, как можно улучшить интерфейс программ для оплаты, чтобы людям жилось легче, чтобы они реже ошибались и интерфейс казался им проще и логичнее.
И у зарубежных, и у наших автоматов - один предок. Первое устройство такого типа придумал гениальный ученый античности Герон Александрийский. В 1 веке н.э. в своем труде «Пневматика» он описал первый торговый автомат для продажи «священной воды».
Вообще, платежные терминалы для оплаты услуг распространены только в России и еще в нескольких странах СНГ. Это связано с “предоплатными” тарифами на сотовую связь, распространением наличных денег и неразвитостью оплаты по пластиковым картам.
Нигде в Европе, США и других западных странах не увидеть терминалов, подобных нашим. Зато там есть другие – торговые автоматы для продажи воды, шоколадок, билетов, нижнего белья, живых цветов и еще много чего.
Чтобы избежать проблем при эксплуатации платежных терминалов, важно на раннем этапе провести юзабилити-тестирование прототипов платежных программ, а затем тестирование уже готового интерфейса.
Данная статья основана на результатах двух проектов по юзабилити-тестированию. В 2008 г. компания Usabilitylab проводила тестирование терминалов одной из платежных систем. Кроме того, при подготовке статьи я провела небольшое юзабилити-тестирование веб-эмуляторов двух действующих версий интерфейса платежной системы Cyberplat. Эти версии можно опробовать самостоятельно на терминалах города или скачать отсюда.
Что такое платежный терминал
Обычный платежный терминал состоит из двух частей: аппаратной (металлический корпус, встроенный компьютер, монитор, источник бесперебойного питания, принтер чеков, купюроприемник) и программной. Причем именно программа обеспечивает взаимодействие пользователя с терминалом и помогает – или мешает – ему совершить оплату.
О чем важно помнить при проектировании интерфейсов терминалов для людей:
- Кто ваш пользователь?
- Что ему нужно? Что для него важно?
- Какие у него есть возможности и ограничения?
Пользователи платежных терминалов
Терминалами пользуются 65% жителей Москвы разных возрастов. Среди них равное количество мужчин и женщин. Причем, чем моложе люди, тем выше них доля пользователей услугами терминалов. Также, чем выше доход, тем больше среди них пользователей платежных автоматов.
Из диаграммы, приведенной выше, видно что аудитория у платежных терминалов очень широкая. Поэтому очень важно учитывать особенности людей из разных категорий и их антропометрические возможности:
- Возраст. Известно, что пожилые люди хуже видят;
- Компьютерную грамотность. Большое количество людей не пользуются компьютером или работает с ним очень редко – поэтому им трудно осваивать устройства, интерфейс которых приближен к компьютерному.
- Люди старшего возраста придают большее значение удобству, чем дизайну; молодежь наоборот.
Что важно для пользователей
- Быстро совершить платеж;
- Простой, логичный, понятный программный интерфейс;
- Уверенность, что деньги не пропадут.
Принципы проектирования экранов с тачскрином
Обязательные функции:
- Если печать чеков в данный момент невозможна, терминал должен информировать пользователя об этом, до совершения оплаты;
- На терминале должна быть размещена заметная информация с контактным телефоном фирмы, которая будет решать вопросы с начислением средств на счет, в случае возникновения проблем;
- Комиссия должна обязательно отображаться на терминале;
Кликабельные области
Из когнитивной психологии известно, что:
- Области, куда можно нажимать, должны выглядеть так, чтобы пользователь понимал, что они кликабельны;
- Кликабельные области должны быть большими (больше 2,6 см2);
- Кнопки должны быть объемными на вид (например, как в Windows), с тенью. При нажатии на кнопку она должна откликаться;
- Пользователь делает меньше ошибок при наборе текстра/цифр, если кнопки на виртуальной клавиатуре расположены на небольшом расстоянии друг от друга;
Ввод символов:
- На экране должно быть четко видно поле для ввода символов и позиция курсора;
- Всегда должна быть возможность исправить неправильно введенные символы;
Оформление и отображение текста:
- Контраст между текстом и фоном должен быть высоким (таким, чтобы у пользователей не было проблем при чтении надписей);
- Текст должен быть крупным (более 16 pt);
- В тексте должны использоваться простые шрифты без засечек;
- Количество основных цветов в интерфейсе должно быть не более 4-5 (чтобы создать визуально приятный образ);
- Информация не должна кодироваться только цветом. Важно, чтобы была и другая кодировка, кроме цвета;
- Текст должен быть простым и понятным, и иметь однозначное толкование;
Время отклика:
- В идеале время отклика системы на действия пользователя не должно превышать 2-3 сек; если оно больше, то человек начинает нервничать**;
- Если операция длительная и время ожидания может достигнуть 10 сек или больше, то нужно показывать пользователю прогресс-бар (или что-то подобное), информирующий его о времени ожидания.
Навигация:
- Везде должна быть возможность вернуться назад;
- У кнопок «Выход», «Назад», «В меню», «Помощь», «Далее» (желательно) должны быть фиксированные позиции на всех экранах;
- Необходимо всегда информировать пользователя, где он сейчас находится (заголовки разделов, например «Провайдеры Интернет») и т. п.;
- Желательно, чтобы иерархия объектов насчитывала не более 3 уровней вложенности;
- Должна быть простая возможность перехода в главное меню с большинства экранов (например, со страницы оплаты, списка провайдеров и т. п.);
- Необходимо избегать разбивания меню терминала на несколько экранов;
- Большие списки (например, «провайдеры») должны быть отсортированы (например, по алфавиту);
- В больших списках должен быть поиск.
Соблюдайте принципы
Для примера – случай, когда в интерфейсе терминала сразу не соблюдено несколько обязательных принципов:
- Недостаточный контраст: белый текст на бледно-сером фоне;
- Непонятные названия разделов: А-мега, Витрина, Оферта (не все пользователи понимают этот термин);
- Одна кнопка «А-мега» выглядит, как неактивная.
Прежде, чем рассмотреть другие проблемы, которые возникают у пользователей при работе с терминалом, давайте посмотрим, что пользователи оплачивают чаще всего:
- Сотовую связь;
- Интернет;
- Услуги ЖКХ и другие.
Оплата сотовой связи
При оплате сотового телефона через разные терминалы у пользователей бывают следующие проблемы:
- Непонятен формат ввода номера телефона (с «восьмеркой» или без нее?).
- Если нужно стереть неправильный символ, то непонятно, на какую кнопку нажимать: на «С» или на «<».
- Часто пользователи нажимают на «С» по аналогии со своими мобильными телефонами, думая, что она сотрет один символ. Но эта кнопка стирает весь текст;
- Нет возможности проверить введенный номер телефона, перед совершением оплаты.
- На экране оплаты нет кнопки «Назад» (даже когда пользователь еще не вставил купюру).
- Если между кнопками для ввода символов нет пустых областей, то пользователи вводят символы дольше по времени и совершают при этом больше ошибок.
Например, на экране, приведенном ниже, есть проблемы 2 и 3.
Что можно порекомендовать в этом случае (скриншот – ниже):
- Поле ввода телефона должно быть оформлено так, чтобы было понятно в каком формате нужно вводить телефон. Например: «8-()---».
- Достаточно одной кнопки «С», которая стирает один последний символ. Также желательно, чтобы она отличалась по цвету от других кнопок.
- На экране оплаты (когда уже можно вставить деньги в купюроприемник) должен отображаться введенный номер телефона.
- На экране оплаты должна быть кнопка назад, чтобы пользователь мог откорректировать номер телефона.
- Удобно, когда поле ввода номера телефона находится сразу над виртуальной клавиатурой.
- На виртуальной клавиатуре между кнопками должно быть небольшое расстояние.
Оплата интернета
Задача «оплатить интернет» состоит из трех этапов:
- Найти нужного провайдера интернет в списке.
- Ввести логин или номер контракта.
- Оплатить.
Рассмотрим эти этапы по порядку.
Найти нужного интернет-провайдера
При поиске провайдеров на различных терминалах у пользователей возникают разного рода проблемы:
- Экран со списком провайдеров не имеет соответствующего заголовка, поэтому пользователь теряет контекст.
- На некоторых терминалах для пролистывания списка провайдеров используются кнопки «Вперед» и «Назад». Это неудачное решение. Не все пользователи понимают, что эти кнопки позволяют перелистывать страницы со списком операторов.
- На других терминалах нет возможности быстро перейти из середины списка операторов в главное меню. Там есть только одна кнопка «Назад», которая и перелистывает страницы и возвращает в верхнее меню (см. скриншот Cyberplat).
- Список операторов никак не отсортирован (логический порядок не угадывается).
- В списке беспорядочно представлены интернет-провайдеры данного региона и других регионов Российской Федерации. Из-за этого список перегружен большим количеством операторов, некоторые из которых даже не работают в данном регионе.
- В многостраничных списках провайдеров Интернет нет возможности поиска.
- Провайдеров Интернет и другие услуги в Интернете (хостинг, домены, интернет-реклама) нужно разбивать в разные категории, иначе список операторов растягивается на очень большое количество страниц.
- Все операторы в списке представлены в виде логотипов, без хороших подписей, в итоге пользователи не могут разобраться, какую кнопку нажимать.
Последний пункт хорошо иллюстрирует следующий пример:
Попробуйте, не читая подсказки, расшифровать название провайдера. (Этот логотип расшифровывает примерно три человека из десяти).
Но это еще не так страшно. Хуже всего то, что все различие между двумя этими логотипами – в надписи мелким шрифтом. (Одна из них «Интернет DISEL», другая «Аренда оборудования»). То есть это разные услуги! Люди с ослабленным зрением различить их не смогут.
(Кстати, это логотип оператора под названием «ЮТК». Кто отгадал, тот молодец!)
Для более близкого знакомства с проблемой рассмотрим скриншот, сделанный во время тестирования Cyberplat (старая версия интерфейса). Это скриншот не простой: кроме экрана со списком операторов изображена трасса движения глаз пользователя (сделана с помощью eye-tracking камеры Tobii). Сиреневые кружки с линиями – это трасса движения глаз, желтый кружок – нажатие на кнопку.
Здесь можно увидеть, как пользователь искал в списке операторов «Бит Телеком». Не найдя нужного провайдера, он кликнул на следующую страницу.
Почему это произошло?
- Пользователь не знал, как выглядит логотип «Бит Телеком»;
- Логотипы не отсортированы по алфавиту;
- Все логотипы представлены в графическом виде и у них нет подписей;
- В списке терминала, установленного в Москве области присутствуют операторы, которые здесь не работают, например: «Волгателеком»;
- В список провайдеров Интернет добавлены фирмы предоставляющие услуги хостинга, доменов и т. п.
Кроме того, на данном экране есть еще проблемы с интерфейсом. Попробуйте их найти.
Рекомендации по улучшению «Списка провайдеров»:
- Добавить заголовок к «Списку провайдеров».
- Отсортировать провайдеров.
- Провайдеров данного региона отображать отдельно от провайдеров других регионов.
- Добавить поиск.
- Кроме логотипов операторов должны отображаться их названия.
- Должно быть понятное перелистывание страниц. Есть различные варианты, например, добавить стрелки, или кнопки «След. стр» и «Пред. стр», или цифровые кнопки (но это не всегда понятно).
- Кнопка возвращения в главное меню «В меню».
Все эти рекомендации, если их реализовать, можно схематично представить так:
Ввести логин или номер договора для оплаты интернет
При оплате интернета пользователь должен ввести либо номер договора (цифрами), либо логин (символьный код). При вводе первого у пользователей почти не возникает проблем, при вводе второго – постоянно.
Клавиатуры для ввода логина поражают своим разнообразием, но все они совершают одни и те же ошибки:
- они похожи на компьютерные клавиатуры, и
- они активно используют английский язык в названиях кнопок.
Пользователи, плохо знакомые с компьютером или английским языком, совершают много опечаток при вводе логина.
Вот типичный пример неудачных решений:
Здесь можно увидеть несколько ошибок:
- Кнопка «Shift» переключает заглавные и строчные буквы. Вместо того, чтобы кнопку назвать по-русски, ее назвали по-английски, а под клавиатурой добавили справку «Для переключения с заглавных на строчные буквы используйте клавишу Shift».
- Пользователю может быть непонятно, что делает кнопка «Цифры»
- В данный момент на клавиатуре отображается английская раскладка, поэтому в кнопке «Eng» нет необходимости.
- На клавиатуре нет важных символов: @ и _
- Поле ввода однострочное, поэтому в кнопке «Enter» необходимости нет.
- Кнопка удаления символов «<» может быть понятна не всем пользователям.
Рекомендации по улучшению клавиатуры могут быть следующие:
- Для переключения между строчными и заглавными буквами достаточно одной кнопки. Когда буквы заглавные, то на ней отображается «Строч.», когда строчные – «Загл.»
- Для переключения языка должна быть одна кнопка. Когда на клавиатуре английская раскладка, на кнопке отображается «Рус», когда русская – «Eng».
- На клавиатуре должны присутствовать все символы, необходимые для ввода логина/номера договора операторов.
- Кнопка «Enter» не нужна, достаточно кнопки «Далее» (для соблюдения единообразия).
- Кнопка для удаления символов должна быть понятна пользователю.
Вот как мог бы выглядеть улучшенный вариант того же интерфейса:
Оплата квартплаты
Задачка на сообразительность… нет, не вашу, а платежного терминала. Допустим, вам нужно оплатить квартплату через платежный терминал в размере 2160 рублей, а у вас с собой только купюра в 3000 рублей. Что он сделает с остатком ваших денег?
Реализация оплаты услуг ЖКХ в разных интерфейсах довольно часто страдает от ошибок. Но я лучше просто похвалю, как хорошо сделана оплата квартплаты в новом интерфейсе Cyberplat (для Москвы и Московской области) и просто приведу скриншоты.
Сначала вводят «Код абонента»:
Единственный недостаток цифровой клавиатуры – это две кнопки для удаления символов.
Затем «Месяц оплаты» и так далее.
Давайте резюмируем положительный опыт Cyberplat:
- Все поля, которые нужно заполнить, находятся на одном экране. В любой момент можно исправить неправильно введенные символы.
- Наглядно видно, какое поле активно в данный момент.
- Чтобы выбрать месяц и год, нужно лишь нажав кнопку с соответствующим названием.
- И самое важное: не нужно просить пользователя вводить с цифровой клавиатуры значение суммы на квитанции. Потому что, к примеру, сумму в 2155 руб. 25 коп. терминал не примет. А пользователь в свою очередь предпочтет, чтобы деньги сверх этой суммы были также перечислены на квартплату и перенеслись на другой месяц.
Впервые опубликовано в «Юзабилити Бюллетень, выпуск 27, январь 2009».