April 19th, 2010
Posted by Joe Wilson

85 million. That’s the number of iPhones and iPod Touch devices that have been sold to date.

300 thousand. That’s the number of iPad devices sold on the first day of its release.

7 million. That’s the number of iPads some analysts are predicting in its first year of production.

For brands depending on Flash-based websites as their primary messaging tool, these trends will result in close to 100 million touch-screen devices in market that cannot access your information. Gartner reported PC sales in 2009 totaled 306 million devices, so obviously Apple’s influence in the market is not insignificant. Adobe claims that Flash reaches 99% of Internet viewers, but these statistics only measure Internet-enabled desktops. In other words, Flash is installed on 99% of all devices that support Flash. Mac operating systems show 14% of users don’t have Flash installed, and that number grows with every iPhone, iPod Touch and iPad sold.

More importantly, the iPad opens the floodgates to an entirely new kind of device. With tablets, just as with the smart phone, Apple was not the first to the fight, but they did bring the biggest stick. Thanks to the success of iPad, consumers will now be inundated with tablet PCs ranging from the Android and Windows platforms to various flavors of Linux. Who is to say how each of these many tablets will handle Flash? Adobe has been promising Flash on Android and Palm’s Web OS smart phones for what seems like an eternity, and yet so far the public has seen only demos. If you depend heavily on a Flash website to communicate important messaging about your products or services, these facts should be concerning.

ipud2

That being said, it is a mistake to write off Flash entirely. There are still some things it does better than any other web technology. Web designers and developers need to be smarter about how Flash is utilized. Intelligent web production shops will be more judicious with Flash, using it where it makes sense, but always being conscious of how and when Flash content will be viewed. As web browsers begin to adopt support for HTML 5 and CSS 3, which allow for richer native experiences, these technologies should be harnessed where appropriate. Many big sites like YouTube have already begun the transition to HTML 5 for video. While the HTML 5 video embed still does not allow for near the functionality of Flash, YouTube recognizes that it needs to provide the option for those using devices that don’t support the plug-in.

On today’s Web, rich alternate content should always accompany any use of Flash. The days of quickly putting together a “Get Flash” page at the last minute are over. Those who browse on the iPhone and iPad cannot be treated as second-class citizens. The last thing a user wants is to see the infamous Lego brick that indicates a missing Flash plug-in when viewing a site. Also, while there may still be a call for Flash-based sites, the majority of web properties utilizing Flash need to be constructed as a hybrid of front-end web technologies.

There is enough room in the digital space for both Apple and Flash. However, Internet content producers that cannot adjust to a shifting landscape will be left behind. So what steps should web-savvy brands take to ensure users continue to have access to their content? First of all, ask questions such as:

  • What technologies are we currently using in our web design?
  • Why were those technologies selected in the first place?
  • How do these specific web platforms render on Apple touch-screen and other mobile devices?

Knowing what technologies are utilized in your online properties is essential. Secondly, don’t panic. After all, Flash isn’t dead and in many cases it may still be the right platform for your users. If you determine that you have a sizeable audience segment using devices that do not support Flash, begin the process of creating alternate content. In some instances, it may make sense to replace Flash altogether, but usually you will not be able to completely duplicate the valuable, rich user interaction that Flash provides. When this is the case, make sure that the experience is also optimized for those browsing without the Flash plug-in.

As Adobe and Apple battle over the relevance of the Flash platform, the rules will continue to change. More than ever, careful th­ought and consideration is needed when deciding what technologies to use in the construction of your websites.

April 5th, 2010
Posted by Cam Beck

A good website is designed for two types of people: Those who want to consume every morsel of content on each page and those who don’t. Statistically speaking, everyone at your website falls into the second category. Armed with this knowledge, it becomes imperative that sites be designed to draw attention to the correct areas of the page while understanding that, for each audience you have, that area might be different. Here are 3 principles to keep in mind when planning your website.

1. All audiences are not equal.

A general consumer goods retailer has a number of different audiences, just within the customer base. But besides customers, they must also talk to the community, the press, employees, potential employees, investors and often regulators.

These audiences have wildly divergent needs, but they have one thing in common: they expect your website to be designed to sell general consumer goods, regardless of what need brought them to your website.

Target

Secondary audiences for Target.com do not suffer on account of Target’s decision to cater to its primary audiences. Target was ranked 19th largest online retailer in 2008 with 2007 sales of over $1 billion. Investors and prospective employees don’t mind.

This doesn’t mean your design team can neglect other audiences, it just means they are free to focus their energies on solving the primary business problem while providing access to secondary content in areas that do not disappoint those audiences. Everybody wins.

2. The more it is about, the less it will be understood.

For large organizations, there is often a temptation to try to fit a little bit of everything for everybody on one page. This can work to a degree, and there are a number of companies that have found success with this model (e.g., Yahoo!). Others such as Intel have taken a different approach by segregating the audience outright.

Intel

Intel immediately segments the audience without sacrificing its core value proposition that communicates its expertise in the category.

