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 d …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров