In researching his new book, Googled: the End of the World as We Know It, to be published next week by Penguin Press, author Ken Auletta had extensive access to the company’s inner workings and reported widely on its impact on the media landscape.

In a Fortune.com exclusive, he offers ten enduring lessons drawn from his journey into Google’s realm:

1. Passion wins

Start with the words of advice — “Don’t settle” — that Larry Page offered the Stanford graduating class in 2002. This intensity was revealed in the zeal with which he and Sergey Brin inspired the entire company to “serve the user,” to take more risks, to radically improve search.

Or as CEO Eric Schmidt told me: while he assumed that “Google would be an important company; the founders always assumed that Google would be a defining company.”

A moment after venture capitalist Michael Moritz finished describing Google as “a rare” company, I asked Moritz, an early investor in both Yahoo and Google, whether he felt the same enthusiasm for Yahoo.

He winced, hesitated, then finally said: “Yahoo is a company I’ve been close to for a long time and feel a lot of affection and loyalty towards. But within the first 18 months to two years of being associated with Google, I began to understand this was a very different company than Yahoo. It was rooted in the studies of the founders. Google was built on a foundation of Larry’s and Sergey’s intellectual pursuits. Yahoo was built on the foundations of Jerry’s and David’s interests. And there’s a big gulf between those two.”

That deficit of passion, he suggested, was a reason that Jerry Yang and David Filo chose not to be fully engaged full-time with the company they created.

2. Focus is required

Passion without focus can lead you astray. Bill Campbell, chairman of Intuit and a Silicon Valley mentor who spends a couple of days each week at Google, thinks the key to Google’s success is “focused passion.” He credits Schmidt for bringing a focus to the founders.

In an interview with Betsy Morris of Fortune, Steve Jobs offered an interesting and, typically, upside-down perspective on focus: “People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the 100 other good ideas that there are. You have to pick carefully. I’m actually as proud of the many things we haven’t done as the things we have done.”

Media mogul Barry Diller, who had an unsettling session with Page and Brin in the early days of Google, when Page would not look up from his PDA to talk to him, now thinks what might be construed as rudeness was really focus.

“They had their own method of communicating and processing,” Diller said. “They give much less quarter than other people do to common business courtesies. They’ve stayed true to this. It’s a spectacular strength. It means you never get de-focused by the crowd.”

3. Vision is required too

Without vision, even the most focused passion is a battery without a device. “Don’t be evil” is a vague incantation. But Page and Brin’s effort to make “all the world’s information available,”and to first and foremost serve users, is a vision.

It’s one that successfully drove Google to index the Web, make news and books searchable, treat ads as information and to reject dollars if the ads were not “relevant,” help users search for the best or cheapest products, find simple travel directions, store and search their e-mail, and share calendar information.

Such a vision does not come from survey research. In his 2005 speech to graduating engineers at the University of Michigan, Page told them they didn’t have to go to business school. He said he had read an entire shelf of business books when he was younger, and among the lessons he learned was that “many of the amazing insights that happen in business actually come from people who really aren’t in the business.”

4. A team culture is vital

Google’s allocation of 20% of employee time to projects of their own choice give them a sense of proprietorship. True to its open-source, wisdom-of-the-crowd ideals, Google has created a networked management that functions from the bottom-up as well as the top-down. In both directions, it unleashes ideas and effort.

As Larry Page astutely observes: “There is a pattern in companies, even in technological companies, that the people who do the work — the engineers, the programmers, the foot soldiers if you will — typically get rolled over by the management … you end up kind of demoralized. You want to have a culture where the people who are doing the work, the scientists and the engineers, are empowered. And that they are managed by people who deeply understand what they are doing.”

5. Treat engineers as kings

For most Valley companies, engineers are the equivalent of the television writer, the movie director, the book author. They are the creators. The 20% time Google grants its engineers gives them a sense that they are liberated to take risks, to follow their passions.

Innovation, as Bill Campbell told The McKinsey Quarterly, comes when “the crazy guys have stature, where engineers really are important…. empowered engineers are the single most important thing that you can have in a company.”

It is no accident that Page and Brin and Schmidt spend so many hours each week in meetings with engineers. For most traditional media companies, the engineer is less central.

However, as digital is now part of the mainstream, and as older media companies struggle to master its challenges, they would do well to heed the advice Google’s David Eun offers: Don’t do what these companies traditionally do and stick “the geeks in a corner.” Instead, CEO’s should have at their elbow “a top Chief Technical Officer.”

6. Treat customers like a king

An important reason Google is usually listed among the world’s most trusted brands is that it conveys a sense that the user comes first. Advertising may produce 97% of Google’s revenues, but to a user it doesn’t feel that way. Google services are free, and they’re user friendly, just as an iPod is.

The lessons Larry Page took away from reading Donald A. Norman’s The Design of Everyday Things while a graduate student at Stanford, helped shape Google’s approach to its customers. Or as Page said, “Having an attitude that your customer or users are always right, and your goal is to build systems that work for them in a natural way, is a good attitude to have.”

To understand how Google earned the trust of its users, go back to its 2004 IPO. Again and again it referred to the users as sacrosanct: “We believe that our user focus is the foundation of our success to date. We also believe that this focus is critical for the creation of long-term value. We do not intend to compromise our user focus for short-term economic gain.”

By focusing on the user, Page and Brin provided an organizing principle for Google employees that echoed Sam Walton’s adage: ” ‘If you don’t listen to your customers, someone else will.’”

7. Every company is a frenemy

What Lord Palmerston said of nations applies as well to corporations: There are no permanent allies, only permanent interests. A medium like the internet blurs the borders between companies, sometimes making it more difficult to sight a potential rival or to distinguish between ally and foe.

