Ad

30 December, 2008

User Needs & Goals

Empower the user
  • People cost a lot more money than machines, and while it might appear that increasing machine productivity must result in increasing human productivity, the opposite is often true. Users determine the life and death of your product. If you understand your users' needs and how they actually use the product, then you have the information necessary to make improvements.
  • The UCD team try to understand their target audience so that they can determine what the User are looking for in the product.
  • The UCD standard practice is to have status mechanisms to keep users aware and informed at all times, keeping status information up to date and within easy view.
  • Keep the user occupied. Since, typically, the highest expense in a business is labor cost. Any time the user must wait for the system to respond before they can proceed, money is being lost.
  • To maximize the efficiency of a business or other organization you must maximize everyone’s efficiency, not just the efficiency of a single group.
  • The system should provide the users with all possible signs and directions so that even with the least brain work they are able to sail get their job done in the least possible time. However, there should be details available for those who want to research and find more from the system.
  • The UCD team conduct a full assessment of user’s proposed or existing product, and identify the strengths and weaknesses. From these strengths and weaknesses, they develop a targeted plan for how to improve the overall user experience. They examine both how existing screens and processes can be re-purposed, as well as what needs to be redesigned.
  • The UCD team entire design process is iterative, where they rely heavily on user and client feedback to determine which direction to steer. It is rare that they get it right on the first try and even after years and years of experience; They are constantly improving and challenging themselves.
  • Make user interfaces highly explorable.
  • Offer users stable perceptual cues for a sense of "home”.
  • Make Actions reversible.
  • Always allow, “Undo”.
  • Always allow a way out. However, make it easier to stay in.

25 December, 2008

Contextual User Interfaces on the Web


It is ironic that it took web UIs so long to discover the elegance and simplicity of context. Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

A good example of context-based UIs can be found in modern video players. The controls in these apps are hidden until the user moves the mouse over the player. Depicted below is the player from Vimeo.

Another typical element of contextual UI is modal DHTML dialogs. Regular modal dialogs are annoying to the user, but the modal DHTML ones work great because they bring the actions into the spotlight. For example, the dialog below comes up when the user clicks on Embed option in the screen above.

Note the contextual options in the screen above. The user can either preview the video or customize its look. Neither of these options are required so they appear as closed off toggles. If the user decides to explore the option, the toggle simply expands as shown below.

Another important breakthrough in the contextual UI approach is the realization that function is more important than design. The famous Apple mantra that design is the function is true, but not everyone can design like Apple. Lots of web sites in the nineties ended up with designs that were overwhelming and needlessly flashy. Those designs paid more attention to colors and forms than to the function. The new UIs are different, because a lot of them are purposely plain. They favor CSS over images, and focus on function and context instead of knock-out looks.

Lots of companies got the context bug. Flickr, Digg, and 37 Signals are just a few that use contextual interfaces. Our next example comes from the literary social network Shelfari, which developed a contextual UI for interacting with individual books. The remarkable thing about this UI is that it violates a lot of classic principles yet it succeeds in delivering the necessary functions in a contextual and compact way.

When the user mouses over a book, a contextual popup comes up containing information about the book and a set of associated actions. Part of the popup is a button/menu (sort of like a button and combo box) widget that allows the user to provide information about what he or she did with the book. The first thing to note is that combination of a button in a menu is not standard, yet it makes sense because it saves a click for the most important action. Secondly, the menu is effectively a popup within a popup, which is a big no-no in the classic world, but works well in this context. The elements of the menu are not buttons but check boxes, which allow multiple selection - another violation of classic user interface elements, but which works very well in this context. What is remarkable is how intuitive this gadget is - you are interacting with it in the context of a book and each choice is simple and clear.

Such clarity and simplicity was never present in the old interfaces. Clearly, this new approach to UIs is great, and early adopters are loving it. But will it cross over to the mainstream?

24 December, 2008

Windows UI - The World Of Never-Ending Choices

Looking back at the years when Windows dominated our lives one can hardly believe what we put up with. These interfaces were massive and overwhelming. Each application was full of screens with huge numbers of options and settings.

Every imaginable choice was thrown at users at once and it was up to the poor user to figure out what to do. To cram more information onto the screen, the interfaces of that era used tabs. At some point Microsoft invented the ultimate UI element - a tab with a scroll button in the end which allowed the user to page through hidden tabs.

Another philosophy of the old UI approach was that the user wants to see all information all the time. Instead of building UIs that responded to the way that people actually interacted with the tool, the user interface opened up all possible choices at all times. Naturally, this is completely overwhelming and confusing to people.

The only way to cope with complexity was to introduce a standard set of widgets, such as tables, combo boxes, check boxes, etc., so that users at least had some familiarity with UIs from program to program. But on top of that, there was a myth spread that users were stupid and would not be able to understand a non-standard UI.

The myth was supported by the fact that a lot of people do not respond well to sophisticated visualizations, like graphs, heat maps, or treemaps. While this is true, it doesn't mean that people can not figure out new user interfaces. The proof comes from Apple, which continuously innovates with new UIs for its software products. Also, recent social web applications have made a strong case for simpler, contextual user interfaces.

The Rise of Contextual User Interfaces

Web 2.0 has brought many wonderful innovations and ideas to the Internet. We can no longer imagine the web without a social dimension, and we can no longer imagine an online world that is read-only - it is now a read/write web full of user-generated content. But there is another fairly recent innovation, which might have just as profound implications. We're speaking of the contextual user interface.

Even five years ago we lived in the boxed world of Windows-dominated UIs. There were standard UI elements - menus, tabs, combo boxes, tables - and every single desktop application was full of these elements and nothing else. User interface was not the place to be innovative. It was considered unorthodox and even dangerous to present the interface in non-standard ways because everyone believed that users were, to be frank, stupid, and wouldn't want to deal with anything other than what they were used to.

Strikingly, the recent wave of UI innovation is proving exactly the opposite. Users are not stupid, and in fact, they were overwhelmed with choices presented in traditional UIs. The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual - presenting the user with minimal components and then changing in reaction to user gestures. Thanks to Apple, we have seen a liberating movement towards simplistic, contextual interfaces. But can these UIs become the norm? In this post we take a look at the rise of the contextual UI and ponder if they will cross the chasm.

RSS. A Web 3.0 Driver

In ten years RSS and its related technologies will be seen as the single most important internet technology since Tim Berners-Lee and Robert Cailliau created the World Wide Web at CERN around 17 years ago.

Real Simple Syndication is crucial to the development of the new web because it’s just that, really simple. Anyone with a Wordpress account or a tiny bit of coding knowledge can generate an extensible, standards based database of information that can be transferred to almost any other modern web site.

If Web 3.0 is the Semantic Web, where computer agents read content like human beings do — then RSS will be its eyes (or at least its corrective lenses). Already, entire business models are being created around aggregating meta-data. Netvibes allows you to create your own personal homepage, drawing much of its content from RSS feeds that you select. iGoogle does the exact same thing, and a host of others are jumping on the concept that the easiest way to give users relevant content is to give them the ability to define relevance for themselves.

In this future, RSS will be extended to include a host of data-points it currently does not. Each blog post (or microblogging feed), every picture, every video clip will have searchable, taggable, XML based syndication around it.

But wait, there is more.

People Search

The web as a database means that your online persona is apt to become an entry in it. If you look at technologies like FOAF you will see what I mean. FOAF is a project founded by Libby Miller and Dan Brickley. You can think of it as RSS but for Social Networks. It takes common profile data and puts it into a form that makes it cross-compatible with other social networks. Once Search Engines are properly able to manage meta-data like RSS, FOAF and the half-dozen other protocols out there and present it more intuitively the concept of a truly universal internet is well without our grasp.

Defining Context

Finally, RSS enables users to define their own contexts for information. Imagine a word where creating a mashup between Google maps and your Twitter account was no more difficult than sticking a few widgets together. This type of widgetizing of the web is not too far off, already Yahoo has a mashup creator — Yahoo Pipes that lets you do just this. Web 3.0’s real power will be in the ability to create data and transfer it effectively, even now we are well on our way.

10 December, 2008

10 Principles Of Effective Web Design


1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.


2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.


3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.


4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.


5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

  • use short and concise phrases (come to the point as quickly as possible),
  • use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
  • use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.


