Интерфейс
сервиса для управления государственными реестрами

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

Переделали UX сервиса, в котором российские структуры хранят списки всего, что интересует государство.

Контекст

2019

~ 1 200 000 ₽

Бюджет

Результат

Макеты интерфейса

Заказчик

Компания «Дата солюшн» — государственный подрядчик. Настолько государственный, что ссылку на сайт мы не дадим: нет его, потому что незачем.

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

Реестр — это всегда иерархия и структура. Дом стоит на какой-то улице? Значит, он есть в реестре домов этой конкретной улицы. А она — в реестре улиц города. Такой принцип.

На сайте «Госуслуг» есть целый раздел с реестрами

Чтобы все это организовать и структурировать, чиновники используют таблицы.

Вот стоит дом на улице Ленина. Его вписали в строку таблицы реестра. Этот дом многоквартирный, он находится под управлением ТСЖ, а состояние его исправное. Чтобы найти здание по этим признакам, его помещают еще в три реестра. Этот панельный девятиэтажный дом с вентилируемой крышей построен в 1975 году. Значит, он входит еще в четыре реестра. И эту строку таблицы с домом к ним привязывают. Так можно продолжать до бесконечности, были бы какие-нибудь признаки, по которым можно классифицировать объект.

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

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

Теперь дальше. Между реестрами и объектами существует обратная связь. Так, можно кликнуть по ячейке дома — откроется карточка, в которой написано: стоит на улице Ленина, многоквартирный, есть ТСЖ, состояние исправное, стены панельные, девять этажей, построен в 1975 году, крыша вентилируемая, живут такие-то вот люди.

Забегая вперед, покажем карточку дома. Ссылки со слов «Тип крыши» и «Материал окон» ведут на реестры

Удобно? Да, но только на словах. А на деле — попробуй все это организуй. Наш заказчик не побоялся и попробовал.

Задача

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

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

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

А потом компания пришла к нам.

Процесс

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

Сценарии пользователей

Google Docs

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

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

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

Фильтры помогают систематизировать информацию в больших таблицах

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

Чтобы не возникло ситуации, как у лебедя, рака и щуки, за основу взяли готовый UI-кит Ant Design System и использовали его. Как это так? А вот так: заказчик пришел к нам за функциональностью, а не за дизайном. Мы оговорили это в начале проекта. Готовый UI-кит позволил сразу взяться за главное, а не дизайнить каждую кнопочку с нуля.

Макет одного из разделов «Контроля». Дизайнеры могут работать над ним одновременно: копировать готовые контролы, давать советы, исправлять ошибки

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

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

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

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

Мы предложили дать возможность пользователям искать еще и по содержимому таблиц.

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

Поиск, страница с результатами | SobakaPav.ru

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

Сделали для карты небольшой графический редактор. Он нужен, чтобы выделять области и строить маршруты. Например, обозначить зону ответственности какого-нибудь ЖЭК. Или проложить маршрут для снегоуборочной техники.

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

Интерфейс администратора. Слева — группы реестров. Справа — администратор добавляет объект из одного реестра в другой.

Объект из одного реестра можно добавить в другой

Результат и смысл

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

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

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

Наш клиент несколько раз купил графические улучшения и пожалел.

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