{"id":17993,"date":"2014-10-03T06:00:10","date_gmt":"2014-10-03T13:00:10","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=17993"},"modified":"2024-03-29T00:20:02","modified_gmt":"2024-03-29T07:20:02","slug":"the-pros-and-cons-of-a-card-based-ux","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux","title":{"rendered":"The Pros and Cons of a Card-Based UX"},"content":{"rendered":"<p>Why is everyone using cards? It is easy to see that many of the most popular websites are moving to a card-based UX. Google Now, Tinder, Jelly and Weotta are some examples. Twitter offers developers a whole deck of cards that are pre-built for their Web and mobile clients:<\/p>\n<ul>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/summary-card\">Summary Card<\/a><\/strong>: What you normally see in a sharable tweet, including a title, description, thumbnail and Twitter account attribution<\/p>\n<\/li>\n<blockquote class=\"twitter-tweet\" data-cards=\"hidden\" lang=\"en\">\n<p>25 Creative and Unique Save the Date Ideas <a href=\"http:\/\/t.co\/bO8N6dC4hb\">http:\/\/t.co\/bO8N6dC4hb<\/a> <a href=\"http:\/\/t.co\/KkXNteTBYp\">pic.twitter.com\/KkXNteTBYp<\/a><\/p>\n<p>&mdash; Creative Market (@CreativeMarket) <a href=\"https:\/\/twitter.com\/CreativeMarket\/status\/516614676088909824\">September 29, 2014<\/a><\/p><\/blockquote>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/large-image-summary-card\">Summary Card with Large Image<\/a><\/strong>: The name works as a description as well<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/photo-card\"><strong>Photo Card<\/strong><\/a>: Highlights the image by itself<\/p>\n<\/li>\n<blockquote class=\"twitter-tweet\" lang=\"en\">\n<p>5 Mistakes New Photographers Make <a href=\"http:\/\/t.co\/3HKyvQmrlw\">http:\/\/t.co\/3HKyvQmrlw<\/a> <a href=\"http:\/\/t.co\/Y54FnRczaO\">pic.twitter.com\/Y54FnRczaO<\/a><\/p>\n<p>&mdash; Creative Market (@CreativeMarket) <a href=\"https:\/\/twitter.com\/CreativeMarket\/status\/516977262273785856\">September 30, 2014<\/a><\/p><\/blockquote>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/gallery-card\">Gallery Card<\/a><\/strong>: A popular way of displaying a collection of four photos<\/p>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/app-card\">App Card<\/a><\/strong>: Good for attaching a link for a mobile app with direct download<\/p>\n<\/li>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/player-card\">Player Card<\/a><\/strong>: Designed to highlight video, audio or other media<\/p>\n<\/li>\n<blockquote class=\"twitter-tweet\" lang=\"en\">\n<p>Congrats to <a href=\"https:\/\/twitter.com\/SetSailStudios\">@SetSailStudios<\/a> for becoming the 5,000th Creative Market shop owner! The CM team is SUPER excited for you <a href=\"http:\/\/t.co\/PLpH0jf3Fj\">http:\/\/t.co\/PLpH0jf3Fj<\/a><\/p>\n<p>&mdash; Creative Market (@CreativeMarket) <a href=\"https:\/\/twitter.com\/CreativeMarket\/status\/514816566811451393\">September 24, 2014<\/a><\/p><\/blockquote>\n<li>\n<p><strong><a href=\"https:\/\/dev.twitter.com\/docs\/cards\/types\/product-card\">Product Card<\/a><\/strong>: Optimized for product information<\/p>\n<\/li>\n<\/ul>\n<p>Ever since Pinterest made it popular, card-based design has been sparking debates over whether it is the key to the mobile future of the Web or merely an annoying fad. Although there are plenty of card champions, here is a more balanced look at the potential and the limitations of a card-based UX.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Top_5_Arguments_for_and_Against_Card_Design\"><\/span>The Top 5 Arguments for and Against Card Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Pros\"><\/span>Pros:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>The End of Hierarchy<\/strong>: With cards, the user controls what is important on the page. Even if the content is laid out top to bottom for optimal mobile viewing, there are no leaders and no followers. The point is to make all the content easily scannable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp\" alt=\"CardUI-1\" width=\"800\" height=\"432\" class=\"alignnone size-full wp-image-17999\"><\/p>\n<p><strong>CTA Variety<\/strong>: Action buttons can be customized to each card rather than just having &acirc;&euro;&oelig;Contact Us&acirc;&euro; beneath everything.<\/p>\n<p><strong>Preference Testing<\/strong>: Data can be collected on which card users clicked on the most and stayed on the longest, setting the base for a customer behavior study.<\/p>\n<p><strong>Adaptive<\/strong>: Cards make it easier to create a single aesthetic across multiple devices. Most users are viewing sites on two or more screens, and a reliable look and feel makes a big difference.<\/p>\n<p><strong>Sharable<\/strong>: Content in cards is easier to share or embed across social networks. The potential for viral infection is too great a promise to pass up.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Cons\"><\/span>Cons:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Transitioning Is Expensive<\/strong>: There has to be clearer evidence that this is not a fad to justify the cost of revamping an entire Web presence across devices.<\/p>\n<p><strong>Sometimes Change Is Bad<\/strong>: Users who find a site easy to use and familiar may balk at the new visual logic.<\/p>\n<p><strong>Updates Are Hard<\/strong>: Fixing a list of elements on a page is easy. Bulk content review and updating becomes much more challenging with cards.<\/p>\n<p><strong>Less Logical<\/strong>: When users are looking for one specific piece of information, scanning through cards can be annoying. Search adds an extra step compared to a themed layout.<\/p>\n<p><strong>Sometimes Hierarchies Are Good<\/strong>: Complex processes often benefit from guiding users along a path rather than allowing them merely to wander randomly. The intent and the outcome are what matter.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Playing_Your_Hand\"><\/span>Playing Your Hand<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cards are extremely popular right now, and the mobile Web is now the primary way that the majority of users experience the Internet. Laptops have not gone away, though, and they are not disappearing at the rates desktops are. Know your user, and discover how they are using your site now to determine if cards are a good deal or flat out wrong.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why is everyone using cards? It is easy to see that many of the most popular websites are moving to a card-based UX. Google Now, Tinder, Jelly and Weotta are some examples. Twitter offers developers a whole deck of cards that are pre-built for their Web and mobile clients: Summary Card: What you normally see [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[59],"tags":[305,460,496,719,79],"topics":[],"class_list":["post-17993","post","type-post","status-publish","format-standard","hentry","category-design-trends","tag-web-design","tag-ui","tag-trends","tag-ux","tag-graphics"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Pros and Cons of a Card-Based UX - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Pros and Cons of a Card-Based UX\" \/>\n<meta property=\"og:description\" content=\"Why is everyone using cards? It is easy to see that many of the most popular websites are moving to a card-based UX. Google Now, Tinder, Jelly and Weotta\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-03T13:00:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-29T07:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux\",\"name\":\"The Pros and Cons of a Card-Based UX - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/10\\\/29001514\\\/CardUI-1.jpg.webp\",\"datePublished\":\"2014-10-03T13:00:10+00:00\",\"dateModified\":\"2024-03-29T07:20:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/10\\\/29001514\\\/CardUI-1.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/10\\\/29001514\\\/CardUI-1.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/the-pros-and-cons-of-a-card-based-ux#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Pros and Cons of a Card-Based UX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Pros and Cons of a Card-Based UX - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux","og_locale":"en_US","og_type":"article","og_title":"The Pros and Cons of a Card-Based UX","og_description":"Why is everyone using cards? It is easy to see that many of the most popular websites are moving to a card-based UX. Google Now, Tinder, Jelly and Weotta","og_url":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-10-03T13:00:10+00:00","article_modified_time":"2024-03-29T07:20:02+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp","type":"","width":"","height":""}],"author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux","url":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux","name":"The Pros and Cons of a Card-Based UX - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp","datePublished":"2014-10-03T13:00:10+00:00","dateModified":"2024-03-29T07:20:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/10\/29001514\/CardUI-1.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/the-pros-and-cons-of-a-card-based-ux#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Pros and Cons of a Card-Based UX"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/17993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=17993"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/17993\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=17993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=17993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=17993"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=17993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}