How To Do UI Design, In 8 Easy Steps

When Prof Ben asked us what workshop we think should've been included, in the mid-term feedback, I remember leaving the field blank because I couldn't think of anything to write. I now regret that decision. In the past couple of days I have come to realize that people don't understand the underlying mechanics of design. I have been embroiled in a two-day-long argument with what to do about Sportup's look, and I think it would do to explain some of the most basic principles here, on this blog, once and for all. I hope this would be of some help to you; if it doesn't make sense - feel free to shoot me an email, or a comment if you're so inclined.

What Is Design?
Design is how your users interact with your product. That's all there is to it. Simple as pie.

Now, there are two misconceptions about design that I want to clear up immediately: hopefully for the first and last time. The first misconception is that good design has to be pretty. The second misconception is that good designers have an innate feel for beauty, and so therefore design by sitting in front of the computers and working until something feels just right. It does not. They don't. Design isn't some wishy-washy thing that people with easels and paintbrushes tucked behind their ears waste their time indulging in. It is as much a science as it is an art, and with computers - the field of study that is related to design is called Human Computer Interaction. There are principles in HCI, just as there are principles in software engineering, and the results for breaking them are the same in both: you end up with an unusable app. What are they? I'll come to that in a bit. But before I do so, let's talk a little about the two misconceptions:

Misconception 1: Good design must look pretty
You may not believe me on this, so let me show you a couple of things, to make you understand.

The Drudge Report broke the news on Bill Clinton's affair, and till this day continues to exist with the exact same design it had back when it was first created. Jason Fried of 37signals calls it one of the best designs he has ever seen, and wrote a 1000 word article on why he believed it to be so.

Jakob Nielsen is the world's leading authority on web usability and design. His site looks like a piece of shit. But when you're there, you find something odd happening: you know immediately where to go, what to read, and where you are on the site at any point in time. Nielsen's site has good design.

In 2005, Blogger contracted Douglas Bowman of Stopdesign to create and implement a host of themes that are still in use today. Of those designs, Bowman created one that is almost universally lauded as timeless: a simple, bland, minimalistic theme he named Minima, the same theme I'm currently using on this blog. Why is Minima considered good design? Simple: it's used by hundreds of Blogger blogs, all over the world, for all kinds of topics, by all kinds of people. It is timeless. Ugly? Yes. But good design all the same.

Still not convinced? Well, consider this: when Paul Graham built Hacker News, he purposely chose a garish colour and a sparse, ugly design. He made the site for programmers to use, and he wanted to discourage all other kinds of people from joining the site (and therefore the discussions). Hacker News is today one of the few online communities with a consistently high level of intelligent commentary, and this is by no means an accident: Graham's built all sorts of clever design hacks into it to encourage just this level of discourse. Ugly it may be, but bad design it is not - HN's look does its job, and does its job well.

Now you're probably going to say - sure, dude, use bad design when you want to attract programmers (who don't have a sense of design anyway) ... but when you're building for the real world you have to look pretty! Really? Wrong. Two of the most successful sites ever built on the Internet have been based on particularly weak aesthetic foundations, and if you don't believe me, take a long, hard look at a) the Google home page, and b) Craigslist.

Misconception 2: Designers design by feeling.
They do not. I'm not going to lie and tell you that designers are as hard-assed about logic and testing as programmers are, but on the other hand they're not some sculptor who plays with clay and goes through a thousand iterations before they finally find the inspiration to make 'the one'.

If you're working with a good designer, anyone who's done some outside work before, you'd know this. When I was in 9rules I complained to Mike Rundle, the designer-in-chief in charge of the site's overall look and feel, and he told me to wait awhile, to see if things changed. And it did. Mike's original design didn't feel right, but over time I grew to love the way the site worked, the way it felt. The 9rules community is, to this day, one of the best things that has ever happened to me online.

Designers who know their stuff work around several universal principles. When I visit sites with friends, I often hear them complain about this design or that design, saying things like: "Oh that's just ugly. How did she get so successful?" or "I think I can design better than that."

What they don't get is the simple truth: they can't. And why? Well, that's simple too - they're missing the point. Design isn't about aesthetics. It isn't even about choosing the right colours. Design is - at its very core - about building the right things the right way, and doing it in a manner that is befitting of the user.

