Principal Element

Our learning webpage / application will display various information organized in different structures. All of those information bits are displayed as cards. We are currently trying to limit the fragmentation by introducing common elements that can be used across all cards.

One such common element is a visual indicator that tells the user that this piece of text is the principal element of the card (i.e. the main topic):

enter image description here

enter image description here

As you can see, the faint gradient tells the user the topic of the card, or serves as a prompt (this is not the final design, most likely the gradient will be replaced by something else). This lets the user quickly recognize the most important information on the card. Most of the time, the user would only look at this principal element, as it contains the information the user is mostly looking for:

enter image description here

For languages, we might have a sentence in a foreign language that is presented as a prompt:

enter image description here

For a prompt like this, the solution (or answer) is presented in a similar way:

enter image description here

Structured Information

However, we want to give the user more information. There could be other translations, and to distinguish the translations from each other, we want to display back translations:

As you can see, in the last image, we have some structured information. But that structured information contains the most important information: the sentence "How are you?" is the main translation of "Come stai?", and so it needs to be displayed as the principal element of the card, as described earlier.

Structured Information with Principal Element?

So we need to find a way to combine the two last images. But this turns out to be quite difficult:

  1. Here, the sentence is displayed twice:

enter image description here

  1. Here, the hierarchy is wrong. The principal element appears outside of the hierarchy, but it should be part of it:

enter image description here

Any ideas how to do this in a better way?

1 Answer 1


I feel this is more a graphic design question than a UX question. You know what you want to display and the hierarchy of it. You are just having trouble visually displaying it in the way you like.

Your principal element is more a term of "we want this to look important". You are already doing this by putting it on top of the list. Now, the style does not work with your structured information.

Option 1: Change the style to something that fits more in the context of your list. E.g. making it bold or a bit larger.

Option 2: Change the style of your principal element. You cannot have a glossy box around it if you want to use it to highlight text in lists.

Option 3: Don't apply any formatting. Your principal element is already on the top of the list. Maybe that is enough highlight for your users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.