Комментарии 9
Отличный разбор. Идея с круглой кнопкой "в корзину" хороша для добавления еды в меню, а вот если это список карточек товаров, где и "в корзину", и "в избранное", и "подробнее" - тут уже такой способ не прокатит - придётся разносить (хотя это и так понятно)
Мне как покупателю в принципе без разницы, какой подход вы примените и какой формы будет кнопка "положить в корзину". Главное, не забывайте применять здравый смысл.
Например, плашка "СКИДКА!", закрывающая важную деталь на фотографии товара - это плохо.
Описания товара, обрывающиеся на самом нужном месте - это плохо (например, продаются гаечные ключи двадцати разновидностей, и каждый подписан "Ключ гаечный под гайку размером...").
Пульсирующее, мигающее и движущееся фото товара - это тоже плохо.
Интересные решения, я даже не задумывался насколько кнопка "купить" влияет на пользовательский опыт. А строчная вёрстка для меня лучше, как будто бы глазу приятнее =)
В карточке может "плавать" только содержимое Названия и Описания. Это решается строгими правилами заполнения и обрезкой "…".
Содержимое карточки всегда предсказуемо — обычно, не больше 10 понятных вариантов заполнения, что не является проблемой для разраба.
Бескаркасные — это карточки, не имеющие границ и когда фон карточки = фону, на котором она лежит. Как бы дизайнеры не извращались, но на длинной портянке каталога такие карточки неизбежно начинают “путаться”, глаз совершает лишние движения, чтобы чётко идентифицировать к чему какая инфа. Такой дизайн только усложняет визуальный выбор.
Бескаркасные неплохо показывают себя на горизонтальных каруселях, т.к. там юзеру нужно отслеживать только горизонтально.
Теперь по этому дизайну:
Первая карточка выглядит неплохо, НО пока кнопка по контрасту чётко выделяется на фоне фотки, в противном случае кнопка потеряется.
Вторая проблема — размер такой кнопки ограничен, чтобы не перекрыть важное на фотке. Для мобил размер критически важен.
Третья проблема — в таком дизайне очень близко находятся 3 области клика (фотка, купить, название), да ещё некоторые перекрывают друг друга (фотка, купить). В такой ситуации легко промахнуться (даже на десктопе), а значит, вы опять заставляете юзера напрягаться с прицеливанием.
Вторая и третья карточки — вы уже поняли, белую кнопку-индикатор количества просто не видно. В общей массе товаров юзер просто не заметит уже купленные товары.
Ну и везде в вашем новом дизайне слишком маленькие отступы между блоками. Очень незначительный контраст между ценой и названием. А перенос Веса на одну строчку с Названием выглядит багом — непредсказуемо скачет по карточке, что усложняет визуальный поиск.
Нейминг товаров — это отдельная песня. Даже крупные и вроде бы умные площадки сдаются перед SEO и пишут для роботов. Это прямое издевательство над юзерами.
А вот если бы обрезались длинные названия, то горе-маркетологи вынуждены были бы давать товарам с первых слов понятные, человеческие названия, а не вот эту никому не нужную фигню.
И конечно же, нельзя вот так вот просто сказать: “Этот дизайн мне нравится, берём его”. Всё сильно зависит от товаров и ЦА. Вполне нормально даже на одной площадке использовать разный дизайн карточек для разных групп товаров, показывая важные для юзеров параметры.
В карточке может "плавать" только содержимое Названия и Описания. Это решается строгими правилами заполнения и обрезкой "…".
Содержимое карточки всегда предсказуемо — обычно, не больше 10 понятных вариантов заполнения, что не является проблемой для разраба.
В карточках может быть большая вариативность: горизонтальные/вертикальные/квадратные пропорции фотографий, цена от 1 до 1 000 000 руб, наличие скидок, короткие и длинные названия, доп. данные и так далее. Все эти изменчивые данные чувствительны при сборке карточек. Отсюда и задача – найти гибкое и универсальное решение. Или несколько для разного применения. Я работаю в агрегаторе ресторанов и люди заполняющие меню очень разносторонние)
Бескаркасные — это карточки, не имеющие границ и когда фон карточки = фону, на котором она лежит. Как бы дизайнеры не извращались, но на длинной портянке каталога такие карточки неизбежно начинают “путаться”, глаз совершает лишние движения, чтобы чётко идентифицировать к чему какая инфа. Такой дизайн только усложняет визуальный выбор.
Теория близости помогает людям соотносить связанные объекты. У вас не возникнет сложностей понять какие данные к чему относятся. Например, листая Авито
Первая карточка выглядит неплохо, НО пока кнопка по контрасту чётко выделяется на фоне фотки, в противном случае кнопка потеряется.
Да, такое может быть. Вопрос частично решается дизайном: тени, цвета, размеры, ободки и все такое. Но, как правило человек видит не одну карточку у которой фотография по цвету совпадает с кнопкой. А несколько разных и понимает, что по общему правилу кнопки находятся там или сям.
Третья проблема — в таком дизайне очень близко находятся 3 области клика (фотка, купить, название), да ещё некоторые перекрывают друг друга (фотка, купить). В такой ситуации легко промахнуться (даже на десктопе), а значит, вы опять заставляете юзера напрягаться с прицеливанием.
Дано не встречал отдельной области клика под открытие фотографии. Как правило используют 2 области: карточка и кнопка. Но может быть всякое)
Нейминг товаров — это отдельная песня. Даже крупные и вроде бы умные площадки сдаются перед SEO и пишут для роботов. Это прямое издевательство над юзерами.
❤️
И конечно же, нельзя вот так вот просто сказать: “Этот дизайн мне нравится, берём его”. Всё сильно зависит от товаров и ЦА. Вполне нормально даже на одной площадке использовать разный дизайн карточек для разных групп товаров, показывая важные для юзеров параметры.
❤️
Ничего не понял. То, что вы придумали какую-то собственную терминологию - это ещё пол-беды. Хуже то, что эта терминология как будто нарочно очень запутанная.
Чем отличается каркасная от бескаркасной? Из статьи и иллюстраций это не вполне понятно. Просто наличием внешней рамки? Или поведением внешних размеров - фиксированные vs от контента (hug в терминах фигмы)? Или чем-то ещё?
Блочная и строчная - это синонимы терминов выше? Если да, то зачем они тогда нужны? Если нет, то в чём отличия? И особенно плоха очевидная (но, видимо, ложная) ассоциация с css-терминами block/inline, и это очень сбивает с толку.
Какой подход для вёрстки карточек товара выбрать