Behind every web site: Web Design Usability Principles

Jul 27, 2012 by     2 Comments    Posted under: Business Success, Design, Interactive


Web Design isn’t about the layout, the colour, the look or the impact of a site.  In fact, behind every great website is a great web design usability interface. Success or failure of your website depends on user the web design usability interface. A website is your first impression out there in the real world… so it’s important that the user interface provides everything that the end user is looking for , easily, while on your website. Success or failure of your website depends on user the interface. Viewers, surfers, user… a call them what you will, cannot find what they seek if the interface is poor.

Jakob Nielsen, a Denmark web usability consultant, suggested the following heuristics (must haves!) for user interface design:

Visibility of system status
A website should always keep users informed about what the site is about, what page they’re currently looking at and where to click. It is recommended to have your site’s title and page name visible on every page so that users know their whereabouts.

Match between system and the real world
Websites should speak the target audiences’ language, with words, phrases and concepts familiar to them, rather than using technical terms. The copy should be relevant, engaging and provide learning. It should also be streamlined and efficient.

User control and freedom
Viewers often click for the stake of well, clicking and find themselves on a page that they don’t want to be on. Make sure your website has clearly marked “exit” to leave any unwanted pages… and back to the pages they want to be on. Similarly, users sometimes will click on links that takes them to another page while leaving the page they are visiting. To remedy this problem, websites should support undo and redo. For example, having links opened in a new tab or new page instead of having users leave the page.

Consistency and standards
The intended audience should not have to wonder whether different words, actions or layout mean the same thing. Websites should follow conventions (e.g. font color and size consistency, same header and footer height across pages, image size and etc). Make sure all pages on your website have the same look and feel. If not, users will think they’re on another website.

Error prevention:  Recognize, diagnose, and recover from errors
A good design should prevent problems from occurring in the first place. For example, when designing a contact us form for your website, you should clearly mark the required fields. Somewhere on your contact form, you should include *(denotes required field). If an error still occurs, be sure to send the users a clear error message. The message should be worded in plain language (no codes), indicate where were the errors and suggest a solution on how to fix the errors.

Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. Instructions for use of the website, such as sitemap should be visible whenever appropriate.

Example: In interface speak, website links have 4 states.  Make use of these to ensure that users know where to click, where they’ve visited and what page they’re on at all times. Here are the 4 states.

a:link {color:#000000;}      /* unvisited link */
a:visited {color:#666666;}  /* visited link */
a:hover {color:#CCCCCC;}  /* mouse over link */
a:active {color:#FFFFFF;}  /* selected link */

Help and documentation
Even though it is better if the website can be used without instruction, it may be necessary to provide help and documentation,  such as a FAQ page that contains information related to what the user is trying to find. Have a “contact us” link visible on every page, so they can email you with any issues, questions or concerns.

Why is this important? Consider this: You may have the greatest SEO campaign or Google Ad Word Campaign, but if it leads your intended audience to a site that isn’t providing them with the expected web experience, you’ve just lost them.


Is your website design usability optimized for user interface? 

 

About the author

Qing Hu Qing is a highly technical and talented web developer. She stays up to date on the latest in web and social media and her strong web development skills include HTML5, CSS, PHP and MySQL. Her ability to think beyond the code, and get creative, makes our web projects come to life. If you’re into all things web – be sure to subscribe to Hoopla!

2 Comments + Add Comment

  • A successful website combines clever user-interface with effective layout, images and content.

  • Well, you’re definitely somebody who has something to say that people need to hear. Keep up the great job. Keep on inspiring the people!

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Subscribe to receive the latest posts on marketing, branding and design!

Enter your email address:

Latest Posts

Designing Digital Properties For Business

Designing Digital Properties For Business

Designing digital properties is more important than ever for business, and no matter what industry ... Read more

Flexing Creative: Increase Brand Value

Flexing Creative: Increase Brand Value

Brand value is based upon the sum of all its parts. Those parts are: a brand name, its marketing, th... Read more

Web Design: Tiny Factors that Make a Big Impact

Web Design: Tiny Factors that Make a Big Impact

Web design doesn't only mean website design. If you're creating any digital product, be that a websi... Read more