CustDev|Customer Journey Map|eye-tracking|IT|UX-исследователь|UX исследования|Банковский UX|Интервью-метод|Проведение опроса|банкоматы/терминалы|госсайты|заметки|интервью|интернет-магазин|исследование пользователей|конференции|мобильные интерфейсы|проектирование|профессиональные интерфейсы|рейтинг банков|экспертная оценка|юзабилити тестирование

Альянс веб-аналитики и экспертной оценки для улучшения юзабилити приложения

По нашему опыту, наилучшие результаты получаются, если в ходе проекта сочетать разные методы: например, одним методом выявить гипотезы, а другим — их верифицировать. Если речь идёт о юзабилити-аудите, то для формулировки гипотез отлично подходит веб-аналитика, а для их верификации — экспертная оценка или юзабилити-тестирование.

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

Анализ данных веб-аналитики

В 2017 году нам доверили провести анализ и диагностику юзабилити-проблем у мобильного приложения одного российского ТЦ. Глобальной целью проекта было повышение лояльности пользователей к приложению. От нас требовалось выявить основные юзабилити-проблемы приложения и дать рекомендации по их устранению. Делать это предполагалось при помощи метода экспертной оценки.

Приложение в основном выполняет информационную функцию. Его главная задача — упрощать пользователям времяпрепровождение в любимом ТЦ. Для этого в нем есть такие функции, как поиск товаров, навигация внутри ТЦ, новости, события, акции, бонусы и ещё несколько полезных сервисов.

Приложение уже несколько лет просуществовало на платформах iOS и Android. Активность пользователей отслеживалась через Google Analytics. На момент старта работ уже были накоплены данные за значительный период. Не хватало некоторых настроек, например, сегментации на авторизованных пользователей и обычных, а также посетителей ТЦ. Но имеющихся данных уже было достаточно, чтобы оценить востребованность отдельных разделов и функций приложения, изучить общие количественные показатели (общее количество и длина сеансов, MAU\LMAU, 30d retention) и описать аудиторию (базовая демография, региональность, время и просмотры экранов, глубина просмотров).

                                                                                  Отрывок из отчёта по аналитике приложения

 

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

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

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

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

Проведение экспертной оценки и формирование гипотез для более тонкой настройки аналитики

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

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

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

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

 

В будущем нам предстояло оценить эффективность от внедрения рекомендаций эксперта. Поэтому мы дали заказчику рекомендации по дополнительной настройке аналитики.

                                     Отрывок из отчёта по аналитике. Часть таблицы с рекомендациями по настройке целей

Внедрение рекомендаций. Подведение итогов

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

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

Например, мы увидели, что в результате нашей работы качественные показатели при переходе пользователей на новые версии приложения выросли. Так, retention 30d по iOS-приложению вырос после внедрения изменений практически в 2 раза.

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

 

 

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

Автор текста и специалист на проекте — Антон Жилин. К сожалению, Антон больше не работает с нами. Мы благодарны Антону за интересный кейс и отличную работу!

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

«Тинькофф Путешествия»: небольшой юзабилити-обзор

1. Контраст текста

Руководство по обеспечению доступности веб-контента (WCAG) требует, чтобы коэффициент контрастности основного текста по отношению к фону был не меньше 4,5:1. Если текст имеет меньший контраст, пользователям с плохим зрением будет трудно его читать.

«Тинькофф Путешествия»: Можно улучшить

На сайте «Тинькофф Путешествий» коэффициент контрастности названий полей «Откуда», «Куда», «Туда», «Обратно» составляет всего 2.88:1. Многим пользователям с плохим зрением будет плохо видно этот текст.

Низкий контраст серого текста в полях ввода

 

Пример хорошего решения

На сайте S7 Airlines высокий коэффициент контрастности текстов («Куда», «Выберите даты» и т. д.) по отношению к фону делает поля ввода более удобочитаемыми для пользователей с нарушениями зрения.

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

S7 Airlines. Контраст текста к фону составляет 7.21:1 и соответствует требованиям WCAG

 

2. Заполнение города в поле «Откуда»

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

«Тинькофф Путешествия»: Можно улучшить

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

При переходе на сайт пользователь видит пустое поле «Откуда»

 

Пример хорошего решения

На сайте Lufthansa в поле «Откуда» автоматически выставляется город, из которого совершается переход на сайт

Сайт автоматически подставляет в поле вылета аэропорт города, из которого приходит запрос

 

3. Подсказки по мере ввода названия города

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

«Тинькофф Путешествия»: Хорошо

На сайте «Тинькофф Путешествий» функция подсказок реализована. Если в поле «Откуда» или «Куда» начать набирать «Петер» вместо «Санкт-Петербург», то в выпадающем списке можно будет выбрать подходящий вариант.

      По мере ввода названия города в поле пользователь видит подсказки

 

Как не надо

Сайт Lufthansa требует ввести полное название города. Например, при попытке купить билеты до Санкт-Петербурга, по запросу «Петер» или «Петербург» не будет предложено никаких вариантов.

Сайт Lufthansa не предлагает пользователю подсказок по мере ввода названия города

 

4. Использование иконок и условных обозначений

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

«Тинькофф Путешествия»: Можно улучшить

Если время прилёта приходится на следующий календарный день, в выдаче на сайте «Тинькофф Путешествий» появляется красный значок «+1». Понять, что он означает, можно лишь по всплывающей подсказке или «опытным путем», посмотрев, в каких рейсах ещё он встречается.

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

Пример хорошего решения

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

S7 Airlines. Для рейсов, прилетающих на следующий календарный день, стоит пометка «+1 день»

 

5. Информация об авиакомпании

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

«Тинькофф Путешествия»: Можно улучшить

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

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

 

«Тинькофф Путешествия»: Хорошо

В мобильной версии сайта «Тинькофф Путешествий» всё хорошо: ясно указано название авиакомпании, а логотип выполняет лишь вспомогательную функцию.

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

 

6. Результаты поиска: отображение самого дешевого и самого быстрого рейса

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

«Тинькофф Путешествия»: Хорошо

На сайте «Тинькофф Путешествий» карточки «Самый быстрый» и «Самый дешевый» с информацией о рейсе отображаются вверху, над списком остальных результатов поиска.

                                            В результатах поиска сразу заметны самый дешевый и самый быстрый результаты

Как не надо

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

           Aviasales. В результатах выдачи сложно быстро отыскать самый быстрый рейс

 

7. Возможность посмотреть динамику цен на билеты

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

«Тинькофф Путешествия»: Можно улучшить

На сайте «Тинькофф Путешествий» нет возможности ознакомиться с динамикой цен на билеты. Чтобы выбрать оптимальную дату вылета, придется перебирать все даты вручную.

  На сайте нет возможности ознакомиться с динамикой цен на билеты

 

Пример хорошего решения

В сервисе «Яндекс. Путешествия» динамика цен отображается прямо в календаре для выбора дат вылета и прилета.

 

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

 

8. Требование авторизации для покупки билета

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

«Тинькофф Путешествия»: Можно улучшить

На сайте «Тинькофф Путешествий» нельзя приобрести билет без регистрации/авторизации по номеру телефона. Зачем такое жесткое требование — не объясняется. В тексте под полем ввода написано, что на указанный номер пришлют СМС-код для подтверждения, и это ещё непонятнее: что надо будет подтверждать и какие обязательства на пользователя это накладывает?

Пользователю сразу предлагается ввести номер телефона и подтвердить его по СМС без возможности пропустить этот        шаг. Неочевидно, для чего именно это нужно

 

Пример хорошего решения

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

           Ввод контактных данных помещен в контекст покупки билета и сопровождается текстом, объясняющим, зачем это нужно

 

9. Условия провоза багажа

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

«Тинькофф Путешествия»: Можно улучшить

На сайте «Тинькофф Путешествия» в карточке рейса нет детальной информации об условиях провоза багажа. Указано только, что багаж включен или не включен в стоимость билета.

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

 

Пример хорошего решения

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

 

                                                В карточке рейса представлена информация о стоимости и опциях провоза багажа

 

10. Тип билета

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

«Тинькофф Путешествия»: Можно улучшить