7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

  • Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
  • Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
  • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.


9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)


BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.


10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

  • according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
  • testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
  • usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
  • according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

19 September, 2008

User Centre Design- Flow chart


User Centre Design- Flow chart

09 September, 2008

What is Usability?

Usability is an approach to product development that incorporates direct user feedback throughout the development cycle in order to reduce costs and create products and tools that meet user needs. 


Two international standards define usability and human-centered (or user-centered) design:

"[Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." - ISO 9241-11

"Human-centered design is characterised by: the active involvement of users and a clear understanding of user and task requirements; an appropriate allocation of function between users and technology; the iteration of design solutions; multi-disciplinary design." - ISO 13407

 
The business benefits of adding usability to a product development process include:

Increased productivity
Increased sales and revenues
Decreased training and support costs
Reduced development time and costs
Reduced maintenance costs
Increased customer satisfaction

27 August, 2008

UI Design Principles

Let’s start with the fundamentals of user interface design. Constantine and Lockwood describe a collection of principles for improving the quality of your user interface design. These principles are

1. The structure principle : Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with your overall user interface architecture.


2. The simplicity principle : Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.


3. The visibility principle : Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.


4. The feedback principle : Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.


5. The tolerance principle : Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.


6. The reuse principle : Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

25 August, 2008

Good User Interface Design Tips

• Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smily faces.

• Don't be afraid to experiment with colors!

• Your application should play fun sounds while operating to keep the users entertained.

• Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.

• When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.

• When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.

• Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.

• It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.

• Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.

• Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files. .

• Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.

• Make sure an accidental double-click on a single-click item does something really nasty or unexpected.

• Tool tips are the perfect way to display critical information.

• To get the most screen space, force your application to always run maximized.

• Always make the default positions of floating properties windows cover something important.

• Use the most exotic fonts you can find.

• Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.

• Let a 5-year old draw your graphics, including your corporate logo.

• File browsing dialogs are not needed, users can easily remember and type in long file paths.

• Design your application so it requires the user to set their tiny monitor to 10512*7430.

• Always crash at a critical step and then display a fake apology to the user.

• It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.

• The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.

• If your program implements keyboard shortcuts be original and make them completely different from any other applications.

• Rent extra UI space in your application out for advertising. Advertising benefits the users and your wallet.

• Never underestimate the power of nudity.

• Don't forget to embed a hidden video game as an "easter egg".

30 July, 2008

Misconceptions About Usability

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

Most companies still don't employ systematic usability methods to drive their design. The resulting widespread ignorance about usability has given rise to several misconceptions that warrant a response.


Usability Is Expensive

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

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

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


Usability Engineering Will Delay My Launch Date

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

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

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

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


Usability Kills Creativity

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

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

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

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

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

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


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

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

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

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

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

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

Where to Test Usability

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.

When to Work on Usability

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

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

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

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

How to Improve Usability

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

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

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

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

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

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.

24 July, 2008

Importance of Usability

Users should not have to think too hard when they are using your website. They should not have to refer to help screens and they shouldn't be made to feel stupid. Simply by observing your customers you can avoid this.

Web designers and developers often forget that they are not typical users. Web coders have a far more extensive knowledge of the website they are developing than the average user is ever going to have. Website owners also forget that they are experts in their field and typically use jargon & assumptions that are alien to their customers. After working on a project for some time it is easy to forget that others are not so familiar with what you do, don't understand your terminology or don't follow your logic. There may be aspects of the website that seem obvious to you that might in fact be utterly confusing to your users. It is therefore important to take a step back from to time to time and make sure you don't leave your users behind.

Usability Testing is an essential aspect of any user-centred approach that puts the user, rather than the website, at the center of the development process. Adopting such an approach advocates that the user should be foremost in any design decisions.

According to the International Standards Organization (ISO)...

"Usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use."

ISO 9241-11: Guidance on Usability (1998)

But why is it so important for web design and what will it do for your business?

An effective website...

  • allows customers (users) to achieve their goals
  • has a high conversion rate
  • meets business objectives
  • delivers a positive brand image

An efficient website...

  • provides answers quickly
  • follows a logical sequence
  • doesn't waste resources
  • requires less content management time

A satisfied user...

  • achieves their goal
  • enjoys their experience
  • tells others
  • comes back again

