Web Design Best Practices (part 3): Navigation

I'm not a graphic designer, but that doesn't mean I don't know where to find nacho chips at the supermarket.

Before you start thinking I've lost my marbles by putting these two seemingly incongruous elements together in a sentence, let me explain myself. Navigating through a website is a lot like making your way through a supermarket. Supermarkets and websites share many characteristics which we can consider through the concept of "affordances", or "action possibilities which are readily perceivable by an actor" (definition from Wikipedia).

At a supermarket, these expectations are broadly related to 1)store layout, 2)product placement, and 3) cross-promotion. On a website, these expectations are related to 1) homepage layout, 2) product placement, and 3) cross-promotions. Similar, no?

At the supermarket, you arrive at the entrance, get your shopping cart, and make your way through the sliding doors. You know with your eyes closed that the first food you're likely to see are fruits and vegetables, then bread, then meat. (Supermarkets, at least the big ones, also tend to promote "green" products at the entrance now too - for public relations purposes).

On a website, you have come to expect that the website homepage will give you a thorough, if high-level, overview of everything that's in the site, starting with the "reason" for the company's presence, the products or services the company offers, and the company's actions (through news, events, and public relations).

Second of all, without knowing why, you have a pretty good sense of where you'll find, let's say, nacho chips. Even if you've never been to the specific supermarket before, you are pretty confident that nacho chips will be found a few rows to the left of the vegetables, probably in the aisle adjacent to dairy products. Your knowledge of the placement of a product supermarket is pretty astonishing, isn't it? It's because of intuition based on past experience, habits, and the practicality of gathering this product as part of experience of fulfilling tasks in a more or less linear way associated with your household economy. In other words, nacho chips are a treat, but while you are picking up required items such as butter or milk, they sure are nice to have.

Similarly on a website, you have a pretty good sense where you might find the "search" box: on the top right of the screen. Websites often use this space on the screen for search because it is habitual, and practical, to place a site-wide tool in a highly visible location without limiting space for core business.

The third element of navigation has to do with cross-promotion. You know that you are likely to find salsa at eye-level beside the nacho chips. While logically salsa shares more qualities with tomato sauce or barbecue sauce, its application is directly related to nacho chips (and subsequently related to watching a football match on TV). What if supermarkets also placed avocados, garlic and lemons beside the chips? Would people eat more guacamole?

Similarly on websites, when you're on, say, a product page, you are likely to find information about product support, a sign-up for a product newsletter, and options to contact a sales-person.

How do you take this information on intuition, placement and affordances and turn it into a better user experience? Some of the answer comes down to following best practices, seeing what your competition is doing, studying websites you admire or dislike, and working with a user experience specialist to put best practice into practice. And some of the answer comes from learning about affordances. Frankly there is no better way than to sit beside a real-world user of your website and watch closely to see what they find, how they move through the site, and whether they do what you want them to do.

You may also benefit from a fact-finding trip to the supermarket, and then put your metaphorical avocados at metaphorical eye-level, beside the metaphorical nacho chips.

ABC3D

I Love it! - Available at Amazon.

Web Design Best Practices (part 2): Accessibility

In addition to acknowledging that users have developed habits of interaction over the years, every well designed site should be accessible to the largest (target) audience possible. But accessibility goes farther than that.

Websites are a tool as well as communication channel, we must consider not only the demographic and psychographic profiles of our market, we must also think of very nuts and bolts things such as disabilities (visual impairment, dyslexia, deafness, colour blindness) and constraints (high-speed versus dial-up access, screen size, operating systems, and so on).

Accessibility features refer to various standards and commonalities that assist users by giving them what they expect, and what they need, to make their interaction successful and efficient. For more information on technical aspects of accessibility, please visit the World Wide Web Consortium Web Content Accessibility Guidelines 2.0.

One way of looking at the issue of accessibility is to think that websites should be easily read. The concept of readability captures the speed and efficiency with which information is consumed and processed. It can refer to navigability, various types of visual information (graphics, imagery, rich media, and to alternatives to rich media) in addition to written words.

