Свій UX додатки ЖКГ Москви з чатом і крутилками

image

Технології розвиваються з надзвуковою швидкістю, а проектування інтерфейсів, як і будь-який навик, потребує постійної практики. Сукупність цих двох факторів відкриває цілу галактику для польоту дизайнерської думки.

На мій погляд, в проектуванні інтерфейсу будь-які сміливі ідеї можуть виявитися ключем до успіху, але лише за трьох умов:

  • якщо рішення інтуїтивно зрозуміло
  • якщо рішення спрощує процес взаємодії
  • якщо рішення реалізовується


Як сумно, що у великому місті з Wi-Fi в метро і повітряними зебрами досі потрібно вчитуватися в заплутані квитанції і стояти в чергах, щоб сплатити комунальні послуги.

Не так давно вийшло додаток ЖКГ Москви, покликане полегшити життя громадян. Його опис говорить:

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




Звичайно, існує безліч способів розібратися з побутової рутиною, в тому числі за допомогою смартфона, але чи потрібно для цього окремий додаток, коли більшість банків і без того дає можливість оплачувати ЖКГ в розділі особистого кабінету? Щоб бути затребуваним, інструмент повинен надавати більше можливостей для мешканців. Поспішаю поділитися з вами результатом експерименту по редизайну додатки ЖКГ Москви.

Оскільки всі нижчеописані повністю є фантазією, то і обмежень у реструктуризації немає ніяких. Отже, представимо програму як набір корисних функцій, які визначаються цільовими сценаріями:

  • Лічильники: введення показань, перегляд заборгованостей та оплата комунальних рахунків
  • Події: агрегатор цікавої інформації і важливих оголошень
  • Бесіди: обговорення актуальних для москвичів тим і спілкування з сусідами
  • Допомога: вирішення житлових питань 24 години на добу за допомогою ЖКГ-бота


image
Для кого призначений інструмент

Цільова аудиторія програми – жителі Москви і області з середнім достатком, ведуть облік сімейного або індивідуального бюджету (умовимося, що багатії самостійно комуналку не вважають). Додаток може використовуватися в різних ситуаціях, тому має бути доступним для всіх груп громадян, особливо для не мають зайвого часу і уваги.

Для уточнення придумаємо персонажа, який підкаже хід дій в конкретних ситуаціях. Ним міг би стати пересічний і середньостатистичний Веніамін Живе, 34 роки, користувач iOS. Веніамін прописаний в районі Чертаново Південне і справно платить за воду/світло/газ та інше, але сильно втомився від зайвої бюрократії, хоче автоматизації процесу і економії часу.

image
Слово Капітану

Трохи очевидностей: запозичувати реалізовані ким-небудь патерни абсолютно не грішно. Навпаки, оперування звичними елементами інтерфейсу не вимагає додаткових витрат часу і сил на їх вивчення. Чим же поганий інструмент, який звичний і зрозумілий? Згадаймо такі патерни як pull-to-refresh, floating action button або swipe to delete. Такі алгоритми вже завчені користувачем, намотані на базальні ядра його мозку, вони вчиняються машинально.

Єдиний мінус крутий свежепридуманной фічі в інтерфейсі – час на навчання і засвоєння. Припустимо, Веніамін зацікавлений в новому потенційно зручному способі розбиратися з побутовими справами і готовий напружити увагу заради навчання, але в чому ж тут вигода, якщо його основними цілями були економія часу і сил?

Об'єднавши особистий семантичний банк інтерфейсних рішень з звичними елементами, ми отримаємо шукану золоту середину.

image
Нарахування

«Отримуйте актуальну інформацію про ваших комунальних нарахування.»

Зараз ситуація виглядає так: щоб користувач зміг знайти найбільш цікаві дані, що спонукали його до завантаження додатка, йому потрібно прочитати вміст двох таблиць каталогу послуг ЖКГ.

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

image

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

  1. Навіть якщо з одного пристрою авторизація буде відбуватися з двох і більше акаунтів, повне збіг цифр вкрай малоймовірно.
  2. А навіщо взагалі без потреби демонструвати на екрані свої паспортні дані?



image

Тут була б дуже зручна навігація по історії щомісячних платежів. Чому б не відобразити її у вигляді прокручувати вкладок з назвами місяця, що наочно.

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

Введення показань логічно пов'язаний з їх наступною оплатою. Оплаченими рахунками покладається відповідний виразний статус, а неоплачених — кнопка, ініціює цей процес, яка повинна бути помітною і знаходитися десь поблизу. Структурно екран схожий на будь прейскурант: деталізація + підсумкова сума до оплати. Исхитримся і об'єднаємо суму з кнопкою оплати, залишивши її залипші до tab bar.

image
Введення показань

Будь-який процес введення даних пов'язаний з когнітивною навантаженням, а завдання проектувальника – це навантаження зменшити будь реалізованим способом. Один із способів пов'язаний з гіпотезою про природності інтерфейсу, яку ніхто не заважає сприймати буквально. Тим більше що нативні date pickers в IOS підтверджують звичність такої реалізації вводу для користувачів. Ось так виглядає лічильник в реальному житті:

image

А ось приклад його буквального трактування: барабан показань.

image

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

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

Ця нехитра функція може значно прискорити виконання завдання і позбавляє від когнітивного напруги при введенні даних взагалі: просто сфотографуй цифри і значення довантажити автоматично.

image
Події

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

Йде в ногу з часом Веніамін часто буває забудькувата, тому корисним нововведенням тут послужить інтеграція з такими пристроями: трансляція гарячих повідомлень, наприклад, в Apple Watch.

image

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

image

image
Бесіди

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

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

image
Допомога

У більшості реальних життєвих ситуацій, коли потрібна допомога комунальних служб, їх важко знайти і легко втратити. До того ж там працюють живі люди в робочі години, і їх робота дуже нелегка.

Майже всі хоч раз да стикалися з проривом труби, раптово зниклої гарячою водою або перебували в ліфті в очікуванні лицарів ЖКГ. Шкода, що не завжди є гарантія швидко отримати зворотний зв'язок. Канонічний випадок проілюстровано в «12 стільцях»: інженер Щукін опинився в неприємній побутової ситуації і не знав, куди подітися, поки йому не допоміг випадковий перехожий.

image

Наш Веніамін не знайомий ні з ким із співробітників ЖКГ та не знає, до кого звернутися у разі чого. У Google він може знайти тільки номери телефонів локальної управи (яка не завжди може оперативно вирішити проблему). Проте в будь-якій важкій ситуації він не зрозуміє, що спілкується з величезною системою з безлічі підрозділів і буде лаяти всю систему цілком. Так чому б тоді не зробити це спілкування максимально простим, як якщо б система була чемною і чуйним співрозмовником на радість Алану Куперу.

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

Ось приклад такої взаємодії: розумний бот зрозумів контекст і допоміг Веніаміну, відшукавши спеціаліста для вирішення питання.

image

image
Висновок

Важко напевно сказати, у що трансформується інтерфейс майбутнього. Буде він управлятися голосовими командами, чат-ботами або почне реагувати на зміни в вібрації мозкових хвиль, але сьогодні — в наших руках. Незалежно від соціальних ролей і захоплень ви можете покращувати світ своїми ідеями, адже саме спільна зацікавленість у прагненні до досконалості крутить жорна прогресу. Такі справи.

Дорогий хабрачитатель! Якщо у тебе є пропозиції або питання по поточної концепції, заходь в коментарі, буду рада обговорити.

Спасибі за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.