Each card uses visual elements such as background color,border, and shadow to differentiate itself from the background, clearly group the card elements, and indicate clickability. Cards include rich media (the thumbnail image), title, secondary calls-to-action (Like and Share buttons), and attributions. Pinterest's use of cards showcases how cards excel at grouping together heterogenous items, where each card features different types and amounts of information and, thus, occupies a different amount of vertical space. Cards allow for varying height to accommodate differing amounts or types of content, but typically the width is fixed from one card to the next. When multiple cards are used together in a layout, they often do not all have the same type of information - some cards might include a text summary, hashtags, or an image whereas other cards on the same page may include totally different details. This larger touch zone substantially improves usability on both touchscreen devices and mouse-based devices (due to Fitts’ Law). For most implementations, clicking or tapping anywhere on the card link to a details page (though some cards, like the one in our previous example, also include some secondary call-to-action buttons or links in addition to the main link available). Quite often, cards use a slight drop shadow to show depth, which is a clickability signifier. These visual-design elements create a strong sense that the different bits of information contained within the border are grouped together. It is intended as a high–information-scent outline used to entice users to click through to further details contained on a separate page.Ĭards use a border around the grouped content, and the background color within the card that differs from background color of the underlying canvas. Cards present a summary and link to additional details.Ī card is usually short and offers a linked entry point to further details, rather than the full details themselves. A single card will typically include a few different types of media, such as an image, a title, a synopsis, sharing icons, or a call-to-action button - all associated with the same concept.Ģ. Cards are used for grouping information.Ī card chunks several different (but related) pieces of information into one digestible unit - be it an article on a news website, a product on an ecommerce site, or a post on a social app. Though the basic concept is older, in the last few years, cards have received a lot of attention in the software-design world, with many high-profile sites and companies (e.g., Google’s Material Design, Twitter's card component) embracing them.ġ. (Note that this line doesn't undermine the visual grouping of the entire card.)Ĭards are often associated with flat design 2.0: they retain some aspects of the aesthetic of flat design, but reintroduce visual depth as a signifier of clickability. This card also contains two secondary clickable elements (the hashtag #dayhikes and the Share button), separated from the content area by a horizontal line. The design (with optional rounded corners) visually resembles a playing card the card has a visible border, is placed on a contrasting background, and uses a slight drop shadow as a signifier that the entire card is clickable. This wireframed example of a card component features several different types of information: an image, a title, a short summary, a time stamp, a hashtag, and a secondary call-to-action button for social media sharing. It roughly resembles a playing card in size and shape, and is intended as a linked, short representation of a conceptual unit. One such new UI component is the card - a snapshot-like display intended to encourage users to click or tap to view more details.ĭefinition: A card is container for a few short, related pieces of information. In recent years, we’ve seen a lot of interest towards creating modular UI patterns that work well across a variety of screens and window sizes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |