0

I am currently facing a challenge with a very long status (including a sub-status) that needs to be displayed on desktop, mobile, and tablet screens. Our typical lozenges have a maximum width of 200px, but with the inclusion of the sub-status, they appear much longer. We have experimented with various alternative ways to display the sub-status, but none of them seem to be the right fit (see image below).

If you have encountered a similar issue and found a solution, I would appreciate your insights and suggestions!

enter image description here

Improve this question
2
  • can yo upost a mockup of how would these notifications look in context?
    – Devin
    Jul 31 at 18:01
  • Should notifications always be together next to the status? Do notifications have a specific number for each status?
    – Danielillo
    Jul 31 at 18:04

2 Answers 2

Reset to default
2

A few suggestions:

  • First, reduce the amount of copy you need, so: Premium waiver rather than waiver of premium; insurer cancelled rather than cancelled by insurer. Do you need to say 'claim approved' or is 'claim' implicit from the context, and are there other words that can be removed?
  • Consider replacing 'Active' and 'Cancelled' by icons such as ticks and crosses. I like the colour coding but obviously don't rely on that alone.
  • Split the terms into separate lozenges

Personally I would also then change to sentence case for readability, and look at other fonts that make better use of the limited space available.

Improve this answer
1

In a previous experience, I faced a comparable problem. The challenge was to determine whether a sub-status was critical for the overall user interface or not. If it was deemed essential, we decided to display it as a tooltip.

However, we recognized that this approach was a temporary solution and introduced complexity. As a result, we pursued a more technically robust alternative(See image below)

enter image description here

First, we conducted a thorough analysis of the sub-status and its impact on the user experience. We identified key factors that could influence its relevance and importance.

Next, we revised the user interface design to accommodate the sub-status more effectively. This involved optimizing the layout and enhancing the information hierarchy to ensure that the sub-status received appropriate attention.

We then integrated the sub-status data into the underlying data model and ensured it was efficiently accessible throughout the application.

To improve the user experience, we implemented dynamic tooltips that provided contextual information when users interacted with elements related to the sub-status. This allowed users to access the relevant details without overwhelming the main screen.

Additionally, we performed usability testing and collected user feedback to refine the implementation continuously. This iterative process helped us address any potential issues and make the necessary adjustments.

By adopting this approach, we achieved a more sustainable and user-friendly solution for handling the sub-status, enhancing the overall user experience and usability of the application.

Improve this answer

Your Answer

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

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