---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-08-06
publishYear: 2019
name: Trash
title: Дизайн интерфейса для Департамента природопользования Москвы
excerpt: Разработали дизайн интерфейса сводного кадастра отходов, в котором должна заполнять отчеты практически каждая московская организация.
context: Заказчик разработал черно-белый интерфейс кадастра, а к нам пришел за дизайном. Только за UI, никакого UX — его уже утвердили, и никто ничего менять не собирался.
logo:
src: ~/assets/images/portfolio/trash/logo.png
alt: Департамент природопользования Москвы logo
image: ~/assets/images/portfolio/trash/trash.png
imageAlt: Дизайн интерфейса для Департамента природопользования Москвы
thumbnail:
src: ~/assets/images/portfolio/cards/moscowdept.svg
alt: Собака Павлова • Департамента природопользования Москвы • Дизайн интерфейса сводного кадастра отходов
tags:
- gos
- ux-design
- prof
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ux-design
- text: |
### Наша экспертиза
368 интерфейсных проектов и более [120 проектных кейсов](https://sobakapav.ru/portfolio).
### Статьи об интерфейсах для транспорта
collection: post
page: city-transport-design
- collection: post
page: logistics-design
- collection: post
page: osago
- collection: post
page: rzd-consult
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: foodtrucks
- collection: portfolio
page: simetra
- collection: portfolio
page: loglab
- collection: portfolio
page: boracase
- collection: portfolio
page: gormost
- collection: portfolio
page: pgk
- collection: portfolio
page: autotransinfo
- collection: portfolio
page: viking-line
result:
-
src: ~/assets/images/portfolio/png.png
text: Финальные макеты
link: https://drive.google.com/open?id=1zn-6Gv2aVS_tLL-hZAHGhmjuwmLgVhJE
budget: ~ 980 000 ₽
director: Упростили и ускорили работу пользователя средствами UI.
metadata:
canonical: https://sobakapav.ru/portfolio/trash
title: UX • Интерфейс для Департамента природопользования Москвы
description: "Разработали дизайн интерфейса московского сводного кадастра отходов — переделали поведение и UI таблиц, но не трогали уже утвержденные UX интерфейса и логику работы."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/trash/trash.png'
width: 1142
height: 705
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Заказчик](#anchor1) • [Бизнес-задача](#anchor2) • [Дизайн-задача](#anchor3) • [Дизайн интерфейса](#anchor4) • [Заключение](#anchor5) • [Цены, сроки](#anchor6)
</TOC>
## <a name="anchor1" />Заказчик
Заказчик — московская IT-компания, которая разрабатывает софт для российских госструктур.
Среди ее клиентов Департамент информационных технологий города Москвы, Министерство здравоохранения РФ, Государственная жилищная инспекция города Москвы. В общем, масштаб понятен.
## <a name="anchor2" />Бизнес-задача
Всю сознательную жизнь наш заказчик проектировал интерфейсы самостоятельно. Это делали их бизнес-аналитики. Они знают назначение каждой галочки и каждой строчки, помнят о смежных системах — что и как должно синхронизироваться, складываться в отчеты и подгружаться по клику. Но интерфейсы таких систем обычно строго утилитарные. Вспомните хотя бы «1С». Оно и понятно, внешний вид кнопочек — это малая часть работы по созданию и внедрению такого монстра, как автоматизация государственных систем. Да и запроса на дизайн не было.
Но недавно все изменилось. В мире появился тренд на то, что профессиональные интерфейсы должны выглядеть современно и красиво, и Россия в этом плане не отстает. Дело тут, конечно, не в красоте, а в удобстве для пользователя. Чем понятнее интерфейс, тем лучше работает сотрудник: быстрее выполняет задачи, меньше ошибается. Да и обучать его становится проще.
В Департаменте природопользования это прекрасно понимают. И заказчик тоже понимает. Только делать интерфейс удобней через улучшение UI, не трогая логику работы системы, — это отдельная экспертиза. И у заказчика ее не было. Мгновенно нарастить экспертизу тоже нельзя — нужно нанимать людей, изучать опыт других компаний. Процесс долгий, сложный и дорогой. Просто взять в команду крутого дизайнера и обрести счастье не получится.
Зато у нас такая экспертиза есть. И она довольно уникальная — мы занимаемся именно дизайном профессиональных интерфейсов. Это пока довольно редкое направление. Тренд на UX и UI в сложных системах начался буквально вчера, и очень малая часть дизайнеров в них разбирается на том уровне, который нужен нашему заказчику.
Так что к нам он пришел за конкретной компетенцией.
## <a name="anchor3" />Дизайн-задача
К нам заказчик пришел с двумя интерфейсами. Первый — для природопользователей, второй — для Департамента природопользования и охраны окружающей среды города Москвы. Компания разработала сводный кадастр отходов, в котором столичные организации будут отчитываться перед государством о мусоре: откуда он взялся, какой у него класс опасности, куда свозят, как утилизируют, с кем заключили договоры и т. д. Проверять отчеты должны кураторы из департамента — у них будет свой интерфейс, но в том же кадастре.
_Аналитики сделали аккуратный, но слегка избыточный в деталях интерфейс_
## <a name="anchor4" />Дизайн интерфейса
Так выглядел главный экран для природопользователя. Людям, которые каждый день сидят в интернете, смотреть на такой интерфейс немного больно. Но вам следует знать, что для бюджетных контор это норма. Даже больше — если разработчик сделает что-то в духе фейсбука, чиновники весь его интерфейс вместе с дизайном могут завернуть. Потому что не надо креативить там, где все серьезно.
В процессе мы узнали, что специалисты нашего заказчика разрабатывают интерфейсы, не оглядываясь на разрешения экранов. Поэтому вкладки у них могут растянуться на весь экран, а контент на странице займет лишь треть всей доступной площади. Пользователям с маленькими мониторами придется использовать горизонтальный скролл, а с большими — вглядываться в крохотные буквы.
Мы попытались это исправить. Определились с разрешением, стали подгонять интерфейсы под него. Не везде получилось гладко — многие страницы состоят из таблиц, которые практически невозможно сжимать.
_В нашей версии пользователь может свернуть любые поля, чтобы не загромождать экран_
Во вкладке «Адресные объекты» проблем еще больше. Попробуйте догадаться, что обозначают кнопки над таблицей.
_Таблица выглядит маленькой, и это странно, потому что справа достаточно неиспользованного места_
Можно, конечно, предположить, что иконка с плюсом добавляет новую запись в таблицу. Но что делает «МСП»? Наверное природопользователи знают. Но все равно это непорядок.
Мы сделали кнопки больше, подписали их, убрали лишние. Например, две иконки с воронкой превратили в «Фильтр». Ну и иконку с дискетой убрали насовсем — система должна сохранять все по умолчанию.
_Мы добавили поля в таблицу и убрали лишние кнопки_
Возможно, вы заметили, что в нашей таблице девять колонок, а в оригинале — пять. Как так вышло? В версии без дизайна есть кнопка с изображением шестеренки — это «Настройки». Если зайти в них, в таблицу можно добавить дополнительные колонки. Зачем? Могут понадобиться! Ну, а пока они для компактности скрыты.
Мы вытащили все колонки на свет божий и добавили кнопку «Скрыть колонки». Все-таки их проще убрать, чем добавить: сперва нужно их найти в настройках, а до этого — узнать, что их, оказывается, можно добавить. Это очень неочевидно.
Другой момент: в старом интерфейсе было непонятно, как добавить новую запись в таблицу. Этого никто не предусмотрел, была только иконка «+». Возможно, она позволяла писать текст сразу в ячейки таблицы. Мы заменили непонятную иконку на кнопку «Добавить» и проработали поп-ап. До нас его не было.
_Добавлять объект в отдельное окно удобнее, чем в таблицу_
Больше всего мы поработали над вкладкой «Движение отходов». Правда, вместе с коллегами из компании-заказчика — слишком уж радикальные там изменения.
В прототипе страница состояла из одной таблицы.
_Маленькая таблица — это всегда мучение. Заполнять и читать текст в полях «Наименование» и «Адресный объект» в таком интерфейсе очень сложно_
Так она стала выглядеть после первой итерации. Тогда мы еще хотели вынести вкладки в левое вертикальное меню.
_Первая версия дизайна таблицы. Уже без лишних кнопок_
Коллеги из компании-заказчика рассказали нам, что таблицу стоит разделить на две. Потому что отходы приходят и уходят — проще, если мы будем отчитываться о них в разных вкладках.
Сделали.
_Разделили таблицу на две части_
Позже оказалось, что отходы не только поступают и передаются дальше. Они еще образуются, и их можно транспортировать.
Добавили еще две вкладки.
_Гулять так гулять! Разделили таблицу на четыре части_
_Каждая из четырех таблиц стала ощутимо проще той, что была вначале_
Интерфейс куратора несильно отличается от интерфейса природопользователя. Он проверяет, правильно ли организации заполняют формы. Поэтому все вкладки остались на своих местах, а слева разработчики добавили список проверяемых компаний.
_Куратору пришлось бы несладко — к пользовательскому интерфейсу разработчики добавили еще и панель с данными компаний_
Экран поделен прямо пополам. Это решение подойдет для мониторов с диагональю от двадцати дюймов, а на любом ноутбуке выскочит за пределы экрана.
Нужно ли куратору знать все о компании, которую он проверяет? Оказалось, что нет. Достаточно просто названия и ИНН. Поэтому мы сжали левую панель до двух столбцов.
_Мы эту панель сделали динамической — при желании ее можно сжать_
Если КПП, юридический адрес и ОКАТО все же понадобятся, панель можно растянуть мышкой. Просто потянуть, и она раскроется. Схлопнуть тоже можно.
_Если монитор у куратора старенький и с маленькой диагональю, панель можно вообще схлопнуть_
Если растянуть панель, окно справа сожмется, а названия вкладок исчезнут.
_Если куратор хочет сидеть с развернутой панелью, порой ему придется пользоваться горизонтальным скроллом. Мы решили не жертвовать шириной таблиц и не сжимать их, иначе текст в них станет нечитаемым_
## <a name="anchor5" />Заключение
Смысл любого UI — помочь пользователю разобраться в том, что происходит на экране.
В этом проекте мы изменили весь внешний вид системы, не трогая логику и архитектуру. Сценарии остались теми же самыми, но пользователям стало гораздо легче их проходить. Появилась понятная навигация, пропали скрытые столбцы в таблицах, стало меньше кнопок. Это все мелкие улучшения, но они создают приятный контекст.
Теперь заполнять и проверять формы отчетности стало проще. А значит, пользователи будут экономить время на бюрократических формальностях, и кураторы в том числе. И все это — результат заботы о людях.
## <a name="anchor6" />