Google started as a search engine, but quickly realized it could efficiently sell ads or aggregate news or search books or use its infrastructure to create cloud computing or expand into video by acquiring YouTube or expand into mobile devices.

At the same time, Google’s AdSense helps newspapers by supplying them with ad dollars; AdWords partners with ad agencies to sell products; YouTube is a coveted promotional platform for the television networks; Android software supplies an operating system for more than a few mobile telephone companies.

These horizontal ambitions, coupled with the fears aroused by the speed of technological change, inevitably frays the bond of trust among companies. Most companies become frenemies, both cooperating and competing.

8. Don’t ignore the human factor

As a journalist, the deeper one burrows, the more complicated narratives and the people who populate them usually become. Among the enduring truths I keep bumping into when there is the luxury of time to get to know people or institutions, is that their decisions are often made for what are not, strictly speaking, reasons of logic. These can be ascribed to human factors. How to measure wisdom, judgment, sensitivity, relationships?

Google has been wise in winning the trust of its users, in building a team culture, and in thinking long-term. But when you start from a blanket assumption that the old ways of doing things are probably wrong, as Google does, you’re bound to make unwise mistakes.

Page was unwise to assume Google could immediately digitize all books, just as Google was wrong to assume that it could devise formulas to better sell ads for newspapers and broadcast radio, two efforts it has since abandoned. Google has not always been wise in avoiding battles, in being insensitive to copyright, or privacy, or the concerns of government.

9. There are no certitudes

Today, Google appears impregnable. But a decade ago so did AOL, and so did the combination of AOL Time Warner.

“There is nothing about their model that makes them invulnerable,” Clayton Christensen, the Harvard business historian and author of the seminal, The Innovators Dilemma, told me. “Think IBM. They had a 70% market share of mainframe computers. Then the government decided to challenge them. Then the PC emerged.”

Seemingly overnight, computing moved from mainframes to PCs. “Lots of companies are successful and are applauded by the financial community,” Christensen said. “Then their stock price stalls because they are no longer surprising investors with their growth. So they strive to grow but forget the principles that made them great — getting into the market quickly, not throwing money at the wrong thing. When you have so much money you become so patient that you wait too long. Look at Microsoft. No one can fault them for not investing in growth ideas. But none of these have grown up to be the next Windows.”

Maybe, Christensen added, we are now beginning to “see this at Google.” The company has poured money into YouTube and Android and cloud computing, but has yet “to figure out the business model for each.”

10. “Life is long but time is short.”

The words belong to Eric Schmidt, who explained: “Life is long in the sense that we have long memories. Time is short in that you have to move very quickly. But to me the most important thing to know is that life has a way of working things out. We forget so quickly what the problem was three or four years ago. So my personal view of life is that every problem is an opportunity.”

This is a reason to think and act boldly, as Google has, to take risks, and not to be anchored down by “long memories.”

In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it’s important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it’s always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it’s time to dive in.

Usability: Rules and Principles

7±2 Principle

Since human brain has some limits on its capacity for processing information, it deals with complexity dividing information into chunks and units. According to George A. Miller’s studies humans’ short term memory can retain only about 5-9 things at one time. This fact is often used as an argument for limiting the number of options in navigation menus to 7; however there are heated debates about The Myth of “Seven, Plus or Minus 2?. Therefore it’s not clear how the 7±2 Principle can, could or should be applied to the Web. Miller’s studies.

2-Second-Rule

A loose principle that a user shouldn’t need to wait more than 2 seconds for certain types of system response, such as application-switching and application launch time. The choice of 2 seconds is somewhat arbitrary, but a reasonable order of magnitude. Reliable principle: the less users have to wait, the better is the user experience. [UF]

3-Click-Rule

According to this rule users stop using the site if they aren’t able to find the information or access the site feature within 3 mouse clicks. In other words, the rule emphasizes the importance of clear navigation, logical structure and easy-to-follow site hierarchy. In most situations the number of clicks is irrelevant; what is really important is that visitors always know where they are, where they were and where they can go next. Even 10 clicks are OK if users feel that they have a full understanding of how the system works.

80/20 Rule (The Pareto principle)

The Pareto principle (also known as the law of the vital few and the principle of factor sparsity) states that 80% of the effects comes from 20% of the causes. This is the basic rule of thumb in business (”80% of your sales comes from 20% of your clients”), but can also be applied to design and usability. For instance, dramatic improvements can often be achieved by identifying the 20% of users, customers, activities, products or processes that account for the 80% of contribution to profit and maximizing the attention applied to them. [Wikipedia]

Eight Golden Rules of Interface Design

As a result of Interface Design Studies, Ben Shneiderman proposed a collection of principles that are derived heuristically from experience and applicable in most interactive systems. These principles are common for user interface design, and as such also for web design.

1. Strive for consistency.
2. Enable frequent users to use shortcuts.
3. Offer informative feedback.
4. Design dialog to yield closure.
5. Offer simple error handling.
6. Permit easy reversal of actions.
7. Provide the sense of control. Support internal locus of control.
8. Reduce short-term memory load.

You can learn more details about Shneiderman’s Rules For Design in Wikipedia: Shneiderman’s rules for design.

Fitts’ Law

Published by Paul Fitts in 1954, Fitts’ law is a model of human movement which predicts the time required to rapidly move to a target area, as a function of the distance to the target and the size of the target. The law is usually applied to the movement of the mouse visitors have to perform to get from point A to point B. For instance, the rule can be important to place the content areas in a more usable way to maximize their accessibility and improve click rates.

