Mastering UI design isn’t just about crafting remarkable UI elements — it’s also about designing the data they communicate. And guess what! the kind of ‘card’ you choose can totally change how the information feels. Whether you go for a horizontal or vertical style, these cards have a big impact on how data talks and how info gets to users. So, in this blog, we’re going to learn how to pick the right card for the job and how to design data.
How to decide which card to select?
Eye fixations
Selecting the perfect card hinges upon a variety of critical factors. Particularly when conveying information through large images, the orientation of the card plays a pivotal role in shaping the scanning experience.
A vertically oriented card featuring a substantial image encourages a more concentrated scanning flow. Users can seamlessly navigate both the image and accompanying text with fewer fixations.
Unlike the horizontal card which demands divided attention and has a higher count of eye fixations, a vertical card draws fixations into a unified focal point, enhancing overall readability and cognitive engagement.
Sometimes, your text carries more insight than images can convey. In such instances, horizontal cards stand as the superior choice. These cards offer ample whitespace, facilitating effortless perusal of each line, even when filled with extensive text.
Contrarily, vertical cards with lengthy text tend to appear crowded due to limited whitespace. This diminishes the visual breathing room for each line, making readability a challenge. Additionally, the typography takes on a blocky and overwhelming appearance.
We can enhance the cards by
When several cards are combined, they can quickly take up a lot of space. As a result, showing these cards on mobile devices is frequently an issue. Nonetheless, there is a technique that not only saves space but also improves the visual appeal of the images. When compared to images contained within boxes, using edge-to-edge images appears to be significantly more efficient in terms of space use.
Choosing horizontal cards saves a lot of vertical space, whereas vertical cards save a lot of horizontal space. By using these strategies wisely, the presentation of several cards becomes both spatially optimal and aesthetically beautiful, particularly in the context of mobile devices.
Moreover, the visual impact of the images is greatly heightened, potentially captivating a larger number of users and compelling them to click. The conventional boxed presentation of photos, characterized by its angular framing, tends to create a sense of distance and peculiarity in the displayed content.
For instance, consider an image of a house presented both in boxed format and as an expansive edge-to-edge display, both sharing the same pixel dimensions. Strikingly, in the edge-to-edge rendition, the house exudes a sense of proximity to the viewer, fostering a stronger connection, whereas the boxed version relegates it to a more distant perspective.
The boxed image imparts an impression of the house being confined within a rigid frame, a visual limitation that hampers its perceived closeness. On the contrary, the edge-to-edge portrayal dispels this illusion of containment, allowing the house to exist more organically within its surroundings and creating an inherently more inviting impression.
Comparison
Presented below is a compelling comparison that vividly demonstrates the remarkable vertical space conservation achievable through the utilization of a cluster of horizontal cards. A noteworthy point is that uniform card margins have been maintained throughout, enhancing visual consistency and optimising the space-saving effect.
Presenting a comparison that highlights the remarkable space-saving potential of vertically stacked cards. This becomes even more significant in contexts where real estate is at a premium, especially when considering the substantial impact it makes on the user experience of mobile devices.
How to design data?
Now that you know which card to select when, let’s look at how we may design the data on the card. Designers face a significant challenge in creating data that is easily consumed by users. We frequently do not have a better way to communicate the information than to employ a rudimentary structure.
The drawback of this style is that users cannot swiftly identify and distinguish specific data. Users must expend their cognitive effort to process the information.
The key difference between a good card and a bad one is in how the data is organised and presented. So let’s learn how to design data that can make our cards more intuitive.
Elevating Data Emphasis
Alright, let’s talk about using design to make things stand out! The first step is to figure out what information matters the most on your cards. Not every piece of information is equally significant — some things are more important than others.
Imagine you’re showing a house to someone. What really catches their attention? Well, it’s the picture of the house that makes them imagine living there, and the price of the house that makes them think about whether they can afford it. These two things are like the main stars of the show, and they have a big impact on what the person decides to do next.
If it costs too much, you can’t even think about it. Also, if the house doesn’t look nice, you’ll just ignore it. As a result, the pricing and visuals require greater visual emphasis. The pictures on the new cards are bigger and have more space around them.
Quantitative Data Differentiation
The quantitative data on the cards plays a supporting role in the user’s decision-making. What really matters are key features like the number of bedrooms, bathrooms, and square footage for each home. However, there’s a slight issue when it comes to the neighbouring data — it’s also presented as numbers. Placing these numerical details between the price and address can make them hard to notice.
By displaying these numbers at the bottom of a footer area, users may readily view them without being distracted by distracting clutter. Adding icons to them also allows people to recognize them more quickly and confidently. As words that begin with the letter “b,” “bds” and “ba” are similar enough that they can be confused. The icons function as visual signals to help with clarity and recognition. Combining all of the numbers may make things more complex and difficult to understand. That’s why since bedroom and bathroom data are related, they are kept on the left side. For simpler viewing, the square footage value is located on the right side.
Metadata
The label that shows what kind of listing it is gets lost in the confusion. It’s better to put it in a separate corner instead of right next to the numbers.
The category tag is like a label that shows information about a listing, but not the actual details of the property itself. It’s special because it stands out in a particular way. We put these tags in colour-coded chips so that users can easily see that they’re about information, not the properties.
Using colours helps users quickly understand the categories by looking at them. For instance, if there are many different listings mixed up, users can simply look for a specific colour to find the ones they’re interested in. Without colour coding, if the listings aren’t organized this way, users have to read and understand the label to sort through them.
The Difference
To figure out the best way to organize and handle your data characteristics, it’s important to really examine them. Once you’ve done that, you can decide where they fit best, how noticeable they should be, and how they stand out from each other.
Conclusion
I hope you’ve learnt the importance of designing data effectively and learned how to choose the right cards for your design. Applying these ideas will make your design more engaging and help users understand the information better.
See you all in my next informative blog! In the meantime, don’t miss out on the treasure trove of wisdom housed in the blogs below. Each read is a step closer to unlocking your full design potential. ⚡️🔐
