13 сентября 2013 в 16:41

Как сделать так, чтобы не путали пиццы? Интерфейсы трекера пиццерии и их особенности

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

Трекер состоит из интерфейсов, каждый из которых выполняет свою важную функцию. Каждый интерфейс показывает пользователю (сотруднику кухни) какие-то конкретные параметры продукта.

image

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

Типы продуктов:
  • Выпекаемые: пиццы (экраны: Тесто, Начинка, Упаковка)
  • Полуфабрикаты: салаты, картошка, кукуруза (экраны: Закуски, Упаковка)
  • Простые: напитки, маффины (добавляются в завершении, на схеме не показаны)


Все продукты в завершении распределяются по экранам выдачи (экраны: Курьеры и Выдача в зал).

Каждый экран выводит определенное количество типов продуктов. Для каждого продукта выводятся определенные параметры (названия, размеры, толщина теста и т.д.). Цель — сделать так, чтобы работа с интерфейсами вызывала минимум ошибок у сотрудников. Я покажу, как шла работа над интерфейсами и какими были попытки сделать так, чтобы сотрудники не путали пиццы.


image
Внешний вид интерфейсов в начале моей работы над ними

Я начал работать с интерфейсами трекера, когда они уже существовали, но требовали определенных доработок верстки.

Дальше в очереди задач стояло минимизировать ошибки сотрудников при работе с интерфейсами.

Интерфейсы: Тесто и Начинка


image
Интерфейсы Тесто и Начинка сегодня

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

Отображаемые параметры:
  • Название пиццы
  • Толщина теста
  • Размер пиццы
  • Номер заказа


Описание проблемы

Через пиццерию проходит большой поток заказов. Производство построено по принципу конвейера. У сотрудника есть несколько секунд, чтобы взглянуть на экран и приступить к приготовлению продукта.

Нужно сделать так, чтобы сократилось количество ошибок, связанных с выбором размера теста и толщины теста: сотрудник обращает внимание на цифру с размером, но не замечает отметку «Т», которая говорит о том, что тесто нужно выбрать тонкое.

Поиск решения

image
Индикация размеров пицц в графической форме

Были придуманы пиктограммы, отображающие размеры. Одна из первых попыток кодировки через цвет (сейчас у коробок для пицц разные цвета в зависимости от размера). Попытка вывести индикатор тонкого теста («Т») внутри пиктограммы.

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

image
Индикация «положением»

Постоянно отображены 3 поля в каждом блоке пицц, а индикатор с буквой отображается в соответствующем поле.

Показаны варианты с цветами и без. Желтым подсвечены нажатые блоки. Предлагаю заменить цифры размеров на буквы («Б» — 35, большая; «С» — 31, средняя; «Ст» — средняя на тонком). Еще тут есть попытка отображения соусов для основы, на сегодняшний день сотруднику необходимо запоминать соусы и возможны ошибки. Пробую подчеркивать пиццы на тонком тесте.

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

image
Еще концепты

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

image
Нерадикальный вариант решения

Самый адекватный из способов индикации — выводить индикатор толщины теста рядом с размером теста. Показан соус для основы (пицца соус можно вообще не показывать, он используется по умолчанию).

image
Последнее из предложений

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

Интерфейс: Закуски


image
Интерфейс Закуски сегодня

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

Отображаемые параметры:
  • Название продукта
  • Номер заказа


Описание проблемы

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

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

image
Концепты «на Закуску»

В процессе поиска предлагались пиктограммы, а также группирование выводимых продуктов по типам прямо в интерфейсе. Группирование оказалось бы слишком негибким вариантом (возможно, возникнут новые продукты или уйдут существующие). Пиктограммы сложно подобрать и еще сложнее поддерживать их актуальность в будущем.
Последнее из предложений

В последнем из вариантов закуски группируются по цветам. Попытка избавиться от путаницы в сокращениях для названий на «К». Нажатый блок подсвечен темным фоном.

Интерфейс: Упаковка


image
Интерфейс Упаковка сегодня

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

Отображаемые параметры:
  • Название продукта
  • Размер для пицц
  • Толщина теста для пицц
  • Бесплатный соус для пицц и некоторых закусок
  • Способ продажи
  • Номер заказа
  • Количество собранных коробок (в одном заказе может быть больше одной коробки)


Описание проблемы

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

image
Один из скетчей

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

image
Абстрактный эксперимент с цветами и выравниванием

image
Последнее из предложений

В последнем варианте использована индикация размера цветом. Более явное отображение способа выдачи заказа (доставка, зал, самовывоз).

Итог


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

Уже сейчас мои последние предложения мне кажутся не лучшим вариантом.

Работа над дизайном интерфейсов трекера, так же как и над другими проектами Додо продолжается и за процессом можно следить в моем блоге.
Ренат Рафиков @crenative
карма
74,0
рейтинг 0,0
Самое читаемое Разное

