Factors That Affect Usability

If trending topics surrounding design blogs are any reflection of trends in design, then usability is what coffee is to freelancers. Usability is a study of human-computer interaction that helps designers analyze our users’ patterns as they use our creations. While we cannot fully predict our users’ interactions, we are able to brace for them through how we style and place elements on our page.

We are able to study these different patterns through our analysis of usability tests. Both qualitative ("word-based") and quantitative ("number-based") tests reveal to us that while users are concerned about design elements, they also want to get what they’re looking for quick. The more mistakes we let them make in the process, the more frustrated they get and less time they spend on our website. As designers, we need to figure out what makes people stay on our websites, and more importantly, what makes people leave.

Usability is a lot more than just using grid systems and focusing on what’s above the fold – there are sets of factors that play into how users will interact with websites, and today we’re here to analyze them and find out ways we can improve.

Page load time

As one of the gurus of usability, Jakob Neilson, said in an interview, there are three rules for response times based on common human characteristics: "If it is faster than one tenth of a second, you don’t feel like you are waiting at all. If it is more than one tenth of a second, you can tell you are waiting, but up to one second, it still feels like smooth navigation. Between one and ten seconds is the limit for your attention."

Web development has changed a lot even within the last ten years. There are more and more methods for us to cut down on page load times even for slower internet connections. Through using sprites, optimizing our images for the web, and reducing the amount of HTTP requests, we can greatly reduce our page load times and aim closer to that one-second mark.

Resources:

• Best Practices for Speeding Up Your Web Site – Yahoo! Developer Network
• CSS Sprites: Image Slicing’s Kiss of Death – A List Apart
• Clever JPEG Optimization Techniques – Smashing Magazine
• Yslow FireFox Extension – Yahoo! Developer Network
• 10 Ways to Improve Your Web Page Performance – Six Revisions
• Website Features That You Can Easily Offload – Six Revisions

Don’t judge a book by its cover…

… doesn’t apply to web users. If anything, what’s above the fold of a website will greatly dictate whether a user ventures further. While it’s proven that users are comfortable with scrolling down through pages to find out more about them (even long pages), make sure you cut off elements to remind them that there is more to see.
Be clear with the purpose of your website, not only in your design, but also in your content. In fact, use Krug’s third law of usability and cut your content in half, then do it again. Make sure your words are just as powerful as your design.

Resources:

• Krug’s 3 Laws of Usability
• Minimizing Complexity in User Interfaces (Smashing Magazine)
• The Myth of the Page Fold (cxpartners)
• Clear and Effective Communication in Web Design (Smashing Magazine)
• The Construction of Instruction (24 Ways)

Give users what they expect

While predictable isn’t always what we want to be for ourselves, being unpredictable in design doesn’t often work to our advantage. Stay conscious of where elements are usually placed on pages (search bar top-right hand corner of the page, branding at the top-left of the page, etc.), and try to keep elements in those places. Play on what your clients know, and don’t make them play a guessing game.

Following the norm in icon design is also useful for our users. They want to see the same symbols so they know what each one does. Printers, mail envelopes, and phones have expected results. Don’t give users what they don’t expect.

Resources:

• Feed Icons
• Consistency and Repetition – About.com: Desktop Publishing
• Consistency in Design is the Wrong Approach – User Interface Engineering

Don’t sacrifice web accessibility

While usability and accessibility are two completely different topics, they often fall hand-in-hand with one another. While we make websites usable for the everyday user, accessibility is making it usable for users that aren’t able to interact with web pages like everyone else does.

Some ways you can adhere to accessibility guidelines are through grammar and spell-checking your content, ensuring that this same content makes as much sense being read off the screen as it does being read back to you, not using deprecated tags in your markup, using relative font sizes, and using ALT tags.

Most of the time, when you’re creating accessible websites and following these tips, you’ll also be improving the usability of your website.

Resources:

• Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 – W3C
• CAPTCHAs: Tough on Sales & Common Way to Test User Tolerance – UX Booth
• An Idiot’s Guide to Accessible Website Design – Web Design Ledger
• 10 Simple Web Accessibility Tips You Can Do Today

Navigation

Navigation is one factor of web design where we can never fully anticipate our users’ reactions. A/B split testing and "Card Shuffle" testing can be very effective ways of analyzing our users’ behaviors and the paths they take to find what they’re looking for. In practice, we should aim to reduce redundancy in our links, create permalinks that are understandable and self-explanatory.

Another vital part to navigating through a website is a search function. If you have a search, make sure it works properly. Some sites have a "Quick Link" button now that works much like Google’s "Feeling Lucky" button, which can be very useful.

Resources:

• 10 UI Design Patterns You Should Be Paying Attention To – Smashing Magazine

Type, Type, Type

Typography is another growing trend in design. While, of course, type has been along as far back as existence, there has been a lot of focus put on typography and what makes it readable lately. We need to make sure we set focus on some basic typographic elements such as line-heights, letter spacing, and (relative) font-sizes.

While having cool funky fonts is nice, we need to make sure that they’re legible more than anything else. This includes paying close attention to colors as well.

We should already know how certain colors (and combinations of them) can attract certain feelings and emotions, however we need to make sure that these colors not only convey the emotions we want, but also make the font readable against what’s behind it.

Using font styles can also be useful in making users interested in reading content. Bolding and italicizing particular key words and phrases can be helpful in catching users’ attentions. Underlining elements should be restricted to links.

Resources:

• 10 Principles for Readable Web Typography – Smashing Magazine
• Type Inspired Interfaces – 24 Ways
• A Guide to Choosing Colors for Your Brand – Usability Post

Rebound from mistakes

