Разбираем известный мем «UI vs. UX» с бутылками кетчупа


07.07.2020 Время чтения - 4 минуты 892

Печально известный мем «UI vs. UX» возникает в кругах дизайнеров каждые несколько месяцев и многие из них обижаются на это «произведение искусства» из-за его упрощённости.

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

Виновник этой статьи.
Виновник этой статьи.

Данное произведение народного творчества, именуемое мемом, как можно было подумать, является быстрым и простым способом просвещения широкой общественности о различиях между UI и UX. При подробном изучении мема методом пристального рассматривания слева вы можете увидеть красивую стеклянную бутылку – «UI» и, возможно, подумать, что UI — это история о красоте и эстетике. Менее привлекательная, но более простая в использовании пластиковая бутылка «UX» (справа) подразумевает использование себя в перевёрнутом виде, что облегчает пользователю выливание кетчупа. Прошу заметить, что при пользовании пластиковым вариантом упаковки вам не придётся судорожно тарабанить всеми конечностями по дну тары, как это пришлось бы делать в случае с кетчупом в стекле. Обычный человек, наверное, может подумать, что UX это уже о реальной функциональности продукта.

Очевидная проблема этого мема состоит в том, что он сводит все исследования к простой картинке! UX и UI очень сложны и многогранны: с гораздо большим количеством нюансов, чем предполагает этот образ!

А если мы ещё и углубимся в историю кетчупа Heinz и дизайн его упаковок то увидим, как мем UX vs. UI будет уничтожен в пух и прах.

Краткая история дизайна упаковки Heinz

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

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

В течение следующего столетия бутылка кетчупа прошла через несколько этапов инноваций. В 1970 году Heinz создал бутылку кетчупа на 32 унции (~907 грамм), которая содержала намного больше райского нектара, чем её предшественники.

Та самая бутылка на 32 унции прямиком из 1970-х.
Та самая бутылка на 32 унции прямиком из 1970-х.

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

Первая "EZ Squeeze" тара для кетчупа от Heinz, созданная в 1983 году.
Первая «EZ Squeeze» тара для кетчупа от Heinz, созданная в 1983 году.

Именно популярность этой простой в использовании упаковки побудила мистера Heinz’а создать перевёрнутую, пластиковую, легко сдавливаемую бутылку кетчупа. На полках магазинов её не было аж до 2001 года, больше века с момента появления первой стеклянной бутылки!

Факторы дизайна продукта за пределами UX и UI

И дизайн бутылки 1890 года, и дизайн бутылки 2001 года являются знаковыми и важными частями истории кетчупа Heinz. Обе являются отличным примером хорошего дизайна продукта для своего времени. Однако, многие решения, принимаемые Heinz’ом в отношении дизайна упаковки не имеют ничего общего ни с UI, ни с UX.

Например, в 2012 году Heinz создал экологичную версию своей упаковки. Она была не только проще, но и дешевле в производстве и более того, привлекала экологически сознательных потребителей.

Экологичная бутылка кетчупа Heinz из 2012 года.
Экологичная бутылка кетчупа Heinz из 2012 года.

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

Можно ли «починить» этот мем?

На этом изображении вы видите две упаковки с продуктом. Продукт – это кетчуп, а не сама бутылка. Обе бутылки – это пользовательский интерфейс или же UI. С учётом этого и внесения некоторых правок в исходную картинку мы получаем вот такое изображение:

Обе бутылки кетчупа подписаны как «UI». А девочка, выдавливающая этот самый кетчуп – «UX»
Обе бутылки кетчупа подписаны как «UI». А девочка, выдавливающая этот самый кетчуп – «UX»

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


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

Оригинал разбора.

Читайте так же: Психология UX дизайна