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.
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.
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.
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.
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
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
I love Sade, and I was sadly surprised when I saw her site. The layout is beautiful, the colors great. But not for reading.
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.
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.