Everything else is secondary. Even looking pretty is secondary. A user who can't use your site isn't a user at all - he's just a statistic. Here and gone in the blink of an eye. I should know - I've gotten plenty of those in the four years I've run my sites.

Eight Simple Steps To Good (Web) Design
As the title says, here are eight things that are pretty much universally true. I hope they do you some good.

1. Get their attention. Period.
This isn't true for most of HCI (which is concerned with the design and implementation of computer interfaces) but it is true of the web.

Internet users are fickle-minded people. Most visitors you'll get to your site will stay around for no more than 3 seconds, tops. The trick is to get them to pause - even for a little while.

Everything you'll learn about webdesign is built around the central philosophy of getting. People. To. Stick Around. For Awhile.

Get that into your heads. I spent four years figuring these things out, I'd only wish I'd learnt it earlier.

2. Important things above the fold.
The fold is what you see when you load a web page, and you don't scroll down. (Anything you have to scroll down to see isn't above the fold.

The term originated when newspapers still existed were first introduced. The fold used to be the top part of the front page - the bit that shows when it's folded in half and on a newsstand. Ads above the fold sold for twice the amount of money that of ads below the fold, and for good reason - those ads (and the headlines) were the first thing a prospective newspaper reader sees.

3. Keep to the left.
There is irrefutable evidence that users pay more attention to elements placed on the left side of a webpage as opposed to the right side. In fact, the actual figures are 69% (of attention) to the left, and 30% to the right. When designing a web page, place the most important elements to the left of the page. This is one reason why so many sites place their copy to the left - it gets more attention, and therefore makes it easier for the reader to understand what the site's all about.

Keep to the left for important content, you'll have far less trouble otherwise.

4. Design to the F

A direct implication of steps 2 and 3 is that the most important content should be placed on the 'F' of attention.

Users view websites according to an 'F'. Design in anticipation of the 'F' and you'll find that - oddly enough - users would know where to go and how to find things. Sites that employ the 'F' to their advantage are often described as intuitive, simple, easy-to-use. Use Facebook? Take a look at the current redesign. Where are the most important functions located?

To the left, and to the top, correct? That is the 'F' of attention right there, in action, acting right under our noses.

5. Understand visual importance
Visual importance is a little hard to understand. One of the simplest examples is that of colour. If you've got something small, and placed to the very right of the page (far out from the 'F' of attention) how are you supposed to draw attention to it?

One simple way is to use colour to your advantage. Colour it in with a brighter colour and you'll compensate for the element's position on the page.

Visual importance gets a lot more complex than this, though, and a lot of it is subtle stuff like rounded borders and smooth gradients (and the kinds of emotional responses they get out of you). If you've read this far, and you're interested in becoming a good designer, I'd recommend Andy Rutledge as a starting point. (Psst: read his post on design gestalts).

6. Keep things lean.
Choose a good width for your content. Wider content is harder to read. The optimal width, I have found, is 500-600 pixels. Any wider and you'll have to adjust by increasing your font size.

Don't believe me? Grab a nearby book. Chances are that there aren't more than 20 words on a single line. There's a reason for that - it turns out that a reader's attention tends to drift away the longer and denser the line is. I can't remember where I first learned this - but it's a principle I apply to all the writers who come to Novelr for design advice. Want to use long text widths? Then increase your font size - you'll have less words per line than you would if you didn't, otherwise.

(For the curious types: here's an article on the phenomenon.)

7. Use less columns
This depends largely on whether you're interested in being read. I'll admit here that this doesn't apply to most webapps, but if you're designing a text-heavy interface (such as a blog, or an ... Argo,) you'd do well to control the number of columns that appear on any one page.

User attention is split by number of columns. The more equal-width columns, the more distracted the user becomes. The solution is to either cut down on the number of columns your site employs, or to subtly emphasize relative importance using visual cues like shape and colour. How? Don't look at me - go out and experiment for yourselves. And that, perhaps, leads me to 8:

8. Test a lot. Use good tools.
... because that's the only way to know if the design's just right for you. Good tools, you ask? I personally enjoy Clicktale, and Crazy Egg. Though analytics and plain vanilla user testing works just as well too.

Good design is timeless design, and timeless design takes time (pun intended). I've only done one so far, and I'm still largely hit-and-miss with my work.

But I intend to get better at it. And if you're working with a designer who knows his stuff? Please, please stay out of his hair. He knows what he's doing, and feedback is good; but please - try to be fair.