Design Archives

Tag Archive for: Design

Tune your site instead of redesigning it all the time

Companies often flush away millions upon millions on worthless, pointless, “fix it once and for all” website redesigns. All types of organizations are guilty: large government agencies, Fortune 500s, not-for-profits and (especially) institutions of higher education.

Worst of all, these offending organizations are prone to repeating the redesign process every few years like spendthrift amnesiacs. Remember what Einstein said about insanity? (It’s this, if you don’t know.) It’s as if they enjoy the sensation of failing spectacularly, publicly and expensively. Sadly, redesigns rarely solve actual problems faced by end users.

I’m frustrated because it really doesn’t have to be this way. Let’s look at why redesigns happen, and some straightforward and inexpensive ways we might avoid them.

The Diagnostic Void

Your users complain about your website’s confounding navigation, stale content, poor usability and other user experience failures. You bring up their gripes with the website’s owners. They listen and decide to take action. Their hearts are in the right place. But the wheels quickly come off.

Most website owners don’t know how to diagnose the problems of a large complex website. It’s just not something they were ever taught to do. So, they’re put in the unfortunate, uncomfortable position of operating like country doctors who’ve suddenly been tasked to save their patients from a virulent new pandemic. It is their responsibility, but they’re simply unprepared.

Sadly, many website owners fill this diagnostic void — or, more typically, allow it to be filled — with whatever solution sounds best. Naturally, many less-than-ethical vendors are glad to dress up their offerings as solutions to anyone with a problem — and a budget. The tools themselves (search engines, CMS’, social apps) are wonderful, but they’re still just tools — very expensive ones, at that — and not solutions to the very specific problems that an organization faces. Without proper diagnostics to guide the configuration of tools, any resulting improvements to the user experience will be almost accidental.

Sometimes design agencies are brought in to fill the diagnostic void. And while not all agencies are evil, a great many follow a business model that depends on getting their teams to bill as many hours as they can and as soon as possible. Diagnostics can slow the work down (which is why clients rarely include a diagnostic phase in their RFPs). So, many agencies move to make a quick, tangible impression (and make their clients happy) by delivering redesigns that are mostly cosmetic.

A pretty face can last only a few years, but by then the agency is long gone. Invariably, the new owner wishes to make their mark by freshening or updating the website’s look. And another agency will be more than happy to oblige. Repeat ad nauseam, and then some.

Oh, and sometimes these redesigns can be pricey. Like $18 million pricey.

See why I’m so grouchy?

Forget the Long Tail: The Short Head Is Where It’s At

Whether you’re a designer, researcher or website owner, I’ve got some good news for you: diagnostics aren’t necessarily difficult or expensive. Better yet, you’ll often find that addressing the problems you’ve diagnosed isn’t that hard.

And the best news? Small simple fixes can accomplish far more than expensive redesigns. The reason? People just care about some stuff more than they care about other stuff. A lot more. Check this out and you’ll see:

This hockey-stick-shaped curve is called a Zipf curve. (It comes from linguistics: Zipf was a linguist who liked to count words… but don’t worry about that.) Here it is in dragon form, displaying the frequency of search queries on a website. The most frequently searched queries (starting on the left) are very, very frequent. They make up the “short head.” As you move to the right (to the esoteric one-off queries in the “long tail”), query frequency drops off. A lot. And it’s a really long tail.

This is absolutely the most important thing in the universe. So, to make sure it’s absolutely clear, let’s make the same point using text:

Query’s rank	Cumulative %	Query’s frequency	Query
1	1.40%	7,218	campus map
14	10.53%	2,464	housing
42	20.18%	1,351	web enroll
98	30.01%	650	computer center
221	40.05%	295	msu union
500	50.02%	124	hotels
7,877	80.00%	7	department of surgery

In this case, tens of thousands of unique queries are being searched for on this university website, but the first one accounts for 1.4% of all search traffic. That’s massive, considering that it’s just one query out of tens of thousands. How many short-head queries would it take to get to 10% of all search traffic? Only 14 — out of tens of thousands. The 42 most frequent queries cover over 20% of the website’s entire search traffic. About a hundred gets us to 30%. And so on.

It’s Zipf’s World; We Just Live in It

This is very good news.

Want to improve your website’s search performance? Don’t rip out the search engine and buy a new one! Start by testing and improving the performance of the 100 most frequent queries. Or, if you don’t have the time, just the top 50. Or 10. Or 1 — test out “campus map” by actually searching for it. Does something useful and relevant come up? No? Why not? Is the content missing or mistitled or mistagged or jargony or broken? Is there some other problem? That, folks, is diagnostics. And when you do that with your website’s short head, your diagnostic efforts will go a very long way.

The news gets better: Zipf is a rule. The search queries for all websites follow a Zipf distribution.

And the news gets even jump-up-and-down-and-scream-your-head-off better: Zipf is true not only for your website’s search queries. Your content works the same way! A small subset of your website’s content does the heavy lifting. Much of the rest has little or no practical value at all. (In fact, I’ve heard a rumor that 90% of Microsoft.com’s content has never, ever been accessed. Not once. But it’s a just a rumor. And you didn’t hear it here.) Bottom line: don’t redesign all of your content — focus on the stuff that people actually need.

You’ll also see a short head when it comes to your website’s features. People need just a few of them; the rest are gravy.

And there’s more. Of all the audience types that your website serves, one or two matter far more than the others. What tasks do those audience types wish to accomplish on your website? A few are short-head tasks; the rest just aren’t that important.

As you can see, the Zipf curve is everywhere. And fortunately, the phenomenon is helpful: you can use it to prioritize your efforts to tweak and tune your website’s content, functionality, searchability, navigation and overall performance.

Your Website Is Not A Democracy

When you examine the short head — of your documents, your users’ tasks, their search behavior and so forth — you’ll know where to find the most important problems to solve. In effect, you can stop boiling the ocean…

… and start prioritizing your efforts to diagnose and truly solve your website’s problems.

Now, let’s put these short-head ideas together. Below is a report card for an academic website that starts with the short head of its audience:

In other words, of all the audience types this university website has, the three most important are people who might pay money to the university (applicants,) people who are paying money now (students) and people who will hopefully pay money for the rest of their lives (alumni). How do we know they’re the most important audiences? We could go by user research; for example, the analytics might suggest that these audiences generate more traffic than anyone else. Or perhaps the university’s stakeholders believe that these are the most important ones in their influence and revenue. Or some combination of both. Whatever the case, these three audiences likely swamp all other segments in importance.

Then, we would want to know the short-head tasks and information needs of each audience type. We might interview stakeholders to see what they think (column 2). And we might perform research — user interviews and search analytics, for example — to find out what users say is most important to them (column 3).

Of course, as the good folks at xkcd demonstrate, stakeholders and users don’t always see things the same way:

That’s why talking to both stakeholders and users is important. And once you’ve figured out the short head for each, you’ll need to earn your salary and, through some careful negotiation, combine your takes on each audience type’s needs. That’s what we’ve done in column 4.

Finally, in column 5, we’ve tested each task or need and evaluated how well it works. (Because it’s a university-related example, letter grades seemed appropriate.) You can do this evaluation in an expensive, statistically significant way; but really, enough research is out there to suggest that you don’t need to spend a lot of time and money on such testing. More importantly, these needs and tasks are often fairly narrow and, therefore, easy to test.

So, after testing, we can see what’s not going well. Finding information on “mentoring” is hard for applicants. And current students have a devil of a time when they “look up grades.”

Now we’re done diagnosing the problems and can begin making fixes. We can change the title of the “Paired Guidance Program” page to “Mentoring.” We can create a better landing page for the transcript application. The hard part, diagnostics, is out of the way, and we can now fix and tune our website’s performance as much as our resources allow.

From Project To Process To Payoff

These fixes are typically and wonderfully small and concrete, but because they live in the short head, they make a huge and lovely impact on the user experience — at a fraction of the cost of a typical redesign.

The tuning process itself is quite simple. It’s what we used to arrive at the report card below:

If you repeat this simple process on a regular basis — say, every month or quarter — then you can head off the entropy that causes fresh designs and fresher content to go rotten. Thus, the redesign that your organization has scheduled for two years from now can officially be canceled.

Your website’s owners ought to be happy about all this. And you should be, too: rather than tackling the project of getting your website “right” — which is impossible — you can now focus on tweaking and tuning it from here on out. So, forget redesigns, and start owning and benefiting from a process of continual improvement.

Special Thanks – Illustrations

Eva-Lotta is a UX Designer and Illustrator based in London, UK where she currently works as an interaction designer at Google. Besides her daytime mission of making the web a more understandable, usable and delightful place, she regularly takes sketchnotes at all sorts of talks and conferences and recently self-published her second book. Eva-Lotta also teaches sketching workshops and is interested in (something she calls) visual improvisation. Exploring the parallels between sketching and improvisation, she experiments with the principles from her theater improvisation practice to inspire visual work.

by martin

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

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

7 points how to build responsive website

Design, Mobile, Usability, User Experience

While it may be exciting to work at a quickly expanding ecommerce company such as Lot18, our fervour was tempered a few months ago when the development team was faced with a choice: keep building on top of the site’s engine, which was never intended to be used for more than a few months after launch; or build an entire new platform from the ground up, one that could last us for years. We opted for the latter, cramming a year’s worth of work into three and a half months.

We also knew our visitors were accessing Lot18 in increasingly diverse ways, and that this trend would continue. Rather than anticipate our users’ preferences, we developed a responsive site that adapts and feels natural on a wide range of web-connected devices. Responsive web design was central to our development strategy, but it forced us to think differently than we ever had in development work.

Here are seven things we learned in building a responsive site in a short amount of time.

1. Really, how many sites can you build?

The good thing about being a developer is there’s always another device, browser or operating system to adapt to – no shortage of work. But building one version or app after another isn’t a sustainable strategy at a small company. Developing, testing and deploying a single code base streamlines almost every step in the process. When it’s crunch time and your eyes are tired, you can focus on one critical path – without distraction.

2. The business comes first

The holiday shopping season is the busiest for ecommerce – and it’s completely mental for sites specialising in food and wine, as Lot18 does. With thousands of shoppers planning parties and buying gifts, we couldn’t assume every purchaser would be sitting at a desk or, alternatively, would take the time to search for an app, download it and use it.

It was an equally unsafe assumption that any particular user would employ the same type of device for each and every visit to the site, or that any of a user’s friends invited to join Lot18 would have similar devices. Taking a responsive approach prioritises the business and reorients our thinking as a development team. We’re closer to customer experience and not solely focused on our own schedules and timetables.

3. Stop chasing platforms and build features

Freed up from targeting platforms, we could dedicate more time to building features for the new site. For example, as we overhauled our checkout system, we could focus on one UI/UX strategy without worrying about device-specific builds. Moving forward, the development team will be more feature-focused and efficient.

4. Everyone is QA

At a small company, everyone is busy and may not have time to walk through the new version of the site to help find bugs or unintended complications. But we encountered a nice consequence with our new responsive design: everyone could test the site on their own time.

If someone wanted to test or just check out the site in progress, they could use their phones during their commutes, or their tablets – or their TVs at home. Even better, this type of testing is likely closer to how our members use the site.

5. Be consistent across native apps and the mobile web

Lot18 will release a native iPhone app soon. Like most native apps, it is designed for iPhone and feels natural.

However, even the most dedicated app users will run into the mobile site via email, Twitter, Facebook, etc. The responsive site provides a consistency across the native and mobile web experiences, and reinforces the overall brand experience.

6. Explore new interactions

Leading up to the launch, we observed a new behaviour in people previewing the site. Once they figured out that the site responded to them, they started playing with it. Responsiveness adds dimension to the experience and provides a fresh look as users move from one device to another – or one device mode to another.

What I saw was an emotional reaction that translated as, “This is fun.” This is always a good thing.

7. You’ll get reliable analytics

Finally, when comparing stats, it’s nice to know that users are hitting the same code and interacting with the same content. We’ve also gained new perspectives on how users behave, and have already seen positive changes reflected in our metrics.

The best thing about our recent launch is that, for us, there’s no longer a ‘real’ Lot18.com. Instead there’s a Lot18 experience, with any visitor – regardless of the device used – capturing a particular facet. As a result, our development group is closer to the business and can act almost like an extension of the customer-service department, providing a better online-shopping experience – which can’t be bad in the highly competitive ecommerce space.

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

How to promote your website content

Blogging, Communication, Design, Development, Digital marketing, Ideas, Social media

OK, you’ve got a great new site and planned out a fail-proof content strategy. You’re going to be posting all sorts of interesting and insightful blog posts and newsletters, and everyone is going to come to read it. Then they are going to hire you to do work. Right? If you build it they will come. Isn’t that the way it works?

Not really…

While we are big proponents of a strong content strategy, simply putting the content out there is not going to drive traffic from far and near to come visit your site. You have to spend the extra time promoting your content as well. Producing the content is the first big step, and it is definitely going to send you in the right direction, but promoting that great content is just as important.

Newsletter Promotion

One great piece of content that is actually a promotion tool as well is an email newsletter. Just to be clear, when I say “email newsletter,” I am referring to long-form content that is well-writen and is distributed via an attractive email that includes a graphic, an abstract of the article, and a link back to the site.

The email should alert subscribers and drive them to your site to read the content, not deliver it all straight to their inbox. If you just deliver the full article, then it just becomes content, not a promotion tool. However, by providing an abstract of the article, then drawing the readers back to your site, you not only are promoting the newsletter content that lives on your site, but it also makes the reader aware of the other content you have to offer.

I would also recommend watching the webinar by Dan Zarrella called “The Science of Email Marketing,” to learn more about the best times to send your newsletters, the best words to use in subject lines, as well as some real data about frequency and the importance of subscriber freshness.

Blog Digest

While on the topic of email marketing, you should also consider putting together a digest email that promotes your short-form content (think: blog posts) by sending out a weekly or bi-monthly (or whatever frequency is appropriate) email that includes a list of recent content with links back to the site.

A digest can serve as a reminder to the user of all the content you are continually publishing. A relative few people utilize RSS readers, as most would prefer to receive the updates right in their inbox, so we suggest giving them this option.

Promotion through social media

I hate to be one to jump on the bandwagon, but the fact of the matter is that social media is one of the best ways to promote your content, if you do it well. You must determine what social media platforms are appropriate for your target audience. Is Facebook the way to go, or are most of your users active in LinkedIn? Or maybe they’re early adaptors and you want to promote on the new Google+.

Odds are, it is a mixture of social media avenues, and a mixture of active and passive promotion. Active promotion refers to you actively posting your website content to your social media pages. Passive refers to enabling sharing options on your site to leverage the social networks of your readers.

What we do to promote our content through social media is not going to work for everyone, and what others do probably won’t work for us. But, I will use Newfangled as an example.

Whenever we send a newsletter or post a new blog post, we promote it by first tweeting about it. Usually Chris Butler will tweet it once it is published, and it will usually get a couple of re-tweets from others in the office.

The other social media avenue we utilize is LinkedIn. We started a group on LinkedIn which is fairly active, and we promote discussion in this group. Because of this small, engaged audience, it makes LinkedIn a good place for us to promote our content as well. Joining active, tightly-focused LinedIn groups can be very beneficial because it enables you to reach a very targeted audience. Some other niche groups I would recommend are the PJA Advertising: This Week in Digital Media group, or the HOW Mind Your Own Business group, just to name a couple.

Use your website

Sometimes the best promotion tool is your own website. A website that is focused on content strategy should have various avenues to promote the all-important content.

For example, we have the ability to publicize newsletters and blog posts in specified areas of our homepage so that they are seen as soon as a user hits the site.

Another way we publicize within the site is our related content sidebar widget. If you look over to the right on this page, you’ll see a sidebar widget at the very top that suggests other related articles that you may enjoy. This is a more passive promotion, but we have noticed that it can be quite affective.

Make it personal

Occasionally taking the time to send a uniquely crafted, regular old email to someone who you think would enjoy reading and benefit from the content can really stand out. Promotion doesn’t always have to be to the masses – it’s OK to promote content at an individual level.

