11 лютого у Києві запрацював мобільний застосунок для оплати житлово-комунальних послуг, передавання показників лічильників і контролю за станом розрахунків під назвою «Комуналка».

Олександр Кривець, Design Lead у Solutions for People протестував додаток і поділився своїми UX-враженнями з Telegraf.Design: розповів про плюси, мінуси та варіанти покращення застосунку.

Особистим кабінетом на сайті «Центру комунального сервісу» (ЦКС) користуються понад 700 тисяч киян, тож у сервісі вирішили створити «новий зручний інструмент. Стало цікаво перевірити, чи справді він зручний.

Тим паче, що за кричущою назвою «Комуналка» величезна кількість послуг: тут і комуналка, і оплата дитсадків, штрафів, тощо.

Застосунок доступний і на iOS, і на Android. Я користуюся останнім, тому тестування проводив з нього.

У Play Market застосунок у пошуковій видачі на першому місці за словом «комуналка». Це добре. У нього вже понад 10 000 завантажувань, а рейтинг – 1,4. В App Store рейтинг вищий – 2,2.

На зображенні – 1,5. Скрін зроблено за кілька днів до того

Реєстрація

Перше, що впадає в очі під час запуску – текст. Точніше його кегль. Він, м’яко кажучи, дрібнуватий. Не зрозуміло, в який сегмент користувачів ціляться розробники цього сервісу. Зізнаюсь, мені зі 100% зором доводиться напружувати очі й підносити смартфон ближче. А сірий колір на сірому тлі сприймати ще важче через гірший контраст.

Після першого запуску застосунку користувачеві пропонують три екрани з описом можливостей.

Щодо процесу — реєстрація пройшла своєрідно. З одного боку, все доволі стандартно, з іншого – після заповнення усіх полів з’явився попап з помилкою. З опису зрозумів, що спеціальні символи для пароля не підходять. Виправив, зареєструвався. Як убезпечити користувачів від подібної помилки? Писати підказку, які символи для пароля підходять, і чи є, обмеження. Проблему розв’язати нескладно.

Щодо передзаповненого імпуту згоди з умовами користування. Це вважається, так званим темним UX патерном, хоч я й не прихильник такого визначення.

Навігація та інтерфейс

На головному екрані маємо 4 основні візуальні елементи, хоча ні, 5. Або може 4. Кнопка знизу, хоч і має менший розмір, та все ж не занадто контрастна відносно тих, що вгорі. Відтак немає основного об’єкта уваги, і виникає дисонанс.

Не вистачає мінімального онбординга. Що заповнити першим? Куди йти, що робити? Що першочергове, а що другорядне?

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

Іконка дзвоника в куті ліворуч та чоловічка праворуч майже наїжджають на елементи інтерфейсу смартфону. Це не ок.

Все той же дрібний шрифт в інтерфейсі.

Активне поле має помаранчеве підкреслення в кольорах застосунку – це дає додаткову підказку, з яким елементом інтерфейсу відбувається взаємодія.

Додавання адреси. Застосунок дає на вибір кілька міст. Адреси можна шукати введенням тексту та у дропдауні.

Процес додавання адреси доволі простий. Проте після заповнення і натискання кнопки «Додати адресу» виникла помилка. З другої спроби виникла інша помилка з описом, що квартира вже додана.

Після цього повернувся на головний екран, де область з адресою була не заповнена. Нічого не змінилося. Допомогло перезавантаження застосунку. Приємно, звісно, що все запрацювало, але було б непогано пояснити користувачеві, що для додавання адреси необхідно перезайти в застосунок. А ще краще зробити так, щоб перезапускатися не треба було.

Елементи вгорі розташовані з порушенням теорії близькості, згідно з якою внутрішні відстані елемента повинні бути меншими за зовнішні. На прикладі вище відстані значущих елементів до країв екрану менші за внутрішні. Це не складно поправити.

Тепер окремо про кожну категорію, якими пропонує скористатися застосунок на головному екрані:

«Комунальні платежі» веде по факту в розділ «Рахунки» (у нижньому меню підписаний «Рахунки»). Порівняння на зображені нижче.

«Переказ коштів» у додатку з назвою «Комуналка» не пояснюють хто, кому і які кошти пересилатиме. Маю гіпотезу, що мається на увазі банківський переказ з картки на картку. Так чи інакше цей екран потребує відповіді на запитання: «Де я опинився і що тут можна зробити?». Сервіси, що стосуються пересилання грошей треба краще пояснювати, для подолання страхів користувачів.

Текст «Інформація про послугу» не клікабельний. Це просто текст перед формою. Маю гіпотезу, що користувачі, які таки захочуть отримати інформацію, що ж це за послуга, будуть сюди тапати, але жодної відповіді інтерфейсу не буде.

«Поповнення мобільного» веде на екран поповнення мобільного рахунку. Це очевидно, і добре, що очевидно. Детальніше про цей екран розкажу нижче.

«Інше» містить можливість сплатити за «Дитячий садок», «Штрафи за порушення ПДД» (укр. має бути ПДР), «Платежі до бюджету» (податок на доходи, судовий внесок), «Оплата транспорту» (при переході сюди маємо черговий попап з помилкою) та «Паркувальні абонементи». Іконки в розділі консистентні. Це добре.

Жовта кнопка у нижньому меню переводить на екран QR-сканер. Звісно, це додаток, що називається «Комуналка», але непогано було б пояснювати більш людяно що це і для чого. Наприклад, дописати до тексту про «Піднесіть QR-код…» інформацію, які коди підтримуються. Пізніше знайшов цей перелік в нижньому меню «і». У такому разі було б добре при першому потраплянні у розділ QR-сканер зробити онбординг про те, які квітанції підтримуються.

