→

we@sobakapav.ru

8 (800) 511-84-17

2017

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

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

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

На старт

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

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

Наша задача

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

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

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

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

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

заместитель генерального директора;
директор по развитию бизнеса;
директор по инфраструктуре;
технический директор;
директор по производству.

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

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

Эдуард

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

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

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

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

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

Процесс

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

менеджер проекта;
аналитик-социолог;
ведущий проектировщик;
проектировщик;
три графических дизайнера.

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

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

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

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

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

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

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

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

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

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

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

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

Проверка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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