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