30 May, 2008

Misconceptions About Usability

Summary:

Misconceptions about usability's expense, the time it involves, and its creative impact prevent companies from getting crucial user data, as does the erroneous belief that existing customer-feedback methods are a valid driver for interface design.

Most companies still don't employ systematic usability methods to drive their design. The resulting widespread ignorance about usability has given rise to several misconceptions that warrant a response. (For the definition of usability and the basics of why and how to implement it, see my previous post.)


Usability Is Expensive

Yes, big computer companies have been known to invest in million-dollar usability labs. Yes, experienced usability professionals are very highly paid. And yes, large-scale user testing to compare multiple design alternatives across several countries can cost $200,000 or more. Ouch.

But most everyday usability projects are cheap. Small companies don't need labs; you can run user tests in a spare conference room. Rather than hiring expensive usability professionals with ten years' experience, you can teach existing staff how to conduct studies. And, even though international studies are great, you don't start there: just spend a few days testing five domestic customers.

Even with a budget of $200, you can do usability. The methods are incredibly flexible and scale up or down according to circumstance. On average, best practices call for spending 10% of a design budget on usability. That's a cheap way to ensure that you spend the remaining 90% correctly, rather than blow your budget on an unworkable design.


Usability Engineering Will Delay My Launch Date

Case study reports are typically issued by companies that have followed the entire user-centered design process to the letter, starting with field studies. These descriptions of the great and the good can be daunting for projects with smaller budgets and tighter schedules.

Usability need not be grandiose. The simplest user testing method I recommend takes three days, but even faster tests are possible -- especially if you use methods like paper prototyping, which lets you crank through new design iterations in a few hours.

One of the main benefits of letting user research drive design is that you don't have to spend time on features that users don't need. Early studies will show you where to focus your resources so that you can ship on time.

Finally, usability can save time by helping you quickly settle arguments in the development team. Most projects waste countless staff hours as highly paid people sit in meetings and argue over what users might want or what they might do under various circumstances. Instead of debating, find out. It's faster, particularly because running a study requires only one team member's time.


Usability Kills Creativity

Design is basically problem solving under constraints: you must design a system that can actually be built, that's within budget, and that works in the real world. Usability adds one more constraint: the system must be relatively easy for people to use. This constraint exists whether or not you include formal usability methods in your design process.

Human short-term memory holds only so many chunks of information. If you require users to remember too much, the design will be error-prone and hard to use because people will forget things when you overload their memory.

Also, if you're designing a website, it will be one of millions available to users and they'll grant you only so much of their attention before they move on.

These are facts of life. All usability does is to make them explicit so that you can account for them in your design. Usability guidelines tell you how people typically behave with similar designs. User testing tells you how people behave with your proposed design. You can pay attention to this data or ignore it; the real world remains the same regardless.

Knowing real-world facts increases creativity because it offers designers ideas about design improvement and inspires them to focus their energy on real problems.

Following design conventions doesn't destroy creativity. Conventions and standards for interface design are like a dictionary for the English language: they define the meaning of interface units and offer guidelines for stringing them together. But the dictionary doesn't define whether you're writing Harry Potter, a Stephen King thriller, or an Alertbox column. Writing offers ample creative opportunity, despite the standard expectation that you'll use language in ways that readers can understand. Interaction designers can be equally creative, despite a requirement that they design for the characteristics of homo sapiens.


We Don't Need Usability, We Already Listen to Customer Feedback

Market research methods such as focus groups and customer satisfaction surveys are great at researching your positioning or which messages to choose for an advertising campaign. They are not good at deciding user interface questions -- in fact, they're often misleading.

When a group of people is sitting around a comfortable table munching snacks, they're easily wowed by demos of a website's fancy features and multimedia design elements. Get those people to sit alone at a computer, and they're likely to leave the same website in short order.

The most famous example of the demo effect occurs with 3-D user interfaces, especially fly-throughs for complex data sets. These systems always look incredibly cool and compelling, yet they almost never work in actual use.

Seeing something demo'd and actually having to use it are two very different things. Likewise, what customers say and what customers do rarely line up; listening to customers uses the wrong method to collect the wrong data.

Luckily, the correct usability methods are cheap, easy to implement, and won't delay your project. So why would you rely on misleading methods that are typically more expensive?

Usability 101: Introduction to Usability

Summary:
How to define usability? How, when, and where can you improve it? Why should you care? This overview answers these basic questions.


What (Definition of Usability)

Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by five quality components:

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design 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 design?

There are many other important quality attributes. A key one is utility, which refers to the design's functionality: Does it do what users need? Usability and utility are equally important: It matters little that something is easy if it's not what you want. It's also no good if the system can hypothetically do what you want, but you can't make it happen because the user interface is too difficult. To study a design's utility, you can use the same user research methods that improve usability.


Why Usability is Important

On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website's information is hard to read or doesn't answer users' key questions, they leave. Note a pattern here? There's no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty.

The first law of e-commerce is that if users cannot find the product, they cannot buy it either.

For intranets, usability is a matter of employee productivity. Time users waste being lost on your intranet or pondering difficult instructions is money you waste by paying them to be at work without getting work done.

Current best practices call for spending about 10% of a design project's budget on usability. On average, this will more than double a website's desired quality metrics and slightly less than double an intranet's quality metrics. For software and physical products, the improvements are typically smaller — but still substantial — when you emphasize usability in the design process.

For internal design projects, think of doubling usability as cutting training budgets in half and doubling the number of transactions employees perform per hour. For external designs, think of doubling sales, doubling the number of registered users or customer leads, or doubling whatever other desired goal motivated your design project.


How to Improve Usability


There are many methods for studying usability, but the most basic and useful is user testing, which has three components:

• Get hold of some representative users, such as customers for an e-commerce site or employees for an intranet (in the latter case, they should work outside your department).
• Ask the users to perform representative tasks with the design.
• Observe what the users do, where they succeed, and where they have difficulties with the user interface. Shut up and let the users do the talking.

It's important to test users individually and let them solve any problems on their own. If you help them or direct their attention to any particular part of the screen, you have contaminated the test results.

To identify a design's most important usability problems, testing five users is typically enough. Rather than run a big, expensive study, it's a better use of resources to run many small tests and revise the design between each one so you can fix the usability flaws as you identify them. Iterative design is the best way to increase the quality of user experience. The more versions and interface ideas you test with users, the better.

