BlogmyQuery – BMQ

Product pages for e-commerce websites are often rife with ambitions: recreate the brick-and-mortar shopping experience, provide users with every last drop of product information, build a brand persona, establish a seamless check-out process.

As the “strong link in any conversion,� product pages have so much potential. We can create user-centric descriptions and layouts that are downright appropriate in their effectiveness: as Erin Kissane says, “offering [users] precisely what they need, exactly when they need it, and in just the right form.�

Beyond that, a user-centered creation process for product pages can help brand the information as well as reduce the content clutter that so often bogs down retail websites.

User-centric product copy garners positive results because it anticipates the user’s immediate reaction. As Dr. Timo Saari and Dr. Marko Turpeinen, authors of “Towards Psychological Customization of Information for Individuals and Social Groupsâ€� suggest, individual differences in processing information implicates dramatic variances in type and/or intensity of psychological effects, such as positive emotion, persuasion, and depth of learning (2).

We can describe products in various ways. Highlighting certain aspects of a product will elicit different reactions from various users. Gearing product descriptions to a particular audience encourages those users to effectively process the information, heightens persuasion, and increases the potential to predict what the users want (but didn’t know they needed). The effort required of user-centric product descriptions demands that we understand how certain descriptors, contexts and inclusions of details affect the target user, and that we then put our discoveries into action.

This article offers a user-centric guide to producing product pages and provides examples of successful e-commerce websites that present user-centric approaches to product page descriptions and layouts.

Get To Know Your User

Approaching product page description and layout from a user-centric perspective demands that we have a rich understanding of the target user. As Saari and Turpeinen suggest, Web customization starts with some type of model, be it individual, group or community. With your user models in place, you can best assess what they need and how to write for them.

In her book Letting Go of the Words, Web usability expert Janice Redish suggests these strategies for getting to know your target user:

• Scope the email responses that come through the website’s “Contact Us” form and other feedback links. Consider the profiles of the senders. You can discover commonalities in lifestyle, technological capability, education level and communication preference through these channels.
• Talk to the customer service or marketing employees at your company. Don’t approach them with a broad demand to describe the typical client. Rather, ask questions about their interactions with clients. Who is calling in? Who is stopping by the office? What queries and complaints are common?
• Offer short questionnaires to visitors to the website. Redish suggests asking people “a few questions about themselves, why they came to the site, and whether they were successful in finding what they came for.”
• If possible, acquire a sense of the client simply by observing the people who walk through the front doors of the business. This is a great way to pick up on key phrases, jargon, emotional behavior and demographics.

Once you’re able to confidently brainstorm the major characteristics of your target user or group, then developing the models to guide the writing process comes next.

Keep in mind that gathering and compiling this information can take as little or as big an investment of time and money as you (or the client) can afford and still be effective. As Leonard Souza recently noted, even stopping in a nearby coffee shop to engage five to ten people in your target demographic can yield useful insight. With a bit of flexibility, you can find learning opportunities that are convenient and on the cheap.

The models created from your user research can be fashioned into personas, which Souza describes as “tools for creating empathy among everyone in the project.” Use personas to guide user-centric copywriting by establishing very specific user goals and preferences.

A persona is a fictional person amalgamated from the characteristics of your target user. You can get creative here with the persona’s name and image, but not too creative. The persona must be mindfully constructed according to the age, education, family status and other personal details culled from your research.

Now that you have a persona to please as you construct a product description and layout hierarchy, staying user-centric is that much easier. Take a look at the product description from Lululemon, a British Columbia-based yoga-wear retailer:

Product description from Shop.lululemon.com

The product description assumes that the reader knows a specific set of jargon: How many non-yoga participants would know what downward-dog means? Or “pipes�, as the “Key Features� section refers to arms? This content drives right to the needs and preferences of a very specific user. She wants warmth (four of the “Key Features� note the thermal quality of the product), convenience (pre-shrunk fabric, easy layering), and motivation for an active lifestyle (she recognizes the yoga jargon and enjoys giving her “pipes some air time�).

A rich understanding of the user has made this product page effective and delightfully specific to both the user and the brand.

Master S.M.A.R.T. Content and Layout

Without specific, measurable, actionable, relevant and trackable user goals driving the copy on the product page, the information will sag. I draw here from Dickson Fong’s enlightening article “The S.M.A.R.T. User Experience Strategy“ to suggest that care should be taken to develop user goals that guide the writing process for product pages.

