Схемы рецептов для кухни пиццерии. Процесс, тестирование, инструкция к схемам

в 11:10, , рубрики: usability, додо, Додо Пицца, Инфографика, кухня, пицца, процесс, схемы, тестирование, метки: , , , , , ,

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

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

Для понимания задачи я приведу пример процесса изготовления Гавайской пиццы. Если на экране пиццамекера высветилось название этой пиццы, он находит инструкцию по ее приготовлению.
image

  1. Рецепты пицц. Тут можно найти список ингредиентов конкретного продукта.
  2. Схемы количества ингредиентов. Если поступил заказ на пиццу среднего размера (30 см), то пиццамейкер обратит внимание именно на блоки с количествами для этой пиццы.
  3. Инструкция. Она существует для ознакомления с принципами схем. Тут показано что и как зашифровано.

Сотрудник добавит 15 штук слайсов ветчины в 3 круга, двойную порцию ананасов (3/4 стаканчика два раза) и стандартную порцию сыра Моцарелла для средней пиццы (1 полный зеленый стаканчик — цвета стаканчиков подобраны не случайно, коробки для средних пицц у нас тоже зеленого цвета).

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

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

Тестирование

Тестирование прошло два этапа.

На первом этапе я просто показывал результаты в виде PDF менеджерам и опытным сотрудникам пиццерии. Тут мы выявили самые очевидные проблемы и сложности.

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

Перед испытуемым ставился компьютер с развернутыми на экране схемами, а на столе перед ним были размещены лист А4 и несколько монет. Я просил комментировать вслух процесс считывания схем и наблюдал за тем, как человек раскладывает слайсы-монеты внутри нарисованного круга и какой последовательности использует разные стаканчики.

После каждого этапа тестирования я перерисовывал схемы и начинал искать новых испытуемых для тестов — повторное тестирование на одних и тех же людях не имело особого смысла. Удалось протестировать схемы на на нескольких десятках людей.

В деталях

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

Стаканчики

image
Попытка ввести абстрактное обозначение стаканчиков не удалась — иконка стаканчика считывалась лучше. Для лука поступило предложение «щепотку» нарисовать специальной иконкой. Тут же можно проследить, как изменялось размещение подписи с количеством на схемах. В результате все надписи были центрированы.

Размеры пицц

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

Расшифровки сокращений

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

Заголовки

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

Исключения

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

Четыре сезона

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

Слайсы и расстояния

Одной из самых сложных проблем было донести до пиццамейкера принцип раскладки слайсов.
Дело в том, что слайсы выкладываются двумя способами: поштучно (причем возможно разное количество кругов для разных размеров пицц) или на определенном расстоянии друг от друга (пересчитывать слайсы в этом случае не нужно). Рецепты-исключения чаще всего основаны на втором варианте раскладки.
image
Сначала указывалось примерное количество слайсов даже в случаях исключений (~15 итп), но заметивший конкретное число человек отходил от принципа выкладки на указанном расстоянии. Для кругов было решено показать «направляющие» иначе круги на схеме считывались плохо. Кроме того, выяснилось, что количество ингредиента в каждом круге лучше обозначать через плюс («8 | 5 | 2» превратилось в «8+5+2»). Тут же интересно проследить за тем, как менялась формулировка и оформление инструкции о расстояниях между слайсами.

Формулировки

image
По ходу тестирования изменялись формулировки некоторых подписей. Показательный пример: «полтора стаканчика» превращается в «один с половиной стаканчик» после того, как выясняется, что не все сходу понимают значение слова «полтора».

Инструкция

Инструкция менялась вместе с этапами тестирования и параллельно с изменениями схем.

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

image

  1. Самая первая инструкция получилась слишком «шумной». Здесь же была попытка совместить инструкцию с расшифровками некоторых ингредиентов.
  2. Меньше стрелок, попытки упрощения.
  3. Ушли сокращения ингредиентов (они перекочевали на отдельные листы со схемами), попытка разместить здесь инструкцию для пиццы Четыре сезона. Заголовки «Стаканчик», «Слайсы» начинают повторять оформление соответствующих ингредиентов.
  4. Финальная версия. Небольшие правки. Заголовок «Исключения» в стиле остальных заголовков.

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

Вывод

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

Что еще можно почитать по теме

Автор: crenative

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js