На сайте «Тинькофф Путешествий» в результатах выдачи никак не обозначено, является билет возвратным или невозвратным. Информация о типе билета в карточке рейса появляется только после нажатия кнопки «Купить»

          В списке результатов не показано, какие из рейсов предполагают невозвратные билеты

 

Пример хорошего решения

В результатах выдачи на сайте «Победы» сразу отображаются типы билетов и понятна их стоимость. Для невозвратных билетов, возможно, всё-таки стоило бы добавить соответствующую пометку, чтобы не заставлять пользователей делать логические умозаключения о том, что если один тип билетов называется «возвратный», остальные такими не являются.

                     Пользователю предоставляют информацию о типах билетов и их стоимости

 

11. Количество оставшихся мест на рейс

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

«Тинькофф Путешествия»: Можно улучшить

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

                               Для рейсов в выдаче не отображается количество оставшихся мест

 

Пример хорошего решения

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

                           В результатах выдачи отмечены рейсы, на которые осталось мало мест

 

Заключение

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

Полноценное юзабилити-тестирование на реальных пользователях позволило бы найти ещё больше проблем. Причем в данном случае лучше всего сработало бы сравнительное тестирование, чтобы увидеть, какие решения на сайтах конкурентов работают действительно хорошо, а какие — не очень.

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Юзабилити-проблемы личных кабинетов частных клиник

Регистрация на сайте

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

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

 

                                                                                       Форма регистрации на сайте первой клиники

 

Больше всего вопросов вызвало поле «Секретное слово». Для чего оно нужно? Какое слово лучше придумать? Я выяснила, что оно нужно для восстановления пароля, но представьте себе ситуацию: вы зарегистрировались, благополучно забыли секретное слово, а спустя год вам понадобилось восстановить пароль. Эта проблема решаема, но всё равно неприятно. Если уж разработчики сайта решили использовать такой метод восстановления пароля — лучше предупредить об этом пользователя сразу, чтобы он знал, что секретное слово действительно важно, и его лучше не терять.

Надписи «Политика в отношении обработки персональных данных» и «Согласие на обработку персональных данных» на самом деле являются ссылками, хотя как ссылки не оформлены. Чтобы зарегистрироваться, нужно поставить галочки рядом с ними, и это выглядит очень странно: я ставлю галочку рядом с надписью, и это выражает что? Моё согласие? То, что я видела эту надпись? Интересно, много ли людей действительно догадаются кликнуть по ней? Я знаю, что эти документы почти никто не читает, но было бы честнее явно оформить ссылки на них.

Кстати, кнопка «Регистрация» на форме доступна сразу, даже если не все поля заполнены. Если нажать на неё до того, как форма заполнена до конца, все незаполненные поля подсветятся красным. Некритичная проблема, но всё-таки вынуждает пользователей делать лишний шаг.

На сайте второй клинки подход к регистрации ровно противоположный: пользователю надо лишь ввести свою почту, подтвердить её, а потом придумать пароль. Никаких других данных вводить не надо. Тем не менее, смущает, что этот нехитрый процесс разбит на три отдельных окна, а подтверждение телефона/почты идет вторым шагом, ещё до того, как пользователь придумал пароль. Обычно подтверждение идет последним шагом, после полной регистрации.

И опять же, на всех шагах кнопки отправки формы активны, даже если поля пустые.

                                                                                  Форма регистрации на сайте второй клиники

 

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

В любом случае:

  • Используйте минимальное количество окон при регистрации. Нет смысла разбивать форму из трех полей на три окна.
  • Отмечайте обязательные поля, не заставляете пользователя думать «Все ли надо заполнять?».
  • Не ленитесь писать подсказки к полям — объясняйте пользователю, зачем он указывает эти данные (секретное поле нужно для восстановления пароля, номер телефона нужен, чтобы мы смогли с вами связаться и т.п.).
  • Подумайте о том, чтобы дезактивировать кнопку отправки формы («Зарегистрироваться», «Отправить» и т.п.) до тех пор, пока не будут заполнены все поля.

Запись на прием

Каждая клиника позаботилась, чтобы пользователь сразу нашел кнопку «Записаться» сразу зайдя к себе в личный кабинет, это приятно. Сложности начались сразу после её нажатия.

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

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

 

                                                                                           Форма записи к врачу в первой клинике

 

На сайте второй клинки я не стала записываться к врачу. Посчитала обманом, что мне предложили зарегистрироваться по электронной почте, подтвердить её, а потом попросили не только ФИО и дату рождения (что ожидалось при регистрации), но и поле телефона оказалось обязательным. А если бы он у меня был сломан, утерян или я просто не хочу его сообщать?

Тем не менее, даже если бы я захотела записаться на прием к врачу через этот сайт, то столкнулась бы с серьезной проблемой: как выбрать нужную клинику? Личный кабинет предлагает воспользоваться поисковой строкой, чтобы найти врача по специализации или ФИО. Но в профиле врача нет описания, по какому адресу из шести возможных он принимает. Хорошо, если я иду к этому врачу повторно, но что, если я пытаюсь найти специалиста для первого посещения и не знаю, в каком из филиалов он работает?

Выбрать клинику можно только нетривиальным путем: нажать «записаться» в отдельном блоке в правой части экрана, в появившемся окне выбрать услугу «прием в клинике», а потом нажать на ссылку «6 клиник» в правом верхнем углу окна. Тогда откроется список из шести клиник, откуда нужно убрать ненужные (вместо того, чтобы выбрать нужную). Много ли пользователей догадаются это сделать? Если же нажать на название специализации врача в основном окне, то вы просто получите список сеансов, доступных для записи, не отсортированных по адресам. Очень неудобно.

                                                                                                  Первый шаг для выбора нужной клиники

 

                                                                             Второй шаг для выбора нужной клиники. Очень неудобно

 

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

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

Во-вторых, адреса клиник представлены списком, и выбрать нужную на карте или по метро невозможно. А ещё в списке отображаются клиники, куда, судя по всему, нет записи: для взрослых клиник в 6 случаях из 12 при выборе адреса открывается пустой список со специальностями врачей. Зачем тогда показывать эти адреса?

 

                                                   Форма записи на прием. Для выбора профиля клиники использованы зеленые квадраты

 

                                          Форма записи на прием. Для выбора адреса использованы радиокнопки

 

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

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

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

 

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

 

Мои выводы:

  • Все обязательные поля, требуемые для регистрации пользователя, лучше всё-таки просить на первом шаге или предупреждать, что некоторые данные потребуются позже. Если пользователь не хочет оставлять свой номер телефона, он будет разочарован требованием ввести его во время записи к врачу.
  • Для сетевых клиник критически важно дать пользователю записаться в ту клинику, куда ему будет удобно приехать. Решение о том, в какой момент предоставлять этот выбор — до того, как пользователь определиться со специализацией врача или после — остается за разработчиками. В любом случае, пользователь должен понимать, куда он записывается и где принимают нужные ему врачи.
  • Если у клиники несколько филиалов, дайте возможность пользователю посмотреть местонахождение каждого из них на карте. Не вынуждайте пользователя уходить с сайта, чтобы посмотреть положение клиник на карте стороннего сервиса. Он может не вернуться.
  • Соблюдайте единообразие при создании форм. Не смешивайте контролы разного типа. Юзабилити-проблему это не создаёт, но впечатление недоделанности остаётся.

Несколько пациентов для одного личного кабинета

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

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

Данную проблему решил сервис ЕМИАС, где один пользователь может записывать каждого члена семьи внутри одного личного кабинета.

Мои выводы:

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

Заключение

Мой опыт — опыт только одно человека. Я могла не заметить каких-то проблем, а другие — преувеличить. Тем не менее, я надеюсь, что написанное здесь будет полезно читателю как источник идей для размышления. Если после прочтения этой статьи вы взглянете на свой личный кабинет глазами неподготовленного пользователя, и у вас появятся гипотезы о том, что можно было бы улучшить, значит, моя цель достигнута.

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

Если вы хотите, чтобы мы провели для вас такое исследование — оставьте заявку на сайте или напишите нам на info@usabilitylab.ru

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

Юзабилити терминалов навигации в ТЦ

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

Мы изучили интерактивные терминалы навигации в пяти ТЦ: «Ривьера», «Океания», «Семёновский», Центральный Детский Мир (ЦДМ) и ЦУМ. Дальше мы поделимся своими выводами о том, какие проблемы увидели и о том, как можно попробовать их избежать.

Ориентация экрана

В ТЦ встречается два вида стоек: вертикальная (узкая сторона экрана параллельна полу) и горизонтальная (узкая сторона экрана перпендикулярна полу).

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

 

ТЦ «Семеновский»: схема этажа не умещается в экран и к тому же частично перекрывается баннерами

 

При отображении схемы этажа на вертикальных терминалах сверху и снизу появляются пустые области. Когда пользователь смотрит на схему, оказывается, что пространство сверху находится сильно выше его линии взора. Поэтому есть риск, расположенная там информация, скорее всего, попадёт в «слепую зону» — пользователи ее не увидят. Если это будет описание магазина, это не очень критично. А вот если пользователь не увидит элементы управления — например, кнопки «назад» и «домой», — то не сможет вернуться на предыдущий экран, чтобы уточнить или изменить поиск.

 

ЦУМ: кнопки «Назад», «Главная» и «Карта» расположены в слепой зоне и плохо заметны

Частично решить эту проблему можно, развернув схему ТЦ вытянутой стороной вдоль экрана — именно это можно увидеть на терминале в ЦУМе. Но это решение работает только в том случае, если здание ТЦ представляет собой вытянутый прямоугольник. Если же ТЦ имеет форму буквы Т, Z или другую «неправильную», вписать схему этажей в вертикальный экран будет проблематично. Вот почему мы считаем, что горизонтальные терминалы в целом удобнее. Пользователь может сразу увидеть схему всего этажа в нормальном масштабе, а места на экране хватает, чтобы показать баннеры, элементы управления и информацию о магазине.

 

                                                               ТЦ «Семёновский»: горизонтальная стойка навигации

 

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

 

ТЦ «Океания»: навигационные кнопки («Назад», «Домой», «Где я» и «Поиск») разбросаны по разным углам. Кнопки, расположенные в правом верхнем углу, пользователи могут не заметить

 

Выводы.

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

Поведение поисковой строки

Большинство посетителей ТЦ обращаются к терминалам, чтобы найти конкретный магазин (или кафе, или развлекательный центр) по названию. Для этого они пользуются поисковой строкой. Проблема в том, что посетители могут не знать, как правильно пишется название магазина, и вводить его с грамматическими ошибками или, например, использовать кириллицу вместо латиницы. Если поиск в таком случае ничего не найдет, посетитель может решить, что в этом ТЦ искомого магазина нет, даже если это на самом деле не так.

 

(видео) Посетитель ТЦ не может найти магазин Offprice, потому что использует кириллицу вместо латиницы

 

Поиск можно сильно облегчить, если по мере ввода отображать и фильтровать список магазинов по мере ввода символов. Так посетителю ТЦ даже не нужно будет вбивать название магазина полностью: скорее всего, он увидит подходящий вариант сразу, как введет первые две-три буквы. Здесь тоже есть проблема: некоторые терминалы отображают названия всех магазинов, где содержатся введенные пользователем символы, даже если они находятся в начале или в конце названия. На наш взгляд, это затрудняет поиск, потому что на экране появляется слишком много лишних вариантов. Люди редко ищут что-то, используя буквы из середины слова.

 

(видео) Терминал в ЦУМ фильтрует список магазинов по мере ввода, но не прощает опечаток и отображает список всех магазинов, в начале, середине или конце названий которых есть введенная комбинация символов

 

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

Ещё два довольно частотных запроса — это «туалет» и «банкомат», причем во втором случае могут даже искать банкомат конкретного банка. Почему-то мало где терминалы умеют обрабатывать эти поисковые запросы, хотя они связаны с самыми насущными потребностями посетителей ТЦ.

Выводы.

  1. Очень хорошо, если поисковая строка терминала будет уметь обрабатывать запросы, содержащие ошибки или написанные кириллицей вместо латинице.
  2. Фильтрация списка магазинов по мере ввода облегчает и ускоряет поиск. Чтобы посетителю ТЦ было совсем удобно пользоваться поиском, лучше, чтобы первыми в списке магазинов шли те, где введенные посетителем буквы находятся в начале названия, а не в середине.

Построение и отображение маршрутов

Наверное, главное преимущество интерактивного навигационного терминала перед обычной распечатанной схемой — возможность построить маршрут от того места, где стоит посетитель ТЦ, до нужного ему магазина. Маршрут отображается в виде точек или стрелок, показывающих, куда надо идти. Пока искомый магазин находится на том же этаже, что и посетитель ТЦ, проблем не возникает. Но что если магазин находится через один, а то и через два этажа от посетителя? Как показать этот переход между этажами? В терминалах, которые мы изучили, используется два подхода: два этажа показываются одновременно на 3D-схеме, так что видно весь маршрут сразу, или же последовательно отображаются этажи с кусочками маршрута и инструкциями.

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

 

ЦУМ: маршрут с первого этажа до банкомата на четвертом. Общее направление движения понятно, но экран очень зашумлен тенями, которые показывают “стены” павильонов, и названиями магазинов на обоих этажах. Это затрудняет восприятие маршрута

На самом деле, чтобы сориентироваться в ТЦ, посетителю совсем не обязательно видеть сразу все этажи. Важно понять — куда идти сначала на одном этаже, а затем на следующем. Поэтому последовательное отображение инструкций по этажам кажется более удобным вариантом: меньше визуального шума, и маршрут разделен на ясные шаги.

 

(видео) Маршрут с первого этажа до кинотеатра на четвертом в ТЦ Океания

 

При построении маршрута важно не только правильно определить начальное местоположение, но и развернуть схему так, чтобы человеку было понятно, в какую сторону ему двигаться. Эта функция есть не у всех терминалов, но ее отсутствие необходимо компенсировать хотя бы указанием, в какую сторону от терминала (направо, налево, прямо или назад) нужно начинать движение. Иначе посетителю ТЦ приходится долго крутить головой и сопоставлять с картой положение окружающих его павильонов, чтобы понять, куда идти.

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

 

ТЦ Ривьера. Чтобы построить маршрут до туалета, мы нажали на соответствующий значок на экране. Маршрут был построен, но на самом деле он ведет к магазину Л’Этуаль. Остается только надеяться, что рядом с магазином будет указатель.

 

Выводы.

  1. Если маршрут проходит по разным этажам, удобнее, когда этажи отображаются последовательно, а не одновременно.
  2. Терминал должен уметь строить маршруты до любого выбранного объекта на экране, а не только до павильонов.

Всякие мелочи: пиктограммы

Наконец, проблема, на первый взгляд незначительная: читаемость пиктограмм. Пиктограммы используются на навигационных кнопках и для отображения разных объектов на карте ТЦ.

На всех навигационных терминалах есть кнопка «домой», которая возвращает пользователя на главный экран. Если на кнопке нарисован стилизованный домик, то проблем с пониманием этой пиктограммы, скорее всего, не возникнет. Другие метафоры могут вызвать больше вопросов — например, в ТЦ Океания на кнопке “домой” нарисован якорь, а в ТЦ Семеновский — три горизонтальные полосы, которыми в других интерфейсах принято обозначать гамбургерные меню.

 

                        ТЦ Океания. Якорь — не самое понятное обозначение для кнопки “Домой”.

 

Значения некоторых пиктограмм, которыми обозначаются различные объекты на схеме, понять еще сложнее. Больше всего таких проблемных пиктограмм мы видели в терминалах ЦДМ, потому что там ими обозначены объекты инфраструктуры (например, лифты и эскалаторы), некоторые торговые павильоны и достопримечательности. Значение многих иконок совершенно не считывается: что означает, например, лампочка или завитушка под ней?

 

ЦДМ: использовано множество пиктограмм, некоторые из которых неинформативны

 

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

 

ТЦ Семеновский: иконки отличаются по цвету. Зеленые — запасной выход, синий — лифты и эскалаторы. Но что обозначают бледно-желтые иконки? Одна из них, предположительно, обозначает банкомат, о значении остальных можно лишь догадываться

 

Выводы.

Пиктограммы сложно сделать понятными, поэтому по возможности лучше пользоваться только самыми распространенными из них, а остальных избегать. Если в ТЦ пиктограммами обозначаются объекты разного типа, то нужно максимально визуально различать типы пиктограмм. Хорошим примером может послужить географическая карта, где благодаря разному оформлению типов объектов на одной карте удается показать и дома, и дороги, и водоёмы, и границы областей и государств, и разного рода подписи.

Заключение

В формат одной статьи невозможно уместить описание всех проблем, с которыми может столкнуться пользователь навигационного терминала в ТЦ. За кадром остались проблемы цветового решения и индикации выделенного объекта на схемах, «отзывчивость» тач-скрина, узнаваемость и расположение терминалов, полнота и адекватность информационного наполнения и многое другое. Здесь мы рассмотрели некоторые самые яркие проблемы и попытались представить, как их можно избежать.

В итоге самое неудобное, на наш взгляд, решение — в ТЦ «Ривьера». Его 3d-схемой с навигацией трудно управлять, при масштабировании иконки как попало располагаются над магазинами, иногда возникают технические сбои. В ЦУМе тоже не лучшее решение, но стоит отметить поиск — там список магазинов фильтруется сразу по мере ввода. В терминале в ЦДМ много специфических проблем, связанных с тем, что в ЦДМ есть еще достопримечательности и музеи.

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

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

Если вы хотите, чтобы мы спроектировали или оценили интерфейс вашего терминала, напишите нам на info@usabilitylab.ru

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых статей

Исследуйте, проектируйте, и заботьтесь о пользователях. Хороших вам интерфейсов!

Приложение «Перекресток. Сканер в телефоне». Взгляд юзабилити-аналитика

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

                                                                            Коротко об общих впечатлениях от работы с приложением

 

Первое включение

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

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

Экран регистрации в мобильном приложении

 

Кроме того, оказалось, что приложение никак не проверяет валидность номера карты и не дает никакой обратной связи об успешном совершении действия. Я ожидала увидеть какое-нибудь сообщение вроде “Карта успешно добавлена” или ещё что-нибудь в этом роде, но ничего подобного не было. У меня получилось добавить неактивированную карту Перекрестка и даже карту Вкусвилла, и никаких сообщений об ошибке я не получила. Интересно, что будет, если с такой некорректно добавленной картой попробовать совершать покупки?

После добавления карты приложение показывает экран с политикой обработки персональных данных, а затем — целых три экрана онбординга. Ценность онбординга, на мой взгляд, сомнительна. Первый экран вообще не имеет смысла: он сообщает о необходимости добавить карту в приложение, то есть сделать ровно то, что я уже и так сделала на предыдущем шаге. На втором экране написано, что для начала работы надо отсканировать QR-код на входе в магазин — эту же информацию я увидела сразу после онбординга, поэтому без второго экрана тоже можно обойтись. На третьем сообщается, что надо сканировать штрихкоды товаров, что, в принципе, очевидно. Кажется, что весь онбординг можно было бы уместить на одном экране или обойтись вообще без него. Тем более, что сейчас он зачем-то появляется при каждом открытии приложения.

                                                                          Первый, второй и третий экраны онбординга. Все три бесполезны

 

Быстрые выводы:

  • не хватает уточнения, что нужно сканировать именно штрихкод, а не номер карты;
  • не хватает проверки номера карты, введенного вручную;
  • не хватает кнопки “продолжить” при вводе номера карты вручную;
  • не хватает обратной связи об успешности регистрации;
  • онбординг либо нуждается в улучшениях, либо вообще не нужен.

Покупки

При входе в магазин стоят стойки для помощи с самообслуживанием и баннеры с информацией о приложении и инструкциями. Все вполне понятно и дружелюбно.

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

 

После скана QR-кода на баннере я оказалась на экране с надписью «в корзине ничего нет». Я так и не поняла назначение иконки с надписью «Корзина» в левом нижнем углу. После добавления первого товара надпись “Корзина” появляется на верхней плашке.

                                  Экран с пустой корзиной

 

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

Кстати, обратите внимание: непонятная иконка корзины в нижней части экрана стала бледно-серой — неактивной? Что-то странное.

Экран, который появляется после сканирования штрихкода

 

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

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

     Экран “Корзина” с уже добавленными товарами

 

Экспериментируя с количеством добавленного товара, я попробовала удалить из «корзины» одну лишнюю упаковку яиц. При этом появляется всплывающее окно с текстом: «Вы уверены, что хотите удалить этот товар?» У меня возникло ощущение, что, если я соглашусь, из списка исчезнет вся строка, а не только одна упаковка. Оказалось, что это не так, но текст явно нужно переписать. Лично мне хотелось бы иметь возможность выбрать между удалением всех позиций выбранного товара или определенного количества — например, на случай, если, положив в корзину 12 глазированных сырков, я решу, что это слишком много, и шесть из них выложу.

Сообщение, которое появляется при удалении одной упаковки товара

 

Быстрые выводы:

  • экран товара, который появляется при сканировании штрихкода, либо не нужен, либо должен содержать полезную информацию;
  • экран со списком товаров (“корзина”) в целом удобный, но его можно ещё улучшить;
  • сценарий удаления товаров из корзины продуман не до конца, его надо доработать.

Оплата покупок

После того как все товары в корзине отсканированы, нужно нажать на кнопку «Оплатить» в верхнем правом углу списка покупок. Тогда открывается на экран с QR-кодом и надписью «оплатить на кассе самообслуживания». Уже неплохо: по крайней мере, понятно, что надо идти к кассам самообслуживания. Правда, при этом совершенно непонятно, понадобится ли этот QR-код (выглядит он странновато), нужно ли переходить на следующий экран и, если да, то как это сделать.

 

Экран, который появляется после нажатия на кнопку «Оплатить». QR-код явно не настоящий, но всё-таки очень смущает

 

В недоумении я пошла на кассу. Там стоит специальная сотрудница магазина, которая помогает покупателям с терминалами самообслуживания. Она объяснила, что на QR на экране надо нажать. В результате открывается следующий экран, где QR-код уже побольше, есть кнопка «Сканировать» и текст «Для оплаты сканируйте QR код кассы самообслуживания». Текст довольно неуклюжий, но становится понятно, что где-то на кассе самообслуживания нужно отсканировать какой-то QR-код.

Изображение QR-кода над кнопкой «Сканировать» сильно сбивает с толку. Код явно не настоящий, но из-за текста кажется, что именно его нужно будет отсканировать каким-то специальным сканером терминала обслуживания. Мои сомнения развеяла сотрудница магазина, которая подсказала, что нужно нажать «Сканировать» и смартфоном отсканировать QR-код на экране терминала.

 

Экран с предложением отсканировать QR-код для оплаты

 

После сканирования QR-кода покупки появляются на экране терминала, а в приложении появляется экран с надписью «Успешно». Если вы забыли что-то отсканировать через приложение, то это можно сделать прямо у терминала при помощи специального сканера. Затем покупки можно оплатить.

Надпись «Успешно» на экране смартфона намекает, что квест окончен, но очередной QR-код опять не дает покоя. Пригодится ли он? Можно ли закрывать приложение и складывать покупки? Это конец процесса или еще нет? Непонятно. Пока я недоуменно пялилась на экран смартфона, сотрудница магазина быстренько вытолкнула меня из зоны самообслуживания. После этого наступило понимание, что работа с приложением закончена.

Экран «Успешно», который появляется после сканирования QR-кода на экране терминала

 

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

Быстрые выводы:

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

  • Первый экран (с маленьким QR-кодом) не нужен: он не выполняет ни одной полезной функции.
  • Второй экран (с большим QR-кодом) нуждается в улучшениях: QR-код, тем более ненастоящий, сбивает с толку, а текст не дает подсказок о том, что нужно сделать.
  • QR-код на третьем экране тоже не нужен, а в текст можно было бы добавить намёк на то, что от покупателя больше ничего не требуется — ну хотя бы “будем рады видеть вас снова”

Общие впечатления

Несмотря на все трудности, в целом я осталась довольна. Пока весь процесс в новинку, поэтому сканировать штрихкоды очень увлекательно, а ещё появляется восторг от своей полной самостоятельности в магазине. Ты складываешь все товары в пакеты прямо пока ходишь по магазину, ,а на выходе только оплачиваешь их. Время, которое занимает процесс оплаты (после того, как разберешься с QR-кодами) — буквально тридцать секунд. Больше никаких кассиров и очередей!

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

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

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

 

 

Надеюсь, что «Перекресток» читает отзывы в сторах или как-то ещё собирает обратную связь от своих пользователей, и приложение в будущем станет понятнее и удобнее. Теперь я буду следить за обновлениями.

Если вы хотите, чтобы мы оценили или спроектировали ваше мобильное приложение — оставьте заявку на сайте или напишите на info@usabilitylab.ru. А ещё у нас есть канал в Телеграме: t-do.ru/usabilitylab — подписывайтесь, чтобы не пропустить появление новых статей.

8 категорий юзабилити-проблем для оценки интернет-банка

Специально для вас мы провели несколько десятков юзабилити-тестирований интернет-банков. Выявленные проблемы мы разбили на 8 категорий. Ниже мы приведем примеры из рейтингового юзабилити-исследования интернет-банков 2018 для того, чтобы вы взяли их на вооружение. Как это вам поможет:

  1. изучите примеры проблем из каждой категории для того, чтобы понимать, каких решений стоит избегать;
  2. выберите пользовательский сценарий, который хотите оценить;
  3. проведите быструю экспертную оценку на предмет:
    1. отсутствия подобных проблем
    2. поиска удачных решений (которые элегантно решают описанные проблемы или позволяют избежать их)
  4. при выявлении новых примеров (а может быть и подтипов) проблем пополните свою “антиюзабилити-библиотеку”

Наш новый отчёт о сравнительном исследовании интернет-банков как раз представлен в виде такой библиотеки. Чтобы более подробнее узнать о содержании, цене и возможности персонализации отчёта, напишите нам на info@usabilitylab.ru.

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

Элементы управления

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

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

                                                   ВТБ: переключатель “Сохранить шаблон” в активированном состоянии

 

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

Нетипичное поведение переключателя: он работает как нечто среднее между фильтром и вкладками. При передвижении ползунка левая часть остается незакрашенной

 

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

Редактируемые элементы

Редактируемые элементы — это любые элементы интерфейса, при помощи которых пользователь вводит в систему какие-либо данные: поля ввода, списки выбора, календари, чекбоксы и т.п. Если редактируемый элемент оформлен неправильно, пользователь совершает ошибки при вводе данных.

Пример юзабилити-проблемы, связанной с редактируемыми элементами — ввод периода оплаты услуг ЖКХ в интернет-банке Банка Санкт Петербург. Система требует, чтобы пользователь вводил месяц и год оплаты в одно поле в формате ГГГГ-ММ, например, 2018-09. Но на бумажной квитанции период оплаты обозначен совсем по-другому: “сентябрь 2018”. Поэтому пользователям неудобно и непривычно вводить данные в том формате, который требует интернет-банк.

Банк Санкт-Петербург: период оплаты услуг ЖКХ необходимо вводить в формате, отличном от того, что указан на квитанции

 

Проблема усугубляется тем, что маска «ГГГГ-ММ» находится внутри поля и исчезает, когда пользователь начинает вводить данные. Невнимательный пользователь, который введет в поле месяц оплаты и будет гадать, куда же вводить год, окажется в таком случае совершенно беспомощным. Если нажать на вопросительный знак, появится подсказка, но она тоже будет бесполезна, потому что на ней показан участок бумажной квитанции с датой, которая написана не так, как указано в квитанции на самом деле.

Банк Санкт-Петербург: подсказка в поле “Период оплаты” исчезает сразу после того, как пользователь начинает вводить данные

 

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

Понятность информации

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

Наш любимый пример проблемы из этой категории — названия операций в выписке и истории операций. Например, в интернет-банке Райффайзенбанка операции обозначены латиницей с использованием банковских терминов, что совершенно непонятно для многих пользователей.

                                                       Непонятные названия операций в интернет-банке Райффайзенбанка

 

Еще один пример, также связанный с историей операций. В интернет-банке Росбанка (бета-версия) информация об одной и той же операции в выписке и в истории операций может различаться. На скриншоте ниже операция от 06.11 в истории операций обозначена как доход, а в выписке — как расход. Дело в том, что в разделе “История операций” выводятся операции по всем счетам и картам клиента, а любое движение между счетами клиента показано как доход (черный). В выписке показаны операции только по одному выбранному продукту (например, по карте), поэтому, если с этого продукта деньги были переведены куда-то, это будет отображаться как расход. Звучит логично, но пользователи сразу разобраться в этой логике не могут. Положение усугубляется еще и тем, что набор данных в выписке и истории операций отличается, и на основе имеющейся информации пользователю трудно разобраться, что к чему.

Росбанк: информация в истории операций (слева) и в выписке (справа) отличается: одна и та же операция указана как доход и как расход

 

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

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

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

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

                                Банк Хоум Кредит: информации о предложениях банка катастрофически не хватает

 

Можно обратить внимание, что здесь есть и проблема из категории «Понятность информации»: «револьверная карта» — это специфический банковский термин, и вряд ли он понятен неподготовленному пользователю. Кстати говоря, на сайте Хоум Кредит Банка раздела под названием «револьверные карты» нет, поэтому пользователь сможет найти нужную ему информацию, только если как-то догадается, что под этим термином подразумеваются обычные кредитные карты.

Вывод. Независимо, идёт ли речь о рекламе, сообщении об ошибке, подсказке или выписки со счёта, информации должно быть достаточно, чтобы пользователь получил ответы на вопросы, которые у него могут возникнуть.

Логика последовательности действий

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

Один из примеров — оплата ЖКУ в интернет-банке РоссельхозБанка. Обычно последовательность действий при выполнении этой задачи через интернет-банк выглядит так: ввести код плательщика и период оплаты, узнать сумму задолженности (или ввести ее вручную), подтвердить операцию. Но в РоссельхозБанке последовательность другая:

  1. ввести сумму платежа;
  2. ввести код плательщика и период оплаты;
  3. нажать кнопку “Далее”;
  4. увидеть сумму задолженности по оплате;
  5. при необходимости отредактировать сумму, введенную на шаге 1;
  6. провести платеж.

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

РоссельхозБанк: сначала надо ввести сумму платежа, и лишь потом код абонента. Сумму задолженности пользователь может узнать только на следующем экране.

 

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

Шумовые элементы

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

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

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

 

Вывод. Интернет-банк — не место для агрессивной рекламы. Лучше рекламировать свои продукты менее навязчиво и не отвлекать пользователей от выполнения их основной задачи.

Дизайн

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

В некоторых случаях неудачный дизайн может ухудшить доступность (accessibility) интерфейса, в первую очередь для людей с плохим зрением. Например, банк «Открытие» в своем интернет-банке использует мелкие бледно-серые шрифты. Участники наших юзабилити-тестирований не являются слабовидящими — у каждого из них было нормальное или скорректированное до нормального зрение. Тем не менее, даже они жаловались на то, что им тяжело читать тексты в этом интернет-банке. Пользователям с ограничениями по зрению, скорее всего, работать с этим интерфейсом будет совсем трудно.

Банк «Открытие»: соотношение контраста текста и фона составляет примерно 2:1, в то время как WCAG 2.0 рекомендует соотношение не менее 4.5:1

 

Иногда безобидные и даже хорошие на первый взгляд дизайнерские решения порождают совершенно неожиданные проблемы. Например, в интернет-банке Тинькофф Банка в верхней части страницы платежа есть цветная полоса, окрашенная в брендовые цвета получателя платежа. Пользователи не обращают на это внимание ровно до тех пор, пока им не приходится оплачивать услуги оператора, у которого главный цвет бренда — красный, как, например, у МТС. Они благополучно вводят данные, не обращая внимания на цвет «шапки» в верхней части страницы, но, оказавшись на странице с информацией о совершении платежа, вдруг видят большую красную полосу и принимают ее за индикатор ошибки. Это не критичная проблема, потому что текст ниже на экране убеждает пользователей, что услуга благополучно оплачена. Тем не менее, некоторые пользователи переживают неприятные моменты из-за такого дизайнерского хода.

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

 

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

Технические проблемы

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

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

Например, в интернет-банке РоссельхозБанка при оплате ЖКУ система подгружает информацию о долговых начислениях. Но вместе с ней автоматически загружается другой текст, который перекрывает поля и кнопки на экране. Из-за этого пользователям трудно довести операцию до конца. Это явная техническая недоработка, но из-за нее у пользователей возникает ощущение, что система “сырая” и не вызывает доверия.

                        РоссельхозБанк: проблемы верстки на странице оплаты услуг ЖКХ

 

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

Заключение

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

Дмитрий Силаев, коммерческий директор USABILITYLAB:

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

Если вы хотите, чтобы мы оценили юзабилити вашего продукта, напишите нам на info@usabilitylab.ru. Мы выберем подходящий для вас метод оценки и формат отчёта — традиционный, где проблемы представлены по сценариям, или новый, где проблемы представлены по описанным в этой статье категориям.

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

Интернет-банки для мам: оплата детского сада

Давайте посмотрим, что нам удалось извлечь из идеи рейтинга. Мы изучили интернет-банки (ИБ) 13 российских банков — те же самые, что вошли в юзабилити-рейтинг этого года. В каждом из них мы попробовали оплатить квитанцию за детский сад. Дальше мы расскажем о трудностях, с которыми столкнулись, и поделимся некоторыми выводами.

Квитанция и способы ее оплаты

Давайте мы сразу покажем источник родительских мучений: квитанцию из сада. Уже от одного взгляда на нее многие падают духом и идут платить в отделение банка. Другие хватаются за смартфоны и открывают в них мобильные приложения своих банков в надежде найти там сканер QR-кодов. Но сканер QR-кодов есть в приложениях только 4 банков из 13, рассмотренных нами, и распознать код с его помощью получается не всегда — например, если квитанция распечатана на плохом принтере, то ничего не выйдет. Те, кому отсканировать QR-код не удалось, грустно вздыхают и открывают интернет-банк. Вводить все эти безумные комбинации цифр с клавиатуры удобнее, чем с экрана телефона.

 

                           Квитанция из детского сада. Вбивать в нее все данные вручную — настоящее испытание силы воли

 

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

                                                                     Райффайзенбанк: функция подписки на начисления по номеру СНИЛС

 

В остальных интернет-банках подписаться на счета из детского сада пока невозможно, но в некоторых из них можно найти начисления по УИН , СНИЛС или даже свидетельству о рождении (но это не точно).

 

Сводная таблица способов оплаты в 13 российских интернет-банках. В Промсвязьбанке функция оплаты детского сада по номеру свидетельства о рождении заявлена, но, попытавшись ей воспользоваться, мы получили сообщение об ошибке. Поэтому мы поставили отметку “Под вопросом”. В Тинькофф-Банке оплата по номеру СНИЛС и свидетельству о рождении хоть и присутствует, но, по нашим предположениям, работает не вполне корректно (об этом ниже)

 

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

Проблема первая: название и расположение услуги

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

                                           Альфа-Банк: для оплаты детского сада нужно перейти в раздел “Перевод в бюджет РФ”

 

Мы предполагаем, что родители, оплачивающие сад (или школу), мыслят по-другому. “Перевод в бюджет” ассоциируется у них с чем-то очень государственным, таким, как налоги или штрафы. А они не делают перевод в бюджет, а оплачивают конкретную услугу конкретной организации. Искать возможность заплатить за сад в разделах “Налоги и штрафы”, “Прочие государственные платежи”, “Бюджетные платежи” они не будут: им нужен специализированный раздел для оплаты образовательных услуг.

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

Проблема вторая: расположение и характер работы функции оплаты по УИН/СНИЛС/другим идентификаторам платежа

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

Например, в ИБ Райффайзенбанка, скриншот которого мы показывали в начале, оплатить детский сад по УИН можно в разделе «Оплатить»/«Госуслуги и начисления». А чтобы оплатить сад по свободным реквизитам, нужно идти в раздел «Перевести»/«В бюджет». Во-первых, названия обоих разделов совершенно не ассоциируются с оплатой образовательных услуг. Во-вторых, пользователь, который доберётся до формы оплаты по свободным реквизитам, так никогда и не узнает, что на самом деле можно было не мучиться, потому что система умеет искать начисления по УИН и СНИЛС. И тем более не подпишется на автоматическое выставление счетов, а ведь это невероятно крутая функция — по нашей оценке, на данный момент получать автоматически получать счета из детского сада можно только через Райффайзенбанк.

В ИБ ЮниКредит Банка обе функции (оплата по свободным реквизитам или по одному из идентификаторов) находятся в разделе: «Оплата услуг»/«Платежи в бюджет, налоги и штрафы», но всё равно разнесены по разным подразделам. Кстати, забавный момент: этот интернет-банк называет “штрафами” все найденные начисления, независимо от их характера, даже если это безобидная родительская плата.

 

                                    Юникредит банк: оплата по УИН и оплата по свободным реквизитам разнесены по разным экранам

 

С неожиданной и серьезной проблемой мы столкнулись в ИБ Тинькофф-Банка. Пользователь может выбрать школу, которую хочет оплатить, и ввести номер одного из документов: СНИЛС, паспорт, свидетельство о рождении или паспорт иностранного гражданина. Это было бы хорошим решением, но на данный момент функция работает странно. Мы пробовали вводить номер СНИЛС, и обнаружили, что поиск начислений, судя по всему, при этом не происходит. По крайней мере, интернет-банк не отображает никаких автоматически загруженных данных, а сумму платежа требуется вводить вручную. Платеж уходит моментально, минуя стадию подтверждения по СМС, а на квитанции об оплате отображается ровно та же информация, что пользователь вводил в форму. Поэтому остается непонятно, в каком виде этот платеж уходит в выбранную школу. Без УИН и информации о назначении платежа сотрудникам бухгалтерии школы, возможно, будет непонятно, кто и что оплачивал, а значит, у родителя, который попробует так оплатить эту услугу, могут быть неприятности. Мы предполагаем, что это досадная техническая недоработка, и представители Тинькофф Банка уже сообщили нам, что работают над ее устранением.

На квитанции Тинькофф Банка, которая формируется при оплате детского сада из каталога образовательных учреждений есть только та информация, которая была в форме. Это плохо, потому что непонятно, в каком виде такой платеж придет в образовательное учреждение и смогут ли они там разобраться, кто и за кого платил. При оплате квитанции через раздел “Переводы”, когда все реквизиты заполняются вручную, такой проблемы не возникает: там на квитанции видны все данные

 

Вывод: не надо разносить по разным экранам оплату по свободным реквизитам и по УИН/СНИЛС/другому идентификатору. Возможность проверить начисления по доступным идентификаторам должна находиться прямо на форме для ввода реквизитов. Это не значит, что нужно убрать из интернет-банка специализированный раздел для поиска начислений. Просто он не должен быть единственной точкой перехода к этой функции. И да, если в интернет-банке обозначена функция оплаты по УИН или СНИЛС, она должна работать корректно и действительно автоматически искать начисления.

Возможное решение: раздел “Образование” и размещение возможности оплаты по УИН в контексте проводимого платежа

Специализированный раздел для оплаты образовательных услуг есть в пяти интернет-банках из тринадцати. В двух из них (Сбербанк и Промсвязьбанк), перейдя в этот раздел, пользователь в итоге попадает на форму для ввода реквизитов. Возможность проверить начисления по УИН или СНИЛС находится прямо на этой форме. На наш взгляд, это самое удачное решение: пользователь сможет легко найти нужный ему раздел и оплатить услугу.

 

Промсвязьбанк: «Платежи и переводы»/«Образование»/«Дошкольные образовательные учреждения»/«Образовательные учреждения г. Москвы». Форма для перехода к оплате по одному из реквизитов

 

Ещё три банка — Тинькофф Банк, Банк «Открытие» и ЮниКредит Банк — пытаются собрать каталог поставщиков образовательных услуг. Нам кажется, что это не самый продуктивный путь. Детских садов и школ в России огромное множество, поэтому собрать полный каталог практически невозможно. К тому же, чем больше каталог, тем труднее найти в нем то, что нужно, а разработчикам надо решать проблемы с сортировкой и представлением списка получателей. Сейчас каталоги в ИБ всех трех банков неполные, поэтому для достаточно большой части пользователей этот раздел окажется бесполезен.

                                              Банк «Открытие»: мы пытались найти нужного нам получателя по ИНН, но безуспешно

 

Вывод: на наш взгляд, раздел “Образование”, в котором можно по УИН проверить начисления — это очень удобно. Поэтому даже если банк пытается собрать каталог получателей услуг, первым пунктом меню в этом разделе должна быть ссылка на форму для ввода реквизитов и поиска счетов. И почему бы прямо на форме ввода реквизитов или на экране об успешном совершении платежа не предложить пользователю подписаться на автоматический поиск счетов из детского сада? Тогда в следующий раз ему не придётся вводить ничего сложнее кода из СМС.

Резюме

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

  • Думайте в системе координат пользователя, а не банка. Разместите возможность для оплаты услуги там, где пользователь будет ее искать, а не там, где это будет правильно с формальной точки зрения. “Платежи в бюджет” — не самое очевидное место для оплаты детского сада, а вот специализированный раздел под названием “Образование”, “Оплата образовательных услуг” и т.п. будет вполне уместен.
  • Минимизируйте ручной ввод пользователя. Все данные, которые можно загрузить автоматически, должны загружаться автоматически. Оптимальное решение — это подписка на автоматическое получение счетов.
  • Предлагайте возможность автоматической загрузки данных прямо на экране ввода реквизитов. Лучше не убирать возможность поиска начислений по УИН в специальный раздел с непонятным названием. И тем более не стоит делать такой раздел единственным местом, где можно найти эту функцию.
  • Сделайте загрузку данных прозрачной. Если человек использовал функцию автоматической загрузки данных о платеже (например, по УИН), покажите ему все автоматически заполненные поля. Данные в них должны совпадать с данными на квитанции. Так вы дадите ему уверенность, что платеж уйдет куда нужно.

Будет здорово, если через год мы повторим это исследование, и вместо рассказа о проблемах получится восторженный рассказ о том, как всё удобно сделано. Может быть, тогда мы даже все-таки воплотим в жизнь свою идею и создадим все-таки “мамский рейтинг интернет-банков”. А почему бы и нет?

Если вы узнали свой интернет-банк в этом описании и хотите его улучшить, приходите к нам. Мы проведем юзабилити-тестирование на подходящей целевой аудитории, опишем критичные проблемы интерфейса и расскажем, как его улучшить. Так что нажимайте на кнопку “Заказать проект” или пишите нам на info@usabilitylab.ru. И, традиционно, хороших вам интерфейсов!

Чем сайты с костюмами на Хэллоуин пугают посетителей

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

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

Мужское, женское, детское, Хэллоуин

Как правило, на сайтах костюмов товары для празднования для Хэллоуина выносятся в специальный раздел — это удобно, а еще полезно для SEO. Но иногда это приводит к курьезам. На некоторых сайтах все товары в разделе со страшными нарядами оказываются свалены в кучу: тут и мужские костюмы, и женские чулки, и ползунки с вышитыми привидениями. Предположим, мне нужен мужской костюм вампира. Как найти нужное, если фильтров или рубрикатора нет?

 

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

 

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

Женщинам, значит, прикольные и сказочные костюмы, а мужчинам — страшные и смешные. Зато понятно, кто у нас супергерои

 

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

 

На этом сайте фильтры по полу и возрасту вынесены наверх. Неплохое решение. Сюда бы добавить еще фильтры по размеру, и совсем было бы хорошо. Но фильтры по размеру утоплены в левой колонке под длинным-длинным каталогом.

 

Налезет или не налезет?

Я скажу очевидную на первый взгляд вещь: карнавальный костюм — это в первую очередь костюм, одежда, и у него, как у одежды, есть размер. Вот только с выбором размера на сайтах с костюмами просто беда. Хорошо, если где-то на пятом экране будет запрятан фильтр, где размеры одежды перемешаны с ростом и возрастом. Но ведь на некоторых сайтах и такого нет, и приходится открывать каждый понравившийся костюм в отдельной вкладке и в очередной раз убеждаться, что твоего любимого 58го размера в продаже нет, а есть только 42й.

                       787 костюмов, 33 страницы, а узнать, какие есть размеры, можно только на странице костюма. Неудобно.

 

Ладно, давайте теперь посмотрим на решение, которое выглядит удачным: разместить фильтр по размерам на видном месте, показывать размеры при наведении курсора. Но почему-то это мало где реализовано.

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

 

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

Проблема всё та же: фильтрация. Зачем мне вперемешку маски, окровавленные повязки и пластмассовые ноги для костюма зомби, если мне нужен целый мужской костюм? Где все мои любимые фильтры? Ну хотя бы по полу…

 

Тут даже не написано, какой товар я искал. Столько фильтров, а самых главных — по полу (и по размеру) — нет. Хорошо, что в этом магазине всего 9 зомби-костюмов, иначе я бы заблудился

 

Если же фильтры все-таки есть, то тут неосторожного путника подстерегает другая опасность: чрезмерная фильтрация, просто горы опций, а самые важные из них (пол, размер, цена) оказываются где-то далеко-далеко внизу. Выглядит это массивно, как меню сайта, смотреть туда совершенно не хочется — зачем мне меню, когда я воспользовался поиском?

 

Массивный блок с фильтрами справа. Во многих подкатегориях на всех костюмах стоит пометка «нет в наличии», и зачем тогда мне их показывать? Одно расстройство. А нужная мне фильтрация по полу (мне же мужской костюм нужен) где-то там, на третьем экране, куда указывает стрелка…

 

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

А можно пощупать?

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

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

 

                                           Фасон понятен, размеры в наличии, но как примерить? И можно ли?

 

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

 

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

 

Эпилог

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

Перевод пенсии в Сбербанк: обзор новой функции в приложении «Сбербанк Онлайн»

Поиск функции

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

Пункт меню «Перевод пенсии в Сбербанк» находится далеко за «сгибом» экрана

 

Быстрое коридорное тестирование на пожилых родственниках, которое мы провели специально для этой статьи, показало, что они ищут возможность перевести пенсию в Сбербанк на экране той карты, которая у них открыта в банке. При этом они не догадываются перейти в подраздел «Платеж или перевод» и в итоге так и не находят нужный пункт меню. Их можно понять: оформление заявки на перевод пенсии — это не финансовая операция, поэтому трудно ожидать, что она обнаружиться в разделе «Платежи» в одном ряду с оплатой ЖКХ и мобильного телефона. На самом деле перевод пенсии можно оформить либо на счет в банке, либо на карту «Мир», то есть на самом деле искать эту возможность на экране карты «Visa» в принципе не имеет смысла, но неизвестно, знают ли об этом представители целевой аудитории услуги.

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

Возможно, Сбербанк как-то рекламирует эту услугу своей целевой аудитории при помощи push-уведомлений или SMS с инструкциями или рекламных объявлений внутри приложения. Если это так, то вопрос с поиском функции снимается. Если же нет, то разработчикам приложения, стоит подумать, как помочь пользователям найти ее.

Ввод данных

Ввод данных реализован практически без нареканий: процесс разбит на несколько шагов, поля по мере возможности заполняются автоматически, есть множество подсказок. Мы столкнулись с технической проблемой при вводе номера дома (33/2): приложение не засчитывало его и не давало перейти к следующему шагу до тех пор, пока мы не стерли «/2» и не выбрали этот же адрес из списка предложенных вариантов, который довольно долго грузился.

           Приложение не разрешает самостоятельно ввести номер дома с дробью — только выбрать его из списка вариантов

 

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

                                                                                            Подсказка с мелким бледно-серым текстом

 

Получение обратной связи

Самая главная проблема, с которой мы столкнулись при анализе этой функции, связана с получением обратной связи о судьбе заявления после того, как оно было отправлено. После ввода всех данных пользователь получает СМС с номера 0919, на которое должен ответить «Да» + прописанный в СМС четырехзначный код (например, «Да 1989»). Он отправляет СМС, после чего довольно долго ничего не происходит. Сообщение о том, что заявка подтверждена, приходит не меньше, чем через полтора часа, при этом всё это время: в приложении Сбербанка статус заявки тоже не меняется. . Даже наш эксперт, проводивший оценку, чувствовал себя в этой ситуации некомфортно. Можно только представить себе, как будет беспокоиться пожилой человек, который боится сделать что-то не так и потерять свою пенсию.