The S.M.A.R.T. formula will keep you on track as you plot out product details and decide what descriptive angle to use.

Fong provides an excellent user goal for a product page: “I want to learn more about this product’s design, features and specifications to determine whether it fits my budget, needs and preferences.�

This will help you create a checklist when assessing what to present first and what to offer as optional information when structuring the layout of the page (more about that in the “Create Information Hierarchies� section below). It provides direction when you’re writing content and helps you focus on the benefits to the user. And as Darlene Maciuba-Koppel suggests in The Web Writer’s Guide, “In copywriting, your end goal is to sell benefits, not products, in your copy.�

For users, benefits and accomplished goals go hand in hand. A product that doesn’t fit their budget, needs or preferences offers them little benefit. So, in order for S.M.A.R.T. goal-driven product pages to serve user-centric purposes, the text must follow suit. Fong suggests presenting relevant content details that are specific to the consumer of that product type.

Let’s take Fong’s S.M.A.R.T. user goal for product pages and assess the specifications at play on the following two pages from Dell:

Product page for Alienware on Dell.com

Featured on Alienware, Dell’s computer subsidiary for high-performance gaming, the description for this desktop computer has been tailored to the primary browsing goal of a very specific user. The needs and preferences of the user have already been predicted in the bullet-point outline, highlighting optimum graphics and top-notch liquid-cooling capabilities, thus harmonizing the checklist of features with a checklist of benefits for the user. A number of the product’s features could have been highlighted, but for optimal ease, the specifics most likely to help the user accomplish their goals are featured.

With the next Dell desktop computer, another goal of the target user is covered in the description:

Product page description for Inspiron 570 on Dell.com

With a noticeable absence of technical details and a heavy emphasis on product personalization, this description plays to a user with very different needs than the Alienware shopper’s. Even the tabs have been re-arranged to best meet the user’s goals. The Inspiron 570 page shows “Customer ratings� as the first tab, while the Alienware page offers “Design� first and then “Tech specs.�

These decisions are all geared to accomplishing very specific user goals: find the required information and assess the benefits.

Use Personal Pronouns

Consider again Dell’s description of its Inspiron 570:

Make It Yours

The Inspiron 570 desktop is everything you want and nothing you don’t. Available in vibrant colors, so you can complement your style or stand out from the crowd. Plus, you can build your desktop according to your needs with a choice of multiple AMD processors and NVIDIA ATI graphics cards as well as other customizable features. So whether you are surfing the Web, emailing friends and family, downloading music and photos or blogging about it all, the Inspiron 570 desktop can handle it.

Your wants, your style, your needs, your friends and your Internet past-times. Including the title, eight instances of “you� or “your� turn up in this 86-word segment!

Personal pronouns in product descriptions are perfectly appropriate and quite effective at engaging users, because, as Redish states, “People are much more likely to take in [messages] if you write with ‘you’ because they can see themselves in the text.â€�

With Dell’s content, the personal pronouns target a specific user (one who is savvy enough to download music and email and who is interested in customization and feeling unique), while also managing a broad gender appeal.

Outdoor equipment retailer REI employs personal pronouns in its online product descriptions, creating dynamic scenarios aimed at a specific user:

Product description for REI.com

The description asserts that this canoe will help you navigate a waterway that “you’ve recently noticed,� anticipating a specific user reality (or dream).

The product showcase is devoted to the user’s needs and showing how the user will benefit from purchasing the canoe. Using “you� is the clearest and most direct way for this retailer to grab the user’s attention and to convince them, at any time of the year, that this canoe is the right buy.

Angie King backs this up in her article “Personal Pronouns: It’s Okay to Own Your Web Copy.� She suggests that using first- and second-person pronouns helps users connect with the content, and “reflect[s] the way real people write and speak,� fostering an immediate connection.

For a product description to speak directly to a specific user or group, the “you’s� should flow freely.

Use Information Hierarchies

Adopting a user-centric approach to the layout and copy of product pages helps you tackle the challenge articulated by Kean Richmond: “How do you cram so much information into a single Web page?�

In addition to technical specifications, shipping information, item details and preference options (and don’t forget that compelling product description), product pages must also list every describable service that the product performs for its user, including customer benefits (as Darlene Maciuba-Koppel explains, too).

By all means, provide the user with every last detail possible. Answer every conceivable question, or make the answer visible for discovery. Do so with information hierarchies that are based on a rich understanding of targeted users. This will keep each page tidy and drive users to complete your business goals.

