A User-Friend Interface: The DOs and DO NOTs of UI Design

How can you create an intuitive website or web application? What are some common follies to stay away from? How do we keep users coming back for more? And how is designing a website like cooking chicken? This article describes some guidelines that can help you as a programmer or designer to channel your creativity, and design a user-friendly, ergonomic web site. These guidelines range from site structure to wording and imagery, this is the whole package!

Creating a user-friendly website can be a little bit like cooking chicken. If over-cooked, nobody really enjoys it — in fact they just look forward to clearing the palette with something else. If under-cooked, we end up in the hospital with salmonella. OK, perhaps our site won’t send anyone to the ER, but it could certainly make them leery about coming back for more! If cooked properly however, it will be a nice all-around experience for all, and our friends will be begging for the recipe.

So how do we cook the perfect web-site? Well, honestly, perfection is perhaps a little bit high of an expectation, but we can get nearly there if we follow some basic rules. Oops, I used the ‘r’ word (I see you all grimacing). Sorry, let’s change that to principles! Or maybe super-fun-happy-guidelines. Ahhh — much better.

This article will cover a number of important principles we should adhere to when charged with the responsibility of designing a User Interface. Keep in mind that these are not necessarily new ideas, but rather proven concepts. Now I know that the typical programmer loves to think outside the box, and I am no exception. We don’t like to be forced to conform. But if we think too far outside the UI box for the sake of originality, we could over-cook our chicken. This is because we risk breaking the first guideline, which I will cleverly refer to as Guideline #1.

