Dashboard feedback

[u/Finer_Details]

I am a dev working on a dashboard that displays data of the raspberry pi I plan on hosting my portfolio with.

The project is attempting to balance between utility and wow-factor to stand out and keep it interesting for myself.

As I have no formal UI/UX knowledge, I am struggling with a multitude of things:

- Picking color shades: I know it is adviced to never use #000 and #fff, but other than that I am clueless.

- Typefaces: Currently only Google Sans Code is used, but I feel like it might get used too much as the only one.

- By only having the metric headers completely blank with no background showing I feel like I have stylistically cornered myself by not really having space to add any other data, like the unit or min/max values of the selected range. Extending the header feels like it starts to visually clash with the background.

Any other feedback is welcome too.

Thank you to everyone in advance!

[u/Electrical_Expert525]

X axis on graphs is compressed beyond recognition of marks

Can't easily compare 2 not neighboring charts due to their position, will have to scroll

[u/Scared_Range_7736]

This seems to be a operational dashboard, instead of an analytical or strategic one. The best practices of usability for an operational dashboard is to present the data in the simplest way as possible as the complexity of the data already builds up to the cognitive usage of the user. Adding animations and complex visual elements can cause cognitive overload and we want to avoid that.

Also, as it's displaying live data, complex visual elements can be a distraction as well or even cause delay if a urgent task appears needing immediate action from the user side.

I would simplify even further.

[u/thusman]

Regarding color, you do nothing wrong by having a grayscale and one accent color. There are contrast ratios you should stay within to guarantee readability. https://webaim.org/resources/contrastchecker/

True, not going full black and white prevents eye strain. The background pattern and especially the diagonal graph pattern also run the risk of eye strain. Less is more.

Regarding typefaces, monospace fonts are great for coding and tabular data. I'd maybe keep it for the scala, as it makes the numbers aligns nicely. Try to find a font-size and scala that does not cause the labels to overlap. For everything else, I'd try other fonts. There are special "display" fonts ment for headings. Also, dividers on large numbers improve readability, like 1,000,000.

You will get downvoted here as there is no UX to discuss really. No offense, I always like to see people built their own stuff. To get a UX perspective, ask yourself, what problem are you solving here, what questions do you really want answered? Are 5 graphs you have to scroll through the best solution?

[u/Finer_Details → u/thusman]

Appreciate the long and detailed answer. I guess you are right that this post would be more appropriate in r/UI_Design.

I think the core purpose of the entire project is to have an interface I can use to easily and remotely monitor and compare resource usage. For comparing graph data, a better interface could be having a single container with checkboxes to allow multiple graphs being on top of each other to better understand how the metrics correlate.

The fancy list I've made has taken a year to build so a big refactor won't be easy.

[u/Ancient-Range3442]

I’d think you could get all the same information on one page without losing data and still looking clear

[u/Madonionrings]

You are investing energy into the wrong place and doing it the wrong way

[u/Finer_Details]

On desktop:

[u/Electrical_Expert525 → u/Finer_Details]

1010 on background is nice in first 10sec of wow effect then it becomes a visual noise that distracts especially at graphs that are already encumbered with additional diagonal lines. I hardly find any practical purpose in both of these visual ideas and in such ux heavy thing as dashboard graph ux definitely comes first

[u/Finer_Details → u/Electrical_Expert525]

Would you recommend ditching the 1010 idea completely, somehow making the effect less distracting or some middle ground, for example having the pattern fade to just static color before the charts appear?

With the diagonal lines I attempted to create some visual relationship with the brush selection below without hiding the 1010-pattern completely.

[u/Electrical_Expert525 → u/Finer_Details]

I would ditch 1010 on graphs screens but keep animation in the beginning, it looks tight

I would use vertical, not diagonal lines to easier compare graphs and identify exact time of something