In a structure in which, as Kean Richmond states, “all the important information is at the top and [the rest] flows naturally down the page,� details that might not be a top priority for the target user can be tucked into optional tabs or presented at the bottom of the page. The key is to gauge the structure of the page with the sensibilities of the targeted user in mind.

Look At User Context

Here’s where you become a mind-reader of sorts. Erin Kissane points to the approach of content strategist Daniel Eizan in understanding what specific users need to see on the page in order to be drawn into the information. Eizan looks at the user’s context to gauge their Web-browsing behaviors. Eizan asks, What are they doing? How are they feeling? What are they capable of?

Establishing user context aids in planning an information hierarchy, and it is demonstrated by small and large e-retailers. On the big-box side, we have Walmart:

By making the price and product name (including the unit number per order) immediately visible, Walmart has anticipated a possible user context. A Walmart visitor searching for granola bars has perhaps purchased the product before. With the unit price made visible, perhaps the anticipated user is judging the product based on whether this box size will suffice.

Details such as “Item description� and “Specifications� are options that are convenient to the user who is making a large order of a familiar product.

The user’s context shapes the hierarchy: the user seeks a quick calculation of units per product versus price. The targeted user does not immediately need an ingredients list, allergy information or a description of the flavor. But if they do, they are available in a neat options-based format.

Walmart has built its reputation on “Everyday low prices,� and the brick-and-mortar philosophy has crossed over to its website. Walmart anticipates users who have some familiarity with its products and who have expectations of certain price points. These factors play into the information hierarchy across the website.

Now look at the product page of a different kind of retailer, nutrition bar manufacturer Larabar:

Cashew Cookie product page from Larabar.com

Here is an online presentation of a retail product that is similar to Walmart’s Nature Valley granola bar (though some might argue otherwise). However, the information hierarchy clearly speaks to a different user — a specific user, one who might be looking for gluten-free snack foods or a vegan protein solution. The Larabar user’s context is much less urgent than the Walmart user’s. The product page does not reveal pricing or unit number. Ingredients are visible here, with simple images that (when scrolled over) provide additional nutritional information.

The anticipated user has more time to peruse, to browse several varieties of product, and to read the delightful descriptions that help them imagine the tastes and textures of the bars.

This user might be very much like the targeted Walmart user but is likely visiting the Larabar website in a different context. This product page offers more immediate information on nutrition and taste, selling to a user who is perhaps hunting for a solution to a dietary restriction or for a healthy snack alternative.

However, the red-boxed “Buy Now� is positioned in a memorable, convenient spot on the page, leaving no guessing for the user, who, after reading a description of this healthy bar full of “rich and creamy flavor,� will likely click it to find out the purchasing options.

With these two pages for (arguably) similar products, we see two completely different ways to structure product details.

Both are effective — for their targeted users. A person seeking gluten-free snacks for a camping trip might be frustrated having to search through the hundreds of granola bar options on Walmart’s website. But they wouldn’t be going there in the first place; they would use a search engine and would find Larabar.

Information hierarchy solves the content-overload challenge that can overshadow the process of constructing a product page, and it is an opportunity to bolster user-centric copy and layout. As mentioned, the key is to gauge the user’s context.

Conclusion

While a user-centric consideration of product pages is not the only way to go, it does provide a focused approach that has appeared to be effective for some pretty successful e-commerce players. Consistency in product pages is key, especially when building a brand’s presence; a reliable guide can ease the writing process. The user-centric method does require some primary research, but this lays a sturdy foundation by which to gauge every bit of content on the page according to how it benefits the user.

As Maciuba-Koppel says, as a content writer or designer, your goal should not be to sell products, but to sell benefits.

Now watch the conversions multiply.

(al) (fi)

References

• Writing for the Web: Creating Compelling Web Content Using Words, Pictures And Sound Lynda Felder (New Riders: 2011)
• “The S.M.A.R.T. User Experience Strategyâ€� Dickson Fong (Smashing Magazine)
• “Personal pronouns: It’s okay to own your Web copyâ€� Angie King (Brain Traffic)
• “A Checklist for Content Workâ€� Erin Kissane (A List Apart)
• “Writing Copy that Works for a Livingâ€� Erin Kissane (A List Apart)
• The web-writer’s guideDarlene Maciuba-Koppel (FocaPress: 2004)
• “Letting Go Of The Wordsâ€�: Writing Web Content that Works. Janice Redish (Morgan Kaufman Publishers)
• “Anatomy of an Effective Product Page Designâ€� Kean Richmond (Six Revisions)