{mospagebreak title=Guideline #1}

Now that I’ve forcefully grabbed you attention with such a catchy title, let me tell you what Guideline #1 is:

NEVER MAKE USERS THINK.

It’s that simple. But it’s that important that I deemed it appropriate to use all capitals. This must be indelibly engraved into the forefront of our designing mind!

The reasoning behind this is that people don’t want to acknowledge that our website is unique. Sure, it’s got a different look, but if there’s a different feel than the entire World Wide Web people just won’t like it. It took them this long to get their 12-year-old kids to help them understand how to get around; they don’t want to learn a whole new set of rules for your site alone!

Alright, now that we’ve established the most important rule of User Interface design, let’s move onto some proven-to-work ideas.

Use Gateway Pages

No, I’m not referring to the infamous scheme used by SEP’s of filling useless pages with key words to lead people to your site. What I mean here is that if you have different forms of content to serve to different groups of people, give them the option to choose immediately.

For instance, does your site offer English, Spanish, and French? Then don’t give people everything in English with a little menu at the top to toggle languages. The very first page of your site, the entrance, or ‘gateway’ page, should make them choose before doing anything else. The same applies for Country websites. Oh, and don’t make people choose again with every visit, remember their choice with a cookie.

Search

The two main ways for people to access content within your site is to either browse through your sites navigational structure, or to just search for their topic of interest. A search feature pretty much stops being a novelty, and becomes a necessity when your site has over 25 pages.

To facilitate this, a very important guideline to follow is that you don’t want to make people search for a search page. Just give it to them! On every page! Nothing elaborate, just a little text field and a button that says… you’ll never guess… “search”. Nothing more is needed here. If you want to give them any further options, maybe someone filters, do it on an optional “advanced search” page.

{mospagebreak title=Lost in Space}

Have you ever stumbled into a very ‘creative’ website, and found yourself very quickly searching for a creative way to get out? The designer of the site has assumed that because he knows how to get around, everyone else should as well. Not so. This is an example of what not to strive for.

Your site’s navigation and page hierarchy should be intuitive. This is easily accomplished by directory tree, or my personal favorite, the “fly-out” menus. Once again, this just ties back into Guideline #1. People are raised from infancy with a bottle in one hand, and a mouse in the other, navigating the Linux/Mac/Windows OS by menus and directories. We don’t want to force them to learn a new way to get around, no matter how creative we think it is.

We Are the Knights That Say “Click Here”

ARRRRGGGHHHHHH! Stop saying that! “Click here” has become a phrase that people no longer care to see. Test it yourself. Skim a page, and I guarantee that your eyes will not be drawn to any links titled “click here”. We’re becoming desensitized, our minds and eyes will subconsciously move on to look for better things.

To resolve this, take the sentence:

To see why I don’t believe koala bears should qualify as marsupials, <a>click here</a>

Now, change it to:

You’ll want to know <a>why I don’t believe koala bears should qualify as marsupials</a>

There. Much catchier.


Use Web Standards

I have written a separate article to explain the workings of Web Standards as well as the advantages of using them. I encourage you to read that article. <shameless self-promotion>I also encourage you to give me a fantastic rating! </shameless self-promotion>.

Basically, Web Standards are a clever and efficient way to separate content from presentation by using XHTML and CSS2. Advantages include cross-browser consistency, smaller file sizes, and ease of maintenance. This is the way of the future man!

We’re Not Interior Decorators!

Remember this, that in case the actual purpose of your site is to showcase your design talent, people really aren’t concerned with the design. They really want the content and/or functionality. Don’t get me wrong, I’m not saying to barf up straight text on the screen with no formatting. What I mean is that your design should be so fluid that people don’t even notice it. They don’t have to think about it.

Essentially, if designed properly, people will enjoy the experience and return. This is not because they are consciously admiring the UI, but because it felt natural. Any fancy effects or design you want to add in should not detract from the usability or ergonomics of the rest of the site.

A good way to accomplish this, is to remove unnecessary clutter. Look at your page, a veritable collage of clip-art, flash, stock imagery, and a funky little trail that follows the mouse. Ask yourself: what can I remove, without sacrificing any true functionality and usefulness of the site? Be honest, the mouse trail does not really constitute functionality, it’s mere eye candy (and usually annoying eye candy, at that).

Also, if we are designing an application where we’re determined to use images as tooltips and buttons, make sure we are consistent. Look at the top toolbar of whatever browser you’re using right now. The images are useful, and they have a consistent look and feel. Chances are that choosing random photos and clip-art from Google images won’t deliver that same consistency. This will result in a confused and distracted audience.


{mospagebreak title=We Need Textual Healing}

The guidelines around decorating kind of lead nicely to an understanding of how to treat text. Do not clutter! Learning a “for” loop in server-side programming is the only time we should use 10 different font sizes! Fight that tendency to use h1 through to h5!

To accomplish this, we should set some standards for ourselves at the outset. In our stylesheet, define the body font size, maybe redefine h1 (and maybe h2 if critical), and then perhaps a smaller font for footer and photo captions. Then leave it at that. If at all possible, keep them all the same color, and make sure it’s a nicely contrasting color with the background you’ve chosen.

Don’t forget though, that more important than the look of the text is the actual content itself. We should be writing the content around the users. This will aid in both search engine positioning, and in users actually understanding what the heck is going on! Always explain things in plain English (or your language of choice, just keep it plain). Remember, most of your users are not programmers, so they don’t all understand geek-talk. This is a good thing! I mean, think about it, if they were all programmers, we’d be out of work!

One last guideline around avoiding text clutter, is just to omit needless text. For example, take the sentence “if you want to see pictures of the vacation we took in Timbuktu, click here to proceed to the photo album,” and shorten it too “here are some pictures of our Timbuktu vacation.” Feels as refreshing as a nice haircut, doesn’t it!

I read some research done by one firm, and they found that the pages with the highest retention rate never exceeded 600 words of content. Keep that in mind!

Conclusion

This is not necessarily an exhaustive list of to-do’s in website design and usability. These are however, a list of some of the more common mistakes people make. This is especially the case when the programmer is given the additional responsibility of doing the UI design.

Remember, these are tried and true, and you will reap the rewards of a user-friendly website if you implement them! No salmonella here, just people begging for the recipe!

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye