HomePractices Page 3 - A User-Friend Interface: The DOs and DO NOTs of UI Design
Lost in Space - Practices
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!
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 frompresentation 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.