Как испортить приложение и оттолкнуть пользователей. Разбираем и исправляем ошибки в приложении Роскомнадзора

Враждебный UX/UI или пособие по базовым ошибкам разработки

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

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

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

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

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

Ныряем в ошибки по порядку.

Скачать приложение: App Store / Google Play.

Когда приложение РКН появилось в открытом доступе, мы установили его на первый подручный девайс: iPhone SE 1-го поколения, iOS 14.4, экран 4".

По описанию в App Store приложение совместимо со всеми устройствами, которые работают на iOS 12.0 или новее. То есть наш девайс подходит. Поэтому ошибка на первом экране удивляет. Интерфейс приложения отображается криво:

• Текст непропорционально большой и смещается на границы экрана
• Текст перекрывает статус-бар и кнопки
• Кнопки главного экрана накладываются на логотип и название ведомства
• Названия кнопок сжимаются до ругательств

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

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

Но, если приложение — уникально для рынка, разработчик должен создавать онбординг. В приложении РКН его нет. Пользователь сразу попадает на главный экран с ошибками, где может выбрать тему оформления «Стандарт» или «Модерн» и перейти в один из разделов: «Единый реестр» или «Информация»:

Кнопки на главном экране — это первый шаг в навигации по приложению. В разделе «Единый реестр» открывается экран с кнопками для каждого раздела или панель вкладок в зависимости от выбранной темы:

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

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

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

При­чина застав­лять пользователя запол­нять все эти поля — устрой­ство базы дан­ных. Такой формат помогает про­грам­ми­сту легко составлять запросы. А кроме большого количества полей есть и другие ошибки:

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

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

Допустим пользователь сообщил о запрещенном контенте и хочет посмотреть статус жалобы. Он открывает раздел «Мои жалобы» и видит странное поле для поиска по жалобам: кнопка для поиска находится за пределами формы, динамичный поиск по введенному кусочку URL отсутствует, а подсказка сбивает, потому что IP — это и есть адрес.

Если тапнуть по полю для URL или IP адресов — появится русская клавиатура. А чтобы ее скрыть, нужно перейти на другой экран приложения. Правильно в таких случаях предлагать клавиатуру для веб-представлений: с латинскими символами, «https://», «www.», «.» и «/»:

В совокупности эти ошибки запутывают и раздражают пользователя и делают раздел неработоспособным.

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

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

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

1. Кривое масштабирование
2. Нефункциональный главный экран
3. Многоступенчатая навигация
4. Авторизация через Госуслуги
5. Формуляр для подачи жалобы
6. Нерабочие состояния в «Моих жалобах»
7. WebView-формуляр для обратной связи
8. WebView для чтения новостей и документов

У Роскомнадзора есть современный логотип. Но сплеш и главный экран приложения предлагают смотреть на эмблему с двуглавым орлом. Минкомсвязи признало такие эмблемы устаревшими 4 года назад и предложило использовать на сайтах госорганов цифровую версию герба. Так как у РКН есть свой логотип — он должен быть на заставке:

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

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

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

Вместо 14 неочевидных полей, мы оставили 6:

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

Специалисты ведомства должны сами обрабатывать жалобы и уметь работать с базой данных. А не заставлять пользователя выполнять эту работу. Задача пользователя — оперативно сообщить о проблеме:

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

• в каком статусе обращение
• по какой теме
• что за сайт

Вся подробная информация по жалобе и ответ ведомства находятся внутри формы.

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

В бизнес-приложениях этот раздел заменяется чатом, где пользователь может решить вопрос с оператором или чат-ботом. Но в РКН моментальная помощь не нужна. Поэтому написать сообщение можно через форму:

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

На этом все. Спасибо за ваше время — до встречи!

Наши проекты

Наш Telegram-канал