1) Available at : http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Usability 101: Introduction to Usabilityby JAKOB NIELSEN on January 4, 2012

Topics:  Human Computer Interaction

 

Summary: How to define usability? How, when, and where to improve it? Why should you care? Overview defines key usability concepts and answers basic questions.

This is the article to give to your boss or anyone else who doesn't have much time, but needs to know the basic usability facts.

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 5 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 and together determine whether something is useful: 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.

Definition: Utility = whether it provides the features you need. Definition: Usability = how easy & pleasant these features are to use. Definition: Useful = usability + utility.

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 3 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 5 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 annual 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 re-architecting.

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.

2) Available at: http://www.nngroup.com/articles/worlds-best-headlines-bbc-news/

World's Best Headlines: BBC Newsby JAKOB NIELSEN on April 27, 2009

Topics:  Writing for the Web

Summary: Precise communication in a handful of words? The editors at BBC News achieve it every day, offering remarkable headline usability.

It's hard enough to write for the Web and meet the guidelines for concise, scannable, and objective content. It'seven harder to write Web headlines, which must be:

short (because people don't read much online); rich in information scent , clearly summarizing the target article; front-loaded with the most important keywords (because users often scan only the

beginning of list items); understandable out of context (because headlines often appear without articles, as in search

engine results); and predictable , so users know whether they'll like the full article before they click (because people

don't return to sites that promise more than they deliver).For several years, I've been very impressed with BBC News headlines, both on the main BBC homepage and on its dedicated news page. Most sites routinely violate headline guidelines, but BBC editors consistently do an awesome job.

Concise and Informative

On a recent visit, the BBC list of headlines for "other top stories" read as follows:

Italy buries first quake victims Romania blamed over Moldova riots Ten arrested in UK anti-terrorism raids Villagers hurt in West Bank clash Mass Thai protest over leadership Iran accuses journalist of spying

Around the world in 38 words.

The average headline consumed a mere 5 words and 34 characters. The amount of meaning they squeezed into this brief space is incredible: every word works hard for its living. I'm rarely that concise.

Each headline conveys the gist of the story on its own, without requiring you to click. Even better, each gives you a very good idea of what you'll get if you do click and lets you judge — with a high degree of confidence — whether you'll be interested in the full article. As a result, you won't waste clicks. You'll click through to exactly those news items you want to read.

The site's top news headlines warrant a few additional keystrokes.

One breaking story, for example, had the following headline: "Suspected US missile strike kills four militants in tribal region in north-west Pakistan, officials say."

Readers would certainly know what happened, and would even get the general picture after the first 4 words.

To save space, the headline's writer might have deferred the attribution to the unnamed "officials" to the article itself. That information isn't something people need to know at the headline-scanning stage; an exception would be if a famous person or controversial source had claimed responsibility for the missile strike, in which case the attribution might be a reason for users to click.

Also, using "4" might be better than using "four" given the general guideline to prefer numerals for online writing. But in this particular headline, the word works as well as the

numeral because users aren't likely to be scanning the front page for data about the specific number of militants killed. To research such facts, people would typically start by searching for articles about the missile strike, and then scan one or two to get the numbers.

Roots of Success?

So why is the BBC so good when most others are so bad? Maybe it's in the BBC's blood: The news organization originated as a radio station, where word count is at a premium and you must communicate clearly to immediately grab listeners. In a spoken medium, each word is gone as soon as it's uttered, so convoluted exposition confuses even more than it does in print.

Ceefax (one of the longest-surviving videotext services) also helped instill conciseness in BBC's journalists until it was closed in 2012. Text on pre-HD televisions had horrible resolution and only allowed for a minute word count (somewhat like mobile).

Whatever the reason, BBC News headlines are almost always written to the highest Web usability standards. Visit the site daily for a week and try to apply some of the BBC editors' discipline to your own headlines.

3) Available at :http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/

Top 10 Guidelines for Homepage Usabilityby JAKOB NIELSEN on May 12, 2002

Topics:  Web Usability

Summary: A company's homepage is its face to the world and the starting point for most user visits. Improving your homepage multiplies the entire website's business value, so following key guidelines for homepage usability is well worth the investment.

Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that's not even a square foot in size. For good reason. A homepage's impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company's face to the world. Increasingly, potential customers will look at your company's online presence before doing business with you — regardless of whether they plan to close the actual sale online. (Update: our studies of B2B usability   found that this is the predominant behavior of business users.)

The homepage is the most important page on most websites , and gets more page views than any other page. Of course, users don't always enter a website from the homepage. A website is like a house in which every window is also a door: People can

follow links from search engines and other websites that reach deep inside your site. However, one of the first things these users do after arriving at a new site is go to the homepage. Deep linking is very useful, but it doesn't give users the site overview a homepage offers — if the homepage design follows strong usability guidelines, that is.

Following are ten things you can do to increase the usability of your homepage and thus enhance your website's business value.