---

© Sarah Bauer for Smashing Magazine, 2012.

Have you read Where the Wild Things Are? The storybook has fluidity of content and design figured out.

It goes that one night, protagonist Max “wore his wolf suit and made mischief of one kind or another.� He hammers nails into walls, pesters a small dog. Author Maurice Sendak doesn’t explain these hijinks textually for the reader. The mischievous acts are illustrated on the right-hand pages. Readers make the narrative connections for themselves.

Photo of the book Where the Wild Things Are

The words and pictures depend on each other for completeness. Web designers can employ the same complementary dependence of graphic and text in their own work. It encourages a sense of belonging and can create strong first impressions, which are often essential to effective Web design. Because Web design is not confined to page-by-page display as storybooks are, we’ve got no excuse for neglecting Curt Cloninger’s assertions that a design “has to somehow be relevant to the content, accurately representing its purposes in the medium,� and that “the content has to be useful to the site’s audience.�

This post explains four strategies for improving fluidity of content and design, and we’ll gauge the effectiveness with which several websites use these strategies, taking special note of what we can learn from Sendak’s Where the Wild Things Are.

With Graphics As Your Witness

When editing critical papers during my undergrad, I was constantly mindful of backing up every claim I made in writing. Describing a protagonist as “yearning for a return to childhood� wasn’t enough to convince a professor unless I could refer to a passage where this was suggested.

Though published way back in 1997, Jakob Nielsen’s analysis in “How Users Read the Web� still offers a storehouse of relevant advice about how users gauge legitimacy online. He suggests that when businesses use promotional language online, they create “cognitive burdens� on their users, slowing down their experience with the website, triggering a filter by which they weigh fact against fiction.

Instead, use design to complement or convey self-promotion, easing user skepticism from the get-go.

Makr Carry Goods effectively “backs up� its content with graphics to convince users of the “news�-worthiness of its work. In the example below, the visual promotion of the products complements the text: without having to scroll over the images, we see the products themselves as being the news.

Scrolling over the images on top reveals the textual “news�:

From there, users can carry on their visual journey through the Mark Carry catalogue, enticed to read on by the persistent connection between the product and the news section, a connection that compels users to explore further.

Key to this graphic-textual connection is the visual quality of the products themselves. Without the clean white presentation and professional style, the visuals here might fail to suggest a connection with the news. But the products have been presented to impress.

Without engaging visual confirmation, content will often fail to persuade.

Take Mark Hobbs’ professional website:

He claims that he’s “not normal.� He’s “extraordinary… adaptable, loyal, ambitious and an Eagle Scout,� and he’s “like a sponge� (among other things). If he were getting points for descriptiveness, Hobbs would take first place. But he’s got no visual evidence of any of these claims. No hint at this lack of normalcy.

Besides, as Nielsen’s studies suggest, users generally dislike “marketese�: writing that is boastful, self-promotional and full of subjective claims. Then again, should claiming not to be normal be considered a boast?

Mark’s claims could have been justified by an impressive and immediate visual display of his past work. Engaging users with the strict facts of his expertise could have reinforced his textual claims.

Consider the home page of Rally Interactive:

It is “here to help you build digital things.� We know this because of the two immediate examples of its work, presented in triangles that recall other projects that required exceptional skill: the pyramids.

Rally’s folio effectively demonstrates a strategy of fluid content and design. The firm backs up its claim and provides users with an immediately useful and positive association. The visual and verbal prompts coalesce to convince users of Rally’s expertise.

Going back to Where the Wild Things Are, if Sendak hadn’t included visuals of Max’s misdoings, what sympathy could we gain for him as his mother sends him up to bed? We can interpret his “mischief� any way we choose, but Sendak’s visual direction helps us gauge what kind of protagonist (or antagonist) Max will be for the remainder of the story. Verbal prompts simply wouldn’t cut it.

Fluid content and design reduce the user’s search time and, in this case, justify the claims made textually. Users don’t have the time or willingness to hunker down and read, particularly when looking for a service. Fluid content and design convince users of the truth of a claim before they even begin to question it.

Tighten Up

Once you’ve eliminated any refutable claims, you might find your content looking a bit sparse. In fact, you want it naked: easy to scan and to the point.

Christine Anameier’s article “Improving Your Content’s Signal-to-Noise Ratio� points us in the right direction for creating tight content that isn’t afraid to depend on suggestive design to share the workload.  There will always be information that the user cannot process visually. So, what should you put in text?

