I have a sidebar navigation where I need to seperate orders into two types - maintenance orders and service orders. Each order type has 4 statuses by which it should be separated - it has different data in table and actions are different.
I have a problem with showing these two groups because names of the statuses are the same.
What can I do to better emphasize groups and these statuses?
You will need to distinguish it by use of UI elements.
Add the letters "M" and "S" in two contrasting colors (red & green) besides the word draft in a small box, respectively. That way, users will easily distinguish both and remember which color represents what element.
You can choose to highlight the headings "maintenance orders" and "service orders" using two different colors, which again allows users to easily distinguish between the two.
You could hide the options and add a dropdown arrow to reveal the sub-menus.
Modifying the UI elements would most definitely be the easiest way. One way can be the use of iconography - perhaps your client/product users have separate teams that deal with Maintenance and Service orders, and have any distinguishing features (e.g., Spanner for Maintenance and Pair of headphones for Service, assuming it is customer service). You could possibly place these next to titles and also color code them. In addition, I would recommend changing the icons for each of the four sub-categories (as all eight have the paper icon at the moment), which will make it easier to recognize the specific types of orders.
Are the two sections utilized by the user all the time? If not, I'd collapse them, add a dropdown arrow, and add icons left of both Maintenance Orders and Service Orders to be consistent with the menu items above. If the user works in one section at a time, I don't see why the section they are not working on is expanded at all times. If there are more menu items to be added on the side navigation in the future, collapsing them will also help when designing for scale.
The icons left of each status page don't add value since they are all the same icon and color. I suggest using colored icons that utilize color psychology. Drafts could be grey, opened could be blue, in delay could be orange, and Completed could be green.
