Information Visualization Isn’t Easy

Knowing how to best represent a set of quantitative information is not easy. I strongly recommend a quick read of the Wikipedia entry on Misleading Graphs and if you want to read a whole book try The Visual Display of Quantitative Information by Edward R. Tufte. Instead of remphasizing the need for displaying information in the simplest way possible, I’m going to give examples of how not to display information. Sometimes the errors are only small. But those errors will always be notiable, they affect how people interpret the information. First up, WordPress’s graphs


The problem here is that when the view count is 0 the colour is grey – it should just be a lighter shade of yellow. The sudden shift from 1 as yellow to grey as 0 suggests there is a fundamental difference between 1 and 0. There isn’t, as I explained in my my Wikipedia correctly uses a colour to show a semantic difference. White is used to represent the fact that there is no information available in the following graph.Image

However, this graph isn’t without its own problems. Can you figure out what the problem is? It’s incredibly difficult to realize the problem as it is a very deep one. Think about colours.

The most obvious problem is that the graph does not use a gradient. groups of GDP are lumped together for no reason. There should be no groups. instead of $800-$1600 being one colours, $900 should be a little more red than $850, $950 a bit more red than $900 and so on. They are essentially rounding figured for no reason. If you had a graph showing $11.53 million profit in Q1 and $12.42 million profit in Q2, would you round them? Rounding them serves no purpose. All it does is reduce accuracy… nothing is improved.

There is a much more subtle assumption made by this graph. It might not be wrong but it isn’t explained. The assumption is that the utility of money increases logarithmically. Look at the groups, they increase logarithmically.

The designers of the graph took it upon themselves to change how the information is shown. Instead of something that’s 10x the size quantitatively being 10x brighter or bigger (10x more intense in some way represented visually) on the graphic, they’ve made it log_10 times brighter. That’s an arbitrary operation done without justification. I do expect that if I were to ask the designer of the graphic why he did this, he would reply with the unforgivable line
“because if it weren’t like that, it’d be hardest to tell the difference between countries with low income. For example, almost all of Africa would be very similar in colour”.
If your goal is to let everyone know the exact GDP of countries, use a table not a graphic.

It is not a dilemma that people would see only a small difference in the colours of African countries because there is only a small difference in the GDP of African countries.

One last puzzle. Can you spot what’s wrong with this graph?


The problem is that again they’ve grouped things together when not necessary. But more importantly, look at the way the “Barely Dem” and “Barely GOP” are coloured. They are different to the others in that their centers are not coloured. This destroys the semantic meaning of the colours of the graph. It was originally that the colour represents the strength of the likelihood but not the colour AND how much white is in the center also represents it, adding complexity without adding any information.

One last error in this graph is that they have changed the size of Alaska. This is only confusing. The graph is being totally warped by the designer who felt that the shape of Alaska was awkward to work with.This makes the graph now entirely subjective. The designer could’ve also changed the shape of all other states – the integrity of the graphic is entirely destroyed by this decision.

Our Displays Are 2D Not 1D: GUIs Need to Exploit This

Many applications do not take advantage of the fact that our displays can be arbitrarily wide. Almost all of them only extend their GUI in the vertical direction.

Of course, GUIs are shown in 2D. In 1D they would have a width of 0 and hence be invisible to the human eye. But the core of their design doesn’t take advantage of the horizontal dimension properly. Here are some examples.

Here Google uses only 1 column regardless of how wide your monitor is. It’s insane. The number of columns should increase just as the number of rows increases as the height of your monitor increases. Bing has the correct solution.


As you increase the width of your browser the number of videos per row increases unlike Google. This concept can be applied to other programs such as chat ones. Here’s what chat current looks like

Here’s how it could look.

There are two columns of text instead of one. The scroll bar would control both the left and the right windows. The left window is just an extension of the one on the right. If you were to scroll upwards 1 line of text, m would be at the top of the right panel and l would be at the bottom of the left panel.

The advantage of this is that the amount of information visible to the user is proportional to the area of the screen available rather than just proportional to the height of the screen. This is a fundamental improvement over the previous. One downside to having more columns of text is that the user may confuse the two but this is easily remedied by having a large space between columns and a border separating them.

This design could be applied to any list of text like Google’s search results. Though for that there is a better solution. Take a look at the website of Digg.


Digg does have multiple column but the numbers of columns is not dynamic. There are always three columns regardless of how wide your monitor is. They need to learn from Bing. This layout with a dynamic number of columns would be ideal for a site like Google. The top search result would be at the top left, the 2nd best would be on the next column in row 1. It would not be below it. This is because we read from left to right, top to bottom. Not top to bottom, left to right. It’s key that the items would be ordered correctly.

