Rose debug info
---------------

Итоги конкурса кондитерских интерфейсов

Я попросил трёх экспертов (четвёртым выступил я) оценить пять безымянных интерфейсов по трём критериям: идея, логика, эстетика. По каждому критерию эксперт поставил(а) оценку от 0 до 5 баллов. Работы расставлены в порядке их получения. Комментарии Татьяны и Светланы — под ссылками на работы. Максим Михайлович оказался настольно любезным, что не пожалел времени и клавиатуры на написание подробного разбора, этот разбор в отдельной главе.

Команда из Максима Степанова

Татьяна: Учтены не все начинки. Не акцентировано внимание на «синих» вкусах. Не представлена классика. Убогая цветовая палитра — режет глаз.
Светлана: С т.зр. логики все понятно. Но система не гибкая, я не могу менять местами коржи, смешивать начинки, увеличивать высоту торта. Кнопка заказать должна быть больше. Я бы хотела видеть текстовую зону, которая формируется при формировании торта, м.б подсчет составляющих или описание той или иной начинки. Подсказок, какую с какой лучше сочетать. С т.зр эстетики в данном варианте слижком схематично выглядит конструктор. Но удобно и логично расположены выпадающие списки для выбора. Цен нет.

Команда из Татьяны Мартыновой, Лизы Бородич и Максима Пономарёва

Татьяна: Основа?! Приличные люди употребляют слово корж! Визуализировать нужно сразу, приятней видеть когда конструктор собирается в «реальном времени». Одно из условий — оплата по весу, а не за отдельные составляющие. Читать надо внимательней условия. Не представлена классика. Не учтены требования по продвижению «синих»
Светлана: Полное отстутствие логики интерфейса. Я не понимаю как мне действовать, как создать торт, как задавать значения в списках. В списках почему-то доступен ввод символов в тестовой зоне. Я могу задать свою вариацию коржа, начинки и др? Кроме того, построение колонок не логично. Эстетика — пустое белое поле в первом экране смущает. Это баг? Страница не догрузилась? или так и должно быть? У меня картинка так и не появилась, хотя я выбрала все составляющие. Кроме того, в левом меню 4 составляющих, в правом одна. Почему? Опять же я не могу менять местами слои, у меня нет доступных вариантов, как это сделать. А если этого нет, не буду я заказывать авторский торт. Пойду в 9 островов и куплю обычный)) Еще о выпадашках — почему-то в момент, когда я не проставила галочки на фасетах, списков выпадающих в левом меню нет. А в правом списк активен. Мне обязательно заказывать ганаш? Но мне нравится, что здесь наконец-то вывели цену! Конечная не выводится, правда. Ну да и ладно. Кнопка купить не заметна, размещаться должна точно не там, где конструктор торта.

Команда из Егора Терентьева, Анны Шипициной и Вячеслава Бочарова

Татьяна: Не учтены требования по продвижению «синих». Нельзя изменять последовательность выбора (Например: нельзя выбрать мусс прежде начинки или коржа). У единственных сделаны подсказки (правда лимонный корж с абрикосовым муссом, по-моему. — извращение еще то). Учтена классика, но не хватает описания.
Светлана: Случайное нажатие не туда привело к тому, что все сломалось :) http://i.imgur.com/dLT6myW.png Идея не плоха. Но я конечного результата не вижу. Где картинка МОЕГО торта. Не поняла я и картинки видимо с вариантами тортов: классика 1 2 и т. д. При клике ничегошеньки не происходило. Кроме того, само странное! Корж у меня сверху оказался))) Я должна сама догадаться, что надо его в последнюю очередь выбрать? Меню боковое в данном случае лучше всего было расположить в обртном порядке. Корж снизу, затем начинки, муссы и т.п Визуально мне данный вариант не понравился. Схематичность и осутствие возможности увидеть СВОЙ вариант торта, смутила. Ощущение, что на странице слишком много разнообразных элементов и явный композиционный дисбаланс. Но мне понравилось ,что элементы откликаются на действия. И кнопка уже расположена почти там где должна быт и система общается со мной — выводятся подсказки))) Цен нет.

Команда из Татьяны Степановой, Дианы Расторгуевой и Владимира Идиятова

Татьяна: Кривое описание классики ( Зачем писать «Захер с одним или двумя слоями абрикосового конфитюра….» Не в курсе со сколькими слоями приготовлен ваш «Захер»?!). Не учтена классика и продвижение «синих». Плюс непонятная для меня двойная вложенность списков = бред.
Светлана: По прежнему ничего не могу сделать с тем, что не меняются местами уровни торта. Но здесь хотя бы меню несколько логичнее выстроено. С т.зр логики — смущает то, что я вынуждена скроллить страницу до 2 экрана. Это крайне не удобно. Картинка должна отстраиваться в первом эране, напротив списков. Логика вывода доп уровней не доработана. Я должна все 8 заказать? Из плюсов: кнопка заказать яркая, ее видно почти сразу, если я во 2 экране. Она откликается и выводит поп-ап с формой обратной связи. Это хорошо. Эстетически данный вариант приемлем, если я не творю изысков. Цен нет.

Команда из Алексея Берёзки, Стаса Карпенко и Сергея Филонова

Татьяна: Не учтена классика. Но у единственных в начальном значении выпадающего списка стоит «синее» значение. С визуализацией плохо — не удаляет предыдущий выбор. Если сделать столько начинок, столько я натыкала, то после одного куска такого торта можно умереть от передозировки глюкозы)))
Светлана: Ура! Уровни меняются местами))) но появились какие-то значения 20 22 24 и стрелочки вверх и вниз. То, что я удерживая мышь могу таскать коржи — не очевидно. И что за значения 20 22 24 — только интуитивно понимаешь, что это ширина торта. Система дает мне делать бесконечное множество слоев, ограничения нет. Но при этом слои уходят в самый вверх экрана, картинка не уходит вниз. Я вынуждена менять масштаб страницы в браузере, чтобы увидеть все слои. Ограничение по кол-ву уровней быть должно. Я создала кучу слоев и хочу начать заново, в этом случае мне не помешала бы кнопка «начать заново», сейчас я выуждена прокликивать каждый слой отдельно. И где в итоге кнопка заказать? Форма обратной связи? Цен нет.

Комментарий Максима Михайловича

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

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

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

Задачей бизнеса является создание инструмента, с помощью которого можно 1) автоматизировать оформление заказа на классические и сборные торты; 2) продвигать непопулярные начинки и вкусы.

Версия 1

Идея. По задумке авторов у посетительницы имеется некий шаблонный торт, в котором она может изменять ингредиенты по своему усмотрению, а именно крем, ганаш, основу, мусс и корж. Торт сразу визуализируется на странице, а ингредиенты выбираются с помощью раскрывающихся списков. После указания параметров необходимо нажать на кнопку «Заказать».
Идея подразумевает, что торт должен обязательно включать все перечисленные параметры (кроме крема), и нет возможности добавить сверх того, что есть. Это является ошибкой, поскольку не имеет ничего общего с реальной жизнью и не позволяет решить пользовательскую задачу.
В идее не предусматривается предложение классических рецептов, что противоречит условиям задания и бизнес-задаче. Также не предусматривается продвижение непопулярных начинок и кремов, что не соответствует бизнес-задаче.
Логика работы подразумевает последовательный выбор каждого компонента. Опираясь на условия пользовательской задачи, получается, что наша посетительница сначала выбирает крем, (апельсинового в меню нет, но не суть) после чего на картинке меняется цвет и пользователь оказывается в первом логическом тупике — изменился цвет крема на торте, но непонятно изменился ли крем между коржами.
Пользуясь методом перебора для определения, что за что отвечает, посетительница оказывается во втором тупике — присутствуют два параметра, корж и основа, между двумя слоями основы присутствует корж.
Третья логическая ошибка заключается в возможности отказаться от крема, но невозможности отказаться от мусса, которого нет в условиях пользовательской задачи.
Эстетика. Цветовая палитра, используемая на сайте позволяет за счет светлого фона акцентировать внимание на изображении торта, но для выпадающих списков цвет выбран не слишком удачно, черный текст не очень удачно читается на коричневом фоне. В цветовую гамму не укладывается цвет кнопки «Заказать тортик», ее стоит сделать более крупной и заметной, т. к. это кнопка призыва к действию.
На сайте используется три разных шрифта, один из них в двух разных начертаниях. Логики их использования не обнаружено, шрифт с засечками плохо уживается со шрифтом без них, за использование comic sans приговариваю к разжалованию в первокурсники.

Версия 2