Inverted Pyramid

The inverted pyramid is a writing style where the summary of the article is presented in the beginning of the article. This approach makes use of the “waterfall effect” well-known in journalism where writers try to give their readers an instant idea about the topic they’re reporting. The article begins with a conclusion, followed by key points and finally the minor details such as background information. Since web users want instant gratification, the inverted pyramid style, as supported by Nielsen, is important for web writing and for better user experience.

Satisficing

Web users don’t prefer optimal ways to find the information they’re looking for. They aren’t interested in the most reasonable and sound solution to their problem. Instead they permanently scan for quick’n’dirty-solutions which are “good enough”. Applied to Web, satisficing describes exactly this approach: users settle with a solution to a problem that is “good enough” — even if alternative solutions can better fulfill their requirements in a long run. [I-D]

Psychology Behind Usability

Baby-Duck-Syndrome

Baby Duck Syndrome describes the tendency for visitors to stick to the first design they learn and judge other designs by their similarity to that first design. The result is that users generally prefer systems similar to those they learned on and dislike unfamiliar systems. This results in the usability problems most re-designs have: users, get used with previous designs, feel uncomfortable with new site structure they have to find their way through.

Banner-Blindness

Web users tend to ignore everything that looks like advertisement and, what is interesting, they’re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.

Cliffhanger-Effect (Zeigarnik-Effect)

Human beings can’t stand uncertainty. We tend to find answers to unanswered questions we are interested in as soon as possible. Cliffhanger-effects are based upon this fact; movies, articles and plots with Cliffhanger-effect have an abrupt ending, often leaving with a sudden shock revelation or difficult situation. The effect is often used in advertisement: asking the visitors unanswered and provocative questions advertisers often tend to force them to read the ad, click on the banner or follow a link.

Found out by Bluma W. Zeigarnik in 1927, this effect establishes an emotional connection with readers and is extremely effective in terms of marketing. Visitors can better remember what the ad is about and even smallest details are stored more clearly and precisely. In Web writing the Cliffhanger-effect is also used to bound the visitors to a web-site (e.g. “Grab our RSS-Feed to ensure you don’t miss the second part of the article!”).

Gestalt principles of form perception

These principles are the fundamental rules of human psychology in terms of human-computer-interaction-design.

* The law of proximity posits that when we perceive a collection of objects, we will see objects close to each other as forming a group.
* The law of similarity captures the idea that elements will be grouped perceptually if they are similar to each other.
* The Law of Prägnanz (figure-ground) captures the idea that in perceiving a visual field, some objects take a prominent role (the figures) while others recede into the background (the ground).
* The law of symmetry captures the idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their centre.
* The law of closure posits that we perceptually close up, or complete, objects that are not, in fact, complete. Ibm in 30 Usability Issues To Be Aware Of. We perceive the letters ‘I’, ‘B’, and ‘M’ although the shapes we see, in fact, are only lines of white space of differing length hovering above each other. Source.

You can find more information in the article Gestalt principles of form perception

The Self-Reference Effect

Self-reference effect is particularly important for web writing and can dramatically improve the communication between authors and readers. Things that are connected to our personal concept are remembered better than those which aren’t directly connected to us. For instance, after reading an article users better remember the characters, stories or facts they had personal experience with. In Usability the self-reference effect is usually used in terms of web writing and content presented on a web-site.

Usability Glossary: Terms and Concepts

Eye-Tracking

Eye tracking is the process of measuring either the point of gaze (”where we are looking”) or the motion of an eye relative to the head. eye tracking monitor records every eye movement and highlights the most active areas on the site visually. Eye-tracking studies can help to estimate how comfortable web users are with the web-site they’re browsing through and how quickly they can understand the structure and system behind it. You can find some interesting usability findings from recent eye-tracking study Eyetrack07.

Fold

The fold is defined as the lowest point where a web-site is no longer visible on the screen. The position of the fold is, of course, defined by the screen resolution of your visitor. The region above the fold (also called screenful) describes the region of a page that is visible without scrolling. Since the fold is seen directly without scrolling, it is often considered as the area which guarantees the highest possible ad click rates and revenues. However, Fold area isn’t that important. [Usability.gov]

Foveal viewport (Foveal area)

The fovea, a part of human’s eye, is responsible for sharp central vision, which is necessary in humans for reading, watching television or movies, driving, and any activity where visual detail is of primary importance. Foveal area is a small wide space area where your eyes are aimed at and it is the only area where you can perceive the maximum level of detail. Foveal area is a tight area of about two degrees of visual field or two thumbnails held in front of your eyes. This is the place where you’d like to deliver the most important messages of your visitors.

Foveal viewport is important, because outside of this wide screen area how your visitors see your web-pages change dramatically. Inside this area is the only part of your vision with the maximal resolution – only here no eye scanning is necessary. [Source]

Gloss

Gloss is an automated action that provides hints and summary information on where the link refers to and where it will take the user once it’s clicked. Hints can be provided via title-attribute of links. From the usability point of view users want to have the full control over everything what is happening on a web-site; clear and precise explanations of internal and outgoing links, supported by sound anchor text, can improve the usability of a web-site.

Graceful Degradation (Fault-tolerance)

Graceful Degradation is the property of a web-site to present its content and its basic features even if some of its components (partly or at all) can’t be displayed or used. In practice it means that web-sites display their content in every possible “fault” scenario and can be used in every configuration (browser, plug-ins, connection, OS etc.) the visitor might have. “Power-users” are still offered a full, enhanced version of the page. For instance, it’s typical to offer alternatives for Multimedia-content (for instance image) to ensure that the content can be perceived if images can’t be displayed. [Wikipedia]