Между отправкой и получением подтверждающего СМС с портала Госуслуг (слева) прошло больше полутора часов. При этом статус заявления в приложении (справа) не менялся

 

Наконец, если по каким-то причинам заявление было отклонено, пользователь не получает об этом никаких уведомлений ни от Сбербанка, ни от Госуслуг. Он узнает об этом, только если сам в какой-то момент зайдет на экран «Подробности заявки». Мы не знаем, получит ли пользователь хоть какое-то сообщение, если заявка будет одобрена, потому что наши эксперты еще не вошли в пенсионный возраст. Поэтому остается только надеяться, что в этом случае все-таки придет СМС с уведомлением о том, что процесс завершен, и пенсия переведена в Сбербанк. Если нет — то такую СМС стоит добавить.

Мы понимаем, что эти проблемы не связаны напрямую с приложением Сбербанка и обусловлены особенностями работы портала Госуслуг. Но специалисты Сбербанка могут попробовать снизить негативный эффект, если на экран «Подробности заявки» после этапа «Подтвердите подачу заявления» добавят этап «Заявка ожидает подтверждения со стороны портала Госуслуг» и поясняющий текст с обозначением времени ожидания: «Время рассмотрения заявки может занимать несколько часов. Когда заявка будет рассмотрена, вы получите СМС с номера 0919».

Отчет USABILITYLAB о мониторинге банковских приложений

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

Также уже готов по мониторингу за июль. Значительная часть отчета посвящена обновленному приложению Газпромбанка, также он содержит описание еще 30 функций от десяти банков и обзор интерфейса и функциональности приложения новозеландского банка KIWI BANK.

Сейчас мы работаем над отчетом за август. Чтобы приобрести готовые отчеты и оформить подписку на будущие, напишите Дмитрию Силаеву: d.silaev@usabilitylab.net. Будьте в курсе, будьте в рынке, и хороших вам интерфейсов!

Новое приложение Газпромбанка: критический обзор

                                                                                Газпромбанк рекламирует новое приложение через Facebook

 

Изменения к лучшему

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

                                                                                                    Главный экран обновленного приложения

 

Сами продукты получили понятные названия: «Кредитная карта», «Дебетовая карта», «Банковский счёт». Это сильно облегчает жизнь пользователям. Раньше пользователь мог различать карты только по номерам и балансу, что создавало ему трудности, если у него в банке было несколько карт.

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

                                                       Все частотные операции, которые можно совершить с картой, собраны на одном экране

 

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

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

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

Авторизация в приложении и настройка входа по отпечатку пальца

Как мы писали выше, у пользователей приложения появилась возможность настроить вход по отпечатку пальца. Но пользователи могут об этом никогда не узнать, потому что возможность включить эту функцию спрятана в разделе «Настройки» > «Безопасность» > «Вход по отпечатку пальца», и больше о ней нигде не сообщается, даже при первом входе в приложение.

                                                                                                    Настройка входа по отпечатку пальца

 

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

 Этот экран одинаков для зарегистрированных и незарегистрированных пользователей. И нигде не говорится о возможности входа по отпечатку пальца

 

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

Подобная последовательность действий используется в приложении «Промсвязьбанка» — пользователю сразу после ввода логина и пароля предлагается установить короткий код и сообщается, для чего он нужен.

                  Настройка короткого кода в приложении Промсвязьбанка (слайд из отчета по рейтингу мобильных банков-2018)

Переход к оплате услуг

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

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

                                                                                Экран «Платежи и переводы» в приложении Газпромбанка

 

Это некритичная проблема, но ее можно избежать, если вместо крупной и неинформативной картинки отображать некоторые наиболее востребованные категории платежей (или переводов в соответствующем блоке на экране). Так делается, например, в приложении Тинькофф Банка. Такое решение хорошо тем, что пользователь сразу получает представление о том, какие операции он может совершить в каждом разделе.

                                       Пример выноса основных категорий на главный экран «Платежи и переводы» в банке «Тинькофф»

 

Рекомендация: на экране «Платежи и переводы» для платежей отобразить наиболее популярные категории, а для переводов — их наиболее популярные способы, например, «с карты на карту».

Ввод реквизитов

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

Экран оплаты ЖКХ. Верхние два поля заполнены некорректно, но догадаться об этом можно только по изменению цвета линий с синего на красный. Сообщений об ошибке нет

 

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

Удачных решений этой проблемы у конкурентов мы пока не встречали. Отсутствие корректных формулировок в том или ином виде встречается во всех приложениях, которые мы исследовали в ходе составления юзабилити-рейтинга. Например, в приложении «Росбанка» при некорректном вводе периода платежа отображается ошибка «Недопустимое сообщение» без отображения причины ошибки и способов её устранения.

                                                                    Неинформативное сообщение об ошибке в приложении «Росбанка»

 

Ввод суммы добровольного страхования при оплате ЖКХ

При оплате ЖКХ в приложении Газпромбанка сумму добровольного страхования требуется вводить в копейках. Например, чтобы оплатить 1 рубль 12 копеек, нужно ввести в поле «сумма страхования» число 112. Это непривычный формат, поэтому есть риск, что пользователи не заметят это требование и в результате оплатят страховку некорректную сумму.

                                     Ввод суммы добровольного страхования при оплате «ЖКУ ЕИРЦ Москва» в приложении Газпромбанка

 

Рекомендация: дать пользователю возможность вводить страховую сумму в рублях, например, как это сделано в  приложении ЮниКредит Банка.

                                                                Ввод суммы добровольного страхования в приложении ЮниКредит Банка

Выбор вида платежа при оплате коммунальных услуг

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

                                                        Выбор типа платежа при оплате коммунальных услуг в приложении Газпромбанка

 

Рекомендация: дать пользователям возможность выбирать вид платежа из списка вариантов, не используя цифру, например, как сделано в приложении банка Тинькофф.

                                                                 Выбор типа платежа из списка текстовых значений вместо ввода цифры

 

Выбор оператора при оплате сотовой связи

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

                                                                                                    Просмотр категории «Мобильная связь»

 

Рекомендация: реализовать возможность автоматического определения оператора по номеру телефона с возможностью смены определенного оператора. Например, в приложении «РайффайзенБанка» оператор мобильной связи определяется автоматически после ввода пользователем номера телефона.

Автоматические определение оператора в приложении«Райффайзенбанка» (слайд из отчета по рейтингу мобильных банков-2018)

 

Другие проблемы

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

Пользователи могут не понять, как открыть новую карту или счёт с помощью приложения, поскольку значок «+» присутствует только у блока вкладов.

                                                                                              Экран просмотра счетов и карт пользователя

 

Ряд проблем связан с историей операций по карте. Непонятно, как перейти от просмотра нескольких последних операций к просмотру всех, и неизвестно, возможно ли это. Карточка с описанием каждой операции не очень информативная и при этом очень большая: чтобы просмотреть несколько последних операций, приходится долго листать экран. Названия некоторых операций непонятны: например, что такое «изменение баланса» на 59 рублей? (Мы не уверены, но предполагаем, что это какие-то комиссии). Наконец, из истории операций невозможно повторить платеж, хотя, по нашему опыту наблюдения за респондентами на юзабилити-тестированиях, это довольно распространенный сценарий.

                                                            Просмотр списка последних операций по карте в приложении «Газпромбанка»

 

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

                                                                                    Экран «Заблокировать» в приложении «Газпромбанка»

 

Заключение

Помимо Газпромбанка, как минимум два банка (Сбербанка и МКБ) за последний месяц запускали рекламу с описанием обновлений их мобильных приложений. Это важно, поскольку видна новая тенденция: банк выставляет в качестве конкурентного преимущества не только условия по картам, вкладам или кредитам, но и удобство сервисов ДБО. При этом банки активно работают с обратной связью своих клиентов: они приглашают их оставлять комментарии, которые учитывают в следующих обновлениях.

                                                                                              Реклама обновленного приложения Сбербанка

 

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

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

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

Если вы хотите, чтобы мы оценили ваш интерфейс или спроектировали новый, оставьте заявку на сайте.

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Контакты
Россия
129085, г.Москва, ул. Годовикова д.
9, стр. 2, подъезд 2.1, офис 2.22