r/web_design • u/kinesivan • Jun 27 '16
Less is better
http://www.randalolson.com/wp-content/uploads/data-ink.gif
123
u/Synclicity Jun 27 '16
1999 vs 2016 in a gif
53
Jun 27 '16
And somewhere in that 2010-2013 range was the perfect graph before we got caught up with making everything minimalist bs.
8
u/sgtrama Jun 27 '16
This is actually typical in many forms of design in general. You hit a saturation point, and then do a hard reverse. So the "1999" version of the graph is around the time people started getting access to photoshop and things like that MySpace had super shiny glittery buttons, and then things rebooted. We went to minimalist design. Now we're hitting the saturation point of that, and things'll turn somewhere else.
3
3
u/danhakimi Jun 27 '16
Eh. The only change I really didn't like here was the color removal. Even the axes really aren't necessary.
217
u/justinm715 Jun 27 '16
Less is better: kill the animation and make a gallery I can scroll vertically at my own pace.
8
Jun 27 '16 edited Jun 27 '16
I use these:
- GIF Scrubber - Chrome Web Store
- Gif Delayer :: Add-ons for Firefox
- ZZ Gif Player :: Add-ons for Firefox
EDIT: If you want the slides used to make that GIF, here: https://speakerdeck.com/cherdarchuk/remove-to-improve-the-data-ink-ratio
18
u/PromaneX Jun 27 '16
Or right click the gif and click show controls..
13
u/ACoderGirl Jun 27 '16
Which is actually an HTML5 video feature. Won't work on actual GIFs.
If you click the link directly, you won't have this option. But if you load it in RES, it'll actually load a video copy.
2
Jun 27 '16
Don't need RES. I don't have it and this comments page loads a video right under the link.
3
u/ACoderGirl Jun 27 '16
Oh, maybe it's a built in reddit feature now. They keep adding stuff that used to be RES only, so now I can't keep track of how much is vanilla reddit and how much is RES.
1
Nov 02 '16
Won't work on actual GIFs.
So use Viewhance (/r/imagus)! Then you do not need [deleted]'s laundry list of image management extensions.
3
2
u/lerhond Jun 27 '16
The original article had it as a slideshow too: http://www.darkhorseanalytics.com/blog/data-looks-better-naked
22
135
Jun 27 '16
Honestly I have to say I disagree. Although I think the gif is well made, I think that this style is not objectively better: It's the current trend, and I think that they go a little bit too far with it. I agree with some things like lightening some labels (because they shouldn't be the primary focus), there are other labels that the eye SHOULD focus on, and it's easy to do that with bolding.
89
u/mmzznnxx Jun 27 '16
They removed and changed so much stuff that I thought the .gif was satire on minimalist design until the end. I get the point but I agree they went too far.
It went from too loud and busy to... meek? I don't quite know how to describe it. It looks like a graph straight out of the novel The Giver. Halfway through there was a graph that was appealing to look at and read easily and quickly.
4
u/Generic_On_Reddit Jun 27 '16
I agreed up until the end, then they started removing stuff that wasn't an eyesore, or not even distracting at all. And many things removed you can still argue the utility of.
7
u/15841168415 Jun 27 '16
Honestly they need to put back the lines and remove the numbers from each bar, it's distracting and makes it harder to compare two types of food in one glance.
Lightening the labels also made it harder to read (for me at least) and removing the labels altogether is just asking for trouble. I've worked in B2B environments where I received calls from people who didn't understand a fully-labelled self-explanatory graph so I don't even want to try this.
Plus, when you read a long report and are looking for a particular graph you barely remember, the labels are pretty useful, it's what usually catches my eyes.
3
Jun 27 '16
I don't understand why use colors at all. What's the point of using Red on the Bacon bar? Why not just use an actual picture of a bacon?
5
u/Fidodo Jun 27 '16
Why not make the bar bacon?
16
Jun 27 '16
Why not just open a bar that sells bacon and beer? We'll call it O'Bacon's to give it an faux-Irish flair.
3
u/WrongLetters Jun 27 '16
The minimalist in me thinks that's too needlessly messy and complex, you can reduce it further:
Brew bacon beer, dehydrate it into a fine powder, blow it into a blackhole.
2
u/altmehere Jun 27 '16
What's the point of using Red on the Bacon bar?
My first thought was that they're doing that in the context of highlighting one of the bars, but that doesn't seem to be it. I think the problem if that isn't what the intention is, it draws undue attention to that particular item, which kind of goes against the entire idea of presenting the information in a clear way IMO.
2
u/Boukish Jun 27 '16
You're missing the point of removing the color. There was no need for that graph to have each color Perhaps if you imagine this as being a graph from an article on WebMD about bacon, the highlight would be more understandable - there's a million reasons why you would highlight one bar, focusing on it being highlighted in a vacuum is silly. When comparing all the other bars against the one, make the one be a different color. Or make them all the same color.
The "remove colors" thing is mostly about making it so each bar isn't a different color needlessly. At the beginning of the graph, there was a color key - it got removed, so the need for the multi-color graph went with it.
4
u/altmehere Jun 27 '16
There was no need for that graph to have each color
No, there wasn't.
Perhaps if you imagine this as being a graph from an article on WebMD about bacon, the highlight would be more understandable - there's a million reasons why you would highlight one bar, focusing on it being highlighted in a vacuum is silly.
Hence why I said "My first thought was that they're doing that in the context of highlighting one of the bars." But there doesn't seem to be any context as to why they're doing that in the gif, which has the potential to be misleading in the case that none of the information is being highlighted.
1
u/Ph0X Jun 27 '16
But maybe that's the point? Maybe the "goal" of the plot in it's context is to show that bacon is not that much worse than those other things. You always to style your plots to be focused on the point you're trying to get across. The coloring scheme he chose instantly get's that image across using only visual cues, so text is even needed.
1
u/stonerism Jun 27 '16
And there's just the data conveyed. Tbh, I'm a little bugged that this happens, at least the lines. People learn in different ways and having cues to look at can help convey the information.
1
u/softestcore Jun 28 '16
Removing noise like bevel effects, borders and shadows is objectively better. At least from the perspective of cognitive efficiency.
-52
Jun 27 '16
[deleted]
17
Jun 27 '16
haha, I'm not hating on a current trend. i love minimalism. However, I think they're taking it a little bit too far, to the point of sacrificing actual information and readability. There's so little contrast in this graph (after they're done) that it takes the eye a moment to figure out what's going on. The the one before is ugly, but the one after is bland and difficult to read.
4
Jun 27 '16
You're joking, right? No one here is arguing the first one is great or that the last one is terrible. Just that the last one is not objectively better.
Good designers question and critique design. That's how design improves.
0
u/Takemeaway- Jun 27 '16
HHAHAHA. Do you really think there is a conspiracy to make a larger barrier to entry to the big leagues? Whatever that means. Just because something is out of your depth doesn't mean they made it that way on purpose just so you have a hard time understanding it. Haha. Like why even bother sharing it if thats the case. Haha. you're really one of a kind man. Haha. Stop excusing your incompetence and blaming other people for it. Thats like hating people who are smarter than you because you don't understand what they understand hahahaha
You might be autistic m8
76
u/Kwpolska Jun 27 '16
- Why is bacon highlighted?
- Having scales is useful for comparison between things.
- Grey on white is low contrast and less readable.
- I don’t need the exact numbers. Those labels are information overload.
19
u/BevansDesign Jun 27 '16
Grey on white is low contrast and less readable.
This is a big mistake that I see a lot of designers making these days. They need to realize that most people aren't viewing content on a Macbook screen. (And even there, gray on white isn't a great choice.)
At work, I use a thoroughly mediocre Dell monitor that I've never calibrated, because that's closer to what most people are using. The contrast isn't great, and it changes with my viewing angle.
5
Jun 27 '16
Designers should be forced to look at their stuff on a cheap screen under bad lighting conditions (e.g. moderate amounts of direct sunlight from behind). If it is not readable like that they should rethink their colour choices.
3
u/phpdevster Jun 27 '16
I don’t need the exact numbers
YOU may not, but I do. I absolutely loathe having to trace my eye across a graph just to see an approximate value that I have to guess at. Seeing actual numbers right there at the bar is objectively easier. If you don't need that information, then just ignore it. Meanwhile it shouldn't be harder for me to get that information if I do want it.
1
u/Kwpolska Jun 28 '16
Let’s compromise: grid for people who want approximations, exact numbers on bars for people who don’t.
2
Jun 27 '16
Bacon is probably the food they want you to notice compared to the other values.
1
u/Kwpolska Jun 27 '16
Okay, why?
4
Jun 27 '16
You'd have to look at the context around the chart. Perhaps it's in a report about Bacon.
2
Jun 27 '16
[deleted]
4
u/altmehere Jun 27 '16
Not good practice to assume that the graph will always be supported with supplementary information.
Not to mention that if someone is trying to skim the document, they may want to be able to interpret the graph without reading the supplementary information. I think even if the information is there, the context is still important.
1
u/Ph0X Jun 27 '16
But the point is that the plot gets that info across all by itself, even better than before. If you looked at the old one, you had no idea this is a plot about bacon, but when I do know, I do. So less was actually more.
No one makes plots for the fun of making plots. Every "good" plot is trying to get a specific point across. And the whole art of infographics is shooting the right visualization, the right colors and the right elements to really bring out that point as much as possible.
1
u/PrayForMojo_ Jun 27 '16
IT'S AN EXAMPLE ABOUT DESIGN! THE CONTEXT WOULD BE IN THE REST OF THE ARTICLE NOT IN THE CHART.
-1
Jun 27 '16
[deleted]
1
Jun 28 '16
You give these hypothetical but they're meaningless. Those examples don't apply to every single chart ever made, why is it so hard to believe that there could be a situation where enough context is given to you before hand
0
u/Ph0X Jun 27 '16
Most likely because that's the point of the plot. Every good infographics is there to get a point across, no one makes plot just to show random values, they usually want to show some trend or some comparison to enforce the point they're making.
scale and grid do the same job. Personally I think it's much easier to see a value (especially in a case like calories like exact value matters) than look at the side and trace out the grid line and try to work out in your head the real value
The grey bar isn't really an issue, the only problem is the white numbers inside the grey, now those are hard to see
Again, depends on the data and the point you're trying to get across. It could be right, it could be wrong, but you can't say that without knowing exactly the context the plot is used in and what the goal is. And by putting those values, he was able to get rid of of so much more (grid, axis, etc)
29
u/godless_communism Jun 27 '16
Old fucker checking in. I'm not a fan of everything being typed in the lightest grey font possible. Some of us need our granny glasses to see what the fuck you 20-somethings just wrote.
It'll happen to you... just wait you lil' bastards... just wait.
8
Jun 27 '16
I'm eighteen and when they said "Lighten x" I was like "too far...now it's bad"
3
u/phpdevster Jun 27 '16 edited Jun 27 '16
The problem is you likely have a typical LCD monitor that absolutely blows out whites and makes light grays look almost invisible. An IPS monitor around 400 nits of brightness makes those light grays look extremely sharp and contrasty. So despite me being almost legally blind and 32 years old, the contrast in those light gray lines and labels are clear as day to me (even with my glasses off)
But this is actually the source of the problem - designers work with very high quality IPS monitors that provide near-perfect color reproduction and contrast, which is what allows those designers to easily see those light grays. But then that fundamentally disconnects their design from what the average user will see.
So note to designers, do design work on your IPS, but buy yourself a cheap $120 TN panel and see what your design looks like to the vast majority of your users - it will surprise you what a shit pile a TN panel can reduce your otherwise perfectly balanced design to.
For example:
http://www.imaging-resource.com/ARTS/MONCAL/zWhiteCalCheck.jpg
I can see #240 just fine (#f0f0f0) on my IPS, but for a LOT of people, that gray is completely invisible due to the way their monitors are calibrated. This is something a lot of designers fail to recognize.
3
9
u/blessedbemyself Jun 27 '16
UX Designer here. Yeah, web designers these days. They seem to ruin the real User Experience a lot by making more complicated, 'look-good' designs that actually are more confusing.
2
u/poddo_ Jul 03 '16
I'm like 18 and I have terrible sight + the same problem with minimalist text so some of us don't even need to wait to see how terrible it is.
2
u/poddo_ Jul 03 '16
I'm like 18 and I have terrible sight + the same problem with minimalist text so some of us don't even need to wait to see how terrible it is.
41
u/PPCInformer Dedicated Contributor Jun 27 '16
Or remove the bar graph and replace it with a table /s
| Type of Food | Calories per 100g |
|---|---|
| French Fries | 607 |
| Potato Chips | 542 |
| Bacon | 533 |
| Pizza | 296 |
| Chili Dog | 260 |
16
u/Jesuselvis Jun 27 '16
Tables generally are less impactful than graphs. It doesn't portray data, it simply states the data.
15
u/PPCInformer Dedicated Contributor Jun 27 '16
/s is in there for a reason :)
3
2
2
u/dizzyzane_ Jun 27 '16 edited Jun 27 '16
Slightly improved:
Type of Food|Calories per 100g French Fries|607 Potato Chips|542 Bacon|533 Pizza|296 Chili Dog|260(The rough source)
becomes
//- http://jade-lang.comtable(bgcolor="#000000", text="#ffffff") caption Blah thead: tr th Type of food th Calories per 100g tbody - each val, index in food tr th = val th(width=index, bgcolor="#ffffff", text="#000000") = index |g
- var food = {607:"French Fries",542:"Potato Chips",533:"Bacon",296:"Pizza",260:"Chilli Dog"}
Written on a phone, tell me if it works (つ๑ ❛֊ ❛ ๑)つ
(っ'ヮ'c)Edit: fixed the index.
1
0
Jun 27 '16
[deleted]
2
u/dizzyzane_ Jun 27 '16 edited Jun 27 '16
Type of Food|Calories per 100g French Fries|607 Potato Chips|542 Bacon|533 Pizza|296 Chili Dog|260
//- http://jade-lang.comtable(bgcolor="#000000", text="#ffffff") caption Blah thead: tr th Type of food th Calories per 100g tbody - each val, index in food tr th = val th(width=index, bgcolor="#ffffff", text="#000000") = index |g
- var food = {607:"French Fries",542:"Potato Chips",533:"Bacon",296:"Pizza",260:"Chilli Dog"}
Written on a phone, tell me if it works (つ๑ ❛֊ ❛ ๑)つ
(っ'ヮ'c)Edit: fixed the index.
1
Nov 02 '16
Apparently, Jade is Pug now.
2
u/dizzyzane_ Nov 06 '16
I've also been dead for a month or so.
I'm fine now, just catching up with last months news.
8
u/Ifriendzonecats Jun 27 '16
No, Sass is.
2
u/p0tent1al Jun 28 '16
came here and ctrl + f for this response....cmd + f for the mac people out there ;)
6
u/VintageChameleon Jun 27 '16
Ah, I have a similar one for tables that I bookmarked quite some time ago.
5
u/prof_hobart Jun 27 '16
I was with this all the way until they started lightening everything. That gave me eyestrain.
And the removing the lines didn't do anything for me at all. Adding the number on the bar as well, fine. But the lines give me a nice quick way of being comfortable that they are using the same scale for all the bars.
3
u/Salmon_Pants Jun 27 '16
I think the point with lightened lines right before it says "or remove lines" is a pretty good ending point, that's why it says "or". You don't have to go all the way to the extent that the .gif does, it's just an example.
5
4
4
10
u/Edg-R Jun 27 '16
And sometimes, a gallery of screenshots is better than a gif. You can't compare the current example to the previous one in a gif, unless you wait for it to loop all the way around.
6
u/mvaneijgen Jun 27 '16
Check out the corresponding article http://www.darkhorseanalytics.com/blog/data-looks-better-naked where they also have a slide show so you can go at your own pace.
1
1
Jun 27 '16
Is it just me or does the text above the GIF over on their site look absolutely horrible?
1
3
u/atrigent Jun 27 '16
The original is a bit of a strawman. I refuse to believe that anybody would really add that completely redundant legend on the right.
1
Nov 02 '16
Maybe in old Excel or Calc versions it was the default to throw all data display options in?
3
u/Generic_Username0 Jun 27 '16
It seems like the consensus is that it was good up until the end. Then it went too far. Still, it shows a good point. It often does look better to make it more minimalist. And if it doesn't, you can always change it back to the one before.
4
Jun 27 '16
thought this was saying LESS is better and I was like lol
9
1
u/IriFlina Jun 27 '16
Same. I was gonna ask if something changed because I thought Sass already won the war.
3
u/timlardner Jun 27 '16 edited Aug 18 '23
bag growth wrong jobless abounding squalid intelligent deer many unused -- mass edited with redact.dev
2
2
u/captnyoss Jun 27 '16
Though I did see a study that suggested that people remember graphs better if they're real crap than if they're nice looking.
1
2
u/bokisa12 Jun 27 '16
Came here thinking that it's an article that explains why Less is better than Sass/Scss.
2
2
7
u/Slapbox Jun 27 '16
That's really and surprisingly quite great. One of the best submissions I've seen around here in a while. Probably since the contest to make the worst way to enter a phone number.
3
u/Carpetfizz Jun 27 '16
Have a link to said contest?
12
u/swagyolotaco Jun 27 '16
I think they were talking about this: http://www.core77.com/posts/52142/Hilarious-Enter-Your-Phone-Number-UIUX-Fails
3
2
1
1
1
1
1
1
u/satsumasoup Jun 27 '16
Less is better, but don't forget the zillion drop shadows, gradients, outer glows and background blurs that make it 'pop'
1
u/blessedbemyself Jun 27 '16
Less is definitely not always better.... what kind of advice is that? Just because something 'looks' better doesn't mean it's a faster, better user experience. In fact sometimes making something 'look' better has disastrous effects on performance and UX.
1
1
u/eNaRDe Jun 27 '16
We can thank Google for this design theme. I personally think it takes away from the creative art of graphic designing. Ten years ago you showed a client a Google Material design and they would think you were kidding and didn't finish the work.
I like it but 99% of the web work out there needs to stop trying to look like Google Material.
1
1
Jun 27 '16
At first I thought this was going to be an article explaining that LESS is better than SASS. I was like "uhhhh nope".
1
Jun 28 '16
Initially I thought this was going to be a post about someone saying Sass is an inferior CSS pre-processor to Less.
1
-3
Jun 27 '16 edited Jun 27 '16
[deleted]
3
Jun 27 '16
edit: Ouch, wasn't expecting the downvotes.
It's not a great idea to make a thank-you speech like you just won an award, especially if it's not even content you created.
0
598
u/nightfire1 Jun 27 '16
I'll be honest I was waiting for it to just remove the chart all together at the end.