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.
[
Editor's note: A must-have for professional Web designers and developers:
The Printed Smashing Books Bundle is full of practical insight for your daily work.
Get the bundle right away!]
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)