These are just a few examples of how to promote your content. Clearly, there are other ways to promote your content and your brand, but remember, writing the content is only half the work. The other half is getting it into the hands of people who want to read it.

by martin

Creating a working Website with a team can be a challenge

Business, Design, Development, Strategy

Web design is a multidisciplinary craft. So why do so many of us try and do everything ourselves?

Maybe it’s because we can. Our nature as web designers tells us to build things. We have the capability to handle just about every role in a web design project. If we don’t already have the expertise in a certain skill, then at least we have the self-motivation to teach ourselves and learn on the job. That’s how must of us got to where we are. But is doing it all the right approach?

When you look at the bigger picture, maybe it’s not. For me, my over-arching goals are to build an impressive portfolio of work, land bigger and better clients, and grow my web design business. It’s simply not feasible to achieve these goals by doing everything myself. The only way is to build a web design all-star team to help me do it.

So here are some tips for building a well-rounded team for producing amazing web design work. These are things I’ve come to learn over the years as I transitioned from being a freelancer to owner of a distributed web design agency.

The “one thing” concept

What separates the high-end web design shop from the do-it-all freelancer? It’s the well-rounded quality of every piece in their portfolio. From wireframes to PSDs to code, copywriting, and strategy: Every role is executed by a specialist in that particular craft.

The key is to assign the right person to the right role. So how do you get this right?

I call it the “one thing” concept. The idea is to figure out what your subcontractor’s core competency is, that one skill that they’re a rockstar at. This can be harder than it seems. Most web designers, particularly those who primarily work alone, tend to claim they’re a “jack of all trades”. It’s your job to see past this and reveal that one thing that they’re most experienced with.

One of the first questions I ask potential subcontractors is “Do you consider yourself primarily a designer or a developer?”. Many of us can do both, but 99% of the time, we’re better at one than the other. I want to find out which one it is, and hire them to handle only that part of the project.

Determine your own role first

Now hold on a minute. Before you can start outsourcing, you must first determine which role you will personally fill yourself. Start by figuring out your one thing that you’re best at. Maybe it’s front-end HTML/CSS coding.

Perhaps you’re a talented visual designer, capable of producing beautiful PSDs. Or maybe your strength is in the pre-design planning stage, producing wireframes and information architecture diagrams that provide a good road map for production. It should be difficult to choose just one thing.

Keep in mind that since this will become a team effort, your role will likely include project management duties: Finding and hiring teammates, communicating project specs, client communication, etc. Be sure to budget your time accordingly!

Build your network early and often

Many freelancers and web shops are going with the distributed agency model these days. That is, your teammates work remotely from their own offices across the street or across the globe. If this is your direction, then it’s never too early to start building your network of remote workers.

Here are some ways to do that:

Build relationships with designers and developers on Twitter.
Seek out and follow creators of amazing work on Dribbble.
Follow and comment with those you find interesting on Forrst.
Post targeted ads on job boards and filter the responses to separate the quality from the noise.
Meet designers and developers at local meetups and conferences.
See something great on the web and get in touch with the creator.

The last one is my favorite. There are so many amazing things being created on the web every day. In the space in which my company operates, which is WordPress web design, I often come across a really cool plugin, an interesting theme or a well-written article. I’ll immediately reach out to the author to see if they’d be up for brief Skype chat to talk informally about their work and strike up a new relationship.

Later on, when a new project comes in and you’re looking for talent, it’s better to start knocking on the doors of those you already know than to scramble and start looking for someone new at the last minute. Build and nurture your network today and leverage it for your projects tomorrow.

Identifying talent & fit

How do you identify who is worth considering for a spot in your network?

Before you reach out to people, you have to know what you’re looking for. Here are things I value before I speak to someone:

A great portfolio, but particularly an informative portfolio. The work should look great, but I want to know exactly what the person’s role was in the project. Case studies are great for this.
A well written blog. This shows they’re passionate about their craft, enough to take the extra (often unpaid) time to write about it. This is also a good indication of their written communication skills.
Their industry presence. High profile work, published articles, speaking engagements, books. These are all good signs of a talented and dedicated professional. But be careful, these credentials can sometimes be deceptive.

Next, we need to determine if we’re a good fit. You can’t get a full read on these things until you actually work together, but there are some things you can look for in your first few conversations:

Professionalism and reliability. Can they reliably schedule and show up for your call/meeting? You’d be surprised how many people fail at this simple act of professionalism.
Collaborative fit. Take note of the types of questions they ask (shows they really want to understand and collaborate). See if their “one thing” compliments yours and the others in your network/team.
Logistics. Ask about their working hours and availability for meetings and progress updates. I’m generally open to working with anybody, but I prefer a timezone that is within 3 hours from me (North America). Just makes collaboration easier.

Great people do great things… together

When it’s time to take your web design business to the next level, it’s time to start teaming up with great people.

That’s the key to thinking big and doing amazing things in this collaborative industry we call web design.

Hopefully these ideas will help you form the basis for your network, which you can look to when it comes time to assemble a web design all-star team.

by martin

Good communication is the engine of success

Business, Communication, Ideas, Inspiration, Strategy

In a highly competitive business environment, good communication is the engine of success.

With social media so ubiquitous, much can be achieved… and overlooked. When sharing interests and experiences online is so easy, people put less effort into maintaining their relationships, thus shortening the average life of an interpersonal connection.

