Собака
Павлова

Дизайн сложных интерфейсов

2017

Дизайн интерфейса рабочего места оператора

Дизайн рабочего места оператора.

Разработали интерфейс (прототипы и дизайн) профессионального сервиса для работы с заявлениями в Росреестр

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

На старт

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

Интерфейс сайта Росреестра.

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

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

Наш заказчик решил исправить эту ситуацию и разработать профессиональный сервис для работы с заявлениями в Росреестр.

Наша задача

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

Позволим себе немного лирики. Почему вот это «взять и сделать» в одном случае приводит к результату, который, скажем мягко, далек от совершенства, а в другом — четко соответствует и требованиям заказчика, и представлениям пользователей о прекрасном?

Секрет прост. Половина успеха зависит от заказчика. И здесь нам повезло.

Идеальный заказчик и идеальное ТЗ

Со стороны заказчика в проекте принимали участие пять человек:

  • заместитель генерального директора;

  • директор по развитию бизнеса;

  • директор по инфраструктуре;

  • технический директор;

  • директор по производству.

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

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

Эдуард

Когда мы сделали две трети прототипов, провели тестирование. Эдуард остался доволен результатом:

Если все это будет реально работать, это будет очень‑очень круто и значительно облегчит мне жизнь!

(цитата по памяти)

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

Эдуард показал нам, как он работает с сайтом Росреестра. Он создает шаблоны MS Word и оттуда копирует информацию в заявления. Это натолкнуло нас на мысль — предусмотреть возможность создания шаблонов и копирования информации из готового заявления в новое.

Создание заявления на государственную регистрацию. Интерфейс рабочего места оператора.
Создание заявления на государственную регистрацию. Интерфейс рабочего места оператора.
Создание заявления на государственную регистрацию. Интерфейс рабочего места оператора.
Создание заявления на государственную регистрацию. Интерфейс рабочего места оператора.
Создание заявления на государственную регистрацию. Интерфейс рабочего места оператора.

Процесс

План работ по дизайну интерфейса.

Выглядит слишком просто? Погодите. У нас во всей этой истории участвовало семь человек:

  • менеджер проекта;

  • аналитик-социолог;

  • ведущий проектировщик;

  • проектировщик;

  • три графических дизайнера.

Как вы видите на плане, дизайн начался раньше, чем закончилось проектирование. В какой-то момент на проекте одновременно работали два проектировщика и три дизайнера.

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

Менеджер дирижировал этим оркестром, а заказчик — с удовольствием похвалим его еще раз — понимал и принимал работу поэтапно.

А где картинки?

Сейчас, сейчас будут. Итак, сразу после общения с Эдуардом мы сделали структуру интерфейса на примере ключевых страниц.

Главная страница.

Дашборд (он же — главная страница)

Список заявлений

Сценарий подачи одного из типов заявления

Нелинейное заполнение

Бывает, и довольно часто, что не все документы и данные, необходимые для заполнения заявления, есть сразу. Но что-то есть.

Процесс создания заявления.Процесс создания заявления.Процесс создания заявления.
Процесс создания заявления.

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

А еще — заполнять шаг данными из предыдущих заявлений.

Проверка

После создания заявления предусмотрели дополнительную проверку всех введенных данных. Незаполненные поля или неправильно введенные данные подсвечиваются красным цветом. Система не дает отправить заявление с ошибками.

Все изменения, исправления, дополнения можно сделать прямо на странице проверки, не надо возвращаться назад и прыгать по шагам.

Процесс проверки данных. Процесс проверки данных.

Все предусмотреть невозможно

После создания заявления предусмотрели дополнительную проверку всех введенных данных. Незаполненные поля или неправильно введенные данные подсвечиваются красным цветом. Система не дает отправить заявление с ошибками.

Все изменения, исправления, дополнения можно сделать прямо на странице проверки, не надо возвращаться назад и прыгать по шагам.

Создание электронной подписи.

Теперь сделаем это красиво

Мы сделали так.

Собрали требования к дизайну и составили тестовое задание

Разместили объявление на freelance.ru, выбрали там двух претендентов и пригласили еще одного знакомого дизайнера

Заплатили всем дизайнерам за тестовое задание

Все три варианта предложили заказчику. Задачка-то сложная. Как представить числа и таблицы, чтобы они не выглядели скучно?

Концепт интерфейса.

Первый концепт

Оттенки серого — не лучшее решение.

Второй концепт

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

Третий концепт

Заказчик выбрал третий вариант. С оговоркой — только не розовый!

Про работу с дизайнерами, кстати, нам есть что рассказать.

1.

В задании был указан стоп-цвет — красный. Как вы видели, третий вариант — ярко-розовый. Почему? Аргумент простой: розовый — это не красный. Ругаться не стали, попросили поменять.

2.

Объем работы был большой, и менеджер постоянно созванивался с дизайнером. Но вот что интересно. Менеджер расшаривал экран и пояснял прототипы. Дизайнер отвечал письменно в чате. Без камеры и микрофона.

3.

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

4.

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

Финальные макеты

Дело за малым. Натянуть дизайн на все прототипы. Здесь нет места для креатива, а в глазах рябит от таблиц. Работа для зрелого и очень внимательного (если не сказать дотошного) дизайнера.

Фильтр и посик заявлений.

Чтобы не потонуть в сотнях и тысячах заявлений, нужна фильтрация и поиск.

В сервисе предусмотрена проверка заявлений руководителем. Если что-то не так, то начальник завернет заявку на переделку.

Комментарий руководителя к не до конца заполненному заявлению.

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

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

Результат

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

1.

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

2.

Проект закончен точно в срок. Еще раз. Проект закончен точно в срок.

3.

И главное: сервис разработан в точности по нашим прототипам.

Отзыв заказчика

Достигнутые результаты оцениваю на 4+, возможно, потому что по окончании работ у меня сложилось ощущение, что я бы смог справиться и без вас. Но это скорее профессиональная деформация плюс завышенные ожидания лично мои. Результаты практически применимы на 100%. Порекомендовать вас могу друзьям на UX.

Алексей Макаров,
Заместитель ген. директора

Профессиональный заказчик — профессиональный результат. Что тут еще скажешь?

Наталья Прокофьева,
генеральный директор «Собаки Павлова»

Финальные макеты

Смотреть

Стоимость проекта

~ 1 500 000 ₽

Работали над проектом

~ 3 месяца

Похожие проекты

Контроль

Дизайн приложения для работы
с государственными реестрами

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

Сводный кадастр отходов

Дизайн интерфейса для Департамента природопользования Москвы

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

EasyDocs

Приложение для проверки и подписи документов

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

Полуэкт

Система электронного документооборота

Разработали дизайн интерфейса и два варианта оформления, сверстали UI-kit.

Собака Павлова

Пишите нам

На обычную почту  
,
в WhatsApp 
или в
(это наш директор)

Позвонить тоже можно

8 (800) 511-84-17

Кое-что показываем и рассказываем на весь интернет

Красивое на
, интересное в
, полезное на

На сайте могут встретиться упоминания социальных сетей, признанных на территории РФ экстремистскими организациями

Собака Павлова

Дизайн сложных интерфейсов

© Да какие уж тут копирайты

Санкт-Петербург • Подгорица • Хайфа

Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169