Anameier suggests segmentation, prioritization and clear labeling to make the most of your content.

Segmentation

Segmentation entails sectioning content on the page according to audience or task.

The home page for Jessica Hische’s design portfolio does this effectively:

The home page targets the specific needs of users. Hische has divided the links to her services according to what particular users will be looking for, sparing us long descriptions of each service.

Hische also spares us a textual description of the quality of her service, instead pairing tight layout of text with sprawling, confident design. We can gather from the background a sense that she has clean organization. The orange ribbon font “welcomes� us and puts us at ease so that the text doesn’t have to.

Prioritization

Prioritization, as Anameier says, requires that you “understand your audiences and their tasks, and decide what your website is trying to do.� Structure your website to reflect these tasks, removing any content that strays from the path. Hische’s home page demonstrates a comprehension of her users’ purpose for visiting the website, and it wastes no words.

Content and design fluidity entails deciding what should be explained textually and what should be demonstrated graphically. Hische does not verbally boast about her quality of service. The design does that for her, conveying an array of positive attributes, from classic taste to proficient organization.

Hische recognizes that the first priority of users is not whether she’s any good, but whether she offers what they need. Once that is clarified, users will look into the quality. Keyword: look.

Creating those fluid user experiences in which content and design cohere requires, as Mark Boulton states in “A Richer Canvas,� “text that feels connected to the physical form in a binding manner that should make it invisible.� Anameier herself says that incorporating “specific and accurate link text, page titles and headings� gives users the luxury of perusing graphic elements on the page without being disrupted by navigation obstacles.

Labeling

Labeling that is structured with the user’s goals in mind will be trim and to the point, “invisible,� as Boulton suggests, so that the visual showcase enjoys some attention, too.

Tight content that follows Anameier’s guidelines will visually suggest your service’s qualities and attributes strongly. The description of the service itself will rely heavily on text, but what sets your service apart from others can be conveyed visually. Creating cohesive visual and textual discovery paths for users replicates that same sense of control that users get from the storybook.

Doodle Pad superbly utilizes segmentation, prioritization and clear labeling on its “About� page:

Carrying over the sketch-book theme to its visuals, Doodle Pad sets down user goals with clarity, displaying information directed at clients and creative professionals.

The labelling is clear and styled with familiar doodling motifs that show the user where to look for what they need. Key questions are answered, and the word count is not too shabby for a software concept.

Impressively, Doodle Pad connects the imagery and layout to the overall concept without over-informing or weighing down users with elaborate language. It gives us notebook-style notes for a notebook concept: tight and user-friendly.

Check The Narrative Voice

Curt Cloninger’s article “A Case for Web Storytelling� argues for narrative voice as being an essential consideration for Web designers who want to create engaging user experiences.

Designers are at a great advantage when it comes to synthesizing text with graphics. We can create a rich narrative tone that convinces and directs users. We are able to explore and experiment with the Web’s possibilities, going beyond Where the Wild Things Are and celebrating non-linear narratives, incorporating several kinds of interactive media.

With Web design, narrative voice need not stay put in the text. It’s more flexible that in storybooks, and Cloninger encourages us to play with that.

For instance, look at the layout for MailChimp 5.2. Toying with slogans that would look out of date on another Web page, the designers evoke nostalgia with their use of background images, color and typography, elements ripe with narrative potential:

Viewers interpret the slogans the right way because of the text’s ironic connection to the design. The “real people behind all those email addresses,� is a wink from the designers, because the viewers recognize that the “real people� in the background don’t look very “real� at all.

Users will commit to a fluid narrative online if the design fully commits to the content. And as Cloninger says, using narrative voice through Web design presents countless possibilities for exploration.

MailChimp explores one such possibility with its demo video, complete with more “wholesome� design and content:

Users can expect to be led on this retro journey through the other formats for narrative voice, as the video suggests with its old-school film-reel introduction.

The narrative voice is so woven into the content and design that MailChimp 5.2 could offer all kinds of 1950s-terrific claims and users would be moved to follow along.

MailChimp 5.2 experiments with tailoring content and design to a narrative voice, but it is effective because of its consistency. If it hadn’t committed to a particular narrative style, then the escapist spell of this user experience would have been broken.