A close look at the problem reveals that minimal effort can turn contacts into veritable relationships. Basic practices such as attentiveness, courtesy and friendliness can make each of your connections more meaningful and valuable. The advantages may be apparent or hidden, and they lead to client loyalty, referrals and a healthy public image.

Here you’ll learn how to enhance your communication strategy and make the most of every connection by keeping a few simple principles in mind.

Can’t Do the Job? Offer Advice

Saying no to a job offer is okay, but that doesn’t mean you have to reject the client. If offering your services is not possible, then offer some advice. Expert tips are valuable. At the very least, the company will appreciate your willingness to help, and that’s good for your reputation.

Let’s say that your quote is higher than a prospective client can afford, and you have to turn down the project. If it’s a matter of doing a couple of hours of extra work, think about taking it on anyway; most clients will appreciate the sacrifice. If you definitely can’t do it, perhaps you could include suggestions (based on what you know about the project) in your email declining the work.

A wide range of website-building services could be useful for low-budget projects, but less web-savvy clients might not know about them. Here are a few you could bring to their attention:

Site2You is an all-in-one solution for setting up and maintaining a business website. It includes a user-friendly website builder, e-commerce functionality (if enabled), hosting and domain-name services and professional support, all for quite an affordable price (plus a free trial).

is a user-friendly Flash website builder. Both free and paid accounts are available. It’s an attractive option for non-professionals.

WordPress is a decent website-building tool as well. You could even refer the client to a WordPress theme developer who you know, thus doing them two favors in a turn. Good karma!

Don’t leave the client helpless.

Always ask permission before dispensing advice; people will likely appreciate your input, but less so if it’s unsolicited.

Instead of wasting time reviewing projects that you’re not going to do and dwelling on lost job opportunities, communicate with these contacts. They will be grateful and will keep your name on their shortlist.

Recommend People To Work…

…with you: You probably know what’s happening in the design world and, because of social networking, can see who is doing interesting work.

Make contact and build relationships with other design experts and specialists so that when a project that requires it, you’ll be able to suggest competent copywriters, developers or illustrators. You’ll increase the chances of the project’s success and, thus, contribute to your own professional success.

…instead of you: Hard work won’t get you every great gig. If you receive an exciting job offer but your schedule is already full, don’t get upset; you will make another designer happy by sending the client their way-and helping others feels good. Yeah, you’ll lose a great project and a potentially regular client, but that would have happened anyway, right?

Get the most out of the situation by serving as a link. (And remember: refer clients only to professionals who you trust.) Whatever the project’s outcome, your gesture won’t be forgotten; the client will likely look for an opportunity to return the favor.

Never underestimate the value of word of mouth.

By the way, you might also like reading Web Designer’s Guide to Copywriting Profits.

Create a list of competent professionals who you could recommend to clients. You’ll show that you have a comprehensive grasp of the field, which they’ll appreciate.

Set Up a Friendly Email Policy

Your handling of email can make or break your communication strategy. We don’t have to look far for examples: just count the number of important connections you’ve established and maintained via email.

If email is your main communication medium, then put a suitable amount of effort into managing it. At the same time, put reasonable limits on the amount of time you spend on it.

Here are some simple techniques to manage email effectively. They might seem obvious-and they are easy to do-but they still get overlooked.

Auto-Reply

Using an answering machine is hardly a personalized approach, but it’s better than letting clients and others guess whether their emails have reached you.

Before going off the grid, write an automated reply to inform correspondents that you will contact them upon your return.

Automated replies are also useful for those who are lucky enough to attract a high volume of inquiries (not counting spam, of course). But do not promise to get back to someone ASAP if you’re not sure you can. Sure, saying so sounds better than something like, “Sorry, I can’t answer every message because of my high volume of email,” but it will put people off if you don’t follow through on your word.

Fast Response

Answer your emails promptly and clients will love you for it. Seriously, do it. Composing a message takes only a minute. You might not be able to solve their problems in that email, but a quick response is still appreciated.

Showing your concern will distinguish you from the client’s other contractors and partners.

Don’t keep people waiting.

Make a Good Impression

When approaching someone for the first time by email, make sure your message gives the right impression. Always check your spelling, and use a friendly but dignified tone of voice. Include a tasteful signature, but make sure the message, not the signature, is the focus.

When you want to inform your client base about important news or remind them that you exist, you’ll probably use an HTML newsletter. Before designing one, investigate which email service most of your recipients use so that you avoid problems with rendering and display.

Here are a few tools and resources to enhance your email communications:

WiseStamp is a handy browser extension to design an email signature.
CampaignMonitor offers a wide choice of sleek (and free!) newsletter templates.
Cakemail is another place to look for solid HTML newsletters.
“A Guide to Creating Email Newsletters.”
“The Art and Science of the Email Signature.”

Give Thank-You Gifts and Offer Freebies

A thank-you email might not feel like enough for a long-term client. What about cool office knickknacks or t-shirts? Never wait for the client to show their appreciation first; if you have enjoyed working with them, go ahead and show it! People will be twice as ready to help you out in future if they feel appreciated.

Don’t use gifts to suck up, though. If you have failed in a project, a fancy present won’t make the client ask you back again. Sincere gifts and gestures can only strengthen healthy relationships.

Another great way to tighten the ties in your network is to give stuff away. You could design and share freebies for your blog readers or social network pals. And don’t be afraid to re-gift; perhaps you have unused discount coupons, gift cards or other promotional items that you won in giveaways.

Luck is a funny thing; it often happens that we only get for free the things we don’t really need. But what you find useless, someone else might benefit from. Why not put it to use? Don’t let a coupon expire or a cool but ill-fitting t-shirt lie in your closet unpacked and collecting dust. Give it away. The simple act will get you kudos and a lot of attention. Swapping less for more: sounds like a great deal to me!

Announcing a give-away on Twitter or Facebook makes re-gifting a zero-risk enterprise.

Don’t Forget About Live Communication

Most of your work-especially if you’re a freelancer-takes place online. You might not notice that you’re gradually shifting into virtual-only mode, because your friends and clients (and everyone else for that matter) are just an email, tweet or Facebook message away.

Don’t be fooled by the unlimited pseudo-connectivity. Digital communication does not replace actual socializing. A photo gallery of your college reunion on Facebook won’t feel at all like the real thing, and watching recorded talks from a design event differs vastly from the experience you would have had if you were there in person.

More importantly, by limiting your communication to emails, IM, online social networking and Warcraft raids, you might lose some social skills and erode your ability to consult, negotiate and talk with actual people face to face. That still matters.

You might also enjoy reading “A Life Guide for the Antisocial Freelancer.”

What might happen if typing becomes your main way of communicating with others. (Image: The Oatmeal)

A ton of books and resources explore the principles of effective communication. The techniques won’t always come naturally, despite being “social” in nature.

Basic qualities like attentiveness, courtesy and willingness to listen can do wonders. Incorporate them into your communication habits and you’ll gain empathy, appreciation and referrals from clients, peers and friends.

by martin

What is Green Web?

Design

Last month the first International Conference on Green Computing took place. The conference agenda included a broad range of topics but, in essence, was eagerly addressing issues surrounding the carbon footprint of computing and how computers can contribute to the well being of our world. So what better time to raise a few questions about green web design. What is our role in contributing to a greener computing world?

We are, after all, steering the Internet towards being a safe storage of every kind of data. Every now and again it is good to step back and look at where we fit into this bigger picture of a green computing world. We as web designers and developers are the lead architects of the Web. We are the ones carrying the main blocks and putting them in place. Layering and cementing the blocks of information together. Brick by brick. The new Rome!

But who is actually making sure the outer walls of our construction run true? Do we have our eyes on the bigger picture? Are our processes as eco-friendly as they could be / should be? And this is not just about optimization for speed of delivery. Are we true to ourselves in considering the energy efficiency of our web constructions, or are we more concerned for aesthetics? Are these relevant questions for a web designer?

So, How Much Does The Web Cost?

What a complex little question. Discovery Magazine has already asked the question: How Much Does The Internet Weigh? (if you are one of those designers/developers who love a little reading about the science behind your work, you’ll find this interesting). In another reference to this question, apparently the Internet weighs 56grams (two ounces), but takes fifty million horsepower to run.

Someone has actually also published some back-of-the-napkin figures for How much energy per Tweet?. According to Google’s own published comparisons of how Google Searches tally up against everyday activities in terms of CO2 emissions, a five mile trip in the average U.S. automobile is equal to 10,000 Google searches.

One web page carbon footprint measured

One crucial irony in this relatively new global concern for energy efficiency is that as broadband internet technologies improve speed of delivery, web designers and developers seem to be designing and building more cumbersome websites.

According to statistics, since 2003, the average web page size has quintupled. That is to say it has increased five-fold. “From 2003 to 2009 the average web page grew from 93.7K to over 507K”. While performance has improved, it seems we have forsaken basic compression logic for increased quality, hence larger files behind our web pages.

Author note: Heaven knows I have been guilty of throwing in a 180kb full-screen image on a web page thinking simply, what the heck, my target audience is in Germany, broadband services here can handle it! Five years ago I can remember aiming for no more than 20kb per graphic.

So what needs to be highlighted here is the fact that the richer and more interactive website experiences we are creating are not going unnoticed. The files we create to build websites are “stored on servers, viewed by personal computers, and connected via networks”. This all requires energy to then house, cool, power and deliver the data that makes up a website.

Dr. Alex Wissner-Gross, a Harvard University physicist and Environmental Fellow, has researched the environmental impact of computing and calculated the CO2 emissions caused by individual use of the internet. His research, published in 2009, indicates that viewing a simple web page generates about 20 milligrams of CO2 per second. This rises to about 300mg of CO2 a second when viewing a website with complex images, animations or videos.

“So, when you are sitting in London viewing a website hosted in California, there are power plants on at least two continents actively pumping carbon dioxide into the atmosphere in order for you to watch that video or read that online newspaper…

Since millions of people are surfing the web every hour of every day, that carbon footprint adds up to an astounding 2% of international emissions each year. In fact, according to the American research firm Gartner, the carbon footprint of information and communications technology exceeded that of the global aviation industry for the first time in 2007.”

Now while scientific measurements of CO2 and kilowatt hours are, to the average person, still a foggy area to get our heads around, what is important to consider is simply that every website we produce has a consequence. According to figures from worldwidewebsize.com, as of the 31st August 2010, there are at least 15.26 billion indexed pages. A very simplistic analysis here would be that, contrary how fast my broadband service is, because we make our graphic files larger together with the fact that we are producing more web pages, any new efficiency is counteracted. As noted, this would be a very generalized conclusion to draw.

One measuring tool

Dr. Wissner-Gross has co-founded CO2Stats, an online “environmental trustmark” calculator, designed to allow web designers and bloggers make their sites greener in an accountable way. CO2Stats says that it automatically monitors and neutralizes the end-to-end carbon footprint of websites — “not just the servers, but the visitors’ computers (while they are on your site) and the networks that connect them”.