23 July, 2008

Fundamentals of Graphic Design for A Visually Attractive Website

A website is primarily designed to win the attention of the eyes, and as such, graphic design plays an integral role in fulfilling this purpose. Let’s face it, who wants to browse the pages of a visually unappealing website, right? Much care should be observed in preparing the overall layout of our pages, and this requires a sound knowledge of the fundamentals of graphic design.

The very essence of graphic design can best be summarized by the acronym PIVP. That is, graphic design must be Purposeful, as it should be able to convey concepts and ideas to a certain group of individuals. Graphic design must also be Informative, to impart specific processes in a manner that the artist chooses. Graphic design uses a Visual language, as it shows instead of tells, through innovative illustrations as well as customary or cool fonts. Lastly, graphic design is likewise a Process, as the end product is the culmination of an evolution from a general medium to a specific piece. Many tools are available for the artist on the web.

In completing a design, much care must be given to the choice of color. Colors conjure certain emotions, and the use of different hues and tones is a way of manipulating the audience’s feelings to sway with the artist’s desires. Yellow, for example, is a stimulating color that invokes glee. Red, on the other hand, is a repressive color that implies desistance.

The artist is also tasked to guide the audience by taking into consideration what the latter would view first. Would he gaze from left to right, from top to bottom, as he normally would? Would a deviation from this pattern lead to confusion, or a novel presentation? Determining what order to pursue is the first task in formulating a layout. Once such is in motion, the artist should pay attention to the four principles of composition: balance, which demands an equal portioning of influence; Rhythm, which is a repeated pattern that can be used to produce a desired effect; Unity, which should assure that all the elements of the design belong together; and Emphasis, which determines what part of the design shall be seen first.

The artist can also influence the transmittal of the idea by using the design elements of line, shape, texture, space and size. Different exploitations of these elements would produce varying effects. An increase in size could invoke importance, for example. A smooth texture could summon a feeling of calmness.

The artist’s choice of perspective can also affect the piece’s illusion of depth. To illustrate, a 1-point perspective where the light converges in one vanishing point can lead to a more accentuated environment, though a 2-point and even a 3-point perspective can convey a more open atmosphere. With the advent of 3-D rendering, the artist can now stress how light affects the appearance of an object without having to worry about overlapping forms.

There are ideas, however, that mere illustrations would fail to reveal, hence the need for words. Words are presented through the use of typeface and fonts. Typeface refers to the consistent visual properties of the characters used, while fonts are groups of characters using similar styles. There are many free downloadable fonts in the web. They range from the traditional, to the cool fonts that reflect typesets in popular culture. TrueType fonts are the new universal standard, as they have displaced PostScript in many publishing environments.

Everything should come together to form an overall package of excellence. A veteran graphic artist would be able to determine this by instinct. It is something that only experience could teach us. And experience, well, it’s like a destination… we won’t be able to reach it if we don’t take that first step.

So hold on to that desire of building the most visually attractive website that you could. Everything starts with desire, after all.

16 July, 2008

What is graphic design?

“Graphic design is the most ubiquitous of all the arts. It responds to needs at once personal and public, embraces concerns both economic and ergonomic, and is informed by many disciplines, including art and architecture, philosophy and ethics, literature and language, science and politics and performance.

Graphic design is everywhere, touching everything we do, everything we see, everything we buy: we see it on billboards and in Bibles, on taxi receipts and on websites, on birth certificates and on gift certificates, on the folded circulars inside jars of aspirin and on the thick pages of children's chubby board books.

Graphic design is the boldly directional arrows on street signs and the blurred, frenetic typography on the title sequence to E.R. It is the bright green logo for the New York Jets and the monochromatic front page of the Wall Street Journal. It is hang-tags in clothing stores, postage stamps and food packaging, fascist propaganda posters and brainless junk mail.

Graphic design is complex combinations of words and pictures, numbers and charts, photographs and illustrations that, in order to succeed, demands the clear thinking of a particularly thoughtful individual who can orchestrate these elements so they all add up to something distinctive, or useful, or playful, or surprising, or subversive or somehow memorable.

Graphic design is a popular art and a practical art, an applied art and an ancient art. Simply put, it is the art of visualizing ideas.”

