2

(question copied from https://graphicdesign.stackexchange.com/questions/162197/need-help-with-a-color-coded-design since commenter there suggested this is the appropriate forum)

I am but a simple BA, and I am currently working on adding functionality to an existing web application. I am told there is no budget for a UI designer! So I had to design this myself.

On this page, the user will make selections in both dropdowns, and then click Calculate. That will generate the charts based on her selections.
Here's a conceptual mock-up. (I changed content and colors to protect proprietary information). enter image description here

Now, some charts are dependent on the first drodpown only, some are dependent on the second dropdown only, and some are dependent on both. We would like to visually indicate which charts are which. Our solution was with color coded-badges in each chart that indicate the dropdown selection(s) that contributed to that chart.
In this mock-up, the first chart is dependent on both dropdowns, but the 2nd chart is dependent only on the 2nd dropdown.
My difficulty is how to tie the dropdowns to the badges. I attempted to do that by encasing the label above the dropdown in the appropriately colored shape. But I am unhappy with the results, and I believe that it is a non-standard design practice. enter image description here

How else can I tie the first dropdown to the dark blue badges, and the 2nd dropdown to the purple badges?

4
  • 1
    Hi, site reviews ("How can I improve this?") are off-topic here - could you please edit your question to ask us about the specific problem you're encountering with your design?
    – Izquierdo
    Sep 20, 2023 at 22:25
  • I would start with looking at the structure of the data, and how you can make use of the labels and proper grouping / design of the charts so that you don't need additional visual elements to make it clear. Normally when designing interactive charts, you are better showing less complicated charts than ones that require multiple inputs because people find it harder to process and understand them.
    – Michael Lai
    Sep 20, 2023 at 22:53
  • @Izquierdo thank you for your feedback. I agree I did not specify the difficulty I was having. I edited the question so that now it asks a specific question
    – JMS
    Sep 21, 2023 at 21:03
  • @MichaelLai thank you for your feedback. As far as complexity -- this is for a highly technical user group and they need to be able to make those user selections to create charts using the assumptions embodied in the drodpowns. That is in fact the core of the enhancement we are working on. We did suggest grouping the charts based on type, but the business struck that down. They want a bunch of charts in a single grid with the user having the flexibility to fully customize the order in which they appear.
    – JMS
    Sep 21, 2023 at 21:10

1 Answer 1

0

You mentioned the fact that this design concept applies to this page (hinting that there could be many other pages with different layout), so the first thing I would consider is whether this design pattern is going to work for pages with more complex input combinations or not. It is unlikely to, and in the event that you have to design other pages in the future using the same interface components, I would advise you strongly against trying to make something work for just one page.

However, given that your question is confined to this page only, I can outline a couple of different strategies for your consideration.

  1. Since there are only two input fields, I would actually just put the relevant input field(s) in the charts (or directly above/below them) so that there is no confusing about which input options apply to which charts. This is the clearest way, and involves no additional changes. Of course, the user may not realise that updating one input field changes the display in another chart, but this problem is trivial once they have used it, and it's not like you are offering an alternate way to interact with the charts anyway.

  2. Since there are only two input fields, you can also rename the charts so that the values being calculated are distinct and clear, and then create some label below each input field that contains the labels of the charts to show that the input field affects each chart. I still think this is a better option than using the badges/chips for the same reason.

  3. If you insist on using the badges and want to work out how to provide the best visual cue to the user, then I would suggest that you shorten the text and have the badge or chip only indicate the actual value selected in the graph, and use the same colour on the label as you have to make it easier to scan and match rather than enclosing a very long string in what is supposed to be a component used for short length text normally.

1
  • I like your 2nd suggestion. I'll take it back to the business and get their reaction. Thank you for your help
    – JMS
    Sep 26, 2023 at 20:20

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.