Make the Site's Purpose Clear: Explain Who You Are and What You Do1. Include a One-Sentence Tagline

Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site's purpose. It is especially important to have a good tagline if your company's general marketing slogan is bland and fails to tell users what they'll gain from visiting the site.

2. Write a Window Title with Good Visibility in Search Engines and Bookmark Lists

Begin the TITLE tag 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."

3. Group all Corporate Information in One Distinct Area

Finding out about the company is rarely a user's first task, but sometimes people do need details about who you are. Good corporate information is especially important if the site hopes to support recruiting, investor relations, or PR, but it can also serve to increase a new or lesser-known company's credibility. An " About <company-name>" section is the best way to link users to more in-depth information than can be presented on the homepage. (See also my report with 70 guidelines for the design of "about us" areas of corporate websites.)

Help Users Find What They Need4. Emphasize the Site's Top High-Priority Tasks

Your homepage should offer users a clear starting point for the main one to four tasks they'll undertake when visiting your site.

5. Include a Search Input Box

Search is an important part of any big website. When users want to search, they typically scan the homepage looking for "the little box where I can type," so your search should be a box. [Make your search box at least 25 characters wide,] so it can accommodate multiple words without obscuring parts of the user's query.

(Update: Based on more recent findings, my recommendation is now to make the search box 27 characters wide. This and other new guidelines are covered in my tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.)

Reveal Site Content6. Show Examples of Real Site Content

Don't just describe what lies beneath the homepage. Specifics beat abstractions, and you have good stuff. Show some of your best or most recent content.

7. Begin Link Names with the Most Important Keyword

Users scan down the page, trying to find the area that will serve their current goal. Links are the action items on a homepage, and when you start each link with a relevant word, you make it easier for scanning eyes to differentiate it from other links on the page. A common violation of this guideline is to start all links with the company name, which adds little value and impairs users' ability to quickly find what they need.

8. Offer Easy Access to Recent Homepage Features

Users will often remember articles, products, or promotions that were featured prominently on the homepage, but they won't know how to find them once you move the features inside the site. To help users locate key items, keep a short list of recent features on the homepage, and supplement it with a link to a permanent archive of all other homepage features.

Use Visual Design to Enhance, not Define, Interaction Design9. Don't Over-Format Critical Content, Such as Navigation Areas

You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads , and focus on the parts of the homepage that look more likely to be useful.

10. Use Meaningful Graphics

Don't just decorate the page with stock art. Images are powerful communicators when they show items of interest to users, but will backfire if they seem frivolous or irrelevant. For example, it's almost always best to show photos of real people actually connected to the topic, rather than pictures of models.

4) http://www.nngroup.com/articles/top-10-mistakes-web-design/

Top 10 Mistakes in Web Designby JAKOB NIELSEN on January 1, 2011

Topics:  Design Mistakes

  Web Usability

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.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2011.)

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

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.

The page title is contained within the HTML <title> 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 micro-content.

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 theuser-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.

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 inB2B, 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.

5) Available at: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

F-Shaped Pattern For Reading Web Contentby JAKOB NIELSEN on April 17, 2006

Topics: 

Eyetracking  Summary: Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.

F for fast. That's how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that's very different from what you learned in school.

In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users' main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F and has the following three components:

Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F's top bar.

Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F's lower bar.

Finally, users scan the content's left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F's stem.

Obviously, users' scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they'll only read across once, making the pattern look like an inverted L (with the crossbar at the top). Generally, however, reading patterns roughly resemble an F, though the distance between the top and lower bar varies.

Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.

The above heatmaps show how users read three different types of Web pages:

an article in the "about us" section of a corporate website (far left), a product page on an e-commerce site (center), and a search engine results page (SERP; far right).

If you squint and focus on the red (most-viewed) areas, all three heatmaps show the expected F pattern. Of course, there are some differences. The F viewing pattern is a rough, general shape rather than a uniform, pixel-perfect behavior.

On the e-commerce page (middle example), the second crossbar of the F is lower than usual because of the intervening product image. Users also allocated significant fixation time to a box in the upper right part of the page where the price and "add to cart" button are found.

On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first. In this case, both headlines proved equally interesting to users, though users typically read less of the second area they view on a page.

Implications of the F Pattern

The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:

Users won't read your text thoroughly in a word-by-word manner. Exhaustive reading is rare, especially when prospective customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most won't.

The first two paragraphs must state the most important information. There's some hope that users will actually read this material, though they'll probably read more of the first paragraph than the second.

Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. They'll read the third word on a line much less often than the first two words.

Detailed Scanning Behaviors

It's fascinating to watch the slow-motion replay of users' eye movements as they read and scan across a page. Every page has reading issues beyond the dominant F pattern I'm discussing here. For example, users scan in a different, more directed way when they're looking for prices or other numbers, and an interesting hot-potato behavior determines how users look at a list of search engine ads. We also have many findings on how people look at website images.

The biggest determinant for content usability is how users read online — and because people read differently, you have to write differently.