Після наведення на QR з платіжки ГІОЦ, майже миттєво підтягнулися у додаток усі необхідні платіжки. Зручно і приємно. Не доведеться вносити всі особові рахунки по черзі. Щоправда, спочатку виникла помилка застосунку.

Переходимо до нижнього меню застосунку. Тут такі розділи:

1. Головна (по ній вже пройшлися)
2. Рахунки
3. QR-сканер (також пройшлися)
4. Поповнення
5. Допомога

Рахунки

При тапі по рахунку за січень опиняєшся на екрані з вкладками

1. рахунок — тут власне можна сплатити комунальні платежі
2. нарахування — містить інформацію з платіжки про борги, переплати, тариф, тощо. У нарахуваннях є фільтр, текст там ще дрібніший (зображення нижче). Дуже не ок.
3. платежі — тут інформація про те коли і за що ви платили
4. лічильники — перелік послуг, на які можуть бути встановлені лічильники, ну, й власне передати показники своїх.

Про показники лічильників скажу ще окремо. Наприклад, лічильник гарячої води у вас намотав 137 кубометрів, а у додатку треба писати 0.137. Не очевидно. І це ніде не пояснюється. Багато гнівних коментарів в Play Market стосуються саме цього. Бо якщо ви спожили, наприклад, 3 кубометри води за попередній місяць і ввели 140, то це вважайте 140 000 кубометрів. Це дуже не ок. Цікаво поглянути на квитанцію наступного місяця.

Не знаю, чи вийде записати таку цифру, але перевіряти не захотів. Вибачайте.

Поповнення

З цим розділом усе просто. На вибір поповнення рахунку є для усіх наявних мобільних операторів України. Іконки мають неконсистентний вигляд. Інтертелеком, наприклад, єдиний має біле тло, ще й у квадратному фреймі, чим сильно виділяється з-поміж інших. Не вистачає оптичної компенсації для логотипу lifecell, синє обведення скрадається (*від слова «красти») темно-синім тлом підкладки.

Що можна тут зробити? Перемалювати на жовті outline іконки в стилі додатку. У фінальному варіанті простежити оптичну однорідність розмірів іконок.

Екран поповнення рахунку телефона виглядає доволі знайомо. І добре, що у додатку, розрахованому на дуже різні соціально-вікові групи, не намагаються винайти велосипед.

Після введення першої ж цифри в полі номера на червоному тлі з’являється підказка про помилку «Потрібно вказати телефон». Можна зробити таку перевірку, скажімо, після вводу 6-ої цифри, оскільки люди не рідко «гублять» цифри під час вводу. Також кнопка «Сплатити» в ідеалі має ставати активною після вводу номера телефону. Як видно на скріні, корисне заповнення екрану поповнення займає менше 30%. Елементи дрібні та не контрастні. Головне для цього екрану — поповнити правильний номер, відтак буде краще, якщо розробники збільшать візуальний акцент на номері. З найпростішого — розміром.

Допомога

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

З очевидного, коли натискаємо на мейл, відкривається меню створення листа. З неочевидного – після натискання на номер телефону, з’являється попап, який пропонує у разі потреби подзвонити, натиснувши кнопку виклик. Зайвий екран. Тим більше попап підписаний «Телефонуйте нам?». Сподіваюсь, це просто одруківка, бо трохи заганяє в ступор.

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

Профіль

У профілі додатку, не призначеному для соціальної взаємодії пропонується встановити іконку профілю, до речі, її видно лише в профілі. Уявіть, прийшли ви з роботи, заварили какао, загорнулись у теплий плед, взяли телефон, запустили Комуналку і милуєтесь своїм фото в Профілі. Ну, або тим, що встановлене за замовчуванням. Є на скріні.

Екран має таку структуру

1. Персональні дані. Можна змінити дані про себе.
2. Мої адреси. Можна додавати чи видаляти адреси. До речі, щоб видалити адресу, треба свайпнути ліворуч. Так не ок. Варто увиразнити та додати більш очевидний спосіб. В одному акаунті можна додати до чотирьох адрес. Про це є інформація на сторінці? Ні, прочитав в описі на Play Market.
3. Змінити пароль. Тут власне це й можна зробити. Тільки після переходу сюди, з’являється вже добре відомий попап з помилкою. До речі, цей пункт консистентніше відносно інших буде назвати «Зміна пароля».
4. Мова додатку. Українська і російська на вибір.
5. Вхід з Touch ID.
6. Довідка. Переходить на сайт ЦКС, про що пояснюється у цьому пункті. Це ок.

При переході в розділ «Змінити пароль» зустрічає помилка. На скільки зрозумів з тексту, мені мав одразу відправитись лист. Це не добре, бо у випадку міскліків по цьому розділу одразу відправлятиметься лист на пошту. Також збиває з пантелику текст помилки «Неможливо відправити повідомлення». Яке?

Підсумок

Комуналка — ще дуже молодий застосунок, має дрібні проблеми, але не настільки поганий, як може скластися враження після прочитання цього тексту. Впевнений, що розробники й самі знають про багато з наведених неприємностей застосунку і вже працюють над їх вирішенням. Про актуальність «Комуналки» свідчить щонайменше велика кількість встановлень за такий короткий проміжок часу. Тож майбутнє у нього є. Чи користуватимусь додатком я? Неодмінно, але трохи перечекаю.

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.