Of course, some traditional graphical design issues are at work when designing a page. But online, there are far more rigorous constraints than there are on the printed page. One recent study by Jakob Nielsen suggests that there on a web page there should be no more than 28% of the content one would view on the printed page. According to this study, users spend an average of 4.4 seconds per 100 words.

What should this mean for a well-designed website? First, put your content creation machine on a strict diet. Say more with fewer words, use small graphics, bullet-points and bolded text to enhance the readability of the page. House your content in a navigation schema that makes it easy for text readers to explore.

Web Design Best Practices (part 1)

Clients often ask - heck, I often ask myself - what best practices should be followed when designing a website. I'm sorry to inform you that there is no formula for the perfect website. In fact, it could be argued that every website is as unique as the organization behind it.

That doesn't mean there aren't principles that should be adhered to (or at least acknowledged). I'll share some insights that should help as you consider what should be on your site, and how it should be designed: page layout; navigation; user-centred design; accessibility; how to improve your site through iterations; and features that should be included. I'm going to start with the complicated question of intentions.

When designing a website, people consider what they want to include in the site before they consider why elements are included. This is a mistake. The first, and most important feature of a well-designed website, is the user-friendly way in which the consistency of the organization’s business and communication objectives meet with the designed end-result. Put another way for the sake of clarity, this means that every element – from content, design, navigation and interactive features – must be considered in light of the organization’s intentions. Only those items that advance your goals should be included.

With the advent of social media, users have come to expect a broader range of tools available to them on websites. Many sites incorporate sound and video into their sites, and provide sophisticated feedback mechanisms, planning tools, easy-to-fill contact forms, enabling saving and forwarding page-level information, and access to tools such as live chatting. It is important to remember that interactive tools should always be used in response to an organization’s objectives. For example, where video and sound files may help one company sell more products, another organization may find a calendar tool is very valuable to respond to end users’ needs to form communities around common events.

This does not mean that every website is radically different from every other website. End users have developed expectations for how they interact with sites over the past decade of website usage. In terms employed by the user experience community, these are often referred to as “affordances”. For example, users expect there to be a “contact us” page on every website and that usually "contact us" is included in the site's header.

If there is one formula for a well-designed site, it would be: your communication and business intentions + your users' intentions = success. In other words, provide what you need to further your goals in a way that is easily grasped by your valuable and time-pressed end users.

The Weight of the Widget, Volume III: Pitfalls

There are a few hurdles to face in the fresh world of widgets. Complaints can be heard coming from users, advertisers, and website owners alike.

Loading Time
The biggest concern voiced by widget users and site owners is widget loading time. The time it takes to load a web page where a widget resides, is dependant on the third party code that exists on an entirely different server. Although some companies like Flickr are able to deliver fast and reliable service, smaller startup companies are often unable to handle the increase in demand, and end up failing to load the widget at all. And some critics predict that sites will become so cluttered with widgets that they won’t be effective whatsoever.

Profitability
Another question companies ask when contemplating widget development is "how can widgets help our business make money?". Experts acknowledge that the economy of this type of online marketing tool is still being shaped. Without a pricing strategy, advertisers are apprehensive about paying top dollar for a widget that’s influence is unknown. So as marketers wait with baited breath for an idea of how to make a profit, widgets will continue to serve as tools to achieve brand awareness and lead generation.

Measurement
The third obstacle lies in the measurement of usage. Given that users connect to widget content without opening any additional browser windows, counting page views and unique visitors will become obsolete. But people are getting closer to uncovering the answer with solutions to measuring widget usage. As well, companies may need to identify specifically what qualifies as a widget before Internet traffic analysts are able to measure penetration.

So is widget marketing here to stay? I know a lot of younger demographics would argue them as a new age necessity. Generations that have been raised on the Internet have no time for a static banner. Their attitude isn’t just “what’s your brand going to do for me?” It’s “what’s your ad going to do for me?” But will there ever be a comprehensive method of measurement? And will the demand for widgets continue?

