---
publishYear: 2019
name: Control
title: Cервис для управления государственными реестрами
excerpt: Переделали UX сервиса, в котором российские структуры хранят списки всего, что интересует государство.
context: Заказчик обращался в несколько дизайн-студий, но те смогли предложить лишь графические улучшения. За редизайн интерфейса взялись только мы.
image: ~/assets/images/portfolio/control/control.png
imageAlt: Интерфейс сервиса для управления государственными реестрами
thumbnail:
src: ~/assets/images/portfolio/cards/control-mobile.svg
alt: Собака Павлова • Контроль • Редизайн сервиса для управления государственными реестрами
logo:
src: ~/assets/images/portfolio/control/logo.svg
alt: Контроль • Логотип
link: https://datasolution.team/
tags:
- gos
- ux-design
- ux-outsource
- prof
- control
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-audit), как в этом кейсе. И [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: control-patent
- collection: portfolio
page: control-forest
- collection: portfolio
page: data-solution
- collection: portfolio
page: control-mobile
- collection: portfolio
page: gormost
- collection: portfolio
page: trash
- collection: portfolio
page: smartdeal
- collection: portfolio
page: lantapro
result:
- src: ~/assets/images/portfolio/figma.svg
text: Макеты интерфейса
link: https://www.figma.com/design/xSH2IplEmH1bz1CU8ICBOl/%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C.-%D0%A0%D0%B5%D0%B5%D1%81%D1%82%D1%80%D1%8B.-%D0%94%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8
budget: ~ 1 200 000 ₽
director: UI-улучшения бесполезны, если в интерфейсе плохой UX.
metadata:
canonical: https://sobakapav.ru/portfolio/control
title: UX • Сервис для управления государственными реестрами (практический кейс)
description: "Переделали дизайн государственного сервиса для управления реестрами — нашли узкие места, перепроектировали UX, разработали способ хранения и поиска данных."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/control/control.png'
width: 1365
height: 768
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Заказчик](#anchor1) • [Задача](#anchor2) • [Дизайн-процесс](#anchor3) • [Результат и смысл](#anchor4) • [Цены и сроки](#anchor5)
</TOC>
## <a name="anchor1" />Заказчик
Компания «Дата солюшн» — государственный подрядчик. Настолько государственный, что ссылку на сайт мы не дадим: нет его, потому что незачем.
Компания собирает информацию из бумажных документов, систематизирует и вносит в государственные реестры. Это нужно, чтобы у госструктур и частных организаций был онлайн-доступ к данным, которые могут понадобиться чиновникам и бизнесам для работы.
Реестр — это всегда иерархия и структура. Дом стоит на какой-то улице? Значит, он есть в реестре домов этой конкретной улицы. А она — в реестре улиц города. Такой принцип.
_На сайте «Госуслуг» есть целый раздел с реестрами_
Чтобы все это организовать и структурировать, чиновники используют таблицы.
Вот стоит дом на улице Ленина. Его вписали в строку таблицы реестра. Этот дом многоквартирный, он находится под управлением ТСЖ, а состояние его исправное. Чтобы найти здание по этим признакам, его помещают еще в три реестра. Этот панельный девятиэтажный дом с вентилируемой крышей построен в 1975 году. Значит, он входит еще в четыре реестра. И эту строку таблицы с домом к ним привязывают. Так можно продолжать до бесконечности, были бы какие-нибудь признаки, по которым можно классифицировать объект.
Скажем больше: у этого дома есть реестр жильцов. А дальше… Ну, сами понимаете. Ячеек в таблицах много, таблиц тоже много, все они между собой связаны, прямо хоть реестр реестров создавай. А может, уже и такой есть.
Мы, конечно, немного преувеличили. Вряд ли кто попало может получить список жильцов дома вот так запросто. Но сам принцип, когда один объект может быть привязан к разным реестрам и при этом сам являться в каком-то смысле реестром, понятен. А вот про реестр вентилируемых крыш — чистая правда.
Теперь дальше. Между реестрами и объектами существует обратная связь. Так, можно кликнуть по ячейке дома — откроется карточка, в которой написано: стоит на улице Ленина, многоквартирный, есть ТСЖ, состояние исправное, стены панельные, девять этажей, построен в 1975 году, крыша вентилируемая, живут такие-то вот люди.
_Забегая вперед, покажем карточку дома. Ссылки со слов «Тип крыши» и «Материал окон» ведут на реестры_
Удобно? Да, но только на словах. А на деле — попробуй все это организуй. Наш заказчик не побоялся и попробовал.
## <a name="anchor2" />Задача
Компания «Дата солюшн» разработала веб-сервис «Контроль» с реестрами и запустила его. Но оказалось, что пользователи плохо разбирались в интерфейсе. Постоянно обращались в поддержку, путались, не могли найти нужную информацию.
Эти пользователи — не праздные прохожие, которым что-то стало любопытно, а государственные структуры и бизнесы. Поэтому компания сразу же пошла искать подрядчика, который исправит интерфейс.
До нас они обращались в несколько дизайн-студий. Ни одна не смогла предложить, как улучшить работу с таблицами. Только внешний тюнинг: красивые кнопки, модные цветовые гаммы и прочее.
А потом компания пришла к нам.
## <a name="anchor3" />Дизайн-процесс
Никакого техзадания в духе «Исправьте вот эту страницу и вот эту таблицу» не было. Если бы заказчик знал, что нужно переделать, переделал бы сам. А к нам он пришел, чтобы сперва найти узкие места в интерфейсе и только потом их исправить.
_[Сценарии пользователей](https://docs.google.com/document/d/15t4brjrMdbdqGJPK5yFsxrxrqVunDH2PnU-Zk6iItcg/edit) помогли нам разобраться, как ведет себя пользователь, чего ему не хватает, где он может запутаться_
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Когда кто-то говорит об удобных таблицах, мы тут же вспоминаем Airtable, которым пользуемся каждый день. Это гибрид базы данных и таблиц — в сервисе можно хранить много данных разного типа, по-разному их структурировать, синхронизировать с другими сервисами, чтобы подтягивать информацию, управлять проектами и много чего еще — хватило бы фантазии. Поэтому и вдохновлялись им, когда улучшали интерфейс реестров.
К слову, заказчик сервис тоже оценил. Но использовать, разумеется, для хранения информации не мог. Зато мы перешли с ним на единый язык — когда обе стороны одинаково представляют, как могут выглядеть таблицы и какие у них могут быть возможности, общаться в разы легче. Буквально с полуслова друг друга начинаете понимать.
_Фильтры помогают систематизировать информацию в больших таблицах_
Над проектом работали три дизайнера. Каждый брал по одной части интерфейса и переделывал ее. Раз в неделю показывали заказчику, обсуждали, планировали работу на следующую неделю и уходили делать дизайн.
Чтобы не возникло ситуации, как у лебедя, рака и щуки, за основу взяли [готовый UI-кит Ant Design System](https://www.antforfigma.com/) и использовали его. Как это так? А вот так: заказчик пришел к нам за функциональностью, а не за дизайном. Мы оговорили это в начале проекта. Готовый UI-кит позволил сразу взяться за главное, а не дизайнить каждую кнопочку с нуля.
_Макет одного из разделов «Контроля». Дизайнеры могут работать над ним одновременно: копировать готовые контролы, давать советы, исправлять ошибки_
Немного замедлил разработку один курьезный эпизод с заказчиком. Мы спросили, сколько уровней вложенности может быть в таблицах. Он сказал: «Да хоть пятьдесят». Это была цифра «из головы», просто чтобы перестраховаться. Но мы-то восприняли это как задачу, поэтому ушли ломать голову, как это все удобно устроить. И чуть не сломали, пока на одном из созвонов не оказалось, что уровней вложенности не бывает больше пяти.
Заказчик не просил нас переделать меню, но оно было явно неудобным. Поэтому переделали и его.
_Мы развернули ненужные вложенности и перенесли в меню строчку с пользователем, которая раньше отчего-то была наверху над всем интерфейсом_
До редизайна сервис позволял искать в форме поиска только реестры. То есть, если пользователю нужна была информация о доме на улице Разина, он должен был знать или хотя бы догадаться, в каком реестре можно это все найти.
Мы предложили дать возможность пользователям искать еще и по содержимому таблиц.
_Поиск с подсказками помогает быстрее находить нужную информацию. Если список получается большой, можно добавить еще несколько тегов_
_Пусть поиск и умный, страница с результатами поиска все равно нужна — не всегда нужный результат попадается сразу в подсказках_
Сделали для карты небольшой графический редактор. Он нужен, чтобы выделять области и строить маршруты. Например, обозначить зону ответственности какого-нибудь ЖЭК. Или проложить маршрут для снегоуборочной техники.
_Карта использует геометки. Не всегда границы нужной территории можно привязать к конкретным объектам_
Интерфейс администратора. Слева — группы реестров. Справа — администратор добавляет объект из одного реестра в другой.
_Объект из одного реестра можно добавить в другой_
## <a name="anchor4" />Результат и смысл
На этом наш проект не закончился. Клиент разделил его на три части, чтобы было удобнее работать с большим объемом. Так что реестры — лишь одна из частей веб-сервиса. После мы сделали полный редизайн мобильного приложения и раздела с заданиями для сотрудников госорганов. Об этом — в следующих кейсах.
А вот про смысл можем рассказать уже сейчас. Он прост. Удобство и красота интерфейса — совершенно разные качества дизайна. Но их легко перепутать: мы воспринимаем чистоту и аккуратность как что-то изящное. А где изящность, там и наша убежденность, что с такой красотой работать будет одно удовольствие. Увы, не будет.
Интерфейс — это инструмент. Он должен быть функциональным. Поэтому, когда вы обсуждаете дизайн с потенциальными исполнителями, обратите внимание на то, что они продают: решение задач или графические улучшения.
Наш клиент несколько раз купил графические улучшения и пожалел.
А потом пришел к нам и ушел довольным. Настолько, что позже вернулся за [дизайном приложения](https://sobakapav.ru/portfolio/control-mobile).
## <a name="anchor5" />