Идея конструктора заключается в поэтажном «построении» будущего торта. Каждый отдельный «этаж» формируется из комбинаций основы, начинки, мусса и крема. После этого на торт наносится ганаш и отправляется заказ.
Подобный конструктор позволяет решить заданную пользовательскую задачу почти в полном объме, причем построение на основе типовых «этажей» позволяет значительно ускорить формирование заказа, так как не нужно формировать каждый слой отдельно. Почти в полном, поскольку более 3 коржей система делать не умеет.
К сожалению, полностью проигнорированы бизнес-задачи сайта по продвижению.
Логика работы заключается в первоначальном формировании «этажа» и добавлении его в конечный торт. Система позволяет редактировать каждый «этаж» перед добавлением, любой пункт, кроме основы, является опциональным. Логика взаимодействия интересная и в рамках пользовательской задачи эффективная.
Однако, имеются ошибки в логике работы элементов. Например, выбор типа любого компонента осуществляется с помощью раскрывающегося списка, но без наведения курсора, он выглядит как поле ввода. Для добавления компонента необходимо отметить соответствующий чекбокс, но в выпадающем списке нет значения по умолчанию.
Нет возможности редактирования уже добавленных «этажей», их можно только полностью удалить и воссоздать заново. Ганаш можно добавить даже если самого торта еще нет, а изменить его тип можно только удаляя и добавляя заново.
Кнопки «Очистить» и «Купить» имеют одинаковое оформление и находятся рядом друг с другом, что может сделать моторные ошибки сложноисправимыми, а также требует дополнительного времени на поиск правильной кнопки.
Эстетика. Цветовое оформление не выразительное, но вполне может понравиться описанному персонажу. По шрифтам претензий нет. Кнопка «Купить» должна быть более крупная и явно выделяться на странице.

Версия 3

Идея конструктора заключается в послойном формировании торта. Ингридиенты каждого слоя выполнены в виде тематических иллюстраций. Каждый новый слой может быть любым типом, корж, начинка, мусс, ганаш, крем.
В целом система позволяет посетительнице решить ее задачу при указании каждого слоя отдельно, но на практике задаче не была достигнута из-за кривоватой верстки страницы.
Продемонстрированы варианты классических рецептов, при выборе того или иного типа коржа отображается подсказка с рекомендацией по сочетанию, за что отдельный плюс. Однако, проигнорирована задача по продвижению непопулярных товаров и решение плохо масштабируется при увеличении компонентов в слое, т. к. ограничено экраном.
Логика хромает. В целом идея с картинками интересная, поскольку картинки помогают продавать товар, но содержание должно соответствовать — на фото лимон и лимонный бисквит выглядят по разному.
Система позволяет на один корж намазать разные крема, муссы и начинки, а ганаш сделать в середине торта. На практике это не реализуемо и вызовет смех у профессиональных кондитеров.
Непонятно назначение кружков с цифрами и кнопкой-плюсом, если коржи можно добавить ниже. И в целом нелогично собирать торт сверху, первый корж должен быть внизу, а на него уже накладываются новые слои. Рецепты классики представлены, но возможности их заказать нет.
Эстетика. Яркие фотографии делают страницу визуально приятной, выделяясь на нейтральном темном фоне. Цвета оформления гармонируют друг с другом. Кнопка заказа хорошо заметна за счет цвета.
Используются два шрифта, один для оформления, другой для кнопок и заголовков. Мелкие замечания по цвету и начертанию, но в целом отрабатывают нормально.

Версия 4

Идея также в послойном формировании торта, ингредиенты выбираются из выпадающего списка. Каждый новый слой также может быть любым (корж, начинка, мусс, ганаш, крем), в основе всегда корж. Ниже выбранные параметры схематично визуализируются.
Сервис позволяет решить пользовательскую задачу в полном объеме, при указании отдельно каждого слоя.
В отдельной вкладке можно выбрать готовый торт по классическим рецептам, что, в целом, решает одну из бизнес-задач. Задача по продвижению непопулярных компонентов проигнорирована.
Логика. В сервисе есть логические недоработки, в первую очередь приведена нумерация слоев, но нижнему или верхнему слою соответствует первый уровень — непонятно. Однако, заполнение схематичного торта происходит снизу, что логично.
Схема торта и место, где указываются параметры расположены таким образом, что на стандартном мониторе схему не видно сразу, она скрыта за нижним краем экрана. Это делает ее малофункциональной, по ней можно было бы проверять заказ, но визуально шоколадно-ореховый корж не отличается от шоколадного, понять кто есть кто в отрыве от списков невозможно.
Система опять же предлагает намазать на один корж разные крема и муссы, что не реализуемо на практике.
Под списком параметров размещена кнопка очистки слоев, на которую я раз нажал не читая, будучи уверенным, что это кнопка заказа.
Эстетика. Цветовая гамма не согласована, основной розовый цвет выглядит довольно напрягающе, но используется только на фоне, контентная зона выполнена в классическом белом цвете, что позволяет достаточно легко считывать с нее информацию.
Цветовое оформление вкладок является цветной катавасией, розовый и коричневый цвета с синим и красным шрифтом создают лишнее цветовое пятно в контентной зоне, а текст оформленный таким образом читается с большим трудом.
На странице применено 2 шрифта, прослеживается использование одного для оформления заголовков, другого для выпадающих списков, в целом претензия только в цвете шрифта на вкладках.

