Лого vc.ru

Кейс из России: Проектирование интерфейса диспетчерского ПО для такси-сервиса

Кейс из России: Проектирование интерфейса диспетчерского ПО для такси-сервиса

Ведущий UI/UX-дизайнер компании Create Михаил Беспалов написал для vc.ru о том, как разрабатывался интерфейс диспетчерского ПО для компании BLAQ.

Поделиться

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

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

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

У крупных игроков ситуация такая же. Вот, к примеру, чем приходится пользоваться диспетчерам «Яндекс.Такси»:

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

Приступаем к работе

Выслушав клиента, обозначили требования:

Обучение оператора — не более двух недель

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

Формирование заказа — не более 1 минуты

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

Полноэкранный режим и мониторы от 21'

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

Концепция

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

Разделение по ролям

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

Всплывающие панели

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

Карта

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

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

Что же получилось

Края экрана и бесконечные кнопки

Чтобы закрыть окно или вернуться на уровень назад, достаточно, не прицеливаясь, отвести мышку к краю экрана. По закону Фиттса, это увеличивает скорость реакции на такие кнопки в несколько раз. Если учесть, что человек нажимает на нее 200-300 раз в день, 5 дней в неделю — экономия существенная.

То же самое с кнопкой набора номера и приема звонка. Их области клика увеличены до края экрана.

Пропорции карты

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

Горячие клавиши

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

Все основные операции можно делать с помощью горячих клавиш. Их полный список доступен при двухсекундном зажатии клавиши Ctrl. К тому же, когда оператор видит это окно, первая клавиша у него уже зажата, осталось подсмотреть вторую.

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

Цветовое кодирование

У каждого раздела свой цвет. Не читая заголовки, оператор может понять, в каком разделе он сейчас. Даже с помощью периферического зрения.

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

Защита от ошибок

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

Чтобы сократить количество ошибок, связанных с человеческим фактором, мы применили две стратегии:

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

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

Резюме

Задачу уложиться по времени оформления заказа в 1 минуту выполнили. В общем случае заказ оформляется в несколько раз быстрее.

В течение месяца после запуска диспетчерский центр клиента перешел на новое ПО и успешно на нем работает.

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Это интерфейсы созданные программистами для программистов, а не для людей. Непреложный закон разработки: не подпускать на пушечный выстрел программистов к UI/UX дизайну.

интересное и доступное чтиво для человека, который не занимается разработкой интерфейсов. спасибо!

По-моему, не ново... cattaxi.ru

1

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

0

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

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

Я бы провел А/Б тест поменяв местами карту и основное меню. Мне кажется при выравнивание карты по левому краю будит легче восприниматься информация и сократиться количество возможных ошибок. ИМХО

"при выравнивание" количество ошибок не сократится. грамматических уж точно.

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

вот от этого абзаца жестко бомбануло. все заказы в пределах кольца? карту нельзя зумить? карту нельзя таскать?

по поводу шоткатов: вы видели, как в мс офис подсказки всплывают? и не надо 2 секунды жать.

по поводу цветового кодирования есть мнение, что соответствие цвета кнопки подтверждения цвету формы будет дистрактить.

интересно знать, проводились ли тестирования, собирались ли данные на реальных кейсах и т.п.?

или все только в теории: "ехал закон Фиттса через закон Фиттса, видит закон Фиттса закон Фиттса, закон Фиттса закон Фиттса закон Фиттса закон Фиттса."

Почему нельзя? Речь о том, чтобы область видимости карты была квадратной формы.

0

Create отлично справились. Но после внедрения, точно придется делать 2.0. Если автор дизайна читает пост, скажите под какой размер автопарка вы это делали.

можно посмотреть кейс на сайте bit.ly/1STJuyz
для полноты картины (:

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

С цветами удобное решение. Не нравятся панели, на них как-то очень много данных. Из моего опыта типовой сценарий вызова такси: позвонить, сказать откуда забрать и что забрать сейчас. По логике и форма заказа на стороне оператора должна выглядеть: поле ввода адреса, при этом город - как опция, и кнопка сейчас или позже. А все о клиенте и важные примечания - изначально скрывать. И необходимость карты для лица, принимающего заказы - не понята. Только если сомнения возникли откуда забирать надо - вызвать карту.

Конечно карта без проблем таскается и масштабируется, но как написано в статье одна из целей чтобы оператор совсем не использовал мышь. Маршруты, таксопарк и трафик должно быть видно сразу при работе с формами, мы много времени теряем на переключения. Форма тоже не случайная представьте как выглядел бы маршрут с севера на юг города на примере Я.Такси, там ничего не увидеть при таком масштабе.

Опять таки в MS Office подсказки всплывают при наведении курсора.

Хотелось бы линк на это мнение, либо своими словами.

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

Вы тут путаете: закон это то что доказано, а теория это догадки и мнения. Скорость обработки заявки самое важное в этом интерфейсе, поэтому закону Фиттса уделили много внимания, странная претензия.

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

Красиво слили бюджет. Уж как много лет в софте для такси оператор используется только в разруливание ситуации. Все работает и должно работать в автор режиме. Смотрю на все это и смешно. )

Странная реакция, товарищи. Вам дали реальный кейс, реальной фирмы. Заказчик принял и одобрил, подрядчик провел проект от прототипа до полнофункциональной системы работы такси. Только сотрудник компании Blaq может ворваться в тред и написать "все гавно там удобнее", но пока такого не случилось.

А вопросы, будто это студент на дрибле набросок опубликовал. Ну некрасиво.

Create молодцы, можно примерный диапазон цен на UI/UX дизайн узнать? Чтобы понять стоит к вам стартапу обращаться или нет ) Даже скорее не разброс, а минимум с которого вы общаетесь с заказчиками.

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

странно, какие мои слова указали на эмоциональность?

0

Спасибо за ваш комментарий :)

Все, конечно, индивидуально.
Ориентировочно можно посмотреть тут bit.ly/1QEcbvZ

Спасибо за ориентировки

0

сильно не раскидывайте, потом еще собирать придется )

0

Подготовка и запуск MVP от 1млн., проектирование и дизайн интерфейсов от 700к, Ок ...

0

Чем помогает Закон Фиттса при работе горячими клавишами? :)

0

Об этом ни слова в статье

0

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

0

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

Сейчас обсуждают
Антон Адамов

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

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Yus Teryukalov

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

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

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

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

но драйв этот сомнительный, в идеале, ты сам должен выбирать продукты с одной стороны, а с другой, это для тех кто не совсем готовить умеет, т.к. речь о конкретном рецепте, а если у меня в холодильнике половина продуктов для блюда есть? Сразу вспоминается Никита Лихачёв))) Хотя вот пишу это и сам понимаю, что лишний раз мотивировать людей готовить дома для себя и семьи всё таки благое дело)))

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Показать еще