My pet peeve is low contrast, makes it really hard to quickly distinguish between parts of the page.
Simply by changing the light grey background for something much darker makes the individual charts and boxes pop out, making it so much easier to compartmentalize the information.
The reason why designers don't do that is rooted in the modern guidelines advising against higher contrast as "bad style". That's why on many websites we need to read dark-grey text on light-grey background. Black and white are frowned upon in the UI design community.
Which guidelines? W3C's Web Content Accessibility Guidelines specifically recommend a minimum contrast ratio of 4.5:1. Most web style guidelines that I'm familiar with inherit this recommendation, including Material.
> I could fit 3 times as much in an Excel spreadsheet...
Which doesn't necessarily mean that it actually helps you to find the information or data you seek faster. Proper spacing is needed to separate groups of objects.
However I agree that this dashboard template is simply not good, though spacing is one of the lesser concerns here.
Use system fonts [0]. You cut down the total payload size, and the user will already be used to it. Focus on the data and content, instead of design masturbation.
I swear, I don't understand this obsession so many people have with using custom fonts. One of the first things I do when I setup Firefox is disallow custom fonts.
What system? What standard fonts? My system has no standard fonts and I wouldn't want to use fixed-width fonts on a website anyways; I'd also be very unhappy if the website changed based on what device/system I'm using (I often don't have control over that device).
While the documentation could use some work, Looper[0][1] has been working very well for us. There's not an obscene amount of wasted space, the fonts are legible, and it does a good job of adding useful features to Bootstrap without going overboard.
I increased contrast, removed the nonsense drop shadows, decreased the global font size. https://i.imgur.com/r8CegSS.png
Still far from perfect, but just wanted to see how easily I could recover this unfortunately nonfunctional design.
I'm not sure if I can, since I just edited some things in Web Inspector. I only changed the following though.
- body color to black
- removed all instances of "drop-shadow"
- set backgrounds to white
- reduce global font
I would recommend further to
- slightly reduce padding between boxes
- use a font designed for the screen. This one might have been, but it is not as readable as certain other fonts.
A principle in web design is that everything is rectangles, but you usually don't have to actually make the rectangles visible. The eye can usually make out the "boxes" of the page by glancing at the layout of the text.
as someone who is struggling to modify the sh.t out of metronic to make it look good and usable while fitting all needed information on the screen of our saas ecommerce app I have to say this design suffers from the same issue others do: little contrast between background color and text color as well as very thin font. my eyes hurt trying to look up a button or a link or trying to read text.
40 comments
[ 1.6 ms ] story [ 148 ms ] threadThere's not a lot of info on that screen, and yet it doesn't fit in my laptop... I could fit 3 times as much in an Excel spreadsheet...
Simply by changing the light grey background for something much darker makes the individual charts and boxes pop out, making it so much easier to compartmentalize the information.
edit: https://imgur.com/a/2cUQAXr
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont...
https://material.io/design/usability/accessibility.html#colo...
https://www.nngroup.com/articles/chunking/
Which doesn't necessarily mean that it actually helps you to find the information or data you seek faster. Proper spacing is needed to separate groups of objects.
However I agree that this dashboard template is simply not good, though spacing is one of the lesser concerns here.
I swear, I don't understand this obsession so many people have with using custom fonts. One of the first things I do when I setup Firefox is disallow custom fonts.
[0] https://css-tricks.com/snippets/css/system-font-stack/
[0] http://uselooper.com/ [1] https://themes.getbootstrap.com/product/looper-responsive-ad...
- body color to black
- removed all instances of "drop-shadow"
- set backgrounds to white
- reduce global font
I would recommend further to
- slightly reduce padding between boxes
- use a font designed for the screen. This one might have been, but it is not as readable as certain other fonts.
A principle in web design is that everything is rectangles, but you usually don't have to actually make the rectangles visible. The eye can usually make out the "boxes" of the page by glancing at the layout of the text.
Some people think Material is old, but this has all the components we need and works well.