User testing is different from focus groups, which are a poor way of evaluating design usability. Focus groups have a place in market research, but to evaluate interaction designs you must closely observe individual users as they perform tasks with the user interface. Listening to what people say is misleading: you have to watch what they actually do.


When to Work on Usability


Usability plays a role in each stage of the design process. The resulting need for multiple studies is one reason I recommend making individual studies fast and cheap. Here are the main steps:

1. Before starting the new design, test the old design to identify the good parts that you should keep or emphasize, and the bad parts that give users trouble.
2. Unless you're working on an intranet, test your competitors' designs to get cheap data on a range of alternative interfaces that have similar features to your own. (If you work on an intranet, read the intranet design annuals to learn from other designs.)
3. Conduct a field study to see how users behave in their natural habitat.
4. Make paper prototypes of one or more new design ideas and test them. The less time you invest in these design ideas the better, because you'll need to change them all based on the test results.
5. Refine the design ideas that test best through multiple iterations, gradually moving from low-fidelity prototyping to high-fidelity representations that run on the computer. Test each iteration.
6. Inspect the design relative to established usability guidelines, whether from your own earlier studies or published research.
7. Once you decide on and implement the final design, test it again. Subtle usability problems always creep in during implementation.

Don't defer user testing until you have a fully implemented design. If you do, it will be impossible to fix the vast majority of the critical usability problems that the test uncovers. Many of these problems are likely to be structural, and fixing them would require major rearchitecting.

The only way to a high-quality user experience is to start user testing early in the design process and to keep testing every step of the way.


Where to Test

If you run at least one user study per week, it's worth building a dedicated usability laboratory. For most companies, however, it's fine to conduct tests in a conference room or an office — as long as you can close the door to keep out distractions. What matters is that you get hold of real users and sit with them while they use the design. A notepad is the only equipment you need.

Top Ten Mistakes in Web Design

Summary:

The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.





1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.



A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.



Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.





2. PDF Files for Online Reading



Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.



Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.



PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.



Detailed discussion of why PDF is bad for online reading





3. Not Changing the Color of Visited Links



A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.



Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.



These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.



> Usability implications of changing link colors

> Guidelines for showing links Cartoon - guy being crushed under wordy 'terms and conditions' legalese





4. Non-Scannable Text



A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.



Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:



��� subheads

��� bulleted lists

��� highlighted keywords

��� short paragraphs

��� the inverted pyramid

��� a simple writing style, and

��� de-fluffed language devoid of marketese.



> Eyetracking of reading patterns





5. Fixed Font Size



CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.



Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.





6. Page Titles With Low Search Engine Visibility




Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.



tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.The page title is contained within the HTML



Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."



For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.



Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.





7. Anything That Looks Like an Advertisement



Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)



Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.



Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:



��� banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page

��� animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations

��� pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).





8. Violating Design Conventions




Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.



The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.



Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."



This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.





9. Opening New Browser Windows



Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).



Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.



Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser���s standard behavior. Cartoon - woman (at car dealership): 'How much is it with automatic transmission?' - sleazy salesman: 'I'll give you a hint - it's an EVEN number...'





10. Not Answering Users' Questions



Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.



Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.



The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.



Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.





Effective use of forms on websites

Summary

People don't like filling out forms in the real world, and especially not while using the web. Forms are complicated, distracting, and take control away from the user. That is, unless they're designed effectively.

Most people hate filling out tax forms, registration forms, ballots, and so on. In fact, all kinds of new technologies are being developed to speed up delivery of common information (like telephone numbers, addresses, names, birthdates, and social service numbers), and prevent excessive use of forms. Yet users are still forced to fill out forms, to accomplish all kinds of simple tasks, because forms are perceived as an effective means of gathering information. They aren't always effective for users, and certainly aren't always effective for the recipients of the information, either.


Some common user-perceived problems with forms

• forms are long and complicated (they require a lot of cognitive activity, and interrupt flow)
• forms frequently aren't clear, and discerning their precise purposes can be impossible
• forms usually force users to answer questions, even if the user perceives the questions to be irrelevant
• forms take control away from the user
• websites often yell at users if they don't fill out forms correctly

If users don't understand why they are forced to answer a bunch of questions, in a very particular way, to achieve an unclear purpose, they are going to have a negative experience. That might cause them to simply leave the website, or to miss out on the positive benefits that await them if they fill out the form correctly.


Some common owner-discovered problems with forms