What I took away from FITC Toronto

I’ve just returned from the premiere Canadian new media trade show known as Flash in the Can. My head is now full of hope and inspiration for the future of rich media, and dynamic desktop applications.

There were so many wonderful things worth mentioning, and I fear I’ll only be able to only scratch the surface in a single article, so consider this a brief overview.

Let me start by discussing the potential for Adobe’s new product Air, which is a platform allowing flash developers to create dedicated desktop applications using all the same scripting and abilities of Flash CS3.

Before attending FITC I didn’t really appreciate the usefulness of a new platform to host Flash based applications. But now that I’m aware of its easy-to-use built-in SQL database, and the potential to access dynamic data both locally, online, and the possibility of syncing the offline with the online I’m eager to dive far deeper into this new dev platform. I’m thinking this would make an excellent platform for an Intranet, among other incredibly useful apps.

A few major websites such as PayPal, EBay, Google Analytics, FaceBook, and others have already built or are developing desktop versions of their huge and complicated sites to allow users a faster and more feature-rich experience then was ever possible before. In many cases it will allow their sites to operate offline which is a pretty major ability both for the company and their users.

Here is Adobe’s current Air app showcase site.

One other thing I took away from FITC was the incredible work being done by a few people in the realm of code generated artwork.

Flash has long been a favorite tool among groundbreaking designers to avoid the limitations of old-fashioned HTML/CSS styles, allowing the sites to be presented in ways that are near-impossible in most other traditional ways.

I strongly recommend viewing the work being done by Joshua Davis, Erik Natzke, and my personal favorite Grant Skinner. Skinner has managed to create some beautiful, natural looking trees and grass, entirely with code. It would take many pages to get into the details of how this is possible, but it essentially amounts to porn for Flash coders.

Anywho, it was a fantastic conference that will forever influence the way I approach my work.

The Weight of the Widget, Volume II: The Secret to Success

As a continuation of Volume I, this post explores the appropriate questions to ask when creating a widget and the key principles to a truly brand building application.

In an industry that is always enduring the trial and error of new trends, it’s fair to debate whether this new gadget will actually contribute to a brand’s success. Despite its popularity amongst hundreds of millions, widgets still need to serve a purpose in order to make a successful connection between brand and audience.

Here’s an example:

Purina created a mini-applet that alerts pet owners of good dog-walking weather. By extending its brand experience beyond dog food, the brand makes an even larger impact on the consumer’s life. This widget is a way of saying “We’re about more than just feeding your dog. We understand the life of a pet-owner and we are here for you.”

Widgets also tend to last longer than traditional advertising. If it’s something consistently entertaining or informative to the user, they are likely to keep it part of their routine, grow accustom to it, and potentially shudder at the thought of living without it.

So what key considerations must one make?

1. Consider Your Brand

Don’t just tack on your brand message to some flashy, unrelated function. Allow the widget to be a practical extension of your brand. Offer content that while useful or entertaining, also subtly enforces your brand’s identity. Acura is known for having the best navigation system on the market, so they developed the Acura RDX Traffic widget that delivers real-time traffic flow to a user’s computer. Not only is it an extremely useful application, but also a functioning extension of Acura’s brand attributes.
"It is important to raise the widget to the level of the brand, not reduce the brand to the level of the widget.” - Snipperoo Widget Blog

2. Consider Your Audience

While much of your effort will be spent designing and constructing a widget that is perfect for the user, you can’t forget about where you’ll be placing it. The placement is as important as the widget itself. There are millions of sites on the web that cover everything five times over, so it’s crucial to know the sites that not only achieve reach, but also have their own credible identity. And don’t forget, your widget should also enhance the site it’s on, making it a mutually beneficial partnership. But you may be considering a desktop widget that engages users in a deeper connection, in which case you better hope that your content can hold the interest of the user.

“There’s no free parking on the desktop: Keep it meaningful and fresh.” – Kate Donaho, Group Creative Director, T3

