UI 101: 7 Simple Rules to Good Design

I’ve gotten requests from both developers and beginning designers to write a post about common rules of good UI/UX design. Whereas it’s a trade that takes time to perfect, some basics can be grasped fairly easily.

In this post, I look at some common sites and where they succeed and fail in good UI/UX.

Oh and at the bottom, I’ll reveal the BAD site of the week, and it’s pretty bad. Enjoy.

Rule #1: Make Your Highlighted Content Pop

I always try to think like the user. Can I find the most important elements on this site first? Is anything in the way of me finding those elements? Consider helping people find it rather than adding unnecessary and confusing bells and whistles to thwart them.

NYTimes

New York Times

CNN

CNN

Let’s look at 2 news sites, 2 sites that have lots of content, The New York Times and CNN.

First take a look at the NYTimes Science section. (Please enlarge for full effect)

The column on the left is their featured story – the picture drives the eye there, but look at the color and spacing of the font below the story. Can you read that comfortably without being distracted with the “Submit Your Pet Photo?” just to the right – in the center of the page?

Now take a look at CNN’s Health section. Do you have questions about where you should be looking? There are a number of important elements around it, but the competition for them is hindered by their placement because the main story is in the middle. The Times’ main story, on the other hand, is on the left; the dogs that steal attention in the middle.

Ads are obviously (and sadly) a big part of our media, so those aren’t shrinking any time soon, but if your reader is distracted by less important stories, you’re doing something wrong.

 

Rule #2: Respect the White Space

If you have a news site, it can be hard to delegate the right amount of white space to a page. Considering that most of you aren’t designing a news site, respecting the white space, or breathing room, wont be as difficult.

Table 1

Table 1

Table 2

Table 2

So let’s look to table layouts for this, a perfect place to see breathing room (or the lack thereof) in action.

Enlarge Table 1. By the time you get over to the far right, you have no idea which row you’re on. The padding isn’t horrible, but the page isn’t breathing. The black lines definitely differentiate the data, but having a line for EVERY row and column isn’t necessary if the correct amount of spacing is available.

Now consider doing something very simple, like adding a light color to every alternating row and giving it some padding as seen in Table 2. Better, no?

Granted there is less information, but I could not find a decent example, so just imagine dragging this effect all the way to the right on the above example and you’ll get the drift.

 

Rule #3: Let Your Copy Breathe

There are lots of articles written about kerning and letting. All you have to know at this point is to give your copy space to breathe (a la above Rule), meaning, give ample space between lines and don’t make the font too small.

NYTimes

New York Times

Daily News

Daily News

Take a look at these 2 examples. This time the NYTimes wins the prize, and the New York Daily News bites it.

Both win in having narrow columns. You never want to make the copy space too wide, as it’s hard for the eye to wrap effectively. But look at the size of the Daily News font in comparison to the NYTimes. And look at the spacing between lines and then again at the spacing between the paragraphs.

The NYTimes invites you in, while the Daily News doesn’t, and that can cost you readers and quickly.

 

Rule #4: Manage Your Menus

Are you a horizontal nav or a vertical type person? I have to say I definitely prefer horizontal navs for the top-level, but vertical navs can often come in handy when you have a lot of information and need a manageable way of laying it out.

NYMag Fashion

New York Magazine Fashion

LA Times

LA Daily News

The best way to employ them is when you have a user click on one of the main categories at the top. Once they’re in the category, display the left-hand vertical nav.

Take a look at New York Magazine’s Fashion section. First off, you have no questions about where you are. FASHION is big and clear. Secondly, New York Mag doesn’t force you to go back up to the top menu for navigating within the category.

Remember – it’s all about the user. Make things easy to get to!

Now here is the LA Daily News. First of all, what’s up with the tab design? That went out 10 years ago. Then there is no secondary link section at all. It all lives at the top drop-down.

The problem with this is that the full page is rather long, and when you scroll down far enough, the site design is so uninspiring that by the time you scroll back up to go to a subsection, you want to poke your eyes out, not click on the drop down.

 

Rule #5: Reconsider Left-Aligning Your Whole Site

Adobe Home Page

Adobe Home Page

Adobe Inner Page

Adobe Inner Page

Take a look at the two examples from the Adobe site.

The home page is gorgeous: the image is stunning, the page is in the middle of your screen, beautiful. But then you click on any of the links up top and you suddenly have to look to the left because – why I can’t imagine – they decided to move all their content there.

Poor choice. For one, you’ve already trained your users to look at the center for the content, and secondly, the left-aligned site actually is uncomfortable for the reader.

Unless you have a tiny screen, and most of you don’t, you’ll have to actually turn your head to read a left-aligned site, so my advice? Stay away from left-aligning your site – you’ll drive people mad.

 

Rule #6: Make Stuff Legible

When I first started making sites in 1999, the common form was to make everything tiny.

Tiny scroll boxes, tiny tech-like fonts, tiny everything. It was meant to represent (I guess?) how high tech the times had gotten. We were all saying “Hey, look at this nifty widget – this is what the future looks like”. But it proved to be unreadable and a general pain in the you-know-what, so the web wised up, and now you’ll notice that most of the better sites use larger fonts, clearly defined areas and don’t shrink things into tiny boxes and force you to look for the itty bitty scroll bar to get to some place in the site.

No pictures. Just don’t shrink $hit, and you’ll be fine.

 

Rule #7: Mind Your Color Combinations

Sade

Sade

Dyslexia

Dyslexia Test

I love Sade, and I was sadly surprised when I saw her site. The layout is beautiful, the colors great. But not for reading.

Mail Chimp

Mail Chimp

Dark backgrounds work, but white text on black is very hard to get through, unless the font is perfectly selected. I would attempt at the simple Arial in her case, where the Lucida family comes out poorly pixelated and hardly readable on the black.

MailChimp Inner Page

MailChimp Inner Page

Now the Dyslexia Test. Need I say anything about why the colors don’t work together?

Ok fine. The green is extremely lime and abusive to the eye, and what’s worse is that it takes up most of the page but isn’t the most important element of the site (Rule #1).

The most important element of the site – the test itself – is in narrow column. The yellow is a poor choice as well. Thumbs down.

But then there was MailChimp.

MailChimp recently redesigned their site from a soothing yellow to this more high-contrast blue/red combo. It might seem crazy, but it’s not. The color combo they chose is actually one of my favorites – the turquoise and coral can be found all over Tibetan and Nepali jewelry, and the high contrast colors work well together.

The font is a great, fat sans-serif, and all the inner pages have a clear, white box that content sits in. Thumbs up.

  • Dr. June Idzal

    Kat,
    Great advice to web designers and evaluators! Kudos to you!
    June

  • Excellent job, Kat. Favorite phrase: “abusive to the eye.” I may steal it for a personal art project I’m doing: photos of bad hair and makeup at Walmart, TJ Maxx, and the like…really.

    Did you consider an order of importance for the 7 or saying it doesn’t matter, or whatever? It raises questions for me about what’s important to most people…readability, color and design, content… All that stuff is has been researched to death, I’m sure, and I guess ultimately one needs to go with your gut. Like the great screenwriter William Goldman said about what it takes to make a great movie, “Nobody knows anything.”

    Also, there’s current fashion, and also the psychology of color and fonts. Like I’ve noticed Banks are using variants of the old standard red, white, and blue’s, orange/gray’s popularity the last few years…also, certain industries use certain color, like green for financial guys, blue for insurance and stability, etc. BTW, turquoise…always good. It’s my fave.

    Since seeing “The Social Network” I’ve thought a lot about Facebook. I really believe disigne has a lot to do with it’s success. There was even a refernce to it in the film. It seems like a good example of simplicity to me, mostly…lots of white space, simple fonts, easy on the eyes (they really need to reconsider the black thing around the photographs…seems to be anti to everything else about the space. And man, they really know what I like. They’ve got me totally nailed in the right hand column…much better than YouTube and some of the others.

    How about interactivity and connectedness to other sites? I realize it’s out of the “design” area, but should it be considered when you are creating your design? I was just thinking about Zerox and how they made a new logo because it has better potential for animation in the future.

    • Lots of good points. There is definitely a color/font trend depending on the type of site you’re visiting. When I was redesigning an interesting money related web-based application, my client mentioned he’d like the “seriousness’ of a bank, so we went with lots of blues and grays. It’s almost a default, no brainer. Wamu was different, but it’s gone now. 🙂

      Interactivity depends on what the site’s purpose is. I always think at least some notable interactivity is important, but if it’s a blog, it doesn’t have to be anything fancy. I also don’t like when too many things are going on all at once; it’s incredibly distracting.

      Connectedness to other sites? It all depends on your purpose. Most people don’t try to push their visitors to other sites, but if driving traffic elsewhere is part of your business goals, then making that obvious would be important. It just goes back up to Rule #1: Make Your Highlighted Copy Pop.

  • Pingback: Featured Work: Office Autopilot()

  • Bivian

    I can see that you are an expert at your field! I am launching a site soon, and your data will probably be very fascinating for me.. Thanks for all your support and wishing you all the success.

Build an Exceptional Brand:
Access the Free Video Training and enter to win
a Free private (just you and me) site review.
Free Training
Authentic Brand Colors by Kat Tepelyan, get your first free chapter
Download the 12 Branding Archetypes Table
And see what role you've been playing in your business. Is it the right one for you?



The Epic Brand Brand Archetypes and Essences
Tell me a bit about yourself
PGlmcmFtZSBuYW1lPSJsY19jb250YWN0X2Zvcm0iIGZyYW1lYm9yZGVyPSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2MDAiIHNyYz0iaHR0cHM6Ly9pZ290a2F0LjE3aGF0cy5jb20vZW1iZWQvbGVhZC9mb3JtL3hocmNzenNudHRmZGd0aGd3ZHJuY2ducGN4eHhkem5uIj48L2lmcmFtZT48c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCIgc3JjPSJodHRwczovL2lnb3RrYXQuMTdoYXRzLmNvbS92ZW5kb3IvaWZyYW1lU2l6ZXIubWluLmpzIj48L3NjcmlwdD4=