14 July, 2008

Most Web 2.0 trends are not that important for business sites

They still need to focus on getting Web 1.0 right: helping customers find the products, describing them in ways that make sense and making transactions more seamless. Blogs are certainly proof of the basic argument of usability, which is that making things easier will increase their value.

B2B websites are much worse than B2C sites

We conducted a major usability study of 170 B2B sites. I was appalled at what we found. These sites are difficult to navigate and they rarely answer customers’ questions in a straightforward manner. I think the reason B2B sites are so bad is that they often don’t take orders directly on the site. Thus, site managers don’t know how many customers they are losing. In contrast, many B2C sites track their business value closely and they know that their sales go up immensely when they make their sites more customer-focused.

Users are different from developers

Anyone working on a specific design project knows too much about that system and its functionality. People on the outside don’t have this special knowledge and they know less about technology. Therefore, they will often have grave difficulties using something the project team thinks is “obvious.” The only way around this conundrum is to do user testing and find out how the intended users behave when using the system.

17 June, 2008

The Elements of User Experience

A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements.


Web as software interface

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")

Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality

Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality

Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs

User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site





Web as hypertext system

Visual Design: visual treatment of text, graphic page elements and navigational components

Navigation Design: design of interface elements to facilitate the user's movement through the information architecture

Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Information Architecture: structural design of the information space to facilitate intuitive access to content

Content Requirements: definition of content elements required in the site in order to meet user needs

User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc.

Site Objectives: business, creative, or other internally derived goals for the site

The Nine Pillars of Successful Web Teams

The most successful Web teams build their team structures and their
processes on these nine essential competencies:




Project Management: The hub that binds all the tactical competencies
together as well as the engine that drives the project forward to completion,
project management requires a highly specialized set of skills all its own.
Neglecting this area often results in missed deadlines and cost overruns.


Concrete Design: Before the abstract design can become a fully realized
user experience, you must determine the specific details of interfaces,
navigation, information design, and visual design. This realm of concrete
design is essential to creating the final product.


Content Production: Knowing what content you need isn't enough. You also
need to know how you'll produce it. Gathering raw information, writing and
editing, and defining editorial workflows and approvals are all part of content
production.


Technology Implementation: Building technical systems involves a lot of
hard work and specialized knowledge: languages and protocols, coding and
debugging, testing and refactoring. The more complex your site, the more
important a competency in technology implementation becomes.

Abstract Design: Information architecture and interaction design translate
strategic objectives into a conceptual framework for the final user
experience. These emerging disciplines addressing abstract design are
increasingly recognized for their value in the Web development process.


Content Strategy: Content is often the reason users come to your site. But
what content can you offer to meet your users' expectations? How much
content is appropriate, and what form should it take? What style or tone
should it have? Before you can produce that content, you need to answer
fundamental content strategy questions such as these.


Technology Strategy: Web sites are technologically complex, and getting
more intricate all the time. Identifying the technology strategy for the site –
platforms, standards, technologies, and how they can all interoperate – is
essential to avoiding costly mistakes.


Site Strategy: Defining your own goals for the site can be surprisingly
tricky. Arriving at a common understanding of the site's purpose for your
organization, how you'll prioritize the site's various goals, and the means by
which you'll measure the site's success are all matters of site strategy.


User Research: User-centered design means understanding what your
users need, how they think, and how they behave – and incorporating that
understanding into every aspect of your process. User research provides the
raw observations that fuel this insight into the people your site must serve.

12 June, 2008

The Four Inch Rule

Zeldman writes, "We've debated the issue for four years, but the truth is, nine times out of ten, the 'best' web layout is the one which fully embraces the medium, by allowing itself to reflow as it is poured into different readers' individual computing setups." There is an unspoken rule in print which states that text should not exceed four inches in width on a page. Any text less than four inches is more readable than any text over four inches--the reader's whiplash will speak for itself. In following this rule we can incorporate the same concept into web design with a fixed-width table inside of a 100% width table, as is the case with Digtal-Web.com. Doing this not only allows for better readability at higher resolutions, but it also allows the designer to incorporate the proper blank space needed to make the page appear more aesthetically pleasing to the eye.

Navigation mechanisms