Granularity

Granularity is the degree to which a large, usually complex data set or information has been broken down into smaller units.

Hotspot

Hotspots are clickable site areas which change their form or/and outer appearance once they are clicked. This is typical for :focus-effects when a link or any other site element is clicked.

Legibility

Legibility indicates how clear the text is visually.

Minesweeping

Minesweeping stands for user interactions which aim to identify the links on a web-site. In most cases minesweeping is a clear alarm signal for usability problems. Usually minesweeping involves the user rapidly moving the cursor or pointer over a page, watching to see where the cursor or pointer changes to indicate the presence of a link. [Usability.gov]

Mystery-Meat Navigation (MMN)

In Web mystery-meat navigation describes designs in which it is extremely difficult for users to recognize the destinations of navigational hyperlinks — or determine where the hyperlinks are.

Physical consistency

This concept describes the consistent outer appearance of a web-site – e.g. the position of logos, navigation, the use of graphic elements and typography. Physical consistency is essential for better orientation and effective site navigation.

Progressive Enhancement (PE)

Progressive Enhancement is a design strategy in which sites are created in a layered fashion — from the basic functionality for all browsers to the additional, enhanced features for modern browsers. The main advantage of progressive enhancement lies in its “universal usability” — i.e. the fact that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. [Wikipedia]

Readability

Readability describes the degree to which the meaning of text is understandable, based on the complexity of sentences and the difficulty of vocabulary. Indexes for readability usually rank usability by the age or grade level required for someone to be able to readily understand a reading passage. Readability is not legibility. [Usability Glossary]

User-centered design (UCD)

User-centered design is a design philosophy in which users, their needs, interests and behavior define the foundation of web-site in terms of site structure, navigation and obtaining the information. UCD is considered as a standard approach for modern web-applications, particularly due to the rise of user generated content. In Web 2.0 visitors have to be motivated to participate and therefore need conditions optimized for their needs.

Vigilance (sustained attention)

Vigilance is the ability to sustain attention during prolonged, monotonous tasks such as proofreading a text looking for spelling errors, reminding of appointments, auto-saving word processor documents etc. In modern web-applications vigilance tasks are performed in background, automatically and thus improve the usability of the service. [I-D]

Walk-Up-And-Use Design

A Walk-up-and-use design is self-explanatory and intuitive, so that first-time or one-time users can use it effectively without any prior introduction or training. [I-D]

Wireframe

A wireframe is a basic structure — skeleton — of a site that describes the ideas, concepts and site structure of a web-site. Wireframes can be designed as presentations which explain to the stake holders how the site is designed, which functionality it offers and how users can accomplish their tasks. Wireframes usually don’t have any visual elements or a complete page layouts; they are often first drafts and sketches designers create on paper.

Form Labels Work Best Above The Field

A study by UX Matters found that the ideal position for labels in forms is above the fields. On many forms, labels are put to the left of the fields, creating a two-column layout; while this looks good, it’s not the easiest layout to use. Why is that? Because forms are generally vertically oriented; i.e. users fill the form from top to bottom. Users scan the form downwards as they go along. And following the label to the field below is easier than finding the field to the right of the label.

tumblr

Tumblr
Tumblr features a simple and elegant sign-up form that adheres to UX Matter’s recommendation.

Positioning labels on the left also poses another problem: do you left-align or right-align the labels? Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field. Right-aligning does the reverses: it makes for a good-looking but less scannable form. Labels above fields work best in most circumstances. The study also found that labels should not be bold, although this recommendation is not conclusive.

Users Focus On Faces

People instinctively notice other people right away when they come into view. On Web pages, we tend to focus on people’s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people’s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.

eye tracking
Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.

eye tracking
And now the baby is looking at the content. Notice the increase in people looking at the headline and text.

Here’s an eye-tracking study that demonstrates this. We’re instinctively drawn to faces, but if that face is looking somewhere other than at us, we’ll also look in that direction. Take advantage of this phenomenon by drawing your users’ attention to the most important parts of your page or ad.

Quality Of Design Is An Indicator Of Credibility

Various studies have been conducted to find out just what influences people’s perception of a website’s credibility:

* Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today
* What Makes A Web Site Credible? A Report on a Large Quantitative Study
* The Elements of Computer Credibility
* Elements that Affect Web Credibility: Early Results from a Self-Report Study (Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

Fever
We don’t know if Fever app is any good, but the sleek user interface and website make a great first impression.

One interesting finding of these studies is that users really do judge a book by its cover… or rather, a website by its design. Elements such as layout, consistency, typography, color and style all affect how users perceive your website and what kind of image you project. Your website should project not only a good image but also the right one for your audience.

Other factors that influence credibility are: the quality of the website’s content, amount of errors, rate of updates, ease of use and trustworthiness of authors.

Most Users Do Not Scroll

Jakob Nielsen’s study on how much users scroll (in Prioritizing Web Usability) revealed that only 23% of visitors scroll on their first visit to a website. This means that 77% of visitors won’t scroll; they’ll just view the content above the fold (i.e. the area of the page that is visible on the screen without scrolling down). What’s more, the percentage of users who scroll decreases with subsequent visits, with only 16% scrolling on their second visit. This data highlights just how important it is to place your key content on a prominent position, especially on landing pages.

This doesn’t mean you should cram everything in the upper area of the page, just that you should make the best use of that area. Crowding it with content will just make the content inaccessible; when the user sees too much information, they don’t know where to begin looking.

Basecamp
Basecamp makes great use of space. Above the fold (768 pixels high), it shows a large screenshot, tagline, value proposition, call to action, client list, videos and short feature list with images.

This is most important for the home page, where most new visitors will land. So provide the core essentials there:

1. Name of the website,
2. Value proposition of the website (i.e. what benefit users will get from using it),
3. Navigation for the main sections of the website that are relevant to the user.

However, users’ habits have significantly changed since then. Recent studies prove that users are quite comfortable with scrolling and in some situations they are willing to scroll to the bottom of the page. Many users are more comfortable with scrolling than with a pagination, and for many users the most important information of the page isn’t necessarily placed “above the fold” (which is because of the variety of available display resolutions a quite outdated, deprecated term). So it is a good idea to divide your layout into sections for easy scanning, separating them with a lot of white space.

For further information please take a look at the articles Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – SURL), Blasting the Myth of the Fold (Boxes and Arrows). (thanks, Fred Leuck).