Green Tea Design has chosen a watery, traditional Japanese-inspired design for its website. A geisha shades herself with an umbrella, looking down meekly, making for a quiet non-confrontational effect. But look at the aggressive text: “We don’t design wimpy websites that get sand kicked in their face by the competition.� The text goes on the offence, but the design doesn’t align with or enhance the narrative voice.

Try this: choose one adjective with which you’d like users to describe your website. Affix a sticky note of this adjective to the top of your monitor, and measure every sentence on your website against this adjective. Ask yourself whether the content aligns with the adjective. Now pour over your design and assess it by the same measure. We’re looking for matching sensibilities. Does your content and design align with how you want users to feel about the website?

In Where the Wild Things Are, the narrative tone is the anchor in Max’s hectic journey. Consistent, calm and matter of fact, even when Max is off dancing with the wild things, the voice elicits the reader’s trust as it sees the protagonist back to safety.

Readers settle into this consistency the way Max settles into his boat for “in and out of weeks / and almost over a year / to where the wild things are,� and again “back over a year / and in and out of weeks / and through a day.� It steadies the commotion in Max’s imagination.

Here, readers recognize the tension between the consistent content and the disruptive visuals as the mark of a superbly imaginative journey, where anything can happen, but where eventually everyone must return home.

The narrative commits to this tension until the end, when Max gets back to his room, where dinner is waiting for him, “and it was still hot.�

As a children’s storybook, Where the Wild Things Are doesn’t employ multiple forms of narrative expression. But it is an effective example of the co-dependence of playful and experimental text and visuals, in which the narrative voice incites chaos and calms the senses at the same time.

One last example of a committed narrative voice:

Recalling Gold Rush-era drama and Victorian carnival sights with its effective design elements, Forefathers maintains an adventurous tone, employing text that is consistent, descriptively appropriate and authentic.

Be Mindful Of The User Experience

As Elizabeth McGuane and Randall Snare state in “Making Up Stories: Perception, Language and the Web,� as Web users scan pages, they are “filling in the gaps-making inferences, whether they’re based on past experience… or elaborate associations drawn from our imaginations.�

Trust the user to connect the graphics and text, and expect them to want to. Cloninger says that “the more power a user has to control the narrative himself, the more a visitor will ‘own’ that narrative.�

Keep the descriptions visual. The acts of “mischief� in Where the Wild Things Are are graphic. The connection is made when both elements are harmonized into one idea. The user will be willing to read the text and view the corresponding image if both elements are compelling.

Looking at Jonathan Patterson’s effective online portfolio, we can see he has maintained a fluidity of content and design by basing the user’s experience on the motif of “fresh meat�:

Patterson’s “About� page looks like a steakhouse menu. The text on the first page hints at a description of a meal, while suggesting the page’s function. The website can be flipped through like a menu, giving the user choice and control. The text is simple and linear, mirroring the sequence of appetizer, main course and dessert in a restaurant menu. Fluid text and design help Patterson to create a particular experience with his portfolio.

Maurice Sendak employs similar tactics in Where the Wild Things Are, encouraging readers to expand their gaze to match Max’s ever-growing visual landscape. As Max moves out of his room and onto the sea, the content on the right-hand pages (otherwise bordered in thick white space) creeps over gradually, thrusting more colors onto the facing page. At one point, a sea monster appears on the left-hand page, which was otherwise reserved for text and white space.

Here is the user experience at its most polished. The change comes quietly, invisibly, but the reader is aware that something is different. The protagonist’s growth has been connected with the reader’s experience of the narrative through the placement and cohesion of text and image.

Another polished example of fluidity in content and design can be found in an actual restaurant’s website layout:

Yes, Denny’s. Look familiar? Replicating the experience of perusing a Denny’s menu, this layout shows how, in Patrick Lynch’s words, “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 the brain.�

The user controls the narrative here, with fluid navigation options that maintain the menu-like aspect of the layout, and a pleasing visual presentation that, as Lynch says, “enhances usability.� Filling in the gaps between glancing over a Denny’s menu and browsing the website, users feel encouraged to control their experience.

Conclusion

Fluidity of content and design requires that you trust users to make connections. By making the tone consistent, backing up your claims, tightening the text and being sensitive to the user’s experience, you can be assured that users will draw the conclusions you want them to draw. Designers of promotional Web projects can learn these lessons in part from storybooks such as Where the Wild Things Are, which demonstrates the essential elements of user control and delight. Trust your inner child; it won’t steer you wrong.

(al)

© Sarah Bauer for Smashing Magazine, 2011.