GUI users employ menus, trees, lists, dialogs, and wizards, and receive near instant response time. Navigation mechanisms are standardized by UI toolkits and style guides. They are supplementary to the information in the client area. Navigation is a weakly-established concept in GUI applications -- function/action dominates, and navigation is sometimes a side effect. Some push buttons cause navigation, others don't. For example, the OK, Cancel, and Help buttons shift the user's focus to a different window while Apply does not. The ellipsis on "routing" menu choices, like "Save as..." conveys a fairly strong sense of navigation. Wizards also create a strong sense of navigation forward and backward in a basically straight-line sequence of dialogs.

For Web users, navigation is a significant and highly visible concept. Web users employ links and bookmarks, and they type URLs. Latency is very significant. Only a few standards are well established, such as the Back button. Navigation mechanisms are more typically an inherent part of the page design, therefore there tends to be quite a bit of variation, or lack of consistency. This is one of the most confusing aspects for users.

The notion of place, or establishing a context so that users know where they are and where they can go is extremely important on the Web. Designers can employ two basic paradigms -- go to and bring to me. In the "go to" paradigm users consciously choose to go elsewhere, and are aware when they take such a link. The context changes distinctly and users are not surprised. In the "bring to me" paradigm, users essentially ask that information be "brought to them" within the context of the current page. This paradigm preserves context, stability, and a sense of place. Each paradigm is appropriate to specific situations, but that's another article.

A few practical guidelines

To ensure a positive user experience and encourage users to remain in flow while using a website, consider the following guidelines:

• don't use pop-up windows
• make form follow function
• use as much of the screen area as possible
• guide users with sensitive feedback
• consider the software users will be viewing the website within
• make sure the Back Button works properly

Websites that have good posture, in line with the extent of interaction that typical users will be required to perform, will succeed in maintaining user flow. If those websites also have good manner, users will perceive the site to be helpful and professional. What kind of website would you choose: an unhelpful, complicated, interrogative website or a helpful, simple, and informative one? The answer is probably obvious, and it's just as simple for ordinary users.

11 June, 2008

What is design

Design is everywhere - and that's why looking for a definition may not help you grasp what it is.

Design is everywhere. It's what drew you to the last piece of furniture you bought and it's what made online banking possible. It's made London taxi cabs easier to get in and out of and it made
Stella McCartney's name. It's driving whole business cultures and making sure environments from hospitals to airports are easier to navigate.

The single word 'design' encompasses an awful lot, and that's why the understandable search for a single definition leads to lengthy debate to say the least.

There are broad definitions and specific ones - both have drawbacks. Either they're too general to be meaningful or they exclude too much.

One definition, aired by designer Richard Seymour during the Design Council's Design in Business Week 2002, is 'making things better for people'. It emphasises that design activity is focused first and foremost on human behaviour and quality of life, not factors like distributor preferences. But nurses or road sweepers could say they, too, 'make things better for people'.

Meanwhile, a definition focused on products or 3D realisations of ideas excludes the work of graphic designers, service designers and many other disciplines. There may be no absolute definitions of design that will please everyone, but attempting to find one can at least help us pin down the unique set of skills that designers bring to bear.


Translation

Design could be viewed as an activity that translates an idea into a blueprint for something useful, whether it's a car, a building, a graphic, a service or a process. The important part is the
translation of the idea, though design's ability to spark the idea in the first place shouldn't be overlooked.

Scientists can invent technologies, manufacturers can make products, engineers can make them function and marketers can sell them, but only designers can combine insight into all these
things and turn a concept into something that's desirable, viable, commercially successful and adds value to people's lives. There are many misconceptions about design. Sunday supplements and glossy magazines often use 'design' as a buzzword denoting style and fashion. While the toaster or corkscrew being featured may be well designed, the result is to feed the belief of would-be design clients that design is restricted to the surface of things and how they look, and that it's best employed at the end of the product development process. But good design isn't simply about the surface. Aesthetics are important, but only a part of a bigger picture.

Design is fundamental. People often need reminding that everything around us is designed and that design decisions impact on nearly every part of our lives, be it the environments we work in,
the way we book holidays, or the way we go about getting get the lid off the jam jar. When those things work, it's taken for granted, but, as Bill Moggridge, founder of international consultancy IDEO, says: 'A lot of trial and error goes into making things look effortless.'