So what kind of content can hold the user’s attention every day? Are RSS feeds the key to keeping it fresh? Are there interactive games that can stand the test of time and wear out?

The Weight of the Widget, Volume I: The Next Level of Brand Engagement

As a facebook user, I can admit that as I stroll about the network, most advertising doesn’t penetrate anything more than my peripheral. Despite its close proximity to the content on my screen, it still isn’t content. And this quick assessment of what deserves my attention is second nature, much like someone watching television and switching channels the instant a commercial sneaks onscreen. We all know how the story goes: you can lead ‘em to a banner, but you can’t make ‘em click.

Enter Facebook Applications: Little gadgets that allow users to interact in unique, entertaining ways. Advertisers are fighting tooth and nail to develop these gadgets and further involve users in their brand. However, many of these applications are producing overwhelming clutter on the site and require users to solicit these apps to their peers, causing resentment among millions. But at the core of the clutter lies the key to new age brand engagement – Widget marketing.

Widgets can be defined simply as small pieces of desktop or web content that offer functions from simple weather updates to more sophisticated and interactive applications. They have recently become a popular way for marketers to not only reach their audience but also to incorporate their brand into a user’s everyday routine. Apple and Microsoft have desktop tools that feature stock tickers, news feeds and airline schedules. Google’s fastest growing products are ‘gadgets’ for its personalized start pages, or websites that allow users to customize the displayed information.


In today’s marketing world, the widget is proving its place as an effective media strategy. Such tools have been successfully weaved into marketing plans for brands like Adidas, Cingular, Sony Pictures, V05, and AT&T Wireless, along with many others. Many sectors like financial services, automotive, and personal care are testing the widget waters, which makes one wonder just how varied the demographic for this tool is. eMarketer estimates that U.S. companies will spend $40 million this year to create, promote and distribute widgets, up from $15 million in 2007 (which was prematurely dubbed ‘The Year of the Widget’).

Not appearing to be a passing fad, widgets are used by 230 million people a day. But are widgets appropriate for every marketing strategy? Behind every brand, is there a widget waiting to happen?

Look for our next installment of The Weight of the Widget: Volume II: The Secret to a Successful Widget

Adobe TV

Adobe TV is a new online source for expert insight and inspiration. Feed your passion for Adobe products with insider tips, innovative techniques, and behind-the-scenes tours delivered on video, on demand.

Giving Money Online

Today I received an email from my brother asking for my money.

Let me clarify: my brother was asking for money on behalf of the 'Ride for Heart' event put on by the Heart and Stroke Foundation. He'll be participating in a 75 km bike ride (on his old mountain bike) and wants sponsors. His email starts out with a personal plea to donate (including an actual 'PLEEEEEEASE!'), followed by the very well-worded template copy derived by the Foundation.

Of course I donated, but not just because I think this is a worthy cause, but mostly because it's my brother. See, I like the idea of the torture he'll endure 'mountain biking' 75 km on pavement. Last time he climbed the CN Tower stairs. That was good too.

I arrived at his personalized web page which prominently displayed his fundraising meter, indicating he'd achieved over 50% of his goal after just a few days. Then, to the right, was the "Honour Roll" scrolling through the names of his donating peers.

I completed my transaction and up popped the 'Confirmation' page. I was immediately able to download my PDF receipt. Very cool. Now I want to see my name on that scrolly list on his page... But how do I get back to it? There was absolutely no link in sight to bring me back to my brother's page (though the page did also include a 'Thank-you' message, bullets on how the money will be used, 'contact us', etc). Even the email that arrived in my inbox a minute later did not contain a link to his personal page.

Such a simple thing, why would they have left it out? It was such a smooth and impressively easy process up to that point.

Could it have been an oversight on the Foundation's part? Even as a charity that otherwise portrays themselves as innovative and advanced? Or maybe I'm the only one vain enough to care about seeing my name on the 'honour roll'. Perhaps I didn't see enough of that while I was in school...