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.
