As a product designer, I have a particular fondness for cards. They're components I use very often in my projects. Their strength? They function like small, condensed pages, easy to organize in a grid. Visually, they remind me of the Polaroids of my childhood: those snapshots I annotated and pinned to my bedroom walls.<\/p>\n

This analogy perfectly illustrates the value of cards: they bring together essential information in a visual format that is both structured and flexible. That's why I chose to write a best practices guide.
Whether you are designing a software interface or a website, cards are a particularly effective pattern for presenting data \u2014 provided you use them correctly.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n

<\/span><\/span>The right map format: its impact on reading and eye fixations<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
The choice between a vertical map and a horizontal map is not neutral.<\/p>\n
A vertical map promotes a natural, top-to-bottom reading path, thus reducing cognitive effort. It is particularly effective when the image is the entry point, as it immediately captures attention before leading the eye to the text.<\/p>\n
The horizontal map, on the other hand, fragments the view more because it requires frequent lateral movements. However, it proves better suited to longer texts, as it offers superior reading comfort thanks to more spaced-out and legible lines.<\/p>\n
In ergonomics, it is therefore important to remember that orientation should be chosen according to the dominant content in order to minimize cognitive load.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n\t\t\t\t\t\t\t\t\t\t $\"Exemples$
<\/figcaption><\/figure>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/span><\/span>Examples of vertical and horizontal maps<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/span><\/span>Optimize mobile display<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
On mobile, the issue of space optimization becomes even more crucial.<\/p>\n
Horizontal maps limit vertical scrolling and reduce the cost of navigation, while vertical maps fit better into column grids, but at the cost of sometimes excessive scrolling.<\/p>\n
The primary gesture on mobile is scrolling. To avoid visual clutter, it's best to choose a vertical format for most cards, which fits naturally into a feed. The horizontal format can be used with horizontal scrolling (a "carousel"), but only for supplementary content, such as suggestions.<\/p>\n
Making a card fully clickable simplifies user interaction, especially when only one action is associated with that card. This design choice reduces cognitive load and encourages users to interact more easily with the content. By offering a larger clickable area, you make the interface more accessible and responsive, thus streamlining the user journey.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n\t\t\t\t\t\t\t\t\t\t $\"Exemples$
<\/figcaption><\/figure>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Examples of map display on mobile<\/span><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/span><\/span>Structure the information in the map<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
The internal organization of the card also determines its effectiveness. Essential information, such as a product photo or a price, should be highlighted in highly visible areas, generally at the top or in the center.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/span><\/span>Highlight key information<\/h3>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Identify the most important elements, those that most influence the user's decisions.<\/p>\n
For example, in a product description, the image, name, and price are the key elements that trigger interest or rejection. These elements should therefore be given greater visual prominence, with a larger image and ample margins around it.<\/p>\n
Horizontal dividers can help distinguish unrelated elements or highlight the hierarchy between them. However, they are rarely useful in map design. Instead, use typography and negative space to create distance or make content stand out.<\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"Exemple$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n
\n
\n
Example of highlighting key information<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/span><\/span>Quantitative data (secondarily important)<\/h3>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
The quantitative data shown on the maps plays an important role in the user's decision-making.<\/span><\/p>\n
Avoid placing them between the title and the description. Ideally, place them at the bottom of the card, visually separated, or above the price.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"Exemple$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n
\n
\n
Example of quantitative data<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Metadata (tags, categories)<\/h3>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Labels such as the ad type are important, but they are not part of the main data. They need to be visually distinct. Therefore, it is advisable to display them in a separate corner of the map, as colored chips, to indicate that they are categories and not descriptive information.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"Exemple$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n
\n
\n
Example of metadata<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Height management and autolayouts<\/h3>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
Managing height plays a key role in the readability and comparability of information. If each card adapts freely to its content, the resulting display can be inconsistent, with titles, numbers, and buttons no longer aligning from one card to another, complicating comparison. To avoid this, it is recommended to define a fixed size for certain internal elements (for example, header height, content area, and action placement). This way, even if the density of text or data varies, visual cues remain consistent, allowing users to quickly compare cards.<\/p>\n
Autolayout complements this logic by managing the spacing, alignment, and distribution of internal blocks. For example, you can fix the height of the map header and footer, while allowing the central area to adapt slightly to the content. This combination maintains a consistent structure across the entire map array, while preserving flexibility in data display.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"Gestion$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n
\n
\n
Height management and autolayouts<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
\n
\n
Autolayouts Hug<\/b><\/span><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
1. Determined by content<\/p>\n
2. Variable, adjusts automatically<\/p>\n
3. If the content grows, the map stretches. If it is shorter, the map shrinks.<\/p>\n
4. Inconsistent display, making data comparison difficult.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
Fixed Autolayouts<\/span><\/b><\/p>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
1. Predetermined<\/p>\n
2. It always remains the same<\/p>\n
3. Content that exceeds the limit may be truncated, hidden, or create an overflow.<\/p>\n
4. Uniformity: all cards have the same height<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
\n
Comparing the two height management systems<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
\n
<\/span><\/span>Conclusion<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
A well-designed UI map is more than just a graphic element: it's an ergonomic tool that reduces cognitive load, facilitates navigation, and prioritizes information intuitively. By guiding the eye, clarifying priorities, and supporting decision-making, it becomes a true driver of cognitive efficiency, enhancing the user experience.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
\n
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"\u00c0$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
Key points to remember<\/strong>
A vertical map promotes smooth reading and highlights images, while a horizontal map is better suited to long texts.
On mobile, vertical maps integrate well into the user flow but generate scrolling, while horizontal maps reduce scrolling and work well in a carousel format. A fully clickable map simplifies interaction, reduces cognitive load, and improves accessibility.
Key information should be highlighted, secondary data grouped in a map footer, and metadata presented separately.
The balance between fixed-height elements (ensuring alignment and comparison) and adaptive sections via autolayout (ensuring fluidity and accessibility) is the key to an efficient and scalable design.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
\n
\n
This article was co-authored by Nathalie TRAN<\/a> And Maxence FREIXA<\/a>.<\/em><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
The article The ergonomics of UI maps: guiding the eye to provide better information<\/a> first appeared on Usabilis<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Loading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"
UI Card Ergonomics: Guiding the Eye to Better Inform. As a product designer, I have a particular fondness for cards. They are components I use very often in my projects. Their strength? They function like small, condensed pages, easy to organize in a grid. Visually, they remind me of\u2026 Read More \u00ab\u00a0L\u2019ergonomie des cartes UI : guider le regard pour mieux informer\u00a0\u00bb<\/span> »<\/a><\/p>","protected":false},"author":1,"featured_media":239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94,38],"tags":[23,5,50,17,21,51,3,2],"class_list":["post-238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-architecture-de-linformation","category-module-3-ux-ui-produit","tag-color","tag-design","tag-ergonomie","tag-figma","tag-mobile","tag-tests-utilisateurs","tag-ui","tag-ux"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":1,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/238\/revisions\/466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/239"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}