Creativity Archives

Tag Archive for: Creativity

Destroy the Web 2.0 look: Web design trends 2012

Creativity, Design, Digital marketing, Ideas, Inspiration

Have witnessed a de-shinification of the Web, with fewer glass buttons, beveled edges, reflections, special-offer badges, vulgar gradients with vibrant colors and diagonal background patterns. The transformation has been welcomed with relief by all but the most hardened gloss-enthusiasts. However, design and aesthetics work in mysterious ways, and no sooner does one Web design trend leave us before another appears.

The Symptoms

So, exactly what is this new epidemic? Well, let’s start by looking at some of the most common symptoms, many of which you have probably noticed. They are easy to spot, and as with many other conditions, they often appear in conjunction with each other. (This is why the contagion spreads so effectively — seemingly independent symptoms grow more infectious when combined with others.)

Please note: The following list appears in no particular order and does not indicate the level of infectiousness or severity, which seem to be stable across the board. Note also that the instances given often exhibit more than one symptom, making classification more difficult.

Stitching

Stitching appears gradually, often as a result of the designer playing too long with borders and lines, particularly of the dotted variety. A full-blown stitch is evidenced by the subtle shift from dots to dashes, augmented by drop shadows and other effects to give the impression of 3-D. The purpose of the stitch is somewhat elusive, but it seems to thrive in environments where certain textures are applied, most notably fabric and leather, but also generic graininess.

While determining the exact cause of stitching is difficult, scientists are certain that it belongs to a larger strain of the infection known as “Skeuomorphism.”

Clockwise from top: The Journal of Min Tran; Dribbble shot by Mason Yarnell; Dribbble shot by Liam McCabe.

Zigzag Borders

Borders are common elements of Web design, and as such, they are difficult to avoid; luckily, they are usually harmless and often have a positive effect on the layout. However, for some reason, a particular type of border — the zigzag — has grown exponentially in the last few years and is now threatening the natural habitat of more benign border specimens. Exactly why this is happening is unknown, although some researchers claim that the pattern created by the repeating opposing diagonals has such an alluring effect on designers and clients alike that straight borders have somewhat lost their appeal.

Clockwise from top: You Know Who; Dribbble shot by Christopher Paul; Dribbble shot by Meagan Fisher.

Forked Ribbons

Like borders, ribbons have long existed in various forms. What we’re seeing now, though, is the near dominance of a particular style of ribbon, easily identified by a fork at one or both ends. Some ribbons are also folded over twice, creating a faux effect of depth and reinforcing the diagonal lines in the fork. Whether the fork is related to the zigzag effect is unknown, but it seems that diagonal lines are the key to the ribbon’s survival, along with its ability to evoke memories of times past.

The danger of the ribbon lies mainly in its ability to exist independent of other symptoms (although it thrives in the company of vintage typography), meaning that it could date your design long after the epidemic ends, even if the symptom itself appears dormant. In many ways, this is reminiscent of the “special offers” badge of the Web 2.0 look.

Clockwise from top: Ryan O’Rourke; Cabedge; Jake Przespo

Textures

In the age of all things digital, it’s a conundrum that textures should dominate our illustrations and backgrounds, and yet they are indeed one of the most common symptoms on our list. Manifested by subtle grain, dirt and scratches, paper-esque surfaces and fold marks, they seem to embrace the spirit of the handmade. But ironically, they’re often the complete opposite: computer-generated effects or Photoshop brushes.

Possible explanations for the widespread use of textures include a yearning for tactile media (especially considering the emergence of touchscreens) or envy towards print designers, who have a much richer palette of materials and surfaces to play with.

Clockwise from top: Gerren Lamson; Zero; Amazee Labs.

Letterpress

The simple effect has gone from strength to strength and is now a household technique for sprucing up typography online. A relatively harmless symptom, letterpress might also have infected designers through other digital interfaces, such as operating systems and games, as early as the turn of the millennium, indicating a very long incubation period.

Scientists disagree over whether the incubation period is due to the infection needing a critical mass before emerging from dormancy or whether the infection simply needed the right conditions — CSS3 text shadows, to be specific — for symptoms to appear.

Clockwise from top: Billy Tamplin; Dribbble shot by Phillip Marriot; Remix.