Комментарии (28)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Вот это интервью www.youtube.com/watch?v=cLtQHtS2W8k
    • +2
      Не совсем инновационную: 60 минут или пицца бесплатно. Очень граммотный маркетинг у Додо)
      • +8
        Да, маркетинг грамотный!
        • +4
          А еще он прикольно хакается, почти подобрал время в которое надо сделать заказ, чтобы курьер гарантированно не успел за 60 минут.
          • 0
            Как открыть своё кафе без затрат на кухню:
            1. Ставим модем на дозвон в пиццерию
            2. Проигрываем стандартное сообщение заказа.
            3. Автоматически принимаем бесплатную пиццу в лоток
            4. ?????
            5. ПРОФИТ!
      • +5
        «Принцип только один: Доставщик всегда на посту, свою пиццу вы получите через тридцать минут, в противном случае можете пристрелить Доставщика, забрать его машину и подать групповой иск.» — «Лавина», Нил Стивенсон.
  • +4
    В чем рисовалась такиая клевая схемка как в первой картинке?
    • +2
      Адоби Иллюстратор
  • +3
    Пойду пиццу закажу.
    • 0
      Судя по профилю, «Додо» пока не закажете. Как и я, впрочем :(

      По теме: так держать!.. Вы все правильно делаете.

      Я слежу за Федором и в частности за его ИТ-стратегией еще с его первых видео со шваброй и про глухонемых воркутинских бандитов. ;)
      • +1
        Я имел ввиду, что разговоры про пиццу пробудили аппетит )
  • 0
    У меня вопрос, судя по картинкам используются ipad'ы, разве не дешевле сделать это на ноунейм китайских андройдах? Ведь я так понял интерфейсов этих много, экономия была бы существенная, нужен ведь лишь браузер.
    • +1
      Когда запускали производство — пробовали андроиды. Тогда они никак не тянули по производительности. Сегодня идут эксперименты, есть франчайзи, которые работают на андроидах.
      • 0
        эмм… не тянули до производительности? в каком году?

        сервер гдк все храниться в качестве бекенда и любой фронтэнд в качестве отображалки.

        на Украине Додо к сожалению нет, что бы посмотреть. Но, все же, не верится что любой планшетке-телефону через веб интерфейс не хватит производительности отобразить то что сейчас происходит.
      • 0
        А веб-интерфейс не рассматривали?
        • 0
          Ответ Федора Овчинникова (это автор бизнеса, но он не зарегистрирован на Хабрахабре):

          «Для нас не важна операционная система и устройство, так как система работает через веб-браузер. iPad или Android — разницы нет ;) В новых пиццериях тестируем no name устройства на Android. В первой пиццерии iPad, так как когда начинали Android устройства работали хуже, чем сейчас — зависали, тормозили, отклик медленный был.»
          • 0
            Понятно. интересно было бы почитать, какие технологии и инструменты при разработке использовали, какие трудности возникали.

            Если веб-интерфейс, то без связи с сервером он бесполезен, интернет отвалился и вся работа встала. Какие пути решения такой проблемы?
            • 0
              >Если веб-интерфейс, то без связи с сервером он бесполезен, интернет отвалился и вся работа встала.

              Это не всегда так: есть как минимум 1 вариант, когда связь с сервером не нужна:
              1) можно сделать приложение с использованием WebView, а качестве веб-сервера запускать iJetty на localhost'e
  • +1
    У меня вызывает огромное уважение автор всего проекта Додо-пиццы. Он до этого пытался организовать книжный бизнес, но в итоге оттуда ушел и сделал пиццу. Читать его блог очень интересно.
    Но вот пост слабоват, честно. Не зная предыстории очень сложно понять, о чем идет речь. Я читал в Секрете Фирмы о том, как они делали свою систему работы с заказами и мне статья более менее понятна, но чтобы дать историю с нуля по-моему нужно построить изложение иначе.

    Вопрос из зала:

    Почему iPad, а не андроид? Для корпоративного приложения андроид смотрится значительно удобнее, на порядок меньше проблем с лицензионными ограничениями. Тьфу ты, пока писал — уже спросили :)
    • 0
      Полностью согласен, очень интересующая меня тема, но не смог пробраться сквозь дебри отсутствия контекста…
      • 0
        Я переехал в Сыктывкар, чтобы вникнуть в контекст.

        Спасибо за комментарии. Похоже, надо было сильнее постараться, чтобы было понятно о чем интерфейсы
    • +1
      Потому что айпады оказались быстрее и стабильнее(им нужен только браузер). Сначала были андроиды, но от них отказались. Об этом было где-то в блоге «Сила Ума», который сейчас лежит.
  • +1
    Я не думал, что топик перенесут в «Пиарюсь». Он писался про интерфейсы для тех, кому они интересны.

    Но все же попытаюсь помочь с контекстом. Вот полуторагодовалой давности пост от автора бизнеса sila-uma.ru/2012/02/07/informacionnaya-sistema-dodo-is/
  • +1
    Додо-пицца — это, конечно, жесть, хоть и не дотягивает до пиццерии «Лазарет» или Додо-аптеки (типа «Добрый Доктор»)…
  • +1
    Кстати пицца у вас стала повкуснее, нежели года 2 назад. Мне она при запуске вообще напоминала те, что покупал в США за 5 баксов в магазине 7-Eleven.
  • 0
    Молодцы, я бы вам еще посоветовал показывать мигающим индикатором текущую пиццу, медленно мигающим.
    • 0
      Сегодня «текущая» пицца — это та, которую взяли в работу. Их может быть сразу несколько. Они нажимаются и приобретают отличный от остальных фоновый цвет (в нашем интерфейсе — оранжевый). То есть цвет сам по себе хороший индикатор измененного состояния, мигание я себе не представляю для каких целей могло бы быть добавлено в интерфейс.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.