CO2Stats allows web designers and bloggers to analyze their websites and put in place greener measures. It monitors and neutralizes the end-to-end carbon footprint of websites.

The changing face of an average web page

Results of various web optimization studies published at websiteoptimization.com in July 2010 state that:

“In 1997, 90% of videos were under 45 seconds in length (Acharya & Smith 1998). In 2005, the median video was about 120 seconds long (Li et al. 2005). By 2007, the median video was 192.6 seconds in duration (Gill et al. 2007). The median bit rate of web videos grew from 200Kbps in 2005 to 328Kbps on YouTube in 2007. So by late 2007, the median video weighed in at over 63MB in file size. On YouTube, the average video size is 10MB, with over 65,000 new videos added every day”.

The conclusion of the report is:

“Within the last five years, the size of the average web page has more than tripled, and the number of external objects (EO) has nearly doubled. While broadband users have experienced faster load times, narrowband users have been left behind. With the average web page sporting more than 50 external objects, object overhead now dominates most web page delays. Minimizing HTTP requests by using CSS sprites, combining JavaScript or CSS files, reducing the number of EOs, and converting graphic effects to CSS while still retaining attractiveness, has become the most important skill set for web performance optimizers”.

The Long-Term View

The World Wide Web Consortium (W3C) is, for all intents and purposes, the one central point where responsibility for the future development of best practice web design can be attributed. The W3C points out quite clearly and early in its Mission Statement that “long-term growth of the Web” is of utmost importance. The key individual areas of its Mission Statement then address:

W3C Principles

Web for All
Web on Everything

W3C Vision

Web for Rich Interaction
Web of Data and Services
Web of Trust

The consortium also has a dedicated section for web design standards and applications:

HTML and CSS
Scripting and Ajax
Graphics
Audio and Video
Accessibility
Internationalization
Mobile Web
Privacy
Math on the Web

It would appear that we are successfully delivering the W3C’s vision of a world wide web for rich interaction. And we have the creative licence to produce visually stimulating content. In its definition of “What are Graphics?” it states: “Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user.

Graphics may entertain, educate, or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces”. It goes on to say that “Graphics are used for everything from enhancing the appearance of Web pages to serving as the presentation and user interaction layer for full-fledged Web Applications”.

So Let’s Do Our Part

Consider offering your clients green web initiatives

It can be a valuable collateral marketing tool for your design business if you promote the fact that you encourage green website initiatives. There is, for example, a Danish project – CO2 Neutral Website – which is on a global march to rein in the energy consumption of the world wide web. Your financial registration with the CO2 Neutral initiative contributes to climate projects, provides you a certificate as a climate-friendly website plus gives you use of tools to help energy optimization.

You can make the Web a better place by keeping your website clean and well-organized. And if you do, you can put badges to make it clear to your potential clients, for instance CO2 Neutral Website (not free) or My Blog Is Carbon-Neutral Badge (free).

Black could be greener

While there is controversy over whether a black color palette is more energy efficient than light colors on a website, there are still proponents of the darker website design. The emergence of the search engine Blackle in 2008 (founded by Sydney-based online media company, Heap Media) was the result of a proposed theory in 2007 that a black version of the Google search engine would save a fair bit of energy (750 Megawatt-hours).

“The principle is based on the the fact that different colors consume different amounts of energy on computer monitors”. Blackle searches are powered by Google Custom Search and states that it saves energy because the screen is predominantly black. “Image displayed is primarily a function of the user’s color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.” Roberson et al, 2002

Beyond the actual color information behind our web pages, some developers have considered the automation of standby mode intra-surfing. That means a website can be put in standby mode while a user is surfing other pages. Online Leaf has developed a WordPress Plugin that installs a green standby engine on blogs.

The low wattage color palette

Boston-based green computing consultant Mark Ontkush (incidentally, whose blog post in January 2007 started the black-white Google controversy mentioned above) has published the EMERGY-C low wattage color palette which is claimed to consume only 3 to 4 watts more than an all black page.

The hex codes are as follows:

#822007 (rusty red)
#000000 (black)
#b2bbc0 (blue grey)
#19472a (forest green)
#3d414c (cobalt)
#ffffff (white)

100% renewable web hosting

Using 100% renewable energy to store and dish up our websites is certainly a service worth considering when building a new website for clients. Or even when doing a re-brand, it could be mentioned to the client as a value-add marketing concept.

Treehugger lists wind and solar-powered web hosting companies that are increasing in popularity. And here is another Top-10 list of green web hosting companies as listed by Web Hosting Geeks where the web hosts proclaim to use only renewable energies to run their servers.

Think, be aware, optimize AND be methodical

As designers and developers we CAN do our bit to help keep the net energy efficient and free from digital litter. For example, do you ever think twice about the redundant (or orphaned) files you leave sitting on a server. After the design and build has been signed off, there is invariably redundant JavaScript and graphic files.

Small behavioral changes can make a big difference

Let’s imagine for just one minute the peripheral consequence of our web designs. If for every website project you build, you leave five unused JavaScript files, say average 10kb per file, and maybe 30 image files that are 30-50kb per file we are looking at approximately 1550kbs of unused data sitting on a server. Times that by all the websites that have been developed in the world … well, that means huge quantities of redundant data sitting on a servers in data centers, that need to be kept cool. While one could argue that this is inconsequential, one could equally argue that it is still litter that could just as well be gotten rid of.