Blue Is The Best Color For Links

While giving your website a unique design is great, when it comes to usability, doing what everyone else is doing is best. Follow conventions, because when people visit a new website, the first place they look for things are in the places where they found them on most other websites; they tap into their experience to make sense of this new content. This is known as usage patterns. People expect certain things to be the same, such as link colors, the location of the website’s logo, the behavior of tabbed navigation and so on.

Google
Google keeps all links on its websites blue for a reason: the color is familiar to most users, which makes it easy to locate.

What color should your links be? The first consideration is contrast: links have to be dark (or light) enough to contrast with the background color. Secondly, they should stand out from the color of the rest of the text; so, no black links with black text. And finally, research shows (Van Schaik and Ling) that if usability if your priority, sticking to blue for links is best. The browser’s default link color is blue, so people expect it. Choosing a different color is by no means a problem, but it may affect the speed with which users find it.

The Ideal Search Box Is 27-Characters Wide

What’s the ideal width of a search box? Is there such a thing? Jakob Nielsen performed a usability study on the length of search queries in website search boxes (Prioritizing Web Usability). It turns out that most of today’s search boxes are too short. The problem with short boxes is that even though you can type out a long query, only a portion of the text will be visible at a time, making it difficult to review or edit what you’ve typed.

The study found that the average search box is 18-characters wide. The data showed that 27% of queries were too long to fit into it. Extending the box to 27 characters would accommodate 90% of queries. Remember, you can set widths using ems, not just pixels and points. One em is the width and height of one “m” character (using whatever font size a website is set to). So, use this measure to scale the width of the text input field to 27-characters wide.

Google search
Google’s search box is wide enough to accommodate long sentences.

Apple search
Apple’s search box is a little too short, cutting off the query, “Microsoft Office 2008.”

In general, search boxes are better too wide than too short, so that users can quickly review, verify and submit the query. This guideline is very simple but unfortunately too often dismissed or ignored. Some padding in the input field can also improve the design and user experience.

White Space Improves Comprehension

Most designers know the value of white space, which is the empty space between paragraphs, pictures, buttons and other items on the page. White space de-clutters a page by giving items room to breathe. We can also group items together by decreasing the space between them and increasing the space between them and other items on the page. This is important for showing relationships between items (e.g. showing that this button applies to this set of items) and building a hierarchy of elements on the page.

The Netsetter
Notice the big content margin, padding and paragraph spacing on The Netsetter. All that space makes the content easy and comfortable to read.

White space also makes content more readable. A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

In fact, according to Chaperro, Shaikh and Baker, the layout on a Web page (including white space, headers, indentation and figures) may not measurably influence performance but does influence user satisfaction and experience.

Effective User Testing Doesn’t Have To Be Extensive

Jakob Nielsen’s study on the ideal number of test subjects in usability tests found that tests with just five users would reveal about 85% of all problems with your website, whereas 15 users would find pretty much all problems.

User tests
Source: Jakob Nielsen’s AlertBox

The biggest issues are usually discovered by the first one or two users, and the following testers confirm these issues and discover the remaining minor issues. Only two test users would likely find half the problems on your website. This means that testing doesn’t have to be extensive or expensive to yield good results. The biggest gains are achieved when going from 0 test users to 1, so don’t be afraid of doing too little: any testing is better than none.

Informative Product Pages Help You Stand Out

If your website has product pages, people shopping online will definitely look through them. But many product pages lack sufficient information, even for visitors doing a quick scan. This is a serious problem, because product information helps people make purchasing decision. Research shows that poor product information accounts for around 8% of usability problems and even 10% of user failure (i.e. the user gives up and leaves the website) (Prioritizing Web Usability).

iPod marketing page
Apple provides separate “Tech Specs” pages for its products, which keeps complicated details away from the simpler marketing pages, yet provides easy access when they’re needed.

Provide detailed information about your products, but don’t fall into the trap of bombarding users with too much text. Make the information easy to digest. Make the page scannable by breaking up the text into smaller segments and using plenty of sub-headings. Add plenty of images for your products, and use the right language: don’t use jargon that your visitors might not understand.

Most Users Are Blind To Advertising

Jakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they’re looking for a snippet of information on a page or are engrossed in content, they won’t be distracted by the ads on the side.

The implication of this is not only that users will avoid ads but that they’ll avoid anything that looks like an ad, even if it’s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.

FlashDen
The square banners on the left sidebar of FlashDen are actually not ads: they’re content links. They do look uncomfortably close to ad banners and so may be overlooked by some users.

That said, ads that look like content will get people looking and clicking. This may generate more ad revenue but comes at the cost of your users’ trust, as they click on things they thought were genuine content. Before you go down that path, consider the trade-off: short-term revenue versus long-term trust.

Bonus: Findings From Our Case-Studies

In recent years, Smashing Magazine’s editorial team has conducted a number of case studies in an attempt to identify common design solutions and practices. So far, we have analyzed Web forms, blogs, typography and portfolios; and more case studies will be published next month. We have found some interesting patterns that could serve as guidelines for your next design.

Here, we’ll review some of the practices and design patterns that we discovered in our case studies in this brief, compact overview, for your convenience.

According to our typography study:

* Line height (in pixels) ÷ body copy font size (in pixels) = 1.48
1.5 is commonly recommended in classic typographic books, so our study backs up this rule of thumb. Very few websites use anything less than this. And the number of websites that go over 1.48 decreases as you get further from this value.
* Line length (pixels) ÷ line height (pixels) = 27.8
The average line length is 538.64 pixels (excluding margins and padding), which is pretty large considering that many websites still have body copy that is 12 to 13 pixels in font size.
* Space between paragraphs (pixels) ÷ line height (pixels) = 0.754
It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of paragraph leading. The reason may be that leading usually includes the space taken up by descenders; and because most characters do not have descenders, additional white space is created under the line.
* Optimal number of characters per line is 55 to 75
According to classic typographic books, the optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular in practice.

According to our blog design study:

* Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).
* The home page shows excerpts of 10 to 20 posts (62%).
* 58% of a website’s overall layout is used to display the main content.

According to our Web form design study:

* The registration link is titled “sign up” (40%) and is placed in the upper-right corner.
* Sign-up forms have simple layouts, to avoid distracting users (61%).
* Titles of input fields are bolded (62%), and fields are vertically arranged more than they are horizontally arranged (86%).
* Designers tend to include few mandatory fields and few optional fields.
* Email confirmation is not given (82%), but password confirmation is (72%).
* The “Submit” button is either left-aligned (56%) or centered (26%).

According to our portfolio design study:

* 89% of layouts are horizontally centered, and most of them have a large horizontal navigation menu.
* 47.2% of portfolios have a client page, and 67.2% have some form of standalone services page.
* 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches.
* Contact pages contain driving directions, phone number, email address, postal address, vCard and online form,

Many of the usability issues I discover nowadays can be very subtle indeed, difficult to describe even, let alone write guidelines for, but I’ve collected together a list of 10 of the most common usability issues I find so that you can see how your site measures up.

1. No Search Results Found

It can be difficult to “test” the search engine on your site, you enter “apples” and find apples… there.. done. But frequently when I actually try to work out what customers are searching for I end up with the dreaded “No Results Found” page. I would argue that there is no excuse for ever showing no results no matter how odd the search. Go to your web site and really use the search engine for once and see if it ever returns no
results.

Some suggestions

• Given that people are using the search engine, you can assume that people are looking for something
  so why not at least show the last 5 things searched for, or the 5 most popular products or pages?
• Does your internal search engine know what to do with synonyms? Will it find the same items for “ipod”
  and “i-pod”? If not you need to do some work.
• At a presentation a long time ago by the tech guys from BBC search, they showed how they’d implement
  what they call “Best Bets”. It was a great if simple idea in which they’d identified items they’d expect
  people to want if they typed a certain word into a certain section of the web site at a certain time.
  These “best bets” were returned along with the usual search results.
• Make sure you have at your disposal the list of search terms used on your site that returned no search
  results and do something about that.

2. Somewhere To Go Next

When designing web sites, it’s tempting to think of them as a tree structure, with categories being branches or departments and the individual pages being the leaves, but it’s not. The visitors to your web site rarely use it as you designed it, often landing on a page deep in the site missing the home page altogether. Often the page a visitor will not contain the information they need but because this page has been designed as a destination (or leaf) rather than as a step in a journey and have nowhere to go next. It’s then tempting to assume that your site navigation will encourage visitors to explore further, but some recent recent research found that many web users are “navigation blind”, passing as little heed to site navigation as they do banner ads. Having somewhere to go next also usefully avoids the reduction in sales in what Jared Spool amusingly calls “The Back Button of Death”.

Some suggestions

• Create landing pages that meet your customers needs rather than arguing with colleagues about who
  has most prominence on your home page.
• Don’t assume that your site navigation will be used. Think about the linkages between your content
  rather than the categories.
• Design and author the relationships or the “journey” rather than the structure of your site.
• As an exercise, look at your site without the main navigation. Is it still navigable?
• Add extra inline links where appropriate. No content is an island.

3. Facetted Search Results

Search results and product listing pages are often arbitrarily chunked into say 10 or 20 items? It may return 3 or 4 hundred matches or more, too many results to read really. One of the easiest ways you can improve your site is to add search filters or “facets” to your search engine so that when people search, the attributes of the items found can be used to easily further drill down on what they are looking for. The example below from the Delia Smith web site shows how a search for “chicken” can
be easily further filtered using the “Also found in” links at the right hand side.

4. Default Actions

On many sites you have a main task you are trying to achieve, whether it’s finding a present for someone or buying a train ticket. All these sites break down these tasks into separate screens but often fail to make it clear what THE ONE THING you should do on a particular page. Amazon do a great job of designing buttons that are the “Default Action”. There are other buttons on the page, but it is always obvious which is the button you should click next to achieve your task. The Amazon screen below has lots of things I could do (Change quantities, add gift wrapping etc.) but the “Place your order” button really stands out well. Now go to your web site
and see if it is visually clear what you want your visitors to do.

5. The 1, 2, 3 of Design Purpose

