24 November, 2009

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.

18 November, 2009

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.

07 November, 2009

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.