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

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

• если решение интуитивно понятно
• если решение упрощает процесс взаимодействия
• если решение реализуемо

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

Не так давно вышло приложение ЖКХ Москвы, призванное облегчить жизнь граждан. Его описание гласит:

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




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

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

• Счётчики: ввод показаний, просмотр задолженностей и оплата коммунальных счётов
• События: агрегатор интересной информации и важных объявлений
• Беседы: обсуждение актуальных для москвичей тем и общение с соседями
• Помощь: решение жилищных вопросов 24 часа в сутки с помощью ЖКХ-бота

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

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

Для уточнения придумаем персонажа, который подскажет ход действий в конкретных сценариях. Им мог бы стать заурядный и среднестатистический Вениамин Живущий, 34 года, пользователь iOS. Вениамин прописан в районе Чертаново Южное и исправно платит за воду/свет/газ и прочее, но сильно устал от лишней бюрократии, хочет автоматизации процесса и экономии времени.

Слово Капитану

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

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

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

Начисления

«Получайте актуальную информацию о ваших коммунальных начислениях.»

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

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



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

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

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

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

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

Ввод показаний

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



А вот пример его буквальной трактовки: барабан показаний.



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

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

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

События

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

Идущий в ногу со временем Вениамин часто бывает забывчив, поэтому полезным нововведением здесь послужит интеграция с носимыми устройствами: трансляция горящих уведомлений, например, в его Apple Watch.



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

Беседы

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

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

Помощь

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

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



Наш Вениамин не знаком ни с кем из сотрудников ЖКХ и не знает, к кому обратиться в случае чего. В Google он может найти только номера телефонов локальной управы (которая не всегда может оперативно решить проблему). Однако в любой трудной ситуации он не поймёт, что общается с огромной системой из множества подразделений и будет ругать всю систему целиком. Так почему бы тогда не сделать это общение максимально простым, как если бы система была вежливым и отзывчивым собеседником на радость Алану Куперу.

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

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

Вывод

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

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

Спасибо за внимание!



UPD: исправила иконки и добавила кнопку на часах. Спасибо внимательным читателям за зоркость и предложенные улучшения.