It Adds Up: Minimizing Delays In Popular Systems

Google gets somewhere in the region of 2 billion hits per day. It is essential that the Google page loads quickly. How much would it cost if the Google web page took an additional 0.1 seconds to load? 0.1*2,000,000,000=200,000,000 seconds would be wasted waiting for it to load. If we assume the average worker is paid $10/hour, that’s 200,000,000/60/60*10 = $555,555.56 wasted per day as a result of that 0.1 second loading time. So per year it would be costing the economy $147,222,222.22.

Most people overlook small differences in loading time, but it’s key. I’m disappointed to see that most OS manufacturers don’t optimize boot up speed. OS makers seem to care more about how many new features the new OS is going to have rather than shaving seconds off boot time and loading times which is far more important. Microsoft has spent massive amounts of resources on the Metro interface. It will take massive amounts of time per user to learn how to use it effectively. Not only that but each time the OS boots loading that huge interface will take more time. It’s a terrible decision.

UI designers are often unaware of how much time their poor decisions could potentially waste. Adding a single dialog box “Are you sure you want to do this? Yes. No.” when applied to millions of users has a huge cost as a result of wasting the users time. One might be tempted to say “But no ones going to notice that 0.5 seconds of their time was wasted” I would have to direct you to my blog post explaining that the just-noticeable difference does not exist.

It’s  time for UI design to become more quantitative instead of qualitative. Lots of tests should be done and the test subjects should be asked to do various tasks and this will be timed. If it takes longer on average then the new UI should not be added. I doubt Microsoft has even attempted to even do this kind of analysis. There’s no way they would add the abomination known as metro had they known just how bad it is. I haven’t used it myself but I trust that all the reviews I have read are correct to say that it is terrible.

Warning: This Website Is Upside Down

This website, along with many others, is upside down. The design is back to front. New posts should appear at the bottom, not the top. “But then we’d have to scroll so much” you say. Ah, but the scroll bar should also start at the bottom.

We read left to right, top to bottom. This layout is left to right, bottom to top. It’s actually a combination of bottom to top. Each individual post appears top to bottom (ie the sentences appear in the correct order, not backwards), yet the posts are ordered bottom to top.

This is most annoying on twitter. Threads of conversations are backwards. Instead of:

John: Hey, how are you?
Michael: I’m great thanks. And yourself?
John: I’m OK.
Michael: It was nice talking with you, bye
John: Goodbye.

On twitter it reads:

John: Goodbye.
Michael: It was nice talking with you, bye
John: I’m OK.
Michael: I’m great thanks. And yourself?
John: Hey, how are you?

Users have to change from their standard way of reading to reading backwards.

Facebook has a different approach. It puts threads of comments in the right order but insists on ordering separate items backwards.

Half Right Half Wrong

Here you see the order of the comments appearing chronologically but the order of the posts ordered backwards chronologically.

Websites should be designed the same way chat clients are.

I’m not suggesting that sites should show the oldest article first, my point is that the newest articles should be at the bottom not at the top just like how the newest message in chat clients appear at the bottom.

The philosophy of a design should be to minimize the amount of time a user has to learn the interface and try to be as similar as possible to other interfaces the user has used previously to avoid getting mixed up from time to time.

Almost all websites are like this. It’s quite sad actually. Sort of like how every website puts black on white background instead of white on black. It’s the exact opposite of the best solution. I don’t think I’ve ever seen a site where the items were ordered properly, which is quite disappointing – at least someone out there should be trying to do it the right way around.



Game Design: Not Enough Focus On Fundamentals

Nothing irritates me more than seeing poor animation in games. Most games can’t even animate people walking up hills properly, its pathetic. Instead, they spend all their money on graphics. This is what I can’t fathom. Graphics really don’t matter. They’re just there to look good. Animations on the other hand do matter. If a person can’t walk up a hill then something is wrong with that universe. Another common animation that goes wrong is going up ladders. In halo, the animation of you going up a ladder is the same as you walking horizontally (except obviously you travel vertically). It’s ridiculous. It totally ruins the immersion of the game. Unlike graphics, you don’t get used to it because it makes no sense.

Another example from Halo is that when picking up a weapon, the weapon just teleports to your person onto your back without so much as a “hello”. How does that work? This teleportation technology could be used against the enemy with deadly effect.

Games developers should focus on AI and animations, not on raw graphics.