• the information collected by the form has to be requested again by someone else within the company
• most of the information collected by the form is useless
• the form isn't helping the business achieve a set goal, or isn't applicable to any goals
• the important information users provide via the form is too thin (in other words, users aren't providing accurate or specific information)
• the form isn't being used as much as was anticipated
• few users are using the form for its intended purpose (if it has one)
• users aren't accessing the value-added portion of the website that using a form leads to

Forms are very mechanical by nature, but humans aren't. Because of interface constraints, it's much easier for most people to write a specific message than to deliver the same information by filling out a form (think of the repetitive mouse movements required to select a birthdate from a complex popup menu widget). In many cases, if a user has reached a form, it's because they want something, or they want to communicate something to the people who run a website. They might have trouble trying to squeeze their thoughts into a narrowly-designed framework: a problem very similar to being forced to answer "yes" or "no" to a question when the answer should really be "maybe". If the message that the user needs to communicate is "maybe", then a human is much more able to process the information, and discover its meaning, than a computer is.


When are forms useful?

Obviously, forms are necessary for certain processes:

• collecting large quantities of statistical or otherwise quantifiable information
• surveys
• signup mechanisms
• login mechanisms
• search mechanisms

Feedback systems almost never require forms. Feedback forms are usually unnecessarily convoluted and frustrating. If a form is going to be used to direct information to a specific recipient or group, just indicate a specific email address to which the feedback should be sent. Give pointers with regard to what information users should provide, but don't force them to reveal information they are not comfortable with handing out to (potentially) complete strangers. Building trust and confidence is an essential part of positive user experience.

In circumstances where a form of some kind is necessary, it's best to keep it simple. In almost all cases, users want to be more effective, which includes getting things done hassle-free, and as quickly as possible. Therefore, forms should have few controls, and shouldn't require excessive cognitive processing or repetitive physical movements to complete.


Here are some common form design mistakes to avoid:

• long popup menus with lists of 150 nearly identical terms (such as lists of countries or professions; lists of two-letter abbreviations are exceptionally bad)
• asking for the same (or similar) information more than once
• asking for information that isn't relevant to the user's goals or task at hand (forget forms as a bonus market research tool)
• forcing users to fill out information (unless it's something absolutely necessary for maintaining user control like a user ID or password)
• forcing users to somehow communicate or build conversation with controls (no boolean buttons or complex search syntax forms)
• a form layout that puts might on will (borrowed from Alan Cooper: if most people just fill out one field and click "Submit:", put additional options after the submit button)


Tips for effective form use


I worked with a company that offered a very personal service to users. That meant that a registration system was required, and users would have to log in and log out. We ended up designing a service that users could browse before registration, but could only personalize after registration. The registration process was made as simple as possible: users were only required to enter a login and password to join. Additional information wasn't requested right away, but instead users were casually reminded to provide some more information, particularly their email address (for password retrieval). Otherwise, users only had to provide more personal information when it was necessary to help the user accomplish a given goal: for instance, users had to provide an address when they ordered a product for the first time.

The same service had a number of other simple forms for searching, logging in, and ordering products. In each case, we found out what was absolutely essential to the user, and how to most effectively design the form to keep users informed and in control.


Here are some guidelines that I kept in mind while working with the client to design the forms:

• use controls for the same purpose that they're used for in operating system interfaces (i.e. correct use of radio buttons and check boxes)
• collect information in bits and pieces as it's required from the user's point of view
• determine the minimum information necessary for collection, so that the user remains in flow and doesn't become frustrated with the website
• only use a form if it has a very clear advantage for users over a less mechanical method, such as email
• use less restrictive controls (fewer radio buttons, but more text fields)
• make the form as "optional" as possible
• ensure that the user will never have to provide the same information twice
• test the form with the recipients of the information to make sure its contents are practical, and to eliminate anything that isn't practical

When considering use of a form, it's important to remember how much most people hate filling out complicated ballots, tax returns, registration forms, and surveys. Web forms are no more fun.

Make your web pages freestanding

World Wide Web pages differ from books and other documents in one crucial respect: hypertext links allow users to access a single Web page with no preamble. For this reason Web pages need to be more independent than pages in a book. For example, the headers and footers of Web pages should be more informative and elaborate than those on printed pages. It would be absurd to repeat the copyright information, author, and date of a book at the bottom of every printed page, but individual Web pages often need to provide such information because a single Web page may be the only part of a site that some users will see. This problem of making documents freestanding is not unique to Web pages. Journals, magazines, and most newspapers repeat the date, volume number, and issue number at the top or bottom of each printed page because they know that readers often rip out articles or photocopy pages and will need that information to be able to trace the source of the material.

Given the difficulties inherent in creating Web sites that are both easy to use and full of complex content, the best design strategy is to apply a few fundamental document design principles consistently in every Web page you create. The basic elements of a document aren't complicated and have almost nothing to do with Internet technology. It's like a high school journalism class: who, what, when, and where.


Who

Who is speaking? This question is so basic, and the information is so often taken for granted, that authors frequently overlook the most fundamental piece of information a reader needs to assess the provenance of a Web document. Whether the page originates from an individual author or an institution, always tell the reader who created it. The flood of Web sites propagating incorrect or intentionally misleading material on the Florida vote problems of the 2000 American presidential election offers a vivid example of how "information" of no known origin and of dubious authenticity can quickly cloud legitimate inquiry and discussion.


What

All documents need clear titles to capture the reader's attention, but for several reasons peculiar to the Web this basic editorial element is especially crucial. The document title is often the first thing browsers of World Wide Web documents see as the page comes up. In pages with lots of graphics the title may be the only thing the user sees for several seconds as the graphics download onto the page. In addition, the page title will become the text of a browser "bookmark" if the user chooses to add your page to his or her list of URLs ("Universal Resource Locator," the formal term for Web addresses). A misleading or ambiguous title or one that contains technical gibberish will not help users remember why they bookmarked your page.


When


Timeliness is an important element in evaluating the worth of a document. We take information about the age of most paper documents for granted: newspapers, magazines, and virtually all office correspondence is dated. Date every Web page, and change the date whenever the document is updated. This is especially important in long or complex online documents that are updated regularly but may not look different enough to signal a change in content to occasional readers. Corporate information, personnel manuals, product information, and other technical documents delivered as Web pages should always carry version numbers or revision dates. Remember that many readers prefer to print long documents from the Web. If you don't include revision dates your audience may not be able to assess whether the version they have in hand is current.


Where

The Web is an odd "place" that has huge informational dimensions but few explicit cues to the place of origin of a document. Click on a Web link, and you could be connected to a Web server in Sydney, Chicago, or Rome — anywhere, in fact, with an Internet connection. Unless you are well versed in parsing URLs it can be hard to tell where a page originates. This is the World Wide Web, after all, and the question of where a document comes from is sometimes inseparable from whom the document comes from. Always tell the reader where you are from, with (if relevant) your corporate or institutional affiliations.

Incorporating the "home" URL on at least the main pages of your site is an easy way to maintain the connection to where a page originated. Once the reader has saved the page as a text file or printed the page onto paper, this connection may be lost. Although newer versions of the most common Web browsers allow users to include the URL automatically in anything they print, many people never take advantage of this optional feature. Too many of us have stacks of printed Web pages with no easy way of locating the Web sites where they originated.


Every Web page needs:

• An informative title (which also becomes the text of any bookmark to the page)
• The creator's identity (author or institution)
• A creation or revision date
• At least one link to a local home page or menu page
• The "home page" URL on the major menu pages in your site

Include these basic elements and you will have traveled 90 percent of the way toward providing your readers with an understandable Web user interface.

What is UX?

The origins and meaning of “User Experience / UX Design” may seem a bit murky at first glance, to many not already familiar with it. One early use of it, without “user” prefixed, appeared in the nascent “Advance for Design” meetings organized by Clement Mok et al, under AIGA sponsorship, between 1998 and 2000. Mention is made, too, in the first post to uxmatters.com, of Don Norman using the term at Apple as early as 1993.

Though implying a Gestalt approach to interactive media design, that is, using a collection of elements to form a pattern which is greater than the sum of its parts, UX Design also puts special emphasis on the human side of human-computer interaction, and its affective results, rather than on the mere usability—the human performance aspect—of computer interface design, which traditionally relates to the field of ergonomics.

Usability is of course one of the primary concerns of the user-centric web designer, so it is easy to see how these related areas overlap, and lead to confusion, especially when no dictionary entry exists for UX Design (that I’ve seen), and people often use novel terms in various ways before understanding them well.

Another dimension of UX Design, as it related to the field of web design, is the historical one. As professional web design has evolved, and rolls and responsibilities have advanced and divided, the professional web design community has had to find ways to differentiate itself from so many entering the field as amateurs, claiming the Web Designer moniker, and as web software programs began to democratize web production

26 May, 2008

Web users 'getting more selfish'

Web users are getting more ruthless and selfish when they go online, reveals research.
The annual report into web habits by usability guru Jakob Nielsen shows people are becoming much less patient when they go online.
Instead of dawdling on websites many users want simply to reach a site quickly, complete a task and leave.
Most ignore efforts to make them linger and are suspicious of promotions designed to hold their attention.

Search rules
Instead, many are "hot potato" driven and just want to get a specific task completed.
Success rates measuring whether people achieve what they set out to do online are now about 75%, said Dr Nielsen. In 1999 this figure stood at 60%.
There were two reasons for this, he said.
"The designs have become better but also users have become accustomed to that interactive environment," Dr Nielsen told BBC News.
Now, when people go online they know what they want and how to do it, he said.
This makes them very resistant to highlighted promotions or other editorial choices that try to distract them.
"Web users have always been ruthless and now are even more so," said Dr Nielsen.
"People want sites to get to the point, they have very little patience," he said.
"I do not think sites appreciate that yet," he added. "They still feel that their site is interesting and special and people will be happy about what they are throwing at them."
Web users were also getting very frustrated with all the extras, such as widgets and applications, being added to sites to make them more friendly.
Such extras are only serving to make pages take longer to load, said Dr Nielsen.
There has also been a big change in the way that people get to the places where they can complete pressing tasks, he said.
In 2004, about 40% of people visited a homepage and then drilled down to where they wanted to go and 60% use a deep link that took them directly to a page or destination inside a site. In 2008, said Dr Nielsen, only 25% of people travel via a homepage. The rest search and get straight there.
"Basically search engines rule the web," he said.
But, he added, this did not mean that the search engines were doing a perfect job.
"When you watch people search we often find that people fail and do not get the results they were looking for," he said.
"In the long run anyone who wants to beat Google just has to make a better search," said Dr Nielsen.

Site Map Usability

Users go to site maps if they are lost, frustrated, or looking for specific details on a crowded site. A site map's main benefit is to give users an overview of the site's areas in a single glance by dedicating an entire page to a visualization of the information architecture. If designed well, this overview can include several levels of hierarchy, and yet not get so big that users lose their ability to grasp the map as a whole.

Optimizing the User Experience

Web sites should be designed to facilitate and encourage efficient and effective human-computer interactions. Designers should make every attempt to reduce the user’s workload by taking advantage of the computer’s capabilities. Users will make the best use of Web sites when information is displayed in a directly usable format and content organization is highly intuitive. Users also benefit from task sequences that are consistent with how they typically do their work, that do not require them to remember information for more than a few seconds, that have terminology that is readily understandable, and that do not overload them with information.
Users should not be required to wait for more than a few seconds for a page to load, and while waiting, users should be supplied with appropriate feedback. Users should be easily able to print information. Designers should never ‘push’ unsolicited windows or graphics to users.

Explanation of UX

User experience, often abbreviated UX, is a term used to describe the overall experience and satisfaction a user has when using a product or system. It most commonly refers to a combination of software and business topics, such as selling over the web, but it applies to any result of interaction design.
This field has its roots in human factors and ergonomics, a field that since the late 1940s has been focusing on the interaction between human users, machines and the contextual environments to design systems that address the user's experience. The term also has a more recent connection to user-centered design principles and also incorporates elements from similar user-centered design fields:

• Human computer interaction
• Information architecture
• Interaction design
• Interface design
• User interface design
• Usability
• Usability engineering
• Visual design

As with the fields mentioned above, user experience design is a highly multi-disciplinary field, incorporating aspects of psychology, anthropology, computer science, graphic design and industrial design.
At its core, user experience design incorporates most or all of the above disciplines to positively impact the overall user experience with a particular system or device. User experience design defines a sequence of screen presentations, user interactions, and system responses that meet user goals and tasks while satisfying business and functional requirements
(source Wikipedia)

The Need for User Interface Design

User Interface Design is often associated with software interface and is frequently referred to as Human-Computer Interface or HCI. However, User Interface Design must be considered wherever users interact with controls or displays. The application of interface design is pervasive, including products such as: a simple watch, a DVD player, an aircraft cockpit, a software program, etc. In many cases, good technology is not readily accepted because the product is not easy to use or efficient to use. A product's usability, acceptance, and marketability are often dependent on the user feeling that it is easy to learn and use. User Interface Design increases the intuitiveness, efficiency, and comfort level with a product, which translates into product acceptance and use. You need both good technology and usability for a successful product launch.

Usability Explained

Usability is a term used to denote the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal. Usability can also refer to the methods of measuring usability and the study of the principles behind an object's perceived efficiency or elegance. In human-computer interaction and computer science, usability usually refers to the elegance and clarity with which the user interface of a computer program or a web site is designed. The term is also used often in the context of products like consumer electronics, or in the areas of communication, and knowledge transfer objects (such as a cookbook, a document or online help). It can also refer to the efficient design of a mechanical objects such as a door handle or a hammer.

User Experience Design Explained

One way to explain User Experience Design is to contrast it to Usability.
Usability is about the "ability to use" something. The aim for a usable product is to make it easy to use. A product has a high level of usability when:
• It requires less mental effort to use.
• The frequency of mistakes using it is less, or the mistakes are less disastrous.
• It is more powerful, where "more powerful" means that it can be used to do more or do it faster.
• It is more learnable, that is, when a person can figure it out quicker.

User-experience is not like usability - it is about "feelings." The aim here is to create happiness. You want people to feel happy before, during and after they have used your product. To do that you need to take all kinds of things into consideration. Things like:
• Environment
• Colors moods
• Smell
• Touch
• Audio feedback
• Visual feedback
• Trust
• Branding
• Show-off effect
• Usefulness
• Practicality
• Coexistence
• Emotional effect
This is much much much harder to achieve. None of these things can be accurately analyzed. It is a touchy feeling kind of thing. But you can evaluate the results of your effort. You know you have good UX when people describe their feelings about the product.

22 May, 2008

Code of Conduct for Usability Professionals

Introduction

This code of conduct is intended to cover situations commonly encountered by usability practitioners. Membership includes acceptance of this code. The Code is stated in two parts. Part One is a list of statements of UPA Ethical Principles. Part Two contains examples of the practice of the Principles.


Adherence to This Code of Conduct

Usability practitioners shall ensure that their work meets the Ethical Principles laid out in this code of conduct. Usability practitioners shall report any violations of this code of ethics to the Vice President of the Usability Professionals’ Association. A review of the allegations will be conducted by the UPA Ethics Advisory Committee. Violations of this code may lead to expulsion from the Usability Professionals’ Association.


Part One: Ethical Principles


* Act in the best interest of everyone
* Be honest with everyone
* Do no harm and if possible provide benefits
* Act with integrity
* Avoid conflicts of interest
* Respect privacy, confidentiality, and anonymity
* Provide all resultant data


Part Two: Examples of the Practice of the Principles

1 Act in the Best Interest of Everyone

1.1. Usability practitioners shall be aware of relevant standards, principles, and generally accepted usability methods

1.2. Usability practitioners shall undertake professional assignments only when qualified by education or experience.

1.3. Usability practitioners shall provide products and services that match the operational and financial needs of clients and employers.

1.4. Usability practitioners shall undertake ongoing efforts to develop and maintain their competence.

1.5. Usability practitioners shall seek and use peer review as well as provide critical review of the work of others whenever appropriate. Usability practitioners shall make reasonable efforts to avoid offering excessive or inappropriate financial or other inducements for participation in usability activities when such inducements are likely to coerce participation.


2. Be Honest with Everyone

2.1. Usability practitioners shall not knowingly mislead a client or potential client about the suitability of a product or service.

2.2. Usability practitioners shall give recommendations that are objective, consistent with accepted principles, and/or based on the judgment of qualified professionals.

2.3. Usability practitioners shall never deliberately misinform or mislead individuals for whom they are providing services.

2.4. Usability practitioners shall credit the intellectual property right of work, methods, and tools done or created by others in such a way that all parties involved are always clear as to the origin of such and the rights of the usability practitioner to use or cite such work, methods or tools.


3. Do No Harm and If Possible Provide Benefits

3.1. Usability practitioners shall not expose participants to any unreasonable physical, mental or emotional stress.

3.2. Usability practitioners shall take reasonable steps to avoid harming their clients or employers, study participants, and others with whom they work, and to minimize harm where it is foreseeable and avoidable.

3.3. Usability practitioners shall review for special needs when working with the elderly, the disabled, and children. Precautions taken to avoid risks associated with such groups shall be clearly identified and reviewed by the client or employer.


4. Act with Integrity

4.1. Usability practitioners shall work in a spirit of respectful collaboration and cooperation with those with whom they interact without compromising their personal or professional integrity.

4.2. Usability practitioners shall not discriminate against their clients, colleagues, or participants on the basis of age, gender, gender identity, race, ethnicity, culture, national origin, religion, sexual orientation, disability, socioeconomic status, or any basis proscribed by law.

4.3. Usability practitioners shall not make public derogatory comments about their clients, colleagues, or participants.

4.4. Usability practitioners shall never knowingly use material that is illegal, immoral, or which may hurt or damage a person or group of people. If exposed to illegal material, the usability practitioner shall advise their client or employer of the illegal nature of the material and take reasonable steps to inform the relevant authorities of the existence of the material.


5. Avoid Conflicts of Interest

5.1. Usability practitioners shall avoid all known conflicts of interest with their employers or clients and shall promptly inform their employers or clients of any business association, interests, or circumstances that could influence their judgments or the quality of their services.

5.2. Usability practitioners shall not accept any assignments that would knowingly create a possible conflict of interest between themselves and their clients, employers, or participants.

5.3. Usability practitioners shall advise clients and employers when a proposed project is not in the client’s best interest and provide a rationale for this advice.


6. Respect Privacy, Confidentiality, and Anonymity

6.1. Usability practitioners shall not reveal information that identifies colleagues or participants without their permission and shall take reasonable precautions to avoid such information from being disclosed unintentionally.

6.2. Usability practitioners shall ensure that participants in any study provide informed consent for use of all data collected.

6.3. Usability practitioners shall never disclose in their writings, reports, teaching materials or other public media or otherwise make public any information they have acquired about persons, employers or clients in the course of their professional work unless disclosure is both legal and that they have either taken reasonable steps to disguise the identity of the person, employer or client, or they have the express permission to disclose.


7. Provide All Resultant Data

7.1. Usability practitioners shall choose participants and tasks so as to ensure the validity of the results.

7.2. Usability practitioners shall consider the limitations of every usability project they plan or carry out and if requested or if in their view the limitations render the results questionable, shall communicate the results of this analysis to their client or employer.

7.3 Usability practitioners shall accurately report both the positive and negative feedback from usability activities.

14 May, 2008

How to choose your columns

I'd definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.

There are always exceptions, so here are a few examples of more than 3 columns used effectively.

Derek Powazek's blog site uses 3 columns for the main section of his blog, but 4 lower down.
The lower section is a kind of pick & mix, where the abundance of columns emphasises the "Take what you like" feel.


Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns.
It works beacuse the purpose of each column is clear from its design. The left col is definitely navigation; the right column is "other stuff". The products in the middle are clearly tiled and separated by white space, so they don't overwhelm.


Popurls.com contains loads of pick-n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text.
Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is fine, because it's a sit-back, scan and pick your experience moment...


And here's a site that gets it wrong...

Here's All Things Web2.0 using 4 columns: 2 side columns and 2 central columns.
The downside of this layout is that you don't know where to start looking. Everything is somehow low-priority (partly because of the darkish background).
As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it's not confusing.

When & how to make your designs simple

When?

Always!

How?

There are two important aspects to achieving success with simplicity:

  1. Remove unnecessary components, without sacrificing effectiveness.
  2. Try out alternative solutions that achieve the same result more simply.

Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements.

Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.

Use visual detail - whether lines, words, shapes, colour - to communicate the relevant information, not just to decorate.

Here's an example of a design that suffers from not enough simplicity.

Yaxay's interface uses a lot of pixels, but the vast majority of them are decorative, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.

See how much "stuff" there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.

Edward Tufte is the boss when it comes to the design of information. He uses the terms "data ink" (i.e. detail that enables information transfer) and "non-data ink" (i.e. detail that's just detail) to describe this phenomenon.

One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.

Taking the Yaxay detail above, there's a lot of what I call "busyness", i.e. a lot of edges, tonal changes, colour variations, shapes, lines... a lot of stuff to look at. But, in this detail, the only useful features are:

  1. The site logo, and
  2. the label on the nav button (which reads "art gallery")

All the rest of the "busyness": the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients... all this is noise, it's all "non-data ink", because it's not enabling communication.

Internet versus intranet design

Most Web sites are designed to be viewed by audiences inside an organization and are often not visible to the larger World Wide Web. Although these intranet sites employ the same technology as sites designed for the larger Web audience, their design and content should reflect the different motivations of intranet users.

External sites are usually aimed at capturing an audience. The overall goal is to maximize contact time, drawing readers deeper into the site and rewarding their curiosity with interesting or entertaining information. One assumption that governs Web design is that readers may have little motivation to stay and must be constantly enticed and rewarded with rich graphics or compelling information to linger within the site.

Successful intranet sites assemble useful information, organize it into logical systems, and deliver the information efficiently. You don't want intranet users lingering over their Web browsers, either in frustration at not being able to find what they are seeking or in idle "surfing." Allow employees and students to get exactly what they need quickly and then move on.

"Going back" and going to the previous page

All hypertext systems share a common feature that has no direct precedent in print media: going "back" through a series of links you have previously visited is not the same as paging "back" through the preceding pages of an ordered sequence of pages. When users click on a hypertext link in a Web document they often are transported from one Web site to another, perhaps even from one country to another. Once made, the hypertext link is bidirectional; you can "go back" to the Web site you just left by clicking on the "Back" button of the viewer. Having hit the "Back" button, you can move to the new Web site again by hitting the "Forward" button:

Provide context or lose the reader

Readers need a sense of context, of their place within an organization of information. In paper documents this sense of "where you are" is a mixture of graphic and editorial organizational cues supplied by the graphic design of the book, the organization of the text, and the physical sensation of the book as an object. Electronic documents provide none of the physical cues we take for granted in assessing information. When we see a Web hypertext link on the page we have few cues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page. Even the view of individual Web pages is restricted for many users. Most Web pages don't fit completely on a standard office display monitor (800 x 600 pixels), and so there is almost always a part of the page that the user cannot see:

Web pages need to give the user explicit cues to the context and organization of information because only a small portion of any site (less than a page) is visible at one time:


As the Web page designer it is up to you to provide these functional and context cues.

Navigation

A rich set of graphic navigation and interactivity links within your Web pages will pull users' attention down the page, weaning them from the general-purpose browser links and drawing them further into your content. By providing your own consistent and predictable set of navigation buttons you also give the user a sense of your site's organization and make the logic and order of your site visually explicit. In this example the rich graphics and many links offered by the Salon technology and business page immediately draw the reader into the site:

















www.salon.com

Design precedents in print

Although networked interactive hypermedia documents pose novel challenges to information designers, most of the guidance needed to design, create, assemble, edit, and organize multiple forms of media does not differ radically from current practice in print media. Most Web documents can be made to conform to The Chicago Manual of Style conventions for editorial style and text organization. Much of what an organization needs to know about creating clear, comprehensive, and consistent internal publishing standards is already available in such publishing guides as the Xerox Publishing Standards: A Manual of Style and Design. Don't get so lost in the novelty of Web pages that basic standards of editorial and graphic design are tossed aside.

Web page design versus conventional document design

Concepts about structuring information today stem largely from the organization of printed books and periodicals and the library indexing and catalog systems that developed around printed information. The "interface standards" of books in the English-speaking world are well established and widely agreed-upon, and detailed instructions for creating books may be found in such guides as The Chicago Manual of Style. Every feature of the book, from the contents page to the index, has evolved over the centuries, and readers of early books faced some of the same organizational problems that users of hypermedia documents confront today. Gutenberg's Bible of 1456 is often cited as the first modern book, yet even after the explosive growth of publishing that followed Gutenberg's invention of printing with movable type, more than a century passed before page numbering, indexes, tables of contents, and even title pages became expected and necessary features of books. Web documents are undergoing a similar evolution and standardization.

Efficacy of User Interface Design

Many technological innovations rely upon User Interface Design to elevate their technical complexity to a usable product. Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance. And that is where User Interface Design enters the design process. While product engineers focus on the technology, usability specialists focus on the user interface. For greatest efficiency and cost effectiveness, this working relationship should be maintained from the start of a project to its rollout.

When applied to computer software, User Interface Design is also known as Human-Computer Interaction or HCI. While people often think of Interface Design in terms of computers, it also refers to many products where the user interacts with controls or displays. Military aircraft, vehicles, airports, audio equipment, and computer peripherals, are a few products that extensively apply User Interface Design.

Optimized User Interface Design requires a systematic approach to the design process. But, to ensure optimum performance, Usability Testing is required. This empirical testing permits naïve users to provide data about what does work as anticipated and what does not work. Only after the resulting repairs are made can a product be deemed to have a user optimized interface.

The importance of good User Interface Design can be the difference between product acceptance and rejection in the marketplace. If end-users feel it is not easy to learn, not easy to use, or too cumbersome, an otherwise excellent product could fail. Good User Interface Design can make a product easy to understand and use, which results in greater user acceptance.

05 May, 2008

Web Style Guide

User-centered design
Graphic user interfaces were designed to give people control over their personal computers. Users now expect a level of design sophistication from all graphic interfaces, including Web pages. The goal is to provide for the needs of all your potential users, adapting Web technology to their expectations and never requiring readers to conform to an interface that places unnecessary obstacles in their paths.
This is where your research on the needs and demographics of the target audience is crucial. It's impossible to design for an unknown person whose needs you don't understand. Create sample scenarios with different types of users seeking information from your site. Would an experienced user seeking a specific piece of information be helped or hindered by your home page design? Would a casual reader be intimidated by a complex menu scheme? Testing your designs and getting feedback from a variety of users is the best way to see whether your design ideas are giving them what they want from your site.

Clear navigation aids

Most user interactions with Web pages involve navigating hypertext links between documents. The main interface problem in Web sites is the lack of a sense of where you are within the local organization of information:
Clear, consistent icons, graphic identity schemes, and graphic or text-based overview and summary screens can give the user confidence that they can find what they are looking for without wasting time.
Users should always be able to return easily to your home page and to other major navigation points in the site. These basic links should be present and in consistent locations on every page. Graphic buttons will provide basic navigation links and create a graphic identity that tells users they are within the site domain.
The button bar is efficient (offering multiple choices in a small space) and predictable (it is always there, at the top of every page), and it provides a consistent graphic identity throughout the site.

No dead-end pages

Web pages often appear with no preamble: readers can make or follow links directly to subsection pages buried deep in the hierarchy of Web sites. They may never see your home page or other introductory site information. If your subsection pages do not contain links to the home page or to local menu pages, the reader will be locked out from the rest of the
Make sure all pages in your site have at minimum a link back to the main "home" page or, better yet, a home page link along with links to the other sections of the site.

Bandwidth and interaction

Users will not tolerate long delays. Research has shown that for most computing tasks the threshold of frustration is about ten seconds. Web page designs that are not well "tuned" to the network access speed of typical users will only frustrate them. If your users are primarily general public browsers "surfing" the Web via dial-up modem connections, it is foolish to put huge bitmap graphics on your pages — the average modem user will not be patient enough to wait while your graphics download over the phone line. If, however, you are building a university or corporate intranet site where most users will access the Web server at Ethernet speeds or better, you can be much more ambitious in the use of graphics and multimedia. Many home computer users can now use high-speed DSL (digital subscriber line) or cable modems to access the Web. However, industry observers expect that it will be at least another five years before Web designers can count on most home users having access to high-speed Web connections. In general, be conservative with Web graphics. Even users with high-speed connections appreciate a fast-loading page.

Simplicity and consistency

Users are not impressed with complexity that seems gratuitous, especially those users who may be depending on the site for timely and accurate work-related information. Your interface metaphors should be simple, familiar, and logical — if you need a metaphor for information design, choose a genre familiar to readers of documents, such as a book or a library. Highly unusual, "creative" navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable interface burden on the user.
The user interface for your Web site should follow the general navigation and layout conventions of major Web sites because your users will already be used to those conventions. Users spend most of their time on sites other than yours, so avoid highly unusual interfaces if you wish to attract and keep a large audience.
The best information designs are never noticed. An excellent model of interface design is the Adobe Corporation Web site. Graphic headers act as navigation aids and are consistently applied across every page in the site. Once you know where the standard links are on the page header graphics, the interface becomes almost invisible and navigation is easy:
For maximum functionality and legibility, your page and site design should be built on a consistent pattern of modular units that all share the same basic layout grids, graphic themes, editorial conventions, and hierarchies of organization. The goal is to be consistent and predictable; your users should feel comfortable exploring your site and confident that they can find what they need. The graphic identity of a series of pages in a Web site provides visual cues to the continuity of information. The header menu graphics present on every page of the Adobe site create a consistent user interface and corporate identity:
Even if your site design does not employ navigation graphics, a consistent approach to the layout of titles, subtitles, page footers, and navigation links to your home page or related pages will reinforce the reader's sense of context within the site. To preserve the effect of a "seamless" system of pages you may wish to bring important information into your site and adapt it to your page layout scheme rather than using links to send the reader away from your site (be sure there are no copyright restrictions on copying the information into your site).

Design integrity and stability

To convince your users that what you have to offer is accurate and reliable, you will need to design your Web site as carefully as you would any other type of corporate communication, using the same high editorial and design standards. A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.
Functional stability in any Web design means keeping the interactive elements of the site working reliably. Functional stability has two components: getting things right the first time as you design the site, and then keeping things functioning smoothly over time. Good Web sites are inherently interactive, with lots of links to local pages within the site as well as links to other sites on the Web. As you create your design you will need to check frequently that all of your links work properly. Information changes quickly on the Web, both in your site and in everyone else's. After the site is established you will need to check that your links are still working properly and that the content they supply remains relevant.

Feedback and dialog

Your Web design should offer constant visual and functional confirmation of the user's whereabouts and options, via graphic design, navigation buttons, or uniformly placed hypertext links. Feedback also means being prepared to respond to your users' inquiries and comments. Well-designed Web sites provide direct links to the Web site editor or Webmaster responsible for running the site. Planning for this ongoing relationship with users of your site is vital to the long-term success of the enterprise.

Efficacy of User Interface Design

Many technological innovations rely upon User Interface Design to elevate their technical complexity to a usable product. Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance. And that is where User Interface Design enters the design process. While product engineers focus on the technology, usability specialists focus on the user interface. For greatest efficiency and cost effectiveness, this working relationship should be maintained from the start of a project to its rollout.

When applied to computer software, User Interface Design is also known as Human-Computer Interaction or HCI. While people often think of Interface Design in terms of computers, it also refers to many products where the user interacts with controls or displays. Military aircraft, vehicles, airports, audio equipment, and computer peripherals, are a few products that extensively apply User Interface Design.

Optimized User Interface Design requires a systematic approach to the design process. But, to ensure optimum performance, Usability Testing is required. This empirical testing permits naïve users to provide data about what does work as anticipated and what does not work. Only after the resulting repairs are made can a product be deemed to have a user optimized interface.

The importance of good User Interface Design can be the difference between product acceptance and rejection in the marketplace. If end-users feel it is not easy to learn, not easy to use, or too cumbersome, an otherwise excellent product could fail. Good User Interface Design can make a product easy to understand and use, which results in greater user acceptance.

01 May, 2008

User Interface Design Principles

1. The Client Is Not The User
The client may think she knows what the user wants, but she cannot. This is because the client is not the user. This brings me to the second principle.

2. Don't Give The Client What She Thinks The User Wants
If the client does not know what the user wants and you give her what she is asking for, you are doing her a disservice. You will ultimately be delivering an application that does not meet user's needs. Your client may initially be happy that you have given her exactly what she asked for but will she remain happy when the product is rejected by users?
I have seen too many designers and developers who are aware of these two principles but proceed to reach the wrong conclusion from it. Namely, that they know the user better. Which brings us to our next principle, which is, simply:

3. You Do Not Know What Your User Wants
You may be a user interface designer or developer with many years of experience but you do not know what users want. Which users? Those specific users who will be using the current application that you are building. Why? Because every application is unique. You may have built similar applications but, unless you have built exactly this application before, you do not know what the users of this application want.
So, who does know what your users want?

4. Only Users Know What Users Want
It's a basic concept but one that is alien to much of our industry. Only users of your application will know what works and what doesn't. It's surreal that, given this, most of us in our industry go out of our ways to delay asking them what they think of our applications. This brings me to the most imporant principle of all:

5. Test Early, Test Often, Then Test Again
Usability testing is not rocket science. In fact, it's quite a simple recipe:

Ingredients:
1. Two rooms
2. One or more representative users
3. A computer running your application
4. A usability tester
5. A video camera (no tape)
6. A TV screen

Take two rooms and place a computer running your application in one of them. In that room, place a representative user and a usability tester who will ask the user to perform various tasks in your application. Place a camera in the room to relay your user's actions to your design/development team who should be watching from the second room. (Ideally, having the rooms next to each other means that you don't have to run too much cable between the two but you can just as easily use wireless technologies or even broadcast the feed over the Internet to a development team across the globe.)
Leave to simmer then repeat.
Notice that you do not even need to record the test. If you do, chances are those tapes will become paperweights like most artifacts that are created during development. Remember: Agile is good.
Doing usability testing does not involve a large upfront financial investment. You can put together the above setup for around $1,000 these days. What it does involve, however, is buy-in to a User-Centered Product Development (UCPD) approach from the highest levels at both your and your client's organization.
Following a UCPD approach involves capturing measureable Usability Requirements alongside your Functional Requirements. You will have to set aside time to carry out usability testing at every iteration in your development process. You cannot do this without a budget. And you won't have a budget unless you have buy-in at the highest levels.
The above principles are perhaps the most important ones as they will determine your development process and your development process will largely decide whether your project succeeds (is accepted by your users) or fails (is rejected by your users.)
Alongside these process-related principles are design principles. These do not, in any way, replace testing. They are intended to give you a good starting point when designing your user interface, before you go to your users and say, "What do you think?"

6. Talk One Language
There should only ever be a single term or phrase used to refer to any given item in the application. An item here may refer to a concept, a business function or task or even a widget or individual interface element. You will find that the use of a metaphor for the project, as advocated by eXtreme Programming (XP), will ease this task tremendously.

7. Respect User Effort
Try to limit the user's physical toil while using the application. Repetitive Strain Injuries (RSI) are a fact of life today and we, as application designers, have to accept responsibility for the ergonomics of our applications.

8. Make difficult decisions
It is your job as the user interface designer to layer the user interface and make important decisions about its organization. Don't leave these decisions to the user just because it makes your life easier. If your application has a huge preferences section, treat this as a Design Smell and review the design to see if you have left decisions that you can make to the user.

9. Let The User Work
Users must be able to perform their most frequent, most important tasks without any resistance. For an SMS Messaging application, for example, this would include reading, replying to and forwarding messages and quickly checking the various mailboxes.

10. Prevent, Don't Scold
Whenever possible the UI should prevent the user from making a mistake instead of alerting the user to the mistake after the fact. This must be achieved without the UI getting in the way of the user.

11. Give Sufficient Feedback
The UI should give the user sufficient feedback for user actions. (This ties in nicely with Steve Krugs "Don't Make Me Think" philosophy: The user should never have to think "did that work?") Related to Don't Lose The User.

12. Show, Don't Tell
Although this may seem to contradict the Give Sufficient Feedback principle, it is actually meant to compliment it. Whenever possible, meaningful visual cues (when appropriate to the audience) should be chosen instead of lengthy textual descriptions. This can also pertain to actually teaching a user to do something in an application by showing them.

13. Don't Lose The User
The UI should protect the user's sense of spatial positioning. The user should never feel "lost" within the application.

14. Don't Sell What You Can't Deliver
Users must not be given Graphical User Interface (GUI) expectations that cannot be met (or can only be partially met) within a Web User Interface (WUI). Whenever OS or GUI expectations are set, they must be fully met. That said, the application must try and meet OS expectations as much as possible, especially for ergonomic features such as keyboard shortcuts and navigation but also for expected auxiliary helpers such as tooltips.
Don't Sell What You Can't Deliver is the main principle behind why Adobe chose to create a new component style called Halo in Flash and Flex instead of trying unsuccessfully to emulate either the Windows XP or Mac OS X look and feel.

15. Don't Keep Them Waiting
The application must perform fast enough to be considered usable within the given engineering limits for the application.

16. Innocent Until Proven Guilty
The user should be warned about a validation error on a control only if they have had a chance to interact with that control. (In other words, you should not perform validation on controls that are in their initial state and initially display a form full of validation errors.) Similarly, resetting a form should remove all validation errors.

17. Usability Approach to Accessibility
There is a trend I am noticing in our field that I find very worrisome and it concerns accessibility. Many people appear to be on a quest for the Magic Button of Accesibility (MBA). This is how an MBA works in an ideal world:
You gather usability requirements for your application for a given target audience. This target audience involves people with good eyesight, hearing, and motor control. Based on the usability requirements for this specific audience, you expand resources in designing a good user experience for this specific audience. You then spend further resources in developing your application, going back to users within this specific audience to get their feedback and to alter your design accordingly. Finally, right before you deliver your application, you press the Magic Button of Accessibility.
The Magic Button Accessibility magically makes the experience of your application as good for various other audiences. These include people who have various levels of sight, hearing, and motor control. Isn't it amazing that the MBA can transform a carefully crafted experience for a single audience into equally pleasurable experiences for many other audiences.
Unfortunately, the Magic Button of Accessibility doesn't exist because it cannot exist.
The MBA is an extreme example of the check-the-checkbox mentality to accessibility that is pravalent in our field today. I call this Checkbox Accessibility: For the most part, we do not really care what sort of experience users with accessibility requirements will have with our applications as long as we can check a checkbox on some form that says that our application is compliant with a set of rules.
If we can run our applications through a program that checks for this, all the better. After all, software is cheap compared to devoting extra time to design and develop an equally good experience for various other audiences. Checkbox Accessiblity is head-and-shoulders better than no accessibility but it does not guarantee a good experience for users with accessibility requirements.
The other approach to accessibiltiy is to see it as usability with different audiences. In other words, you cannot make your application truly accessible for users with disabilities without designing for those users. I call this the Usability Approach to Accessibility.
Having a usability approach to accessibility means that you have to gather usability requirements for disabled users just like you do for users without disabilities. You have to usability test with disabled users. And you have to realize that "disabled users" doesn't refer to a single audience but to multiple audiences, including those with accessibility requirements in sight, hearing and motor function.
Of course, just like usability with an audience of non-disabled users, usability for disabled users costs time and money and will require buy-in at the highest levels of your organization. If you are serious about accessibility, however, anything less is just not good enough.
These are general points of advice that can apply to any application. Based on these overall guidelines, the following are examples of high-level design decisions that were taken and applied in Opal. Keep in mind that Opal was developed in Flash MX but the issues are the same regardless of whether you are building an application in MTASC/SWFMill/FlashDevelop, Flash 8, Flash 9, Flex 1.5 or Flex 2. Each of those tools and technologies provides different features, components, programming models and development workflows but the end result, regardless of which technologies are used, is always evaluated by your users.