User-Centered Design – The Key to a Usable Website

Usability imageIn order for your website to be successful, users must visit the site and successfully find information or accomplish tasks. How can your ensure your website will be easy to navigate and users will achieve their goal?  By ensuring “usability” through user-centered design. Before we examine user-centered design, let’s take a look at usability…

What is usability?

In the context of a website, usability refers to how well users can learn and use the site and how satisfied they are with the process. According to Jakob Nielsen, a web usability expert, usability consists of five quality components:

  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the site?
  • Efficiency: Once users have learned the site, how quickly can they perform tasks?
  • Memorability: When users return to the site after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the site?

What is user-centered design?

In the early days of web development, websites were tested for usability at the end of the development phase. Usability testing consisted of a “validation” of the design. If all went well, the design was good. However, if there were usability issues, then the cost to correct was high.

User-centered design is a structured approach to producing a website that involves users throughout all stages of the website development. By incorporating user-centered design, the needs of the users are considered and the usability of the website is continually validated throughout the development process. This continual validation will ensure that the final website is usable and meets end users’ needs without incurring high redevelopment costs.

By incorporating user-centered design, you can improve the effectiveness of your website while reducing the cost of development. In the world of website development, it’s like eating your cake and having it too!!

Rendering Engines – They Have the Power!

Last Thursday, J. Cornelius of Coffee Cup and the Atlanta Web Design Group (AWDG) stopped by our Web Design Usability class and talked about various topics in web design.

He made an interesting comment about designing for different browsers.  J. advised that you really didn’t have to struggle so much to make sure every web page looked the same across every browser, just make sure the user had the best experience possible for the browser they used.

What makes each browser display the same html code differently? It is the rendering engine.

A rendering engine is the code that tells the browser how to display the html and available style information in the browser window. By paying attention to a browser’s underlying rendering engine, web developers can have a better understanding how their page will be displayed.

Released by Mozilla in 1998, Gecko was the first reusable-rendering engine [Source:  Web Design In A Nutshell]. It was soon followed by Microsoft’s Trident, Opera’s Presto and WebKit.

According the Wikipedia, Gecko is used by a variety of products derived from the Mozilla code base, including the Firefox web browser, the Thunderbird e-mail client, and SeaMonkey internet suite.

Trident, the web browser engine from Internet Explorer, is used by many applications on the Microsoft Windows platform, such as Outlook Express, some versions of Microsoft Outlook, and the mini-browsers in Winamp and RealPlayer.

Opera Software‘s proprietary Presto engine is licensed to a number of other software vendors, and is used in Opera’s own web browser.

KDE‘s open-source KHTML engine is used in KDE’s Konqueror web browser and was the basis for WebKit, the rendering engine in Apple’s Safari and Google’s Chrome web browsers.

For a look at the various engines and where they are used, check out Wikipedia’s Comparison of Layout Engines.

Rocket Surgery Made Easy

Picture of Rocket Surgery Made EasySteve Krug has done it again! The highly respected usability consultant has written a sequel to his very successful book on usability Don’t Make Me Think.  While his first book focused on usability design, this new book focuses on usability testing and, once again, Krug grabs your attention with his new title, Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.

If you have read Krug’s first book, then you are familiar with his informal while engaging writing style. As with his first book, Rocket Surgery Made Easy is purposefully kept short and, as you can assume from its title, quite a humorous read.

Krug divides the book into two parts focusing on both the testing and what to do after the test. The first part is called “Finding Usability Problems” and contains the nuts and bolts about conducting usability tests.  It not only includes valuable information concerning the execution of the tests but also includes actual samples of scripts, forms and checklists.

The second part is called “Fixing Usability Problems” and addresses what to do with the information you’ve collected. Krug basically advocates two approaches to fixing your usability problems:  “tweak, don’t redesign” and “take something away”.

Tweak, Don’t Redesign

Krug cautions about the temptation to redesign when confronted with a usability issue.  Small tweaks and fixes just don’t provide the same satisfaction as a redesign.  However, small tweaks are usually quick and easy to implement and do not have the risk of being sidetracked or never finished.

Take Something Away

The reason many sites are difficult to navigate is because they are too busy. The users cannot find what they are looking for because they have too much stuff to go through. By removing some of the “noise”, it makes what is left easier to find. You can fix a problem by literally taking something away.

Krug points out early in his book that this method is not intended for all development projects. Where life and death situations are dependent on the usability of the interface (i.e. hospital systems, etc.) he recommends engaging a usability professional. However, in those situations where you cannot hire a professional, this book will definitely help you make your site more usable.

Why Am I Being Asked This?

Web Form Design WordleI recently listened to a very interesting pod cast by Luke Wroblewski on SpoolCast titled Innovations in Web Input.  Known as an interaction designer, Luke specializes in web forms and visual web usability.

Luke touched on quite a few topics related to the evolution of forms and form input on the web.  He talked about his days at Yahoo along with the development and impact of Google’s instant search.  He also discussed a new site, Quora, to illustrate how future sites will incorporate profile information from existing sites so that the user will spend less time on data entry.

This idea of entering less and the web “knowing” me piqued my interest and I decided to do some research and look at some of Luke’s blogs on the subject.

In Luke’s blog titled Web Forms for People, he expounds on the impact of Web form design.  Luke is an evangelist for the importance of Web forms.  “Whether it’s checkout in e-commerce, comments on news articles, or managing a fitness routine – Web forms often sit between people and their goals.” How can a site ensure the user’s goals and the site’s goals are aligned?

He recommends focusing on the core purpose of the Web site while designing a Web form. This will keep the users from asking, “Why am I being asked this?” and bouncing off the site before the goal is reached.

He illustrates the point by comparing two sites and their different approaches to gathering profile or user data:  tookmark and Brightkite.  Additionally he shows how Brightkite, with a simple redesign of its Web form aligned the form input to the goals of the site.

Luke recommends asking the following questions when designing a Web form:

  • Is this information necessary to give people what they want (the core purpose of the application)? If not, chances are people will question why they are being asked.
  • Will there be a better time to collect this information? Asking people for information once they are already using an application is often more successful than asking them before they start using the application.
  • Is there a way to explain why certain information is required? Clarifying how the information being collected aligns with people’s goals helps reassure them that they are making forward progress.
  • Are there better ways of collecting the information needed? After all, Web forms are not the only way to get input from people online.

By following Luke’s recommendations, a designer can improve the user interaction and satisfaction with a site. But most importantly, the designer can improve the impact of the site  – the crucial interaction that keeps the business running.

For more information on Web form design, I recommend Luke’s book, Web Form Design: Filling in the Blanks.