Upon recently revisiting Tim Berners-Lee’s proposal for the web two words struck a chord: portability and usefulness. After facing a situation of ‘Information Loss’ at the European Organization for Nuclear Research (CERN), the conclusion of Berners-Lee’s proposal for better information management goes like this: “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.

The aim would be to allow a place to be found for any information or reference which one felt was important, and a way of finding it afterwards. The result should be sufficiently attractive to use that it the information contained would grow past a critical threshold, so that the usefulness the scheme would in turn encourage its increased use.”

What I personally gained from this was: If it’s not portable, don’t use it. If its not useful, get rid of it.

Tools to find and remove unused files

There are various (but not many) software that crawl websites and identify pages and files that are unused. Here are two to consider for finding unused files: Windows Inspyder Orfind and Mac SiteCleaner. There are also some software, such as WebsiteCleaner, that profess to optimize complete websites by stripping unnecessary characters and metadata.

How does your website measure up?

You can get a breakdown of overall file size and number of external objects for a web page here at websiteoptimization.com or you can use the Firefox Firebug Extension in conjunction with the Page Speed Add-On to analyse your website pages. Advice is also given on where you can save on size and speed.

Set yourself ‘golden rules of thumb’

As mentioned above, I used to always aim for a graphic size no greater than 20kb. Why, then, should this be any different today? Admittedly, to a great extent the tools we use to build websites have control over the optimal efficiency of our work. But these are also improving. Image compression processes are mostly defined by the JPEG, the Gif and the Png. While more than 60% of the average web page is made up of graphics and multimedia, there are better optimizing practices that we can employ as designers. Popular scripting libraries such as Jquery and MooTools have also greatly advanced the lesser-impact level of dynamic web pages.

by martin

How simple web design helps your business

Business, Design, Strategy

Many e-commerce sites these days tend to be loaded down with too much information on their landing pages. The reasoning for cluttered e-commerce sites is simple: the more information you can cram on the page, the more the user will buy. Unfortunately, web buyers are a finicky bunch.

Jacob Nielsen reports that web users are becoming much more impatient while shopping and browsing online. Instead of spending their time going to a site’s homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. If the user can’t find what she’s looking for right away, she’s gone.

It’s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

However, it’s become a common practice to do just the opposite. e-commerce sites have taken this “scatter shot” approach of trying to slap the potential buyer with as many options as possible. Instead of making the landing page solely about one product, sites usually clutter the page with unnecessary information, ads and related products.

Less Products Mean More Focus

Many web companies forget the cardinal rule of e-commerce: Web shoppers want as little hassle as possible. Instead of hopping in the car and driving to the store to buy a DVD, it’s much easier to go online and snag it from Amazon in a few clicks. The customer is even willing to wait longer and spend more money if the shopping experience is simple and fast.

Apple has mastered the art of minimal homepage design. If you go to their homepage, they’ll only show you three things:

A simple header navigation
One product in the body of the page
A few informational links about the featured product with images below the fold

Aside from the standard footer navigation, the homepage consists only of three parts. Here’s what you see if you click on a product link (like the iPhone).

Even on the product page, you immediately see what the page is about: the iPhone. The product itself dominates the bulk of the page, and the surrounding information are apps and features of the new iPhone. But more importantly, notice what’s not on the iPhone page:

Unrelated products
Unrelated sidebar ads
Lots of copy
Clutter

Apple has effectively shown just enough information in a very pleasing manner. There’s nothing wrong with showing lots of information, as long as it doesn’t feel like a lot of information. You’ll also notice that all of the information, links and pictures are all centered around the iPhone and what it offers. There are no distracting ads or unneeded information about other products.

There are a couple of tried-and-true methods that any designer or web developer can take to ensure that the site layout doesn’t drive customers away with clutter.

Only what you need.
The biggest aspect of simple web design is only showing what’s needed to make the sale, and nothing more. This doesn’t mean that you can’t give the user lots of information. Just make sure they want to see more information. Apple uses “Learn more” links throughout the page to accomplish this.
Reduce clicks. The less clicks it takes for a customer to buy a product, the higher returns. Don’t make them jump through hoops to buy your product.
The “Grandma” rule. If your grandma (or any elderly person) can figure out how to buy a product for your site, odds are it’s put together pretty well. Unneeded information will turn Grandma away quickly.
Reduce the number of columns. Each time you add a column to a page, the content is pushed into a smaller and smaller space. This puts less emphasis on the main product, and more on extra stuff the buyer isn’t really looking for.
Give less options. There is an added stress put on web shoppers to make decisions. Ultimately, the buyer wants to think as little as possible when making the purchase. Displaying products in a way that eliminates extra thinking and decisions will streamline the buying process and give the customer more peace of mind.
Keep it clean. A clean design keeps visitors happy. By taking the time to ensure that the layout of the site is aesthetically pleasing keeps the customer returning to the site.

Intuitive web design means thinking like a potential customer. Would you shop at your site?

What now?

Every website is going to require a different type of layout, design and copy to sell products. But designers can strive to do more with less by:

weighing every word
removing unneeded elements
using tasteful colors and whitespace
and limiting the amount of overall information the shopper sees at one time

Remember, online shoppers are a fickle bunch. They don’t “window shop”. They use search engines to limit their searches to a very narrow field. If they don’t like what they see, they leave. Site owners only have a very small window of time to capture the attention of the prospective shopper. A tasteful, clutter-free design that places the focus on the product (and nowhere else) will allow the shopper to find what she wants faster.

by martin