{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блог Ильи Бирмана: заметки с тегом интерфейс заказа пиццы", "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.", "_rss_language": "ru", "_itunes_email": "ilyabirman@ilyabirman.ru", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/interfeys-zakaza-piccy\/", "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/interfeys-zakaza-piccy\/json\/", "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "6174", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/classical-pizza-problem\/", "title": "Классическая проблема настройки пиццы", "content_html": "

В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку. Половина студентов допускают одну и ту же логическую ошибку — делают настройку прямо в меню.<\/p>\n

Вот первая попавшаяся работа. Это главная страница, меню пицц:<\/p>\n

\n\"\"\n<\/div>\n

Здесь сразу можно убрать мешающие ингредиенты, добавить собственные, выбрать размер и тесто. Видите ли вы проблему?<\/p>\n

Рассмотрим такой сценарий. Я беру пиццу с курицей, но потом вдруг замечаю, что в неё входят шампиньоны, а я их не хочу. Убираю шампиньоны, и иду оформлять заказ, ожидая пиццы без шампиньонов. Ко мне приезжает пицца с шампиньонами, ведь в заказ-то я добавил пиццу ещё с ними, а убрал я их уже потом из пиццы, которую в итоге даже не добавил в заказ. Итог — я недоволен.<\/p>\n

Когда я это объясняю, студенты иногда пытаются решить проблему: «мы будем учитывать изменение даже после добавления в заказ». Но так тоже нельзя. Я ведь мог убрать шампиньоны случайно или передумать их убирать, но рассчитывать, что пицца приедет с шампиньонами, ведь в заказ-то я добавил как раз с ними. Я мог как раз думать, что изменения, сделанные после добавления в заказ, ни на что не повлияют.<\/p>\n

То есть какую бы логику вы тут не реализовали, часть пользователей будет ожидать противоположной.<\/p>\n

\n\"\"\n<\/div>\n

Иногда бывает, что в таком же контексте кнопку «Добавить в корзину» превращают в какую-то считалку типа − 1 + после добавления первой пиццы. Тут мозг окончательно взрывается. Если нажимать плюс несколько раз попеременно с изменением начинки, а потом нажать пару раз минус, невозможно даже предположить, что в итоге окажется в заказе. При этом сценарий «заказать две пиццы с курицей, но одну из них без шампиньонов» — достаточно нормальный, чтобы про него подумать.<\/p>\n

Эта проблема — пример незамкнутости интерфейса, то есть его логической дырявости.<\/p>\n

Проблема возникает из-за того, что настройка организована прямо в меню, то есть вы как бы настраиваете не вашу пиццу, а меню ресторана. Но вы не можете настраивать меню ресторана, вы же не шеф-повар! Из-за того, что эта пицца в меню не определилась, то ли она ресторана, то ли ваша, и возникают все последующие баги.<\/p>\n

Та же проблема встречается в недавнем интерфейсе с исчезновением при наведении<\/a><\/p>\n

Проблема решается, если убедиться, что вы даёте настраивать только ту пиццу, которая уже или находится в заказе пользователя, или хотя бы явно «на пути» туда. Первый вариант — пицца сразу добавляется в заказ, состав которого отображается в панели сбоку; там же можно нажать «Изменить начинку» у любой пиццы. Второй вариант — при выборе пиццы она не сразу добавляется в заказ, но сначала появляется промежуточный с настройкой начинки. Кстати, если этот промежуточный экран — попап, то с ним обычно другая проблема: ингредиентам тесно<\/a>.<\/p>\n", "summary": "В Школе бюро есть задание — нужно сделать интерфейс для заказа пиццы с определёнными условиями. В частности, пользователь может настраивать начинку", "date_published": "2023-12-15T10:05:31+03:00", "date_modified": "2023-12-15T10:09:23+03:00", "tags": [ "замкнутость интерфейса", "интерфейс заказа пиццы", "пользовательский интерфейс", "студентам", "Школа бюро" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem.jpg", "_date_published_rfc2822": "Fri, 15 Dec 2023 10:05:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6174", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/classical-pizza-problem-2.jpg" ] } }, { "id": "6008", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/skeuomorphism-fail\/", "title": "Проблемный скеоморфизм", "content_html": "

Рассмотрим такой фрагмент студенческой работы:<\/p>\n

\n\"\"\n<\/div>\n

Пицца лежит на листке в клетку, точнее, не лежит, а, судя по тени, парит над ним. Со школы мы хорошо знаем, что клетка имеет размеры 5×5 мм, поэтому пицца у нас получается диаметром с ширину со средний Айфон. Это никто не считает специально, но просто эта клетка на фоне делает пиццу маленькой. Там, конечно, и выбрана «Маленькая» внизу, но всё-таки даже очень маленькую пиццу я представляю как в два-три раза большую, чем эта.<\/p>\n

К самой переключалке размеров вопросов ещё больше. Переключалка нарисована на бумаге тем же способом, что клетка, но при этом выбранный вариант «Маленькая» отбрасывает тень, то есть находится выше бумаги. Но тень он отбрасывает только внутрь шахты переключалки, а за её пределы не отбрасывает. Получается, что на самом деле эта шахта утоплена, а лифт «Маленькая» находится на том же уровне, что бумага? Нет, такого тоже быть не может, ведь внутри самой шахты никакой тени нет. Ладно, может это всё плоское, от лифта никакая тень не падает, просто вот такой эффект нарисован на бумаге? Но этого тоже не может быть, ведь это интерактивный, двигающийся элемент. Напечатанное на бумаге так не может.<\/p>\n

Отдельный вопрос — нафига этой «плоской» штуке на бумаге понадобилась тень, когда рядом есть рыжая кнопка «Добавить в корзину», под которую явно уплывают ингредиенты, но она легко обходится без тени.<\/p>\n

Если вы взялись играть в скеоморфизм, нужно быть внимательными. Недостаточно просто сделать какие-то текстуры и тени. В скеоморфическом мире есть свои законы и правила, которые нужно соблюдать, чтобы получалось хорошо и последовательно.<\/p>\n

Кстати, это ещё и очередной пример тесного интерфейса<\/a>.<\/p>\n", "summary": "Рассмотрим такой фрагмент студенческой работы", "date_published": "2023-06-10T10:44:41+03:00", "date_modified": "2023-12-15T09:54:28+03:00", "tags": [ "дизайн", "интерфейс заказа пиццы", "пользовательский интерфейс", "скеоморфизм", "студентам" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/skeuo-fail.jpg", "_date_published_rfc2822": "Sat, 10 Jun 2023 10:44:41 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "6008", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/skeuo-fail.jpg" ] } }, { "id": "5977", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/tight-ui-pizza-ingredients\/", "title": "Тесные интерфейсы: ингредиенты в пицце", "content_html": "

В школе бюро есть задание — сделать интерфейс заказа пиццы. В частности, там можно выбрать ингредиенты. Почему-то у очень многих студентов одна и та же проблема: в настройке ингредиентов очень тесно безо всяких на то причин.<\/p>\n

Вот, например, неплохо всё нарисовано:<\/p>\n

\n\"\"\n<\/div>\n

Но почему вместилось только три ингредиента? Этот экран существует для выбора ингредиентов, так почему он мешает мне их выбирать?<\/p>\n

Или вот:<\/p>\n

\n\"\"\n<\/div>\n

Это ещё хуже: вместо прокрутки тут листание мучительными стрелочками. Ну и не так красиво.<\/p>\n

Или вот:<\/p>\n

\n\"\"\n<\/div>\n

Тут совсем некрасиво, но мы сейчас не об эстетике. Я пишу студенту:<\/p>\n

\n

В настройке ингредиентов тоже всё мелко, тесно и задисейблено. Вдумайтесь: на экране настройки ингредиентов настройка ингредиентов занимает где-то 20-ю часть площади попапа, который сам занимает где-то четверть площади экрана. Почему бы не увеличить её в восемьдесят раз? Это не гипербола.<\/p>\n<\/blockquote>\n

А вот снова приятный визуальный дизайн, но ингредиентам снова нет места:<\/p>\n

\n\"\"\n<\/div>\n

В дизайне интерфейса полно случаев, когда мало места и приходится искать сложное пространственное решение. Но тут-то места полно! Студенты зачем-то сами себе создают тесноту и мучаются с ней.<\/p>\n

Когда думаешь, как распределить пространство между разными фичами, полезно задать себе вопрос: зачем этот экран есть, зачем сюда приходит человек. Ответ на этот вопрос не всегда однозначный — бывают экраны, на которых можно много чего разного делать. Но если однозначный ответ есть, то стоит отдать максимум места именно тому, про что этот ответ.<\/p>\n", "summary": "В школе бюро есть задание — сделать интерфейс заказа пиццы. В частности, там можно выбрать ингредиенты", "date_published": "2023-04-27T14:17:36+03:00", "date_modified": "2023-12-15T09:54:16+03:00", "tags": [ "интерфейс заказа пиццы", "пользовательский интерфейс", "студентам" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ingredients-dont-fit-1@2x.jpg", "_date_published_rfc2822": "Thu, 27 Apr 2023 14:17:36 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "5977", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ingredients-dont-fit-1@2x.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ingredients-dont-fit-2.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ingredients-dont-fit-3@2x.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ingredients-dont-fit-4@2x.jpg" ] } }, { "id": "5784", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-57\/", "title": "На интерфейсном курсе: соблазняем человека пиццей, а не текстом «Ваша корзина пуста»", "content_html": "

Чтобы человеку больше хотелось купить пиццу, нужно показать её крупнее, а интерфейс спрятать подальше. А чтобы моглось, надо сделать кнопки достаточно большими. 7 минут:<\/p>\n

\n