This article is about a widely used interface element: a card UI. This study is a small extract of a more significant client project –a search application in the medical field– realised at Interactive Things. You will get insights about the decisions that can go through a small design component, and you will discover why I believe it necessary to challenge the design through constant iterations and tests. A list of useful resources is provided at the end of this post.
A card is a sheet of material that serves as an entry point to more detailed information → Google Material Design.
In this study, the card serves as an entry point to a search result into a medical product.
1. Mapping the content
As a first step, I have started analysing the content and mapping all the search results’ types by simply taking screenshots and noting down every single element that populates them.
By breaking down these elements, I have got more familiar with the product’s content and I was able to identify the diverse classifications and the recurring elements in it.
As soon as the whole content and structure was defined, I have started designing a card UI. The goal was to explore one or two visual solutions that would have been scalable and applicable to all the search results’ types.
2. Defining the card layout
The grid of the page defined the max-width of the card UI. But it also sets the boundaries within which I could play to display all the content’s elements whose dimensions vary. Most results present in fact horizontal images, while one specific category presents vertical photos.
To find a good compromise between the grid constraints and the need to have both visual and textual elements in the card, I have decided to maintain a horizontal layout –3:2 aspect ratio– for the majority of images and to crop the vertical images into squared ones. Consequently, all cards had the same dimensions in width and height and we were able to fit more cards into the page.
Although equal in sizes, each card UI is an entry point to different content.
In order to highlight the difference between single cases and collections, my first approach was to modify the appearance of the card itself. However, all the investigated solutions were not consistent throughout all search results’ types.
So I decided to apply some changes to the elements that populate the card and work individually on the image since it was the only element always present in all results. Therefore, I was able to differentiate the cards’ content by giving a different layout to their images.
3. Working on the visual taxonomy
Another major design challenge in this study was to improve the visual taxonomy of the search results. Labels, icons and colours would enhance the search experience and help the user to identify the content types quickly.
According to the client requirements, we had to include a topic –modules, lecture, cases– its icon, and the colour of the domain to which each topic belongs.
This straightforward visual solution would have led the user to associate the colour with the topic. Hence we decided to include the labels of both domain and topic to avoid confusion.
The first proposal did present not only a risk of the association between colour and classification’s label but also a challenge for the icon implementation. In fact, the dimensions were too small to have good readability of the icon.
As many projects do, this one also started with a review of the branding guidelines. I had the requirement to keep three colours from the brand guidelines and to come up with a six colours qualitative palette.
In the first phase, I did some colour pickings on an HSB colour model, trying to vary the hue of the colours as much as possible by adjusting their numerical values and operating some optical corrections.
After attributing the colours to the text, I could test that labels could not be easily identified as the colours’ hue did not vary enough. Furthermore, some labels did not pass the accessibility (WCAG 2.0) standards for the contrast (Level AA).
At this point, I needed to differentiate the hue and to play with the luminance –on an HCL colour space model– of the colour scale.
To vary the colours as much as possible, I had to ensure that the linear distance across the colour space and between those six colours would be similar. This means that all six colours would have similar luminance and chroma but different hue. To do so, I needed to change my tools. Jeremy, our Technology Lead introduced me to a React App that would have helped me to map and redefine the colour scale.
By mapping the colours on an HCL colour space –best model to represent data was actually able to see that the luminance value of the three brand colours was not the same. Therefore, I set the luminance to a fixed value of 50 and started changing the hue values.
In the end, I applied the colours to the text to make sure to match the accessibility requirements.
Once the colour scale was ready, I had to attribute a colour to each domain’s label. As first, we tried to match the colours of the old product in order to reduce the learning curve of the user. Then I applied the new colour palette to the different cards.
Although the cards were distinguishable, as soon as they populated the page, I realised that two too similar colours would have lived together in the same section. After the last refinements, I considered the design of the card UI on a good level for user testing.
Alongside with the learnings from the process, this study wants to remind me that:
- a fair amount of thinking and design iterations pass through a simple UI element;
- iterating on the single component, the card UI, and testing it into the composition, that is the page, is a good practice;
- you have great control on a colour if you work with its numerical values.
The whole process and design were lead, challenged and reviewed by Christian, our Senior Interaction Designer. Due to contract reasons, all the images from the actual medical product have been removed.
How we created color scales, Interactive Things
How To Avoid Equidistant HSV Colors, Gregor Aisch
HCL, Kelsey Higham
Accessibility Guidelines –WCAG– 2.0
HCL, Gregor Aisch