Design and the user

Good design begins with the needs of the user. No design, no matter how beautiful and ingenious, is any good if it doesn't fulfil a user need. This may sound obvious but many products and services, such as the Sinclair C5, Wap mobile phone services, and a great many dot com businesses failed because the people behind them didn't grasp this.

Finding out what the customer wants is the first stage of what designers do. The designer then builds on the results of that inquiry with a mixture of creativity and commercial insight.
Although gut instinct is part of the designer's arsenal, there are more scientific ways of making sure the design hits the mark. Different designers use different methods - combining market
research, user testing, prototyping and trend analysis. Any product launch is ultimately a gamble, but these methods help decrease the risk of failure, a fact that often comes as a surprise to clients.


Creativity

A design doesn't have to be new, different or impressive to be successful in the marketplace, as long as it's fulfilling a need, but design methods do lead to innovative products and serivces.
Designers learn that ideas that may seem strange are worth exploring and that the 'common-sense' solution is not always the right one. Designers often hit on counter-intuitive concepts through methods such as drawing, prototyping, brainstorming and user testing. Watching users in real-world situations especially gives insights into their behaviour that lead to ideas that wouldn't have formed had the designer simply thought about the situation, or relied on generalised market research.


Design and Business

Designers, unlike artists, can't simply follow their creative impulses. They work in a commercial environment which means there is a huge number of considerations that coming to bear on
the design process.

Designers have to ask themselves questions such as: is the product they're creating really wanted? How is it different from everything else on the market? Does it fulfil a need? Will it cost too much to manufacture? Is it safe?

Emphasis on the customer makes design a formidable weapon for any business. Companies have often designed their way out of failure by creating a product that serves the customer's needs
better than its rivals'. Design delivered the operating-system market to Microsoft, rescued Apple Computer and made Sony an electronics giant. A Design Council study has shown that
design-led businesses on the FTSE 100 out-performed the index by 25%.

Putting an emphasis on design brings creativity into an organisation and increases the chance of producing market-leading, mould-breaking products. As the sophistication of the consumer and global competition increases, this becomes more and more valuable.

Businesses are finding that they can no longer compete just by slashing prices or upping the marketing budget. Innovation in the form of design is the key to success.


Design and public services

Billions are poured into public services every year but, despite the UK being home to a huge variety of top design talent, our best designers are rarely involved in public sector work.
Design can help public services in a number of ways, from making sure products and services meet the needs of users to increasing innovation within organisations and bringing new perspectives to issues such as procurement.

03 June, 2008

Ten Good Deeds in Web Design

When analyzing Web design, it is easy to identify a large number of mistakes that reduce usability:

• the original top-ten mistakes of Web design
• the top-ten new mistakes of Web design
• the top-ten mistakes of Web project management

It is much harder to say what good things to do since I have never seen a website that was truly stellar with respect to usability. The best major site was probably amazon.com as of late 1998, but during 1999 Amazon declined in usability due to the strategy of blurring the site's focus.

Of course, articles that list 30 mistakes can be seen as constructive criticism and a prescription for 30 things to do in a Web project: design to avoid each of the mistakes!

Here's a list of ten additional design elements that will increase the usability of virtually all sites:

1. Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).


2. Provide search if the site has more than 100 pages.


3. Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.


4. Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.


5. Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.


6. Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.


7. Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.


8. Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.


9. Ensure that all important pages are accessible for users with disabilities, especially blind
users.


10. Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.

Finally, always test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.

Top Ten Guidelines for Homepage Usability

Make the Site's Purpose Clear: Explain Who You Are and What You Do


1. 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 " 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 50 guidelines for the design of "about us" areas of corporate websites.)


Help Users Find What They Need


4. 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 Usability Week 2008 conference in New York, San Francisco, London, and Melbourne.)


Reveal Site Content


6. 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 Design


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

The Ten Most Violated Homepage Design Guidelines

1. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors

Compliance rate: 27%
Guideline number in Homepage Usability book: 3

This is one of the most important issues in homepage design, so it's particularly sad that it's the least followed of all the guidelines. Websites are incredibly bad at explicitly stating what they offer users. Instead, they hide their offerings in generic marketese that makes very little impression on prospective customers.