All of these companies understand that too much of anything is a bad thing. Because even though they might want to sell a hundred things, virtually no one will want to buy a hundred things. They just need a clear path to their things.

Some companies, such as Amazon, work through personalization, though this doesn’t appear to help it be “about less.” This goes to show you that what’s right for Amazon might not be (and probably isn’t) right for you.

3. If everything is a priority, then nothing is a priority.

This is typified by the monstrous, undead home pages I described back in October. I blame this common flaw on corporate silos. Everyone seems to believe whatever their responsibility entails deserves top billing, or else no one wants to say “no” to their friends and colleagues.

Does that mean you have to choose a SINGLE element to focus on? Not necessarily. But it is always a good practice to utilize conventions in interface design to emphasize high priority tasks.

Apple’s Obsessive-Compulsive Simplicity

I often hear people exclaiming admiration for Apple.com. Their website is “clean” and “simple” and “easy to navigate.” This is true to a point. It’s not true for my typical usage of their website — if I had to get there through the navigation, anyway — but (among other things) Apple has embraced the 3 above principles very well.

  1. They know (in my typical usage) I am not their primary audience. This frees them up to focus on those who are.
  2. They stay true thematically to a singular core message.
  3. They prioritize each page so its purpose is eminently clear – whether you are the audience for that purpose or not.

This is not true of all of Apple’s products – even the popular ones.  But here’s one thing to remember: What works for Apple may not (and probably wouldn’t) work for others in the sense they really want it to. There are very few organizations that can, pound for pound, generate such conversation and, in the midst of it, maintain their message discipline. Much of the communication heavy lifting occurs elsewhere (through PR, marketing, organic word of mouth, etc.), and Apple recognizes that.

apple

Apple leaves no room to doubt what they want you to know about. Apple undoubtedly realizes that not everyone who comes to their website is going to buy an iPad. Not everyone who comes to this page will even want an iPad. That’s okay. It’s not who they’re talking to with this message.

Any organization needs to similarly recognize the space in which they work, the environment in which they live, and the sandbox in which they play. Doing this will give them the wherewithal to make the difficult decisions necessary to prioritize correctly and to conform to principles that allow them to communicate the right message to the right people at the right time.

August 31st, 2009
Posted by Cam Beck

Dog Sniff

Contrary to our dearest wishes, people generally don’t come to our websites just to “click around” and see what’s there. They’re on a mission to find or do something – either specifically or vaguely defined. Information scent is that which sets expectations for their ability to find or do it.

It is a brand’s promise to them that they can find or do what the object or labels represent.

The good news is that, for savvy and diligent brands, this is a great opportunity to set high expectations and exceed them – thus, building a strong brand reputation.

The bad news is that, without proper planning, it’s unlikely to happen on its own. Brands, Web designers, and experience planners need to know the principles that will enable them to build strong brands by generating a strong information scent and delivering on the expectations they set.

What is information scent?

instruction(Nerd alert: Instruction of theory follows)

To help interaction designers understand how to make information more findable, back in 1993, some researchers at the Palo Alto Research Center developed a theory called “information foraging,” which suggests that there are important similarities between how animals gather food and how humans collect information online.

The concept of “information scent” came out of this theory, which provided some useful principles to follow when building online experiences.

Abstraction: The stink bomb of information scent

Everything is alike at the appropriate level of abstraction.

For instance, dogs and cats are distinct animals. However, dogs and cats are both “pets.” Dogs, cats, and horses are “domesticated animals.” Dogs, cats, horses, and mice are “animals.” Dogs, cats, horses, mice, and pitchforks are “things you might find on a ranch.”

The more abstract the category, the more difficult it is to predict exactly what the label means. Hence, in (sadly) typical website parlance, “resources” and “tools” may be too abstract to be useful. By themselves, they provide no information scent. “Resources,” as a label, may just as easily be about water, coal, and oil as it is about links, support documents, or helpful people.

As the Chip and Dan Heath, authors of Made to Stick tell us, “Abstraction is the kiss of death in any situation where you need to stand out.” And in a space that is abundant with information (like the Web), you need to stand out.

Don’t be obsessed with click-counts

Once upon a time, savvy Web designers believed that websites should adhere to something they called the “Three-Click Rule,” which, as the name suggests, stated that every piece of content on a site should be no more than three clicks away.

The problem, however, isn’t the number of clicks. It’s the degree of certainty users have that they can find the information they need – that they can accurately predict what will happen when they click something.

It’s very rarely a good idea to add unnecessary clicks.* But often adding an intermediate step in a given process can actually make things more findable.

Otherwise everyone would just take their site map and turn it into their home page.

* Surprisingly enough, this white paper from Human Factors International suggests adding extra clicks can sometimes better support the goal of the site and fulfill the desires of the users.

Turn your web pages into billboards

Dontmakemethink“The goal should be for each page to be self-evident, so that just by looking at it the average user will know what it is and how to use it.” – Steve Krug, Don’t Make Me Think