So many sites fail on this one. You’d be amazed but often, the owners of a web site haven’t actually even decided what the purpose of their web site is, they have a web site because everyone else has one or because it seemed like a good idea at the time. Given the way we all use the web, I reckon you probably have roughly 3 milliseconds to convince someone that your web site is where they should be. This is how I break down
that precious moment for a first time visitor…

1. Am I in the right place? Does your company name or strap line peripherally assure people that they
   are in the right place? Are the images used helpful?
2. Am I convinced by this site? Does what’s on screen or deeper in the site, reinforce the customers
   credibility of your company as they explore what you have to offer? Visitors are looking to be convinced so are you
   doing all you have to convince them?
3. What should I do now? What is the ONE THING you people to do? Is it to call you, or to buy something
   or to sign up or to remember you or what? Tell them to do that thing. Make it clear how to do that thing. Make
   the design focus on doing that one thing.

Go to your site and see if you can visually and conceptually recognize the 1, 2, 3 in your design.

6. Chocolate Box Syndrome

Human beings put things in categories, we can’t help it, but categories are also where lots of problems arise. For example, imagine that a web site, like life, was a box of chocolates and categorized thus…

• Soft centres
• Hard centres
• Ones that nobody likes

I wouldn’t want to choose which category to click, but in general I have a very clear idea of which type of chocolate I’d like. Whether or not you should categorize chocolates like this or not is something you’d need to test using card-sorting techniques with your customers but the usability of these categories can be significantly improved by showing some of the items in it.

So, the above example might be changed to look like this…

• Soft centres (23)
• Hard centres (4)
• Ones that nobody likes(4)

..which at least gives us some clue as to what the arbitrary categories contain in terms of
numbers. But it may be better served by showing it’s contents with a fuller description, like
this…