Версия 5

Идея не нова, поскольку заключается в послойном сборе торта. Каждый слой указывается с помощью раскрывающегося списка и может быть любым. Слои образуют схематичное представление будущего торта. Каждый слой можно отредактировать, изменив размер и очередность, либо удалить вообще.
Сервис позволяет решить пользовательскую задачу и собрать торт по сценарию, но в реальности нет возможности проверить, так как на экран входит только 6 слоев, а по заданию их 8.
Бизнес-задачи по продвижению классики и непопулярных проигнорированы.
Логика. Раскрывающиеся списки для добавления слоя собран в одном месте, слои добавляются рядом в пределах экрана начиная снизу. Благодаря этому сразу видно, что добавлено, а слои подписаны, что снимает все сомнения.
Добавление слоя осуществляется с помощью элемента, являющегося гибридом кнопки и раскрывающегося списка. Логика работы элемента не продумана, поскольку по умолчанию всегда стоит один и тот же вариант, клик на который не раскрывает список, а сразу добавляет слой. Остальные варианты добавляются только при выборе из списка, но вариант по умолчанию не меняется, на выбранный. После раскрытия списка и клика на один из вариантов список (коржей, например) не закрывается и перекрывает список кремов, из-за чего приходится лишний раз кликать в свободное место, чтобы закрыть его. Это увеличивает количество действий для заказа.
В списке коржей при выборе безе на схеме они упоминаются как безе-коржи, не совсем верная формулировка.
Ну и традиционная для послойных вариантов ошибка — возможность мазать крем на крем с возможностью обойтись вообще без коржей и сделать торт из одного мусса.
Эстетика. Оформление сервиса минималистично настолько, что оценивать особо нечего, но и придираться не к чему. Цвет и шрифты особого внимания на себя не обращают, что для интерфейса может быть даже положительным моментом.
Можно отметить только разницу в размерах раскрывающихся списков, да висячий предлог в одном из них. Неполное количество картинок коржей не дает возможности сравнить шоколадный с шоколадно-ореховым и придраться еще к чему-нибудь.

Комментарий лечащего врача

Сначала общие замечания и соображения по проекту:
— в основании торта должен быть корж;
— корж на корж не кладут, между должна быть прослойка;
— крем на крем тоже вряд ли наносят, как и мусс на мусс, начинку на начинку, ганаш на ганаш;
— ганаш (шоколад) на начинку(варенье) не мажут;
— что-то сочетается между собой хорошо, а что-то — не очень;
— некоторые сочетания слоёв приводят к классическим тортам вроде «Праги» и «Киевского»;
— лимонный бисквит по внешнему виду не отличается от ванильного, а сливочный крем от сливочного крема, но с «Бейлисом» или коньяком;
— слои не могут быть бесконечными.

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

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

Из первого пункта списка следует, что сначала даём пользователю выбрать корж. После выбора предлагаем выбрать что угодно, кроме коржа (см. пункт 2). При этом понимаем, что скорее всего это окажется крем, начинка или мусс, с меньшей вероятностью ганаш — так и сортируем. Положили второй слой — думаем что третьим и т. д..

Внутри каждой группы слоёв тоже надо посортировать — к шоколадному бисквиту подойдёт вишнёвая начинка (как у Schwarzwälder Kirschtorte) или абрикосовая (как у Sacher Torte) — их надо вперёд, а вот лимонная будет странной, исключать её нельзя, а на потом отодвинуть можно. При сортировке надо учитывать промо, хотим продать лимонный бисквит — выносим в начало, пусть он тут маячит и привлекает внимание, можно шильдик на него прилепить.

Окей, наш сладкоежка выбрал шоколадный бисквит и вишневую начинку — он на полпути к «Чёрному лесу»! Говорим об этом, просвещаем, но не навязываем, пусть дальше фантазирует — больше денег в кассе оставит.

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

Про форму и размер забыли почти все участники. Рекомендации даёт только одна бригада. Многие из  столкнулись с вопросом «Как собирается торт?», надо понимать, что ровно с этим же вопросом столкнутся клиенты, вспомните как вы мучались и помогите им избежать того же. Научите их, помогите выбрать ингредиенты в «правильном» порядке!

Версия 1

Слои показаны и подписаны — это хорошо. Цвет слоёв странный — это не хорошо. Структура торта фиксированная, ничего добавить нельзя — это плохо. Автор пишет, что «ганаш без разреза не видно», ведь прямо сам написал что надо сделать — раз-ре-зать! Промо-позиции не прорекламированы. Выбор шрифтов — отвааааал башки.

Версия 2

Цены низкие — это хорошо! Как выбирать? Писать руками? С ошибками? Это плохо! Выбор непонятен — что там вообще есть? Из чего я могу писать руками? Глагол «Заслоить» на кнопке странный, следуя ему должна быть кнопка «Расслоить», а не «Удалить». Ганаш отчего-то отвалился в другую сторону от всех остальных слоёв. Удалять можно только всё. Размеров нет, промо-позиции не прорекламированы.

Версия 3

Картинки — это хорошо, только показывать надо не исходное сырьё, а ту начинку/мусс/ганаш, который будет в торте! Интерактивность — тоже хорошо! Корж можно положить на корж — это плохо. Нарушение маппинга — это уголовная статья! Промо нет, а ведь при этом подходе так и просится, прям очевидно же! Морковный крем — это прикольно, это по-нашему!

Версия 4

Со шрифтами перемудрили, взяли не кириллицу, а болгарицу — лишились буквы ‘ы’, получилось некрасиво. Посадили клиентов на страницу с готовыми тортами — нехорошо, лишаете кассу прибыли, ведь если клиент будет придумывать сам, то явно потратит больше. За некликабельные подписи у радиокнопок — ррррррастрррелять! Зачем-то ввели понятие «уровень». Слои при выборе идут сверху вниз, а в торте — снизу вверх. Ну как же так? Маппинг плачет, маппинг расстроен. Саму визуализацию спрятали так, чтобы пользователь ни за что не нашел. Текстуры — это прикольно, но в них сложно что-то разглядеть, они слишком крупные — это не хорошо.

Версия 5

Начальный шаг ужасен! В правом верхнем углу странно-кособокая конструкция а-ля «М-видео». Применение сплит-ба́ттонов в интернете — вещь необычная. Должно быть понятно, что это ба́ттон, что его можно нажать, а сейчас это выпадайки и возникает непроизвольное желание что-то наконфигурировать, а потом найти терминационную кнопку, чтобы конфигурация сложилась в торт. Можно положить ганаш, еще ганаш и еще ганаш — явный промах в логике.
Единственное решение в котором есть выбор размеров, но то, что это размер не понятно, достаточно нарисовать значок диаметра и подписать ‘см’, чтобы улучшить ситуацию. Манипулирование слоями — не очевидное. Терминационной кнопки нет, рекомендаций и готовых решений — тоже. Плоский и нейтрально-безликий интерфейс будет плохо продавать торты, очень плохо. Здесь надо зазывать клиента сочными картинками.
И да, в «шоколадном» корже мало шоколада и он too moist.

Итоги в таблице:

Татьяна Максим Светлана Денис Итог
Степанов Максим (3; 2,5; 2) 2,5 (2; 2; 2) 2 (3,5; 3; 3) 3,17 (2; 3; 2,5 ) 2,5 2,5425
Мартынова Татьяна (2,5; 2; 2) 2,25 (4; 3; 3,5) 3,5 (1; 0; 0) 0,34 (2; 2; 2) 2 2,0225
Терентьев Егор (4; 3,5; 3) 3,5 (3,5; 2; 4,5) 3,333 (2; 1; 1) 1,33 (4,5; 2,5; 4,5) 3,9 3,0158
Степанова Татьяна (2; 3; 1,5) 2,17 (3; 2; 3,5) 3 (2; 2; 2) 3,67 (3; 2; 3) 2,67 2,8775
Берёзка Алексей (3; 4; 2) 3 (2,5; 2; 3,5) 2,67 (4; 4,5; 4,5) 4,33 (4; 2,5; 3) 3,16 3,29

К сожалению, ни одно из предложенных решений нельзя отдавать клиенту. Всё надо допиливать, что-то в большей степени, что-то в меньшей. Итоговые баллы в таблице могли бы быть больше. С небольшим отрывом вышли вперёд бригады 3 и 5. Среди них с наноотрывом на первое место прорвалась бригада 5, поздравляем победителей!

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

Общий комментарий от Татьяны: Никто не догадался замутить спецуху из синих и охры, и особо популярных сочетаний.

Поделиться
Отправить
Запинить