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.

Image
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.

Image

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

Image
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.

Image

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.

Advertisements

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.

 

 

GUI Design: White on Black or Black on White?

Any hardcore hacker or coder will swear by using white text on a black background, and all casual users seem to be happy with using black on white (BoW). I will explore why this is the case.

Suppose I have an alarm which works in the following way: the time you set the alarm to go off is when the device stops producing sound. So if I were to set the alarm for one hour, it would make a constant drone sound until an hours time where it became entirely silent again (until i switched it off – where upon it would begin producing sound again). Is this good design for an alarm?

I definitely think that this would work. You would notice the ‘deafening silence’ produced when the alarm activated – it would wake you up. I haven’t tested this but I’d love for someone out there to try this for me and post results in the comments.

The key about this is that its stimulating you the entire time you don’t need stimulating. Now here’s the kicker: black on white text is doing the same thing. The background, white, is stimulating the neurons in your mind – the photons trigger your retina to react. Black does no such thing – it cannot because black is the absence of any light stimuli. Of course your mind as a result of having no visual input could ultimately end up with having more neurons firing (e.g. if the colour black reminds you of some past event whereas white doesn’t) but this is a contrived counter case.

By setting white as a background, you are constantly stimulating your retina for no reason – the whole area that you aren’t interested in is being lit up, whereas the words (which you very much are interested in) are not stimulating your retina at all. It’s completely backwards.

So why haven’t GUI designers figured this out yet? For starters, books are black on white (due to the nature of ink being black, there’s no such thing as white ink (?)) and many designers are incompetent and use skeuomorphs. Since books are black on white, GUIs should be too, right?

Books cannot be read without an external light source such as a light (e.g. the sun). If there is an external light source, its almost always certain that the area of your vision outside the book is lit up too. For this to be not true, you’d have to be in space facing away from the sun while reading a book. The book would be lit up but the background wouldnt be (because the passing photons wouldnt hit anything). In this scenario you would quickly realize that the white background is uncomforatble to read on, just like using a monitor in a dark room.

I feel that a black background is always superior, but there is an argument that the background of the text should match the ambiance of the room – so in the case of being in a light room, the background should be light) but I disagree. When you can avoid stimulating your eyes for no reason, why would you choose to? It would just make your eyes ache more.