• Soft centres (dark chocolate orange creme, strawberry creme, coffee truffle more
• Hard centres (butterscotch toffee, hazelnut crunch, caramel more
• Ones that nobody likes ( turkish delight, crystallized ginger, praline more

Given that I prefer dark chocolate over milk, I am able to be encouraged into clicking, maybe going straight to the item I’d like (the “dark chocolate orange”) and not wonder if the caramel is one of those nice gooey ones. When a category, such as “Soft Centre” reveals some of its contents, it helps us to better understand the parameters of the category. And given, in most cases, we’d like to know what we are going to get before we get it, because a category (or link) reveals some of it’s contents we are more likely to be tempted into clicking it. Now visit your site and assess whether the categories you use “reveal their contents” or not.

7. The Anxiety Test (why, why, why?)

This is a really easy test to run. It helps if you drink way too much strong coffee first. All you have to do is use your site and imagine worrying nervously and endlessly about every element on every page. For example, in the registration process, you could imagine worrying…

• Why do they want my address? Will they send me junk mail though the post?
• Will you sell my address?
• I wonder if you’ll call round when I haven’t tidied up a bit?
• What if I’m moving house next week? Can I change it later?
• Is this my credit card address or where I’m living now? Will this checkout process break?
• I don’t know my post code yet, does this matter?
• Is “rd” OK or should I type “road”
• Do I really have to fill all these address fields?

Particularly for form items, where possible, it is reasonable to tell people what the implications of giving up some information are, why you need it and in what format you’d ideally like it. This puts people at ease with your site because it…

• calms anxieties and makes people more likely to buy
• reduces the errors people tend to make, creating a better experience
• sets expectations and helps to build trust

8. 404 Page Not Found

This is a simple test too. Add some random characters at the end of your URL and hit return and see what you get. What can you say? Sometimes people will link to you and get the URL completely wrong. It happens. Why not accept that it’s going to happen and design for it. Don’t think of your 404 page as simply an error page, think of it as a page from which people should be able to get to the page they really wanted.

9. Newsletter Honesty

This test is related to both The Anxiety Test and The Chocolate Box Syndrome. Many sites offer the option to sign up for an email newsletter without telling the visitor…

• What the newsletter contains
• How frequent the newsletters are
• What you are going to do with their email address
  Given that most people are precious about their email In Tray. Does your site?
• Show examples of previous newsletters so that people can assess whether or not it is the type of thing
  they’d like to receive. If not why not?
• Is it honest about how often you send out the newsletter? Is it once a day, week, season?
• Do you state clearly what you will do with their email address?

10. Page Titles

I still occasionally find sites where every page share the same title. Not the title as it appear inside the window, but in the window bar. It’s not as common a mistake as it used to be but it’s still happening. Page titles are hugely important to the usability of your customers browser bookmarks but also hugely important with regards to how Google works and how people find you. So, perform the test of …What does your site look like in Google search results? For many people this is the one chance you
have to convince them that your site is worth visiting. They don’t get to see your lovely new design, they don’t get to experience how usable your site is; all they see of your site is the blue, black and green of Google and the titles you have created.

Chances are you’ve seen the video showing how the iPhone can flip and expand Web pages. It can show you the entire Web page at a glance or zoom in to make the text you’re interested in readable. In one sense, since the iPhone uses Safari, Web designers shouldn’t have to do anything special to create a Web page that will work on the iPhone.

But do you really want your page to just work? Most designers want their pages to shine!

[polldaddy poll=1303861]

When you build a Web page you need to think about who’s going to view it and how they are going to view it. Some of the best sites take into account what type of device the page is being viewed on, including the resolution, color options, and available functions. They don’t just rely on the device to figure it out.

General Guidelines for Building a Site for iPhones

• Test on as many phones as you can
  The first thing you should do is view your site on a cell phone or 10 different cell phones. While there are some emulators out there, they really don’t give you the same feel as trying to navigate through a Web site on the tiny little screen.
• Make your pages degrade gracefully.
  You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special features (like cookies, Ajax, Flash, JavaScript, etc.). Anything beyond XHTML Basic will be beyond some cell phones.
• Build a wireless specific page – and make it easy to find
  If you’re going to build a specific page for your cell phone and wireless customers – make it available. A great way is to put the link to the wireless page at the very top of your document, and then hide that link from non-handheld devices using the handheld media type. After all, most people come to your home page, even on cell phones – and if the link to your wireless page isn’t there, they’ll leave if the page is too hard to use.

Web Page Layout for iPhones

• Remember that the screen is tiny. Web pages that are multiple thin columns (like the New York Times site that the iPhones ads feature) are going to work better on cell phones than Web pages with one large column. The narrower the content is on your normal page, the less it will have to shrink to fit a cell phone window.
• Divide pages into smaller chunks. It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes them easier to read.

Links and Navigation on iPhones

• The shorter the links are, the better. If you’ve ever tried to type in a URL on a cell phone, you’ll know that it’s a pain (except perhaps for teens who are used to SMSing 24/7). Even on the iPhone it’s tedious to type in long URLs. Keep them short.
• Don’t put your navigation at the very top of the screen. There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you’ve looked at Web pages that were designed for cell phones, you’ll see that the first things that show up are the content and headline. Then, below that is navigation.
• Access keys are a gift from heaven on cell phones, especially when the links or form fields make it clear what keys can be hit to get that link. If you get into the habit of using access keys on your Web pages, your cell phone users will be ecstatic.

Tips for Images on iPhones

• The images must be small. Yes, the iPhone can zoom and unzoom in on images, but the smaller they are, in both dimensions and download time, the happier your wireless customers will be. Optimizing images is always a good idea, but for cell phone pages, it’s critical.
• Images must download quickly. Images take up a lot of space on Web pages when you’re viewing them from an iPhone. And while they are often very nice and make the pages look better when viewed on a full-screen Web browser, they often get in the way on a mobile device.
• Don’t put large images at the top of the page. Just as with navigation, it can be very tedious to wait for an image that takes up 3-4 screenfuls to load at the very top of the page. And this is extremely common on Web pages.

What to Avoid When Designing for iPhones

There are several things you should avoid when building a wireless friendly page. As I mentioned above, if you really want to have these on your page, you can, but make sure that the site works without them.

• Flash – most cell phones do not support Flash, so it’s not a good idea to include it on your wireless pages.
• Cookies – most cell phones have no cookie support.
• Frames – even if the browser supports them, think about the dimensions of the screen. Frames just don’t work on wireless devices – they’re very difficult or impossible to read.
• Tables – don’t use tables for layout on a wireless page. And try to avoid tables in general. They aren’t always supported and you can end up with strange results.
• Nested tables – if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and at best make the page load more slowly.
• Absolute measures – in other words, don’t define the dimensions of objects in absolute sizes (like pixels, millimeters, or inches). If you define something as 100px wide, on one mobile device that might be half the screen and on another it might be two times the width. Relative sizes (like ems and percentages) work best.
• Fonts – don’t assume that any of the fonts you’re used to having access to will be available on the cell phones.

The more visible your website is in the search engine results, the more likely your website is to be visited. Therefore, its vital that your website demonstrates good web usability, by being user-friendly, easy to navigate and efficiently organised. A major benefit of good web usability is that the more usable your website is, the longer users are likely to stay it, thus they are more likely to buy your products or services.

A further advantage of implementing good web usability is that it leads naturally to SEO, for reasons such as:

* Effective use of keywords helps your users find the information they want and – for SEO – keywords play a major part in search engine algorithms and search engine results
* Use of concise and accurate titles and headings helps users find information on your website and – for SEO – helps the search spider analyse your website
* Good use of CSS (Cascading Style Sheets) improves the layout and consistency of navigation of your website and – for SEO – enables the search spider to actually index your content, rather than coding

In short, the combination of good web usability and an effective SEO campaign will have long lasting positive effects for your website – and business.

User Type Shaping employs a combination of techniques to identify who a product’s users are. The first part of the process involves narrowing and focussing the possible field of users by drawing on techniques from cultural studies and anthropology. These techniques illuminate both the context in which the organisation’s products exist, and who the products users may be. The study focuses on material culture such as objects, environments, visual and verbal language, media representations, as well as any existing research, and ad hoc interviews. Part of the intention is to understand where and how possible users may come into contact with the product. The research data is then represented visually and analysed until key themes and initial user types emerge.

The initial user types identified during the contextual research are then explored further through field research, using ethnographic-based observations and interviews. Once tested in the field, initial assumptions may be validated or refined, and new user types may be uncovered.

During the field study it is also possible to explore any needs the users might have, and potential opportunity areas for the product. The data from the field research is then analysed and shaped into draft user types and represented by personas. The user types may then be further shaped and refined with key stakeholders in a workshop setting.

Whilst User Type Shaping can be used to create personas, it should not be confused with standard persona development. For not much more effort than standard persona development, User Type Shaping offers an organisation that has previously had little idea of who their users are the opportunity to identify them, based on rich qualitative data which goes beyond that produced by quantitative methods. In addition, it provides the organisation with a rich picture of the cultural landscape in which their product and their users are situated, which is valuable for understanding future opportunities and how the product might be developed and presented. With a picture of who a products users are, User Type Shaping enables the recruitment of participants for future user centred design activities based on evidence that does not rely on a segmentation designed for marketing. During the User Type Shaping process, the organisation’s knowledge of who their users are, their attitudes, behaviours, and needs is increased, and since these types will be researched in future studies this knowledge will increase with each study.