Remember: when users have needs, they typically query search engines and allocate only a few seconds to scan each of the sites that the search engine drags up.


2. Use a liquid layout that lets users adjust the homepage size

Compliance rate: 28%
Guideline number in Homepage Usability book: 67

Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.


3. Use color to distinguish visited and unvisited links

Compliance rate: 33%
Guideline number in Homepage Usability book: 37

Knowing where you've been is one of the three basic features that all navigation designs should support. (The other two are "Where am I?" and "Where can I go?")

It's sad that only a third of corporate homepages tell users at a glance which site areas they've already seen. Navigational confusion results when designers disable one of the few useful features of a standard Web browser: having visited and unvisited links appear in different colors. Our testing has shown that violating this guideline is particularly harmful for elderly users.

> More on changing link colors


4. Use graphics to show real content, not just to decorate your homepage

Compliance rate: 35%
Guideline number in Homepage Usability book: 56

For example, use photos of people who have an obvious connection to the content as opposed to using models or generic stock photos. People are naturally drawn to pictures; gratuitous graphics can distract users from critical content.

Stock photography sellers are doing a brisk business, but users don't believe that your product will make them happy just because there's a smiling lady on your homepage. Better to show your actual product.


5. Include a tag line that explicitly summarizes what the site or company does

Compliance rate: 36%
Guideline number in Homepage Usability book: 2

Our recent study of how people use "about us" information on websites did find that most users could eventually dig up information about a company's purpose. But why do most sites make prospects work so hard?

In keeping with most advertising slogans, content-free tag lines abound. Once you've paid millions to get a useless slogan developed, it's probably hard to accept that it won't work for your website.

I suggest a compromise: put the useless slogan in a graphic banner next to your logo, where it will be ignored. Then add a true tag line in plain-text format in the content area where people will actually see it.


6. Make it easy to access anything recently featured on your homepage

Compliance rate: 37%
Guideline number in Homepage Usability book: 33

For the Alertbox, 80% of the readership happens after a column has passed from the homepage into the archives. In general, users remember when they've seen something interesting on a homepage. However, unless that homepage lists recent features and offers links to them in the archive, users will never be able to find what they're looking for on subsequent visits.


7. Include a short site description in the window title

Compliance rate: 39%
Guideline number in Homepage Usability book: 75

This is mainly important for search engine visibility, but why not take advantage of this superior -- and cheap -- form of Internet marketing?


8. Don't use a heading to label the search area; instead use a "Search" button to the right of the box

Compliance rate: 40%
Guideline number in Homepage Usability book: 49

This is a small point, but there's no reason to label the search box if there's a "Search" button right next to it. Interaction design's less is more principle tells us that extra elements in a dialogue distract users from the salient points and reduce their ability to understand an interface.

9. With stock quotes, give the percentage of change, not just the points gained or lost

Compliance rate: 40%
Guideline number in Homepage Usability book: 110

This guideline only applies to sites that provide stock quotes, either in the investor relations information or elsewhere. With stock quotes, the general principle is to help users understand the relative magnitude of a change, and thus its true importance. (A similar guideline applies to presenting other statistics that change over time.)

A stock increase of $0.75 means very different things if the starting price was $8 (a booming 9% leap) versus $60 (a modest 1% gain).


10. Don't include an active link to the homepage on the homepage

Compliance rate: 41%
Guideline number in Homepage Usability book: 43

This is a special case of a guideline that applies to all website or intranet pages: never have a link that points to the current page. (A button to refresh stock quotes or other changing information is a different matter, and should be presented as a command button rather than a navigation link since it doesn't lead to a new location.) Active links to current pages cause three problems:

• If they click it, a link leading to the current page is an utter waste of users' time.
• Worse, such links cause users to doubt whether they're really at the location they think they're at.
• Worst of all, if users do follow these no-op links they'll be confused as to their new location, particularly if the page is scrolled back to the top.

Homepage links on the homepage typically result from using a universal navigation bar that includes "home" as an option. Fine. But when users are on a page that's featured in the navbar, you should turn off that option's link and highlight it in such as way that indicates that it's the current location.