As many have said before, the hardest part of our job isn’t designing how something looks when it works, but when designing elements for when they fail miserably. I’m not only talking about when your site has a 404 error, but this also goes for form errors. Make sure that if you made a mistake, you redirect your users to other "safe" places they can go, and if they made a mistake that you show them the problem and tell them how to fix it.

Resources:

• A More Useful 404 – A List Apart
• Effective Maintenance Pages: Examples and Best Practices – Smashing Magazine
• 404 Best Practices – CSS Tricks

Analytics: using it as a tool

There is a saying that as usability experts, we should Test Early, Test Often (T.E.T.O.). Even if we don’t use one of the multitudes of web applications for usability testing, we can analyze the raw data our users produce for us through tools like Google Analytics and Mint. More importantly, we need to pay close attention to a few key functions that these tools produce for us.

First and foremost to effective analytics is understanding your users’ environment (e.g. what browser they’re using, what operating system they’re using, etc.).

Second, pay attention to where your users are coming from. Jakob Nielson states that there are four sources of our users:

• Low value referrers.
• Direct links from other sites.
• Loyal users.
• Search engines.

We need to analyze all this raw data based on these stats. These different sources will show users interacting with our websites in different, easily distinguishable patterns. While a loyal user will scan through every page and take their time with your website, those referred through search engines will likely be like a one-night stand – once they have what they want, they’ll get the hell out of there. The trick is, of course, to reduce this from happening.

Resources:

• 5 Articles To Understanding Your Websites Bounce Rate
• Google Analytics
• Mint

Information vs. Experience

There are those who relish the anarchy and the variety of the web, and those who see it as a ubiquitous front-end to an array of databases – in a nutshell, those who see the web as a way of conveying experience and those who see it as a vehicle for information.

Since HTML first became mainstream, with HTML version 2.0, has been a struggle between the structure of a document and its presentation. This battle is symptomatic of two competing visions for the web.

One web, two visions

Structuralists see the web as a vehicle for information: the web is a tool to simplify the lives of over-stressed human beings.

Structuralists believe that the presentation of a document is best left up to the individual user, browser or device. To them, HTML is a language for describing the structure of a document, and they view the future web as a universal any-device, any-where, any-time interface to databases, or as the database itself.

Presentationalists, on the other hand, believe that the web is for conveying experience – a medium for entertainment and artistic enrichment.

Because presentationalists want perfect control over their narratives, they think that HTML should be a language that can accurately present the web designer’s vision pixel-for-pixel, microsecond-to-microsecond, and interaction-to-interaction. The presentationalist sees the future web as a rich form of something akin to interactive super-television, but better.

Stuck in the middle with you

Of course, very few people are actually extremists. Structuralists accept that good presentation can enhance information, and presentationalists likewise accept that some structured information can enhance experience.

Most of us are realists who see the debate as largely academic until technology has caught up with theory. We are the would-be structuralists who still do page layouts with

cells, and the rather-be presentationalists who still type out text instead of wrapping it up in images. The primary justification for most of our design choices is that “it works now.”

So what does work now?

State of the web, 2001

Neither the structuralists nor presentationalists are winning outright. An examination of the latest slew of recommendations coming out of W3C might make you think that the structuralists are winning, but realists will quickly point out that technology has not yet caught up with presentationalists’ requirements.

Lone HTML (as it currently stands) is neither a good presentation language nor a good structural language, but the addition of XML and other highly structural languages and specifications is helping close the gap between reality and the structuralist’s ideal.

Cascading Style Sheets have promised and delivered major advances in presentation, while allowing document structure to remain intact. (The success of CSS is proof that time and time again we get the best results when structuralists and presentationalists work together.)

Good experience is hard to find

The web is not currently a good medium for experience.

In fact, it’s fairly cheesy when compared to the movie theater, the TV screen or even a piece of paper. Low bandwidth, differing interpretations of HTML recommendations, and a wide variety of user and device capabilities make it difficult for designers to exert the level of control necessary to evoke a consistent emotional response.

Not Just Slow Net Access

There are also cultural barriers to conveying experience on the web. We've been serializing narratives for millennia now: novels, movies, and television all rely on the user experiencing their narratives sequentially. The buildup of tension, suspense, grief, and other emotions takes time. Novelists and filmmakers have honed their skills in sequential media to a fine art, and users have become sophisticated consumers of sequential narrative.

By contrast, we are only just discovering ways of authoring experience and emotion in situations where the user is no longer passive, but is instead an active director of the experience. On the web, narrative has become a collaboration between the author and the user.

To be fair, live entertainment does already involve low-level collaboration between users and authors. A good storyteller, singer or comedian giving a live performance can be less sequential since he or she has the luxury of being able to evaluate the audience’s reaction and adjust the performance accordingly – something that movies and books cannot do. Feedback mechanisms do exist on the web, but are currently quite primitive in comparison to the interaction between live human performers and their audiences.

The current web also forces decisions – users must interact for the narrative to progress because nothing new arrives until the user clicks another link. It is currently difficult to author web content where the user can sit and experience a sequential flow of experience, only interacting when they choose to.

Interactive TV

Interactive television has been discussed as a potential vehicle for the experience web; it combines the existing experience-conveying qualities of television with the ability to let users direct the narrative by choosing their own paths.

Even television, however, is a very limited output device that includes only sound and 2d (simulating 3d) vision. A truly experience-centered web could include many other output devices – imagine a horror “website” in which the site had full control over all of the speakers, holographic projectors, the lights, the doors, the climate controls, and even the smells within your house!

Television is also a passive medium. Its users have (and expect) very little control over what they see. The web is an active medium; users actively choose their own paths. Interactive Television encourages activity in a traditionally passive medium. The experience web may encourage passivity in a traditionally active medium. These two are already meeting in a middle ground.

In the interim

As the individual components of web technology become more sophisticated, web designers and developers will no longer need to choose between good structure and good presentation.

HTML is already becoming a no-man’s land: presentation is shifting into stylesheets, and structure is moving into XML. The latest versions of HTML are turning into little more than the glue that ties the structural richness of XML (via XSL) to the presentational richness of CSS, the interactivity of JavaScript and server-side programming, and the hypermedia elements of video and Flash.

The near future will deliver a web where the structuralist model, the presentationalist model, and all combinations of the two are possible. Until then, technological and cultural limitations will continue to prevent the web from supporting experience-based work as well as it supports the exchange of information. For the moment, at least, the structuralists are coming out on top.

Using Wireframes to Streamline Your Development Process

Creating a wireframe is one of the first steps you should take before designing a website.

A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.

A wireframe is basically a visual representation of content layout in a website design.

The wireframe acts as a prototype that shows the placement of page features, such as header, footer, content, sidebars, and navigation.

It also specifies the placement of the elements within these content areas. If you want to develop a site that accurately matches the client’s requirements and minimize project revisions, wireframing will keep you on track.

Benefits of Wireframing

Creating a wireframe gives the client, developer, and designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily early on in the process.

Wireframing brings the following key benefits:

• It gives the client an early, close-up view of the site design (or re-design).
• It can inspire the designer, resulting in a more fluid creative process.
• It gives the developer a clear picture of the elements that they will need to code.
• It makes the call to action on each page clear.
  
• It is easy to adapt and can show the layout of many sections of the website.

Tools for Wireframe Development

You have many tools to choose from when creating a wireframe:

• Hand sketching on paper is always a good starting point for any designer. It provides a quick and easy way to focus and organize. If you’re very precise with sketching, you could even use this as your final wireframe. (See Figure 1.)
• Flowchart or mind-mapping software, such as Visio. These software options come with pre-packaged elements that allow you to easily create flowchart representations of your wireframe.
• Web prototyping software, such as Gliffy or Balsamiq. Tools like these were created especially for the purpose of generating wireframes, and they have easy-to-use prototyping capabilities.
• Graphics software, such as Photoshop or Illustrator. The benefit of using these tools is that the wireframe can then be converted directly into a graphic mockup of the website’s design; however, the downside is that you will have to create all of the elements by hand.
• (X)HTML wireframes are almost like actual sites themselves. You can lay out the wireframe with code before applying the styles, or you can create a fully styled, high-fidelity layout that looks a lot like a final design. (See Figure 2.)

Ultimately, the developer or designer should select the tool they prefer. Personally, I use Photoshop because I like the way it organizes the process and how easily I can convert the file into a mockup.

Wireframe Example

The level of detail in a wireframe depends on several factors, including: how much direction and content the client has provided, how complex the content is, how far along in the process you are, and how much detail you’d like it to include.

Here are examples of wireframes that were created using different tools and exhibiting different levels of detail and color:

Figure 1: This simple wireframe sketch for the Coastal Capital Partners website (now renamed Broad Reach Retail Partners) was used to create graphic mockups and, eventually, the final design. By Mike Rohde.

Figure 2: Very low-fidelity HTML wireframe. Useful for demonstrating what a site will look like before the styling is added. Very helpful to visually impaired users.

Figure 3: Low-fidelity wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.

Figure 4: A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe by Phil Hawksworth.

Figure 5: This one is based on advanced use of a blog publishing system (WordPress). By Mattheiu Mingassson or Activeside Internet Strategies and Consulting.

Figure 6: A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of 31Three.

Figure 7: A wireframe with color and images. Author page wireframe by Bokhandel.

Figure 8: Another wireframe with color. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

Best Practices

To achieve optimum results, here are several important things to keep in mind when developing a wireframe:

• Simplicity. The key is to keep it simple enough to be clear to the client and to be flexible for the designer, but detailed enough to guide the programmer. As mentioned, you could create a high-fidelity wireframe, but doing this early in the development process could be confusing for the client, who may mistake it for a final draft.
• Work in grayscale. When creating elements for a wireframe, it’s best to work in grayscale so that you can focus on the layout without being distracted by the design. If you have been given a full-color logo, convert it to grayscale as well. To distinguish between and categorize various elements, show shapes and outlines in different shades of gray.
• Use wireframes in tandem with a sitemap. A wireframe is a visual representation of a good sitemap, not a replacement. A sitemap is a useful tool for any website and would definitely be helpful to refer to during the development process.
• Focus on the desired outcome. Have a clear understanding of how your client wants users to respond to the page before creating your wireframe. The calls to action should be very clear simply from looking at the wireframe.
• Create a full-sized wireframe if it is for a website. This will give the most accurate representation of the actual page.
• Plan the elements by securing the content in advance. In a best-case scenario, your client will have already supplied you with the elements that should appear on each page, such as the logo, ads, Flash or video players, features, navigation sections, and sidebar, header, and footer elements. If you do not have this information yet, meet with your client and get (or create) a sitemap. If you are re-designing existing elements, you can gather them from a careful review of the website. In this scenario, be sure to first confirm with your client that you will not be required to add or remove elements, because not having a clear understanding of their expectations will slow down the process.

Grayscale vs. Color

When creating a wireframe, working in grayscale helps maintain focus on the primary function of the process, which is to finalize the layout, not the design (see Figure 3). Another risk of working in color is that the client may mistake the wireframe for the final mockup.

Color can, however, prove useful when showing the location of each call to action. Because one page may contain several calls to action, prioritizing them is important. Wireframes can help determine which call to action to draw the user’s eye to first.

I recently worked on a project that had a very vibrant logo, which, in that case, was the primary call to action because it represented a newly launched magazine.

When you use color, you can more easily tell if certain elements are overpowering the primary call to action. This process still falls under the realm of wireframing, rather than mockup design, because element locations are still being determined.