Following Krug’s advice sometimes means turning three painfully laborious clicks into four quick and mindless ones. Within reasonable constraints, if the information scent is strong enough that users are supremely confident they will find the information they need by clicking on something, as long as the site delivers regularly, they won’t even remember how many clicks it took them to get there.

They get frustrated only when they struggle – either deciding what or where to click, or finding out that what they clicked didn’t give them what they expected.

You could provide instructions, but while in foraging mode, people don’t want to stick around and read instructions, so your interface must convey what you would otherwise use words to communicate.

People want to get to the meat of what brought them to your site in the first place. So they won’t read at first. They’ll scan. They’ll scan by looking for cues that indicate to them where they must go (or what they must read to find out).

Krug wrote of a framework that takes advantage of the typical scanning behavior of users: If people simply scan pages like they scan billboards (until they find what they came for), when necessary and possible, treat the pages like billboards.

Besides creating clear, consistent labels, here are Krug’s guidelines for doing just that:

1. Create a clear visual hierarchy on each page
As "ugly" as his site design is, Jakob Nielsen's articles are ridiculously easy to scan and read because he makes use of good visual hierarchy.

Caption: As “ugly” as his site design is, Jakob Nielsen’s articles at useit.com are ridiculously easy to scan and read because he makes use of good visual hierarchy.

2. Take advantage of conventions

conventions

Caption: Many of the video interface elements we see and recognize everywhere on the Web today are conventions because YouTube became popular. Many of them were recognizable because they were recycled from video players that were manufactured for decades prior to YouTube’s manifestation.

3. Break pages up into clearly defined areas

usatoday

Caption: USA Today’s website has a lot going on — even on content pages like this one — but the various areas are clearly defined for what they are. Navigation is navigation, headlines are headlines, body text is body text and so forth. Separation between areas aids in navigation and consumption.

4. Make it obvious what’s clickable

buttons

Caption: Buttons can come in all shapes and sizes. You can perform a few tests with others to determine if a button appears clickable. But if you do nothing else, look a few inches in front of any given design element (such as a button). If you can still tell that the object is clickable, then it probably will appear clickable to others.

5. Minimize noise

Separation

Caption: In spite of providing access to thousands of programs, Hulu.com does an outstanding job of keeping things simple on their homepage.

Live it, love it, give it a pleasant aroma

The main goal of following these principles is to ensure people who come to a site looking for information can find it.

Abstract labels or design features can get in the way of this goal. They are said to have a weak information scent.

Clear labels with good visual hierarchy, familiar or recognizable design elements that aren’t too cluttered typically provide a strong information scent.

It isn’t always possible, given the constraints of any particular circumstance, to achieve 100% clarity in appearance or labels.

However, knowing the principles of information scent and their potential benefit, with proper planning and testing, can give you a greater degree of certainty that your online presence will successfully support your brand promise.

Remember to plan for this important aspect of communication.

Related
Top 10 UX Myths
(Hat tip to David Armano)

July 20th, 2009
Posted by Jeff Whang

Recently, I was tasked with helping one of our clients understand what independent films were doing to promote their film via their website. At first, I thought “no problem” and began with a simple google search. As you can see, that search didn’t pan out too well – and neither did variations of it. I also tapped some of our secondary research resources, but most of them talked about how much the big studios were spending on websites for Harry Potter 6 and Bruno. I needed the independent film perspective. But even the big independent studio film sites weren’t much help: for example, nearly all the films on Magnolia Pictures’ site were on the same template, and not a very good one at that.

My next direction was more fruitful. I found all the film festivals happening right now and went down their nomination and award list. While many of them don’t have a web presence at all, I was pleasantly surprised to see some neat things that some films are doing to promote themselves, often on what we know is a small budget. Here’s what I found:

Judicious Use of Video
wahdodem
Films like Wah Do Dem engage the visitor immediately with the trailer for the film, using an integrated flash player, vimeo player or even YouTube. Gone are the days where you can find out everything about a movie except for the only thing you’re really interested in – the trailer. Other indie films like Big Fan also put the trailer for the film front and center. I also noticed more films including short videos from the director, teasers and other things you might traditionally see as a DVD extra.

Tying to a Cause
thecove
This isn’t so much a trend in film websites as much as it is just something films are thinking about early in the process. Films like Flow and The Cove make “taking action” a big part of the web experience. Often, these are prominently featured on the film site and then link out to a full-blown “activist” site where people can dive much deeper into the issue at hand.

Links to Social Media
burmavj
This was the big surprise for me. With Flixter’s Movie app on Facebook being one of the most popular (over 17 million active users), you would think that independent films would be all over the social media front. Unfortunately, it’s utilized by only a select few sites. But the ones that are doing it are promoting their social networking links prominently on their homepage. Films like Burma VJ, More Than a Game, and We Are All Precious all take advantage of the power of social media.

So at the end of the process, I was able to help our client understand the space, learn about some of the most effective tactics independent films are using on their websites, and as an extra perk, experienced some websites that did their job – I think I’m going to go see Burma VJ!