Fluidity Of Content And Design: Learning From Where The Wild Things Are

Advertisement

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.

Wild Things Book
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.

Makr Home

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

Makr Hover

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:

Mark Hobbs

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:

Rally

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:

Jessica Hische

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:

Doodle Pad

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:

Mail Chimp Retro

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:

Mail Chimp Retro 2

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

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:

Forefathers

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”:

Jonathan Patterson

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:

Denny's Home

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

Denny's Menu

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)

↑ Back to top

As content strategist and industry blogger at Navigator Multimedia, Sarah Bauer foresees an exciting gold rush of writing opportunities for herself and others online. Currently working on an e-book aimed at helping small businesses get a start online, Sarah also enjoys writing music reviews and seeing as much live sound as possible while living in Vancouver. She blogs for Navigator here and wants to get more stuff over here.

  1. 1

    Very Interesting, thanks for the effort you took collecting this amazing materials.

    1
  2. 2

    Very interesting, nice article.

    2
  3. 3

    Great article! I’ve often struggled with creating a narrative in my design, and this helps flesh out points for me to go over when I’m working.

    0
  4. 4

    Mailchimp are the masters of this technique, I just love everything they do and how they maintain their narrative, right through to their online helpdesk!

    2
  5. 5

    Jonathan Patterson

    November 18, 2011 5:45 am

    It was a pleasant surprise to see my portfolio showcased here! Thanks for the compliments. To speak further about the theme, Fresh Meat, I wanted to do something that had definite impact—nothing watered down or safe—and this has paid off. I regularly get compliments on the concept. Thanks again!

    0
  6. 6

    Great article. It’s really good to see pieces that emphasize how much inspiration and knowledge about web design can be gained from non-web sources. Web design can very easily become self referential, and it’s only when we move away from using *other* websites as inspiration that we can push the boundaries of original work.

    0
  7. 7

    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:

    I love that you used Jessica Hische’s website as an example! I’ve been admirer of her page since she redesigned it and love how simple yet spot on she made it. I think it’s hard for us (when we’re dealing with our own online properties) to give the minimal amount of information needed and instead pack with everything “good” we think about ourselves — in turn, completely polluting a page and taking away the effect we were actually going for e.g., long service descriptions.

    Great examples to really nail down that content fluidity and designs leads to user connections. Very nice, Sarah!

    0
  8. 8

    Good stuff Sarah!! I enjoyed this article and your presentation.

    0
  9. 9

    What has happened to Smashing Magazine? I think the ideas expressed in this article are quite clear without the provision of practicing designers and their work to serve as “bad,” examples.

    Work,– you know, some people do it for a livelihood, I might add.

    There are so many amazing and good things to say, why waste that with a highlight of the faults of another who is unawares?

    Insightful; perhaps, but (your) critiques of (them) are also entirely objectionable.

    Smashing Mag #fail

    3
  10. 10

    Very interesting article with some great tips. Helps me get ideas on overhauling my own site soon… However, I have to disagree with your assessment of Mr. Hobbs’ website. I feel that a demonstration of his expertise is immediately seen when you hit the site, and his portfolio is incredibly easy to access. How each person feels about his work is up to their own discretion, but I don’t feel there is any lack of demonstration on his part.

    1
  11. 11

    Great work!

    0
  12. 12

    Great article! I whole-heartedly aggree that cohesive narrative structure is quite possibly one of the biggest challenges of good design. It is always a good idea to bring up examples of solid narrative structure that illustrate seemless fluidity!

    2
  13. 13

    Very inspiring article.
    Thanks a lot for this work.

    noRiddle

    0
  14. 14

    You always surprise me with such great articles,
    thanks!

    2
  15. 15

    excellent. thanks.

    0
  16. 16

    I’m sorry but your ‘critique’ of Mr Hobb’s site is not cool, I quote the word critique because it wasn’t even constructive, it was just spiteful in all honesty. As mentioned by Lauren, that’s someone’s livelihood there you’re trashing. And I don’t understand why you felt the need to share bad examples when the point is well made by only showing good.

    Someone’s going to wake up to a load of smashing mag traffic only to discover they’ve been publicly trashed.

    Poor, poor form.

    1
  17. 17

    Web design is impressed by his atitude.Nice article.Keep working.Thank you.

    0
  18. 18

    Great article. Help us to keep the focus on “telling the story” of the website in the best way possible. Thanks.

    0
  19. 19

    By far the most inspiring article on webdesign i´ve read. The idea of gluing together the written and visual content into a whole is just brilliant. You can communicate more with less, faster and in a much more pleasant environment for the user. Thanks for sharing this insight.

    Next step: Ironing my best shirt and walk straight to the CEO, convincing him of the benefit of having the textsmiths, pixelcarvers and scriptonauts sitting in the same room, sharing the same pot of coffee -hopefully with the gentle guidance from someone with strategic insight…:)

    0
  20. 20

    Dense and full of great examples. See a webpage not only like a display of graphics and texts but also like a story, creating experiences is the most important aspect that differ a great website from the majority of web.

    0
  21. 21

    Really great topic and something designers should really focus on when web designing. A narrative adds so much more dimension then just shinny graphics. This will keep the audience on the page and come back as apposed to looking at it for a little while and moving on. I think the examples used really help make your point even if they are critiques, I understand what the point is. I disagree with some of your comments about specific examples but I get where you are coming from. I think that there is no sure formula about how to make this work for every person so everyone takes a different approach, and I like that because then everyones narrative is unique.

    0
  22. 22

    Very good article overall. I just want to point out one of the last phrases: “you can be assured that users will draw the conclusions you want them to draw”.
    Sounds manipulative to me, I think some designer ethics needs to be revised, I guess the good way would be something like “you can be assured that users will get the message you want to tell them” or something like that.

    1
  23. 23

    An interesting read.
    I would like to point out, however, that after dealing with children’s book publishers in the past, the majority of them demand that the story and illustrations stand by themselves. This is also entirely true with Sendak’s book. If you pull the text out and read it, it will stand on its own just fine, even though there is really not much text to the book.
    If you remove all the text, the illustrations can tell the entire story by themselves.
    Even the size of the pictures plays a part in telling the story. If you notice reading through the book, the illustrations start out somewhat small. As you near the center of the book, they grow and become a full spread in the center, mirroring the climax of the book. They then shrink back down as the book nears its end.
    It’s quite amazing and masterfully done. It’s also one of the reasons this is one of the most popular children’s books of all time.

    3

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top