Color can gradually be added to the wireframe as the project advances, which is more efficient than moving ahead with mockups before the location of elements is locked down. In doing this, graphic software can help you switch directly to a mockup when ready.

What to Avoid

Like other aspects of your development process, wireframing can have its pitfalls if not carried out properly. Here are some tips on what to avoid in order to acheive the most effective results:

• Too much happening on the page. Leave ample white space so that the design doesn’t appear too busy or cluttered.
• Emphasis on color and design. Wireframing is for deciding the layout and location of elements. Even though a wireframe can influence the design, adding graphics and color would probably only distract from its purpose.
• Too much detail. You can always add more detail later, but if you include too much in the begining, the client may confuse the wireframe for the final mockup.

If you are interested in learning more about wireframes, Wireframe Magazine is a great resource that shares samples, discusses techniques, and solves problems related to information architecture.

Creating a wireframe for your client’s website provides an effective communication tool for all parties involved.

Even building a simple wireframe will save time in the long run and ease the development process for the designer, developer, and client.

Visual Decision Making

User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie that the presenter may be hiding a weak argument with graphic frou-frou.

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance.

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.

It happens in an instant

Thanks to the work of the early 20th Century Gestalt to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection.

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.

Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The three-stage process governed by affective and cognitive responses to visual stimuli.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.

Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.

Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.

Systematizing the Graphic Design Process

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow.

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

1. Collect the Necessary Information

You might be tempted to jump right in and start designing, but collect the necessary information first. For most graphic designers, this information will come from the client. Even for your own projects, though, assembling the necessary information first is essential.

Most clients will probably contact a graphic designer in this kind of way:

I need a poster made for my new product X, [followed by project description]. We will be displaying them in location A and location B, and we need a talented graphic designer to make a poster that “sells.”

The client would likely go on to ask for a quote and provide contact information. All is well from the client’s perspective, but you, the graphic designer, really have nothing to go on still.

Some clients might leave you with more information, and some less. However much you get, though, will usually not be enough. Before providing an estimate and starting the project, make sure the following information is spelled out:

The Target Audience

You might be able to get a good idea of the target audience from the line, “We will be displaying them in location A and location B,” but asking the client explicitly for this information will better define the target audience for you.

Just because the posters will be put on college campuses, for example, we shouldn’t assume that the target audience will be college students in general. Does the client have a certain group or sub-population in mind? Design students? Engineering students? Faculty and staff?

Information about the target audience should include age range, geographic location, interests and needs.

Learn What the Exact Message Is

For product advertisements, “Buy Me!” obviously isn’t going to cut it. Ask the client how the product, service or message should be conveyed. Does the product need the high-end treatment, or a more personal feel?

Every kind of graphic design—logos, posters, t-shirts, etc.—needs a message. Get this out of the client before moving forward.

Technical Requirements

If it’s a poster, what are the dimensions, exact colors and number of copies needed. Would the client like to include any other elements in the design? If it’s a logo, have any colors or branding already been established? Does the client already have ideas for it? If it’s apparel, what dimensions, colors and templates are required?

With any graphic design, you have to ascertain certain fundamentals before getting started.

Forgetting something important could mean your having to redo a large part of the project… and earning less money than you had originally figured. Make sure to research and discuss all of these details before beginning the design phase.

Budget and Deadlines

You will also have to discuss the budget, deadlines and other business-related details that will go in your design proposal (discussed below). For one thing, this will weed out any misdirected clients right away: clients whose deadlines are too tight or whose budgets are ridiculously low.

Be sure to share with the client your pricing structure and reasonable deadlines, and ask if they have any other requirements to discuss. You can add a firm quote and specific deadlines to the proposal later.

Systematizing It

To systematize this initial communication with the client, use a pre-set questionnaire. This should cover most of the bases and keep you from forgetting anything important.

You can always customize the questionnaire to the project. The point is that the questionnaire is supposed to save you from having to rethink all of the basic questions for each client.

It might also help to get the client involved in some sort of collaboration tool, such as Base Camp or Google Docs. Sharing and discussing questionnaires can be much easier without email, and it can set a good precedent for managing the rest of the project.

2. Write Out a Proposal, Firm Quote, Contract and Plan

You have a lot of ground to cover at this stage, but it doesn’t have to be a lot of work if most of it is systematized. All of these things (quote, proposal, contract and even the outline or plan) can come from templates that are slightly customized to the job. Systematization can take care of this portion of the project quickly and painlessly.

If you don’t already have a system in place, you’ll have to create these documents as soon as possible. This will take quite a bit of work up front but will make your life much easier down the road.

If you are employed by a company, you may already have access to some of these templates already. Freelancers, though, will have to start on their own.

Create templates for all of these documents, perhaps even basing them on templates that you find on the web. The ideal template would require you merely to fill in the client’s name and contact information.

The Proposal

The proposal is different because it will have to be customized for each client and project. Simply filling in the client’s name won’t work here.

A graphic design proposal should tell the client what the process will be, the final deadline and budget information. It should also formalize the information from the questionnaire: target audience, objective, etc. It is the overall plan for the project.

Templates will save time here, too, if section headings and routine bits are pre-written. Just add the content to the proposal and you’re done.

A Personal Plan

Your personal plan will contain much of the proposal but will be adapted to meet your needs.

For example, while the proposal might state a certain date as being the deadline for the initial mock-up, your personal plan would include deadlines for certain milestones that you need to reach in order to meet the deadline in the proposal. This could include days for brainstorming, implementing the initial design and finalizing and organizing.

You can use a template again, as long as you customize it for each project. The template is where you systematize the processes that work best for you.

Think about the regular tasks that you do for every project, and systematize them to make them more efficient. Write out a step-by-step process that is organized and easy to follow. You’ll save time and minimize the chance of forgetting something.

3. Brainstorm, Research and Inspiration

Many designers find that going straight to work after all the business details are taken care of doesn’t yield the best results.

Rather, you might want to take time to find inspiration, research similar or competing designs and brainstorm freely.

Without this part of the graphic design process, the designer may find himself continually starting over, or revising the same parts of the design, or just being inefficient. By taking the time to get inspired and organize our thoughts, you will actually work faster in the long run.

Inspiration

Inspiration is the first step and leads to the brainstorming and research. Below are some great ways to find inspiration:

• Read a book
  Many designers look to other graphic design or art for inspiration. One of my favorite ways to find it, though, is just by reading a book. Focusing on words alone makes your imagination do the work, and then you can transfer that creativity into your work.
• Visit a museum
  This is a more visual approach to inspiration, and a fun one. But it doesn’t have to be an art museum. I find that going to any museum can bring me inspiration and help me unwind.
• Free-write (yes, write)
  Like reading a book, writing can trigger the imagination in a way that the visual arts can’t. Many writers find inspiration by free-writing, which is writing without thinking, analyzing or planning. It is a great way to get your ideas down on paper and then build on them.
• Unwind
  Unwind, take a walk, get out, have some fun. Not thinking about work is a great way to stop those old ways of thinking that were getting you nowhere. It can open your mind and help you discover new things. Once you’ve unwound, you can go back into design mode and bring your new ideas with you.

Brainstorm

Brainstorming is the process of taking inspiration and organizing it in a form that can be incorporated in a design. Ideas, styles and elements that you’d like to include in the design are all a part of the process, even if they are still a bit rough.

Sketch some layouts, experiment with color schemes and typography, and try out different ways to present graphics. Sketching is a part of this phase, as is testing one’s creativity to the limit. This is when the general idea for the design comes into focus.

Research

This is when you research the final idea and how to make it happen. I like to collect examples of elements from other projects and see what works best. You could also look up tutorials on effects that the design calls for. This is a great way to try something new and get the perfect look.

Collect resources and learn a few new things. Then you should be ready to create a draft for the client.

4. Try Different Things

Having collecting resources and researched styles, you’ve probably come upon new ideas. Try a few different things, using your original goal as your reference point. Don’t just jump in, create something and leave it at that. Not only will you learn something new, you will also have a few other ideas to show the client if they want to see variations.

5. The Revision Phase

Many designers don’t appreciate the revision phase, especially if they feel a client has poor taste and wants to ruin the design they have worked so hard on. Don’t worry. It doesn’t have to be so painful.

Share with the client your initial design or, as many graphic designers like to do, multiple options for designs. Make sure the client feels free to share what they would like changed or to mix and match features from the different options you present.

It can be difficult to understand clients who don’t know what it is they don’t like about a particular design but just want “something different.”

Keep showcases and examples for inspiration on hand for the client. So, if the client doesn’t like a font that you used for the logo, share a logo design showcase with them. Ask them to choose a few that they like, to get a better feel for their style; that might be easier than getting someone who has no background in design to explain what they mean.

This part of the graphic design process requires the most attention and is the hardest to systematize, but keeping such resources on hand can help. Don’t be afraid to ask questions and collaborate with the client when they are being vague. Taking the time to tease out their thoughts is quicker than making revisions that they might not like anyway.

Wrapping Up

In systematizing any process, the tips we’ve shared can help. But you should also identify the tasks that you do regularly and figure out how to make them more efficient.

Don’t let the process we’ve outlined stop you from asking yourself what is unique about your way of working.

With a system, the correct tools and better overall organization, taking on more clients and getting projects done faster and with better results is possible.

Businesses have to take advantage of the opportunities that systematization holds.

Visual Decision Making

User interface experts are often suspicious of the role of visual aesthetics in user interfaces—and of designers who insist that graphic emotive impact and careful attention to a site’s visual framework really contribute to measurable success. Underneath the arguments, I see a fundamental culture clash. In academia, text (and lots of it) is the only way serious people make serious arguments, and very polished presentations are often seen as prima facie evidence that the presenter may be hiding a weak argument with graphic frou-frou.

Many eyetracking studies conclude that large graphics and graphic elements attract few “gaze fixations,” but can we really conclude that large, aesthetic, tone-setting graphics have no lasting effect on the user’s attitudes toward a site? To put it bluntly, are designers who create visually compelling sites simply wasting time and treasure on graphic indulgences that obstruct efficient e-commerce and communication?

Perhaps not. Another body of web user experience research shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

What can we learn from user experience analysis tools such as eyetracking? Eyetracking is great for analyzing and understanding how users see, interpret, and use information. However, I disagree with usability researcher Jakob Nielsen, who asserts that, since his research subjects (apparently) pay little attention to large graphics on web pages, we can infer that those graphics have little influence on users — and that “useless” or “superfluous” images form “obstacle courses” for users. Nielsen isn’t talking about catalog images or other images closely related to merchandize or tasks, but about the images and other graphic content that designers use to create a site’s aesthetic ambiance.

I have no doubt that Nielsen and other researchers accurately report what their eyetracking study participants do in response to task-centric research on websites. Context is important here: In such studies, participants have a set of specific tasks to accomplish, and thus their gaze tends to focus on navigation links, titles, labels, and interface controls such as buttons and form fields. Expressive or visual tone-setting graphics are rarely useful in such tasks, and it’s not surprising that users performing these tasks (apparently) ignore most page graphics, as indicated by the infrequent gazes directed at large images.

To reconcile the differing views of the proper role of visual aesthetics, we need to understand how the brain processes images and responds to what we see.


It happens in an instant

Thanks to the work of the early 20th Century Gestalt psychologists—and to many studies since—we know that the brain’s response to images is extremely complex, and in many cases nearly instantaneous. The process seems semi-magical and therefore untrustworthy. How could something so complex happen so fast? How can we trust the results of a process we don’t thoroughly understand? Research confirms that users make aesthetic decisions about the overall visual impression of web pages in as little as 50 milliseconds (1/20th of a second). [4, 5] These instant visceral reactions to web pages happen in virtually all users, are consistent over visit length, and strongly influence the user’s sense of trust in the information. In short, users have made fundamental, consistent, and lasting aesthetic decisions about the credibility and authority of sites before major eyetracking events begin.

In intensely visual fields such as art history and diagnostic radiology, this kind of sophisticated, complex, near-instant Gestalt visual judgment is well-known and respected, although the exact neural mechanisms at work are not well understood. In Blink Malcolm Gladwell tells the story of the Getty Museum’s famous kouros, a nominally ancient Greek statue now widely regarded as a modern forgery. Although the provenance and mineralogy tests seemed to provide definitive proof of the statue’s age, independent art history experts were almost universally negative in their first visceral reactions to the statue. Thomas Hoving’s immediate reaction to the statue’s unveiling was “fresh,” hardly the right word for a sculpture that had supposedly been buried for two thousand years. At first, the experts had only their gut visual reactions as proof, but their skepticism caused the Getty to reconsider, and the evidence supporting the statue’s age and provenance fell apart on closer inspection. [6]

Although Jakob Nielsen has been one of the most vocal skeptics of highly graphical sites, his business partner, Donald Norman, has best articulated the ways in which sophisticated visual design not only influences users, but also contributes to better usability.


Why attractive things work better

In psychology, emotional reactions to stimuli are called affective responses. Affective responses happen very fast, and are governed in an automatic, unconscious way by the lower centers of the brain that also govern basic instincts (food, fear, sex, breathing, blinking, etc.). Think of affective responses as the brain’s bottom-up reaction to what you see and feel. Cognitive responses are your brain’s slower, top-down, more considered responses. They’re governed by your personal cultural views, learning, experiences, and personal preferences that you are aware of and can easily articulate. Affective reactions assign value to your experiences; cognitive reactions assign meaning to what you see and use.

Affective and cognitive responses to visual stimuli are governed by a three-stage process in the brain, at visceral, behavioral, and reflective processing levels:

The three-stage process governed by affective and cognitive responses to visual stimuli.

The visceral (“gut”) processing level reacts quickly to appearances. It’s the visceral reaction to web pages that researchers measure when they detect reaction times as fast as 50 milliseconds. It’s crucial to understand that these instant good/bad visceral-level affective responses are largely unconscious: it can take seconds or minutes to become consciously aware of your first, visceral reaction to a stimulus—particularly a stimulus as complex as a web page.

Behavioral-level processing involves the more familiar aspects of usability: it responds to the feel of using the site, the functionality, the understandability of the structure and navigation, and the overall physical performance of the site. At this level, users are consciously aware of their attitudes toward the behavior of the system, and their reactions (pleasure, for example, or frustration) play out over seconds and minutes as users interact with a site. It’s at this behavioral level that techniques such as eyetracking are most powerful and trustworthy, because they offer detailed moment-by-moment evidence of what users consciously decided to look at and do to fulfill a given task.

Reflective processing of reactions is the most complex level, and typically involves a user’s personal sense of a site’s beauty, meaning, cultural context, and immediate usefulness. Reflective processing often triggers memories and encourages pragmatic judgments about the overall aesthetic worth and value of what a user sees. Eyetracking and traffic logs are irrelevant at this level, but user interviews can give you insight into your user’s reflective judgments.

Visceral (affective) reactions can take a relatively long time to bubble up through layers of processing to enter conscious awareness at the behavioral or reflective levels, but that doesn’t mean that affective reactions don’t immediately influence thought. In fact, it’s the instant, pre-conscious pleasure of seeing a well designed page that makes you predisposed to find a beautiful design easy to use—an effect that lingers long after the slower, conscious behavioral and reflective levels of processing kick in and make you aware of how you feel about what you see.


Classical and expressive aesthetics in web design

To explore viewer reactions to site design, user experience researchers need basic aesthetic models that simplify a complex subject, but nonetheless do offer some guidance to designers. These models are often divided into “classical aesthetics” versus “expressive aesthetics.” [7] Users bring context, expectations, and intentions with them, and the extent to which a site’s visual design matches those expectations will strongly influence perceptions of the quality and reliability of information or site interactions.

Classical aesthetics

Classical aesthetics stress orderliness and clarity in design, and use familiar web and print conventions. Research shows that classical aesthetics strongly correlate with perceived usability. This model is most successful when users expect an e-commerce or content site to provide large amounts of information in a well-organized way, with a clear visual hierarchy and conventional headers, subheads, captions, and navigation—think newspapers, sophisticated magazines or e-commerce sites, or reference sites such as Wikipedia. The pleasure and trust that classical aesthetics generate seems to be centered in the higher and slower reflective level of processing. However, classically beautiful sites also generate instant positive visceral reactions as well, and this creates a lasting sense that a site is easy to use.

Expressive aesthetics

Expressive aesthetics emphasize the originality, creativity, and visual richness of the site design. Think about the kind of site that typically wins design awards from Print or Communication Arts. Successful expressive designs generate immediate, positive visceral reactions in most users. It is less clear that this immediate expressive response influences longer-term positive judgments as strongly as successful classical designs, particularly in perceived ease of use. Understanding your audience is particularly crucial in expressive designs: a “successful” design approach for foreign policy wonks may be less successful with fans of the Jonas Brothers.

Expressive and classical aesthetics seem to correlate equally with the general positive or negative attractiveness of a site, but user expectations and context influence longer-term responses. Users expect the aesthetic model to complement the purposes of the site, for example, and thus text-rich content sites seem to benefit more from the classical aesthetic approach. Carefully built designs contribute strongly to the sense that a site is trustworthy and credible, no matter which aesthetic model they use.


Using data in the context of design (and not vice versa)

The visual aesthetics that frame and define content are much more than simply a “skin” that we can apply or discard without consequence. Users react in fast, profound, and lasting ways to the aesthetics of what they see and use, and research shows that the sophisticated visual content presentation influences user perceptions of usability, trust, and confidence in the web content they view. Those user judgments begin within 50 milliseconds of seeing the first page of your site.

Smart graphic design is always some balance of current expressive trends, information architecture, classical layout aesthetics, and detailed research on user preferences and motivations. You should never ignore solid user experience data, but mountains of data won’t auto-magically build you a successful site. Design is a synthetic activity. It can be informed by the results of analysis, but the tools of analysis don’t create beautiful designs. Douglas Bowman’s recent experience as a graphic designer among Google’s engineers who want “data” behind every aesthetic decision is instructive: data and user feedback are always important components of good design, but they are never its sole ingredients.

Should There Be a Unified Set of Styles For Web Interfaces?

If we look at interfaces in operating systems, we’ll see that there is usually a set of unified interface elements that’s shared not only by the operating system’s own tools, but also by third party programs running on that operating system.

For example, Apple’s OS X had a UI called “Aqua” for quite a few years now that gave the buttons and other interface elements a certain look a feel — a liquid look for the buttons and a more metallic/plastic look for the texture of the windows themselves. They’re now moving towards a more aluminum look that will bring it closer to the look and feel of their hardware products.

Until OS X Leopard, there were actually several ‘branches’ of the UI spread around Aqua. There were the plastic windows, the brushes metal windows and the darker aluminum windows. Buttons looked different in each one of these ’styles’. Leopard, the latest release of OS X, has unified the look across the board.

The interface in OS X looks the same on (almost) every app

Companies making apps for OS X don’t reinvent the wheel and go with the toolset given to them by Apple, so the UI in their apps looks and feels like that of OS X. The same thing on Windows — Windows XP may look different to Vista and 7, but the apps running on each system tend to use the interface elements provided by the OS, so they fit in and feel ‘native’ to the system. Well… most apps do — some don’t, and choose to fashion their interface with a completely unique look.

Why’s a unified interface important? The main argument is that people learn what each interface element looks like — what a button looks like, what a tab looks like, what a scrollbar looks like, and so on. With a unified interface you only need to learn this element once. If every other tool or third party app on the system then re-uses the same graphics and styles, the user can easily recall the function of that element. It also just looks good to have a consistent style across the board. It’s clear and orderly.

That’s the situation on the desktop OS at least — it’s mostly unified, with a few exceptions. On the web though, it’s a different story. CSS allows us to style interface elements displayed inside a browser — things like form input fields, buttons and navigation menus. Without any styling, these elements take on the look of the operating system the browser is running under — or even that of the custom styles provided by the browser itself.

A lot of web applications style their elements with CSS. A lot of others just leave them as they are. Using the same, un-styled, application then on different computers and on different browsers will give you a different experience. UI elements will look different each time. You might even get different fonts, depending on what fonts you have installed on that particular computer or device.

Using styled applications is another story. The interface remains consistent across different computers (more or less). Each styled application looks different from other styled applications though because the developers create their look themselves from scratch every time. There is no consistency — you have to learn the interface when you begin using the app.

This leads me to the question of the post: should there be a unified set of styles for web interfaces?

Just as Apple has consolidated their shattered OS look and feel in Tiger with their unified interface in Leopard, it’s possible to unify the look of interfaces of the web with CSS. Not just a framework — but a set of carefully crafted and good looking styles for forms, menus and windows that would remain consistent across devices and browsers. Such a stylesheet will give developers a strong foundation on which to design their app, and will provide a consistent experience for all the users of the apps sharing these styles.

Why now and how?

The reason why I bring up this topic is because an adoption of a certain technology is beginning to grow. That technology is CSS3. While CSS3 is still not fully supported by the browsers, all of the modern browsers support some of the common elements of it. These advanced styling properties allow for things like rounded corners, box shadows and text shadows, allowing the designer to create beautiful interface elements without resulting to many images (or indeed, any images).

More important, these advanced properties do away with useless markup bloat which was essential for things like rounded corners. With CSS3 you can style HTML elements without additional markup — just target each element directly and apply the advanced properties.

Here’s an example of two inputs, a text input and a submit input, that I’ve styled earlier. The markup for both elements is pure — no wrapping divs or custom classes — the CSS targets each by type — e.g. input[type=text]. This will look the same in all modern browsers across different operating systems (the font may differ slightly as it falls back to the next available one):

Text field and a submit button styled with CSS3

Text field and a submit button styled with CSS3 Now.. Internet Explorer 6 doesn’t support these kinds of type selectors — or any other advanced CSS3 properties for that matter. Newer Explorers support type selectors but won’t give you the fancy stuff like rounded corners or shadows (although this stuff should degrade gracefully because after all, sharp corners aren’t the end of the world as long as everything else functions properly).

The other modern browsers support enough right now to start styling buttons and other interface elements without additional markup though.

So it’s possible to make a comprehensive CSS that will provide attractive, and more importantly, unified styles to form elements and menubars (which will need minimal markup and classes, specified by the stylesheet) — but is this a good idea? This is a project I’d like to do but I’m wondering whether it’s worth it. I’d love to read your comments.

HFI Recently Published their “UX Maturity Survey 09″ Report, & there’s good & bad news about usability – especially about usability champions

User Experience is Not Yet Mature, Based on the Lack of Usability Champions

Reading the User Experience Maturity Survey that HFI recently conducted is a lot like reading your 401k statement. Sure, the good news is you have money in there, but the bad news is it’s a lot less than you were hoping for. Likewise, the User Experience Maturity Survey has good news and bad news, most especially about Usability Champions.

Over 1,000 survey responses were received (1,123 to be exact) which is a nice surprise, as I didn’t realize there were so many companies out there with usability practitioners on-board who were willing to share their experiences in usability with the rest of the world. Hurray for us and for usability!

More good news! The majority of survey respondents reported that User Experience (aka UX) fit into their business for:

1 – Building web sites (excellent, usability in websites is very important)
2 – Creating Applications & Software (great, usability helps there too)

Conducting usability work on web sites and applications is like putting a nice warm fuzzy blanket around the web site and giving it the tender loving care it needs to truly be successful out there in the big cold world. Well, not really, but you get the idea.
Half of Us Don’t Have a Usability Champion

But now to the bad news, almost half (48% to be exact) of the survey respondents said their organization does not have a visible, committed Usability Champion supporting user experience design.

Let’s stop right there for a minute. Let’s you and me put down our Blackberrys for a second and focus.

Most of the people who responded to this survey are doing usability work, and they are doing usability work for important things like building websites and creating applications. But barely half have a usability champion! Why, that’s like NASCAR drivers without a Pit Crew! It’s like a horse race without Jockeys! It’s like your wedding without a piece of wedding cake you can mash into your Spouses face (even though you were warned NOT to do that).

Folks, without a usability champion it’s going to be very hard to have a clear and actionable usability practice that operates as one of the core business units for your company! You’ll be stuck doing last second usability testing as an after-thought on almost completed projects that someone is realizing only now is totally screwed up and needs some sort of help, any sort of help, for the life of your career at your company! That’s sad, it’s like having to live in Seattle and constantly be rained on.

Finding a Usability Champion

So, if you are one of those unlucky 48% of usability practitioners that don’t have a usability champion, or you live in Seattle, here’s 3 things you can do about that (um the usability part, for the Seattle part your on your own – just kidding all you Emerald City dwellers, I heart ‘ya and your City, especially the Space Needle, it’s cool):

1. Find a Usability Champion – Most marketing and sales VPs are looking for ways to get their bonus achieve their vision for making their ever increasing web site sales goals. If there was a way you could show them that by improving the usability of their eCommerce web site their sales would increase, then you would have an instant Usability Champion (and probably be invited to some of those cool “Marketing/Sales after work parties”). Try researching “usability roi case studies” on Google, you might come across some helpful ammo with which to approach your Marketing VP.

If you don’t have a sales or marketing VP (really? remind me again how your company sells things and makes money?) then you might have a Product or Product Development VP. Here to, if you can demonstrate that by improving the usability of the product more people will find the product easier to use, and that will help increase use (sales?) of the product, then you might have a new friend.

HINT: The product development VP is probably worried about getting their bonus achieving their vision based on delivering a product on time. You’re going to have to prove to a rather skeptical person that you won’t slow him or her down in getting that product out the door while conducting usability work. I provided some hints on how to do faster usability testing which might come in handy here.

2. Become a Usability Champion – Nature abhors a vacuum (so do I when my wife tells me it’s time to vacuum the stairs!) so here’s a chance for you to step in and fill that usability void. Push hard for usability projects to anyone who’ll listen (at your company, your mom already knows you’re the best usability person in the whole wide world – whatever the heck “usability” is).

If you’re brave, you might actually conduct your own usability evaluation of your web site or product and provide an executive summary to some well placed VPs – just for reading material the next time they have to fly somewhere. Try to make friends with the coders and developers of the web site or application and see if they’ll become “usability friendly” – try taking them to lunch, that might help.

Also, read the post I wrote on the 7 enterprise usability tips for ways you can apply usability projects beyond just a web site, if that avenue is closed to you. There’s lots of potential usability projects lurking at your Company, in many different divisions. Consider IVR messages, customer service web sites or applications or even internal applications that all employees have to use.

The point here is perception is reality, and if all you do is talk about usability and how it helps increase sales or interactions or whatever, eventually people will believe you are the Usability guru and champion.

By the way, it’s important that you are a usability Champion that can actually get usability projects approved. Being a usability champion without the authority to use the company pen to sign a company check to pay for a usability project means you don’t have the authority to make usability projects happen, and thus you’re probably not a usability champion. Some of your co-workers in your office might be calling you just a “usability nut,” the mean ones a “usability chump-ion” (ouch).

3. Leave the Company – Guess what? Sometimes an old, non usability friendly door must close before a new, usability friendly door can open. If the corporate culture is dragging you down, and you’ve tried everything you can (see numbers 1 and 2 above) to get a usability champion at your company, it might be time to leave and find a company that does have a usability champion.

Don’t think of it as failing, being a quitter or throwing in the towel. Think of it as your company is not able to incorporate usability as a part of it’s core function, and thus you must find a better environment where you can make a difference practicing usability. Those losers.

According to USNews & World Report, you, yes you, as a usability experience specialist are in one of the Best Careers of 2009. If your current lame unresponsive dimwitted ignorant company doesn’t truly value and support usability, more than likely there’s another company out there who will.

So dust off your resume, dry-clean your interview suit, shine up those shoes and hit the pavement you usability experience specialist you! You’ve got a whole new exciting opportunity just WAITING for you to get started! What are you waiting for? There’s a better opportunity for you and all you have to do is take that first step!


Conclusion – User Experience is Not Mature, Especially without a Usability Champion

According the results of HFI’s recent “Usability Experience Maturity Survey 2009” almost half of those of us who completed the survey are without a usability champion. Without a usability champion at your company it’s going to be very difficult to achieve usability maturity, and include usability as a core attribute of your company’s operations.

If you’re not comfortable trying to accomplish usability without a usability champion, you can either find one in your organization, become one, or worst case leave the organization and join one that does have a usability champion.