19th-Century Illustration

After being released from copyright quarantine, this symptom, favoured by fashionable ladies and gentlemen, was nearly eliminated during the last epidemic due to its inability to cope well with gloss and shine. But in this new vintage-friendly environment, it has found its way back into our visual repertoire. For better or worse, the 19th-century illustration will most likely hang around for a while, emerging stronger from time to time like a flu virus.

Clockwise from top: Killian Muster; Dribbble shot by Trent Walton; Simon Collison.

Muted Tones

After a long period of vibrancy, the average online color scheme seems to have been somewhat desaturated across the board. We’re seeing widespread use of browns, earthy greens and mustards and a general leaning towards “impure” colors, although this is generally thought to be a minor symptom of the epidemic. Some scientists will even argue that muted tones are, in fact, not a symptom themselves but rather a side effect of other symptoms, in the way that sweating is a natural response to a fever.

Clockwise from top: Dribble shot by Dave Ruiz; Cognition; Web Standards Sherpa.

Justified or Centered Typography (JCT)

This symptom is nothing new; in fact, it was pretty much the standard for the first 500 years of typography, until Tschichold and the New Typography showed up and quarantined it on the grounds that it was old fashioned, difficult to read and inefficient. Although we’re not sure at this point, this link with history might be what has made JCT reappear so vigorously under the umbrella of vintage symptoms. We do know that overall reading habits among humans have not changed in recent years (most Westerners still read left to right), and there is no plausible argument that JCT improves legibility; so, whatever the cause of the outbreak, we know it’s rooted in subjective emotion rather than rational thought.

Clockwise from top: Grip Limited; Tommy; Visual Republic.

Circular Script Logotypes (SCL)

A circle is a basic shape and, in isolation, is no more a symptom of an epidemic than a triangle. However, if you repeat enough triangles in a line, you get a zigzag. Similarly, if you include a circle in your logotype, you end up with a circular logotype. And if that logotype happens to be set in a script font, you’ll get — that’s right! — a Circular Script Logotype (SCL). Not that SCL is lethal or anything, but it is relatively contagious and can be highly detrimental when enough hosts have been infected.

Clockwise from top: Trent Walton; Mercy; Dribbble shot by James Seymor-Lock.

Skeuomorphic Features

Skeuomorphic features — i.e. ornamentation or design features on an object that are copied from the object’s form in another medium — are rife, particularly in mobile applications, and this symptom is one of the defining indicators of the epidemic. Possibly a mutant cancerous strain of mildly skeuomorphic features such as stitches and letterpress, it can sometimes grow to overtake an entire interface, bloating it with redundant visual references to physical objects and materials. However, due to the labor involved in preparing the graphics and the heavy reliance on image resources, some researchers argue that we’re unlikely to see full-blown skeuomorphism dominate our desktop browsers any time soon.

In fact, most scientists regard the phenomenon as a curiosity and predict that some virtual metaphors for physical attributes will prove useful (as tabs have) and some won’t. Interestingly, while Apple has embraced and continues to pioneer the technique, Google seems to some degree to resist the urge to mimic physical reality in its interfaces. Perhaps it has developed a vaccine?

Clockwise from top: iBooks; Dribbble shot by skorky; Dribbble shot by Igor Shkarin.

How Did It Start?

Pinpointing the epicentre of a design epidemic (read: trend) is always hard, especially given the myriad of symptoms and the contagious nature of the Internet. Identifying Patient Zero is virtually impossible, and, to be pragmatic, doing so would serve no purpose. What we can say is that we’re most likely experiencing a reaction to the Web 2.0 aesthetic — a craving for textured surfaces and retro imagery, something tactile and natural-looking, as an antidote to the shiny impersonality of the past — and that this is both healthy and necessary for pushing the design industry forward. Whatever the sources of trends, they often start with applying smart design to solve a particular problem or, indeed, to counter another trend.

Let’s say that everyone used sans-serif fonts, strong contrasting colors and crisp white backgrounds as a rule. Imagine, in this environment, if a designer went against the grain by using Clarendon or some other warm serif to infuse some personality into their website (which happens to be selling “Grandma’s homemade jam”), and then complemented the personality of their font selection with earthy colors and some brown paper textures. The result would inevitably stand out from the crowd: beautiful, emotional, different.

Incidentally, this aesthetic inspires another designer who happens to be working on a website with a global audience, exposing the new approach to a whole generation of designers who, in turn, apply it at will (often without considering the context). A trend is born. And yet, paradoxically, the potency of the epidemic is under constant threat. The more people get infected, the less differentiated the symptoms appear; and once the infection reaches a critical mass, the symptoms begin to work against themselves. Infusing personality into your visuals is meaningless if everything looks the same.

Is It Dangerous?

In today’s open collaborative world, avoiding an epidemic of this scale is difficult; so, in a sense, everyone is affected to some degree. The symptoms listed above are not restricted to small-scale up-and-coming designers, but affect even the elite of the design community. This means that even though some symptoms are harmless — like a light fever or a runny nose from a flu infection — the viral onslaught of trendy features puts constant pressure on our immune system to protect our creativity, and staying vigilant is important to maintaining a healthy dose of original thought.

If you’re displaying a handful of symptoms, it’s really nothing to worry about — catching a cold that’s going around is not hard, but recovering from it is also easy. If, on the other hand, you display most or all of these symptoms, then there’s reason to be extra cautious in your next project. Using all of a trend’s identifiers as cornerstones of your work might make your portfolio look oh so contemporary, but in a way this practice is no different than passing off the work of your favorite designer, artist or musician as your own. Granted, symptoms with no identifiable origin are not protected by copyright, but that’s beside the point — you should be worried not about legal implications, but rather about the creative integrity of your output. The danger is not only that your work will be seen as a passing fad, a popular aesthetic that will look dated in a couple of years’ time, but that you will lose the respect of your peers when they catch on to you.

While nothing is original, we all need to respect the difference between inspiration and imitation. As Jean Luc Goddard said, “It’s not where you take things from — it’s where you take them to.” And if you don’t take them anywhere, what’s the point?

Worse perhaps than the loss of respect and integrity is the effect that epidemics have on clients and, in turn, the design community as a whole. The more designers are infected and the more symptoms they show of the same disease, the less your clients will believe that you’re capable of solving real business problems. Eventually they’ll exclude you from the early stages (where all the real design thinking takes place) and employ your services merely to skin their wireframes, in the process reducing the whole profession to an army of decorators.

What Can You Do About It?

Now that we’ve seen how detrimental trends can be, how does one avoid them? Is this even possible? Trends, by definition, are popular, and arguably nothing is wrong with tapping into that popularity to increase the exposure of your product. Convincing a client to accept a design that is off-trend can be difficult, and you run the risk of alienating the audience by going completely against the trend just for the sake of it. On the other hand, blindly following others is never a good idea, and you could severely stifle your creativity, integrity and client base by accepting what’s “in” as a given and copying it without purpose.

So, what’s the right thing to do? Trends are intrinsic to our society, whether in politics, culture, design or even religion, and as the consensus sways in one direction or another, so will your opinion (or “taste”) — to some degree, at least. Alas, avoiding trends altogether seems an impossible and pointless undertaking, but that doesn’t leave you powerless. In fact, you can do a host of things to combat the lemming syndrome.

Ask Why

Always question your design decisions (and make sure they are your own), and keep asking the magic question, Why am I doing this? Am I doing this simply because it looks cool or because it suits the message I’m trying to communicate? Why am I using this ribbon? Does the zigzag border add to or detract from the personality of the website? What does this leather texture have to do with the finance app I’m designing? The moment you stop asking questions, you fall prey to the epidemic.

Put Some Effort In

In his article “The Dying Art of Design” Francisco Inchauste asserts, among other things, that inspiration requires perspiration, and I couldn’t agree more. I was lucky enough to attend a college where no computers were allowed in the first year, which meant we had to use physical tools to express ourselves — tracing letters by hand, drawing our photography, stocking up on Pantone pens (remember those?), abusing the copier. Not only did our creativity grow, but we learned an important lesson: good design is not effortless, and the best results come from your own experimentation.

Try Something Different

Remember that being distinctive is, for the most part, a good thing. Most great artists in history, regardless of their field, stood out enough for the world to take notice. Who painted melting clocks before Dali? Who would have thought to build a huge wall on stage before Pink Floyd? While mimicking what’s popular might be comfortable and might secure short-term victories, long-term success requires a unique, memorable approach.

Diversify Your Inspiration

In order to remain creative, staying curious and looking for inspiration all around you is crucial, not just in the latest showcase of fashionable WordPress themes. Read a book, perform a scientific experiment, listen to music you haven’t heard before, walk through a new neighborhood, or experience a foreign culture. Widening your horizons beyond your favorite websites and finding more than one source of inspiration is critical to making original, lasting designs.

Focus on the Basics

Finally and most importantly, study the underlying principles of design in order to understand what is and isn’t defined by style. Grid systems, contrast, legibility, juxtaposing imagery, well-written copy — these are the key components of successful design, yet they are entirely independent of fads and styles.

At the end of the day, design is not so much about style as it is about communication, and all style, imagery and typography should be inspired by the content, functionality and personality of the product, not by what simply looks cool at the moment.

No matter how cool something looks, it too shall pass.

by martin

Ways to use the elements of navigation

Communication, Design, Inspiration, Usability, User Experience

When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”.

After a couple of seconds of scanning this article, and maybe reading parts of the introduction, you may have started to ask yourself whether the information that you’re consuming at the moment is actually relevant to you—the user. Unfortunately (and as certain as death and taxes), if users cannot find the information they are looking for, chances are they will abandon their track, never to return.

Being the compassionate human being that I am, I’ll try to explain to you what this article is about, so you can make your choice either to continue reading, or not. This article is not about where you should place the menu of your website or mobile application, or about the number of options a menu should contain. It is also not about how you visually enforce the perceived affordance of a user-interface element, and why that is so important.

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Words, Words, Words

The first thing I do when I start to sketch out the information architecture of a digital product based on the requirements at hand is to blatantly label stuff. This is nothing unique—I simply need to formulate a label (most of the time accompanied by a short description) of all the possible information entities I discover to be able to reveal taxonomy and relationships between them. You might have a similar approach, using tools like post-its, whiteboards or even some digital application created for this purpose. This can be the inception of small problems that will constantly grow over time if we do not assess them correctly and in a timely manner: the labels are yours, and yours alone.

“Locate store” is your label of something that enables the users to find physical stores in a mobile application. “Commodities” is your label of a view that enlists all the goods your client wants to retail on an e-commerce site. “Start” is your label on the landing-page of a website. From a linguistic point-of-view, you can analyze the meaning of sentences, words and letters in different context for hours on end.

You can look at the structure in terms of morphology, syntax and phonology, or why not look at the meaning in terms of semantics and pragmatics. Fortunately, in most cases you do not have reach as far as asking a linguistic researcher about your labeling—people in your target audience will do just fine.

“This might be a good start!”

User-Testing Labels

So what is the easiest way of doing a sanity check of the way you express the information space? A really cheap and well-proven technique is Card Sorting. By using card sorting, you can transform your early taxonomy prognoses into folksonomy. Card sorting not only helps you to create an informed information architecture, it also enables you to get an insight to what keywords users relate to different activities in your product.

Another test is a Word Association game. Take all potential labelings of your navigation design and try them out on users asking them to “say the first thing that comes to mind” (in regard of what they believe to be found beneath such a navigation option—call it Think-Aloud Protocol with a twist. For example, you could say “Products” and the participant might respond with “Price, description, information, stock”. Market researchers have used this technique for decades to ensure that the right message is conveyed by their target audience when promoting products.

Two important questions that you need to find to an answer to at this stage are:

Can the users relate the labels in the navigation design to their explicit goals of exploring your digital product?
Are the meaning of the words metaphorically and visually separated enough not to be confused with each other?

“Ok, so lets change ‘Commodities’ to ‘Our Products’ and ‘Locate store’ to ‘Our Stores’.”

Removing Redundancy and Lowering the Reaction Time

In his masterpiece “Don’t make me think”, Steve Krug writes, “When I look at most Web pages, I’m struck by the fact that most of the words I see are just taking up space, because no one is ever going to read them.” The more information we cram into our navigation, the harder it becomes for the users to quickly grasp the different options.

In 1935, the American psychologist John Ridley Stroop published “Studies of interference in serial verbal reactions” along with the now renowned “Stroop effect”. Stroop had found that given the task of naming the color a word was written in, took longer and was more prone to error if the word itself was the name of a different color (e.g. the word “Blue” written in the color red).

What we can learn from Stroops discovery is that we have a hard time not reading words—even though we are given a task explicitly instructing us not to. Have a quick look at the navigation in your design and ask yourself what can be removed without losing its meaning.

“It seems I really donʼt need the word ‘Our’ in front of ‘Products’ and ‘Stores’.”

What Did Product ‘A’ Do In Situation ‘B’?

If you still have not managed to convince your employer that early user testing will pay off in the long run, you should at least have the courtesy to look at the benchmark. In what way have others solved their navigation design? Just spending some time looking at what others have done will help you reach valuable conclusions. This can be really time efficient and a good way to increase product usability, since users will be able to use previously acquired knowledge by simply recognizing similar terminology used in other products.

“It does seem like all other websites in our business area have their contact information beneath an option labeled ‘Contact’. I better change ‘Reach us’.”

Symbols, Pictograms & Icons

Symbols, pictograms and icons in digital user interfaces are long gone from luxury to necessity. They contribute to signature, personality, recognition, and abstraction in our visual language. Furthermore, studies have given evidence suggesting that user interfaces have less favorable perceptions of usability and usefulness when only relying on textual expressions.

Why did I willfully write “Symbols, pictograms and icons” and not just “Icons” as we all love to call them? Before I start to use only the word “Icon”, I want to make sure we are all on board as to the differences (without digging too deep into the perilous depths of semiotic science).

What Is What

A symbol is typically defined as an abstract representation that requires conventional knowledge amongst the users for them to fully understand their meaning. People in some cultures have learnt that the meaning of an octagon shaped sign in a tone of red communicates “Stop.” So a symbol earns meaning over time through conventional use.

A pictogram on the other hand is usually defined as simplified pictorial representation. Pictograms—or pictographs—are, as far as possible, self-explanatory and most often do not require any deep previous learnings to make any sense. You often see pictograms (and ideograms) on signposts and in environmental design since they are least contingent to produce cultural misunderstandings. For example, a sign with an arrow indicating a direction.

The definition of the word “Icon” can be a bit vague depending on the context of use, but I like to say that an icon can be a sign, symbol, picture or image that stands for or represents an object in its resemblance as an analogy for it.

Whether you should use a symbol, a pictogram, an icon or a combination of all three to help you communicate information, all depends on the situation you find yourself in. Disregarding what we use, there is some common knowledge and analysis we can use to make sure that the receivers (i.e. our users) actually understand what we are trying to convey with our design.

User-testing Icons

There is an abundance of ways to perform user testing and peer reviews of iconography. My two absolute favorites are what I have come to call “tag-that-icon” and “connect-the-dots” mainly because they are quick to perform and they give great insights into users’ spontaneous opinions (plus, they are actually quite fun to prepare and execute).

You can perform tag-that-icon in one of two ways:

Method 1:
Give several icon suggestions to the participants and ask them to tag them with whatever comes to mind within three minutes.
Method 2:
Randomly show the participants one icon at a time during a day and ask them to come up with tags for each icon during 20-30 seconds.

The latter has most probably proven itself to be really good and better for testing different metaphors for one specific icon when the number of participants are low.

When you have a set of icons and labels that are closing in on finalization, you can then do connect-the-dots testing. All you need to for the test are printouts with one section of all your suggested icons (in a random order) and one section with all your labels (in a different random order). Then, give the printouts to the participants and ask them to draw a line between an icon and the label they think it is coupled with.

“At least I can be certain that all my suggested icons works for the ‘Directions’ menu option.”

Removing Redundancy Re-Visited

Just as with labels, avoiding redundant information in the icons is just as important. This is of course quite a bold statement from a designer, but there are many cases out there in the wild that simply add so many details to an icon that it starts to disrupt the users’ ability to interpret and differentiate them. This becomes most evident when you have common shapes in the icons that affects their intergroup saliency (i.e. the quality by which an object stands out relative to its neighbors).

“Do I really need the circles? If I look at them briefly or squint, they all look the same—I better change that!”

Picture/Word Interference

Given a set of lined drawings of simple objects coupled with distractor words, humans show a clear effect of increased response time in naming the drawn object. This is also known as Picture Word Interference (PWI). What PWI can be interpreted to mean is that when an icon is paired with a label in a way that the user does not connect together, it becomes much harder for them to work out the intended meaning.

For humans, a label with “Banana” coupled with a cucumber icon would be unclear as to what it is. What makes matters even worse for users in a navigation context is; “What should I really follow—your icons or your labels?” Avoid creating distracting stimulus through semantic interference between your icons and labels.

Looking at contextual consistency and standards in regards to iconography can really help you. There are some really great resources out there for finding inspiration, but you can also use them as a source of knowledge in finding trends and standards in iconography. If 9 out of 10 result with the term “Favorites” on Iconfinder.net that contain a star or a heart-shaped icon, then that may probably be a good starting point for your “Favorites” icon as well.

“I have no idea what I was thinking. I think I have to throw away all of these, restart all over again and do some more user testing.”

Six Navigation Design Guidelines

After reading all of the above, you should have a good foundation to take your navigation design to the next level and place it in its intended environment along with the rest of the design and perform controlled user testing and see how they interplay. Here are 6 navigation design guidelines for you to consider as you embark the journey of designing the navigation of your upcoming project:

Clarity:
Make sure that your navigation has a linguistic and semantic clarity that communicates to your users in an direct, efficient and adequate way.
Simplicity:
Avoid using technical labels and icons that no one recognizes. Speak the language of the user rather than using complex terms and form factors unfamiliar to your users.
Saliency:
Avoid having redundant and repetitive terms and shapes in your labels and icons that affects their intergroup saliency. This can easily influence your users ability to differentiate and interpret them as a whole.
Context:
Look at the consistency and standards for labels and iconography used in the context that you are designing for. It is more efficient for your users to recognize rather than needing to interpret information that is unfamiliar to them.
Correlation:
Avoid creating distracting stimulus through semantic interference between labels and icons. Reduce uncertainty and make sure that they clearly communicates one message as they are put together.
Tonality:
Ensure that the tonality of the message is still consistent at the end of the design work. Colors, typography and form heavily affect the way your audience conceive and interprets the information.

Of course, not all types of navigation design contain both labels and icons. Some just use icons and some just use labels. you have roughly three cues for guiding your users: One factual (the label), one helpful (the icon) and then—the sometimes subliminal—character (color, typography and form). They do not always need to co-exist since different context requires different solutions. But your message can easily become blurred the fewer of them you use.

So ask yourself this: Can I afford to be vague in the way I communicate and help my users to reach their goal? (Hint: No!)

by martin

How to design engaging and enjoyable reading experiences

Communication, Design, Journalism, User Experience

Finally, some good news from the media industry: digital subscriptions are growing. We’re seeing positive reports from newspapers such as the New York Times and magazine publishers such as Conde Nast: announcements about increases in their digital content sales and paywall members.

When you have fantastic and original content, ensuring the best possible reading experience is critical to keeping and building your audience. The following practices will help you design your content in a way that improves the experience for readers.

Navigation Methods

We often think that having many methods for finding things is easier for users. Unfortunately, the result can be mess of unhelpful and unrelated links, menus, widgets and ads. Many news websites place lists of “most-read articles” or “articles that your Facebook friends are reading” on their websites because they can. Analytics will tell you whether these methods are useful for your particular website. If no one is clicking on them, why are they taking up valuable space?

One way to quickly see the effect of slimmed-down navigation is to use Ochs, a Chrome browser extension specifically for the New York Times, written by Michael Donohoe. Open the New York Times in a different browser, then install Ochs and look at the website in Chrome. Ochs provides the massive benefit of a cleaner layout and clutter-free navigation. Things like reading tools and extra modules are removed from articles. The increased white space and removal of the New York Times’ dense navigation bars are a breath of fresh air.

The Ochs extension cleans up the UI of the New York Times.

There is a difference between having a reasonable way to navigate a website versus having one-click access to all of the website’s content. How do your users typically find what they want? Do they use the navigation links or jump straight to the search box?

Changing the navigation methods may be as straightforward as removing redundant menu bars or as involved as conducting user research to see which methods people use and don’t use.

Another thing to consider when looking at navigation usage patterns is that people rarely click on things that appear hard to read or cluttered. If that’s the case with your website, perhaps it’s time to look at your typography and spacing.

Experimenting With Type And Spacing

Not every typeface was designed to be read on a digital screen. Typefaces can have a huge effect on both the appeal of content and its readability. The typefaces for headlines may be beautiful and attention-grabbing, but if the ones for the copy are difficult to read, you could be turning away readers.

Not everyone will read your content exactly as it was designed. Some people set their own default font size, while others change their screen’s resolution. Still others use assistive technology, such as screen readers, to peruse content. During the course of a day, I read blogs on my iPad, pan and zoom through news on my mobile phone, edit documents on
an enormous desktop monitor and browse the Web from my television screen (at low resolution). For this same reason, tools such as Instapaper, Readability and Evernote are growing massively. The ability to control the format of what you read — and where you read it — is becoming increasingly useful.

The Boston Globe’s recent overhaul of its website received a lot of well-deserved praise, and two of the nicest things about it are the use of white space and the typography. The fonts chosen are central to the Boston Globe’s Web style, and they feel relevant to its almost 240-year-old print identity. Compare the new design to the original one, and the contrast is staggering. The Boston Globe’s new look is a great case study for news websites and readability in general. Definitely have a look if you haven’t yet.

The Boston Globe’s new interface has carefully chosen fonts plus more white space.

While some fonts were created specifically for digital reading, there is no magical formula for selecting type. To find out what works, do some testing. User testing, A/B testing and even testing within your own team can yield insights. Have everyone on your team read through a handful of long-form content on various devices. If people can’t make it through more than a few paragraphs, try different fonts, sizes or spacing. Or maybe rethink some of those distracting ads.

Respectful Advertising

How often do you see people rush to turn the page of a magazine just to skip an ad? Probably rarely. But people do it on websites all the time, panicking to find the small “Close” icon on a pop-up ad, or flummoxed as to which browser tab is playing an audio ad. I hope the people who create these creepy auto-play ads will one day experience the terror of being alone at the office late at night as a rogue audio clip begins speaking to them.

As an avid reader of both print and digital magazines, I’m overwhelmed by the stark difference in advertisements between them. Print magazine ads regularly hold my interest and engage me — I do not tear out pages of magazines, nor do I cover the ads. Magazines select advertisements that are relevant to their audience and that are attractive and well designed. Advertisers usually do not spend big money on print ads only to create unattractive content for them.

For some reason, all of this goes out the window when it comes to online ads. Companies are told that no one notices ads unless they grab attention, and so they create loud, garish ads — ads that do nothing for the product and that most likely diminish the viewer’s interest. It doesn’t have to be this way.

The advertising network The Deck prides itself on tasteful, targeted ads for an influential audience of creative professionals. Its ads are uniform in size and amount of text. The Deck does not pay for or run ads unless it has used the products themselves, so it vouches for all of its advertisers. The emphasis on small graphics forces advertisers to be creative, and advertisers get a return of 3% of all page views in The Deck’s current network.

The Deck’s ads are tasteful and subtle.

Both advertisers and audiences have something to gain when ads are relevant and attractive. The growing shift towards responsive and respectful advertising has been written about at length by people such as Mark Boulton and Roger Black (see the related links at the bottom of this article). It’s worth reading their takes on these new Web ads, and you might even want to have an internal discussion at your company about how the advertising on your website could be made more valuable for everyone.

Moreover, if the ads on your website are respectful and relevant, people might check out the advertisers’ products, increasing both visited metrics and click-through rates, thus allowing you to charge more for advertising. So, do dive into your website’s analytics.

Check Your Analytics

We want to do the right thing: build websites that are responsive and that adapt to devices. But we have to be reasonable, too. What is achievable given your budget and time frame? Analytics are one of the best ways to hone in on what to prioritize. Even a simple free tool like Google Analytics can yield important insight into who is viewing your website and how. Google Analytics can also track readers’ paths through the website, showing you what content and sections are being avoided or ignored.

The Financial Times keeps a close eye on its visitor analytics. It has over 1 million registered users. In November, it announced that its Web app (which launched in June 2011) was replacing its native mobile app. The Financial Times also released data indicating the types of devices that are being used to access its website and the times of day. And it recently launched a native Android app — perhaps because the number of people accessing its website on Android devices is growing.

The Financial Times ditched the App Store for its own Web apps.

If you notice that most of your traffic is coming from people on tablets, you can optimize for that experience first. Management at your company may be pushing hard for a native app, but you should determine a couple of things before writing the design specifications for a native app:

Does the audience for such an app exist, or is one growing?
Is that audience not getting a good enough experience from your website.

If your current audience barely has any iOS users but has a significant chunk of Android users, why not start there instead? Additionally, what are those Android users doing on your website? Are they sticking around and enjoying your mobile experience, or do they bounce quickly? The latter could indicate that the experience on your website isn’t ideal.

But if you want to know for sure, ask them.

Has Anyone Asked Your Users?

It saddens me how often content and experience decisions are made without consulting the people who those decisions will affect. Facebook users are familiar with the pandemonium that occurs every time a new interface goes live — people often struggle to find what was once familiar and obvious.

The Sunday Times’ iPad app was updated in August based on user feedback. Users requested to be able to download all sections with the click of a button. The Sunday Times added the ability to download all or individual sections, improved the functionality for deleting sections and editions, and bundled sections more usefully. These changes were the result of direct comments and feedback from users.

The Sunday Times listened to users and changed its downloading options.

Short in-person interviews or widespread surveys are fast and easy ways to get feedback directly from readers about what they like and don’t like about your content. Find out about their reading habits. Learn when and where they read articles — the answers may surprise you. Perhaps the section you were considering cutting has a growing audience. Maybe a feature that gets very good engagement in print doesn’t translate so well online and needs to be rethought.

And if users tell you they’re frustrated by trying to read anything on your website, consider offering them a quiet room.

“A Quiet Room”

Walking from the cacophony of New York’s Times Square into a tiny, quiet office can bring a feeling of relief. All of a sudden, no one is in your face trying to get you to buy something or take a tour or give them money. You can just relax and focus.

Finding a website or app that lets you read and enjoy its content is just like this. The experience is not stressful, and you can take your time and enjoy the writing, which seems to have been created just for you. As a designer, you can create this “quiet room” for readers, a place where they can fully absorb the content without having to close pop-ups or be confronted by an animation that screams that they are the 1,238,901st visitor that day. A quiet room is why applications like Instapaper and Readability get effusive praise.

A List Apart does a good job of avoiding clutter and letting the reader focus. Articles have minimal sidebar navigation and only a couple of small, tasteful advertisements. The majority of the page has a simple format: easy-to-read text (peppered with images), a conclusion that points you to related material, and a chance to discuss the article.

A List Apart creates room for readers to enjoy the content.

When Doesn’t This Work?

These approaches will not work for every group of content or every website. Some content is meant to be skimmed for quick comprehension. Other websites contain no narrative content. And many websites rely too much on advertising revenue to be able to change their ad strategy.

If your content changes rapidly, is short and to the point, contains little analysis or has any combination of these, then it’s likely not a good fit for this approach. But if you have done your research and you have content that is well written and that your audience likes to get lost in, then perhaps some of the ideas mentioned above are worth a try.

Regardless of the length and type of your content, here’s a useful exercise: go through each of the issues covered above and think of one thing you could change to make your content more readable. Some of the revisions might be long term and big picture, but you might be surprised by the easy opportunities to make a big impact. Give your readers a reason to enjoy your website as it is, instead of a reason to reformat the content and turn the page as fast as possible.

Resources

“Business Class: Freemium for News?,” Oliver Reichenstein
“‘What Font Should I Use?’: Five Principles for Choosing and Using Typefaces,” Dan Mayer, Smashing Magazine
“Responsive Advertising,” Mark Boulton
“The Holy Grail,” Part 1 and Part 2, Roger Black
“So, You Need a Typeface?” (flowchart), Julian Hansen, Behance Network
Interview with the BostonGlobe.com redesign team, Fonts In Use
“The Pummeling Pages,” Brent Simmons
“Please Let This Not Be the Future of Reading on the Web,” Rian van der Merwe, Elezea

by martin

Ideas how to create fluid content and design

Creativity, Design, Inspiration

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.

by martin