August 30th, 2010
Posted by Sarah Voges

In May 2010, at the height of season finales, Hulu ranked second only to YouTube in number of videos viewed. In August, Hulu expressed interest in a public offering, and eMarketer examined the pros and cons for advertisers, including the better content greater resources could secure versus the risk involved with turning content providers into competitors rather than owners. Also noted in the article is that advertisers view online television shows as a less risky place to participate in video ads online. This got me thinking…

How does online differ from television for advertising within a television show?

Let’s start with some basic statistics:

Although the number of people who watch television online is increasing, the in-home set is still our favorite way to watch our shows. People turn to the Internet for television shows because it allows them to watch television whenever and wherever they want. According to eMarketer, cross-platform viewers – who watch shows online and on the set – most frequently go online to watch an episode they missed or catch up on previous seasons and many missed episodes.

Younger audiences, especially 18- to 24-year-olds, participate in time shifting much more, taking advantage of the Internet’s convenience. Although it varies depending on the show, online viewers of television shows tend to be younger, more likely to be male and more comfortable with technology.

Comparing Ad Performance
The act of seeking out content online plays a big part in viewers’ engagement. The sense of empowerment makes viewers more receptive to ads, and the notion that advertising is the reason for free availability of the content is still around – unlike in television, where ads are viewed as an interruption. The environment also enables engagement because the user is required to click during the viewing process and is exposed to less clutter. In general, attitudes toward advertising are more favorable among online video viewers:

Hulu reports that 90% of its users think the ads they watch on the site are less annoying than those on television. Nielsen did a study that compared video ads run during online TV shows with their corresponding television ad. The online ads outperformed their traditional counterparts in all measurements.

Nielsen’s study only measures recall, not clickthrough rates or interaction, important metrics in the online environment. When the set of ads in an episode creates a story or a building experience, the ads perform better. Even if it’s not as interactive as a branded game, at least providing a link out to a website or more information is important, since 43% of cross-platform users stop a show to explore an advertiser’s website.

Overall, advertising in a television show online provides a unique opportunity to target a highly engaged audience that’s younger and technologically savvier than your usual show viewer. While this audience is smaller now, it is likely to grow significantly and begin mainstreaming as more people utilize Internet services. Most importantly, combining an engaged user with an engaging medium like the Internet provides a chance to create branded experiences and associations that can positively affect consumers’ attitudes about your brand.

Here are a few things to consider when getting involved in online television advertising:

1. Try repurposing a television ad. Some studies show that this type of ad performs well online and maintains a similar experience for both your traditional television and Internet viewers.

2. Consider your target. The demographics are a bit different online, so if you’re looking to hone in on your younger, hipper segment, this may be a great channel. You may want to consider how to create a more interactive experience for this tech-savvy group.

3. Measure the results. Online television provides the sensory benefits of television with the measurability of the Internet, so adding a brand study to your online television will give you a better picture of what specific metrics online television can effect for your brand.

4. Review your options. Television is available from multiple services online, with the most popular being Hulu and network or show websites. Some allow full-episode sponsorship or companion ads for your video placements. Hulu even allows viewers to choose whether they want to watch one longer commercial before their show begins or about five shorter commercials through the show.

August 3rd, 2010
Posted by Cam Beck

The sign of a good interface for a product meant for general public consumption is when the audience it’s designed for is delighted to use it. This includes but goes beyond simple matters of usability, architecture or aesthetics, and lies at the heart of how people are wired to interact with the world around them – and their attitudes and reactions both when they see it and after they interact with it. Failing to design it right can make your website seem cold and lifeless.

Think of the last time you shook someone’s hand. When you looked the other person in the eye, did he look back at you? Did his smile seem sincere, warm and friendly? Could you feel the heat radiate from his palm as his fingers gently squeezed around the ridges of your hand? Did it last a couple shakes – at least three seconds?

What makes such interactions pleasant is that they are welcome, warm and inviting. We find comfort in their predictability. We like it when people react and respond to us appropriately, and we are either bored or shocked when they do not.

Unlike people, computer interfaces (including websites) don’t think on their own. They can’t identify others’ intentions and sensibilities to respond appropriately. They require people – designers and programmers – to identify, predict and enable responses to user behavior so that the system works predictably, intuitively and in a way that inspires the appropriate emotion.

Put another way, designing a handshake is more complicated than designing something that looks like a hand. A fake hand may resemble something you can interact with, but without the intelligence and warmth behind it, it insufficiently reflects the humanity it represents. It doesn’t matter how much you try to make it look human. You can attach a wrist and arm – heck, the rest of the body. You can dress it up and even take it to a dance. But without that intelligence, without that interchange of appropriate responses to your actions, in the end, you’d just be dancing with a dummy.

Use People-Speak, Not Computer-Speak

Computers are part of our lives and, as such, the distinction between our languages has blurred a bit in recent years. They have changed the way we communicate. Did we say that we’re “processing” something before the popularization of the computer? Without context, we don’t know what a person is talking about when they mention a “desktop” or a “mouse.”

Whenever possible, let your interface do your talking for you. Don’t say “Click to submit” if your interface is obviously clickable (the words “Click to” in this case just act as a barrier between sight and cognitive understanding). Just let them know what it’s doing in their terms, not the computer’s.

And for goodness sakes, pay attention to your error messages.

Caption: Very few ordinary users will understand what this means or what they should do about it. Whether the system commits an error or a user does, the system should help the user recover from it. To do that, it must use language the user can understand.

Give Instantaneous Feedback

For a response time to feel instantaneous, it must take place within one-tenth of a second. A one-second response time, while noticeable, still leaves the user feeling like they are in control. Depending on the request, 1-10 seconds may be acceptable, but at 10 seconds, people lose attention and interest.

Once again, there are a number of tricks you can employ if there’s a possibility that something can take more than a split second.

In such cases, utilize the quicker interactions you have at your disposal – rollover states and latency notifications can be the difference in that first 10 seconds.

Caption: Apple’s navigation design helps people understand that what they are doing is having an effect on the system. Even if network conditions or connection speeds cause the next page load to take a few seconds, the user does not need to wonder whether they did something wrong.

If it’s longer than 10 seconds, be empathetic to your audience’s short attention span. Give them something to watch, read or do in the meantime.

Caption: BounceApp’s whimsical loading animation keeps users from thinking about how long it’s taking to process their request. While this exact approach won’t work for every brand, it fits (and helps define) BounceApp’s personality.

Make the Interface Predictable

Variety may be the spice of life, but inconsistency in interface and interaction design can be a major cause of frustration for the intended audience. Not only do people expect all interface elements to work the same on your own website (internal consistency), but also the way they work on other websites (external consistency).

Caption: One of the early usability critiques of the iPad is that the lack of conventions forces users to learn independent interaction rules for each application they use.

There are a number of methods we can use to make sure an interface is predictable (such as through typography, language, shape, color and placement); it doesn’t mean everything on every website always has to look exactly the same.

There are very few hard-and-fast rules of interface design that cannot be bent for a higher purpose. All design involves a series of trade-offs. It’s just important to understand the principles involved and to intentionally choose which trade-offs you’re willing to make.

The key to making your website (or any interface, really) feel like it’s an extension of you is to make it more life-like and less like a computer.

It is not enough to give attention to shapes, colors, sizes and dimensions. Plan the experience so that the entire system is sensitive to how people interact with it over time, providing appropriate responses to user activity so that the user feels like they are shaking the hand of a real person, not just grasping at a dead fish.

Related Links

First Principles of Interaction Design
The Design of Everyday Things
About Face 3: The Essentials of Interaction Design

June 7th, 2010
Posted by Cam Beck

Building or redesigning an important website can be like buying a starter home. You think it’s the solution to all your problems, but sooner or later you discover that it has problems of its own. The upkeep is a lot of work. One thing is certain if you are building a family: There will come a time when you outgrow your starter home, and you’ll notice that it seems like the house was built for someone else. A close examination of the house reveals that, in some instances, you just weren’t that important in the grand scheme of things.

For instance, the contractors used composite hardboard siding instead of wood, vinyl or cement, and it seems to not withstand the rigors of the environment like the other things might. Since hardboard is slightly cheaper than the alternatives, that part was built for the builder’s bean-counter… not for you.

When you encounter your first plumbing issue, the master plumber who comes in to fix it laments that when the builder installed the pipes, they didn’t seal them. That part was built for the construction workers, so they could get to their break quicker. It wasn’t built for you.

Who is your website built to serve?

It doesn’t always have to be this way, but in many cases, websites are built through a series of processes, negotiations and compromises – much like a house. However, it is primarily built to solve problems. Therefore, the design team must agree on which problems they are trying to solve, and in what order.

There are several ways to approach the problems you identify.

Recently I had the pleasure of attending the 2nd Annual Big Design Conference in Dallas (#bigD10). Our keynote speaker was Jared Spool (@jmspool), founding principal and CEO of User Interface Engineering. His presentation, “The Anatomy of a Design Decision,” included an excellent perspective on user-centered design.

What is “User-Centered Design?”

The traditional definition of user-centered design can be explained this way (from Wikipedia):

“User-centered design can be characterized as a … problem-solving process that not only requires designers to analyze and foresee how users are likely to use an interface, but also to test the validity of their assumptions…”

“The chief difference from other interface design philosophies is that user-centered design tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the software developers’ approach.”

User-centered design can be broken into 4 categories.

  1. Self-Design – The designer is the user. This is not traditionally considered user-centered design, but it can be effective when the designer is designing for himself or when other users are exactly like the designer.
  2. Genius Design – When the designer intimately knows the user and the space for which he’s designing and can apply the patterns he’s learned without researching everything from scratch.
  3. Activity-Focused Design – When the designer is focused on what the user does and verifies through research and testing. This is the benchmark for traditional user-centered design.
  4. Experience-Focused Design – Through extensive research and deliberate execution, persuades the intended audience to perform a desired action and elicits appropriate emotion that makes the experience memorable. True experience design transcends the medium and is the hardest to plan.

User-centered design is, at its core, a philosophy, not a rule. It stands in opposition to three other types of design.

  1. Unintentional Design – If this occurs, one of two things is true: Either the designer is absolutely clueless or has tried to stretch an architecture designed for one thing to serve purposes for which it was never intended to serve.
  2. Technology-Centered Design – This occurs when you’re more concerned about “features” on the platforms you already own or have access to than you are how the user could interface with those platforms – and why they would even want to.
  3. Ego-Centered Design – This is a variation of “Genius-Design” masquerading as “Self-Design.” The difference is that with Self-Design, the designer (whether he be an actual designer or simply a stakeholder who is hijacking the process through the exertion of power, intimidation or influence) actually is the primary user of the design in question. With Ego-Centered design, the designer simply presumes that everyone thinks like him — denying evidence to the contrary.

Getting to Good

There’s an old adage that production managers seem to like to use when estimating a project or allocating resources. It goes something like this: “Quick, Inexpensive and Quality. Pick two of the three.”

Cost, Time, Quality Grid

(Image credit: Adam Polansky)

Strictly speaking, this isn’t even true. Sometimes you can have only one. There are always limitations with any project. There are always going to be trade-offs, and discovering what isn’t negotiable is part of the process of getting to good design.

That really boils down the design process to its essence. Good design is primarily about solving a multitude of problems: for the user, the marketing group, the IT group, the finance group and the design group.

The value of a design can be broken down to its parts — such as usability, usefulness, desirability, etc., but if it doesn’t solve at least one key problem that synchronizes what your users want and what you provide, it is doomed to fail.

Instrumental to solving these problems is making sure you honestly identify what the real problems are — asking the tough questions up front to make sure you don’t go down the wrong rabbit hole. This requires confronting the uncomfortable truth that you may be using one design method when you mistakenly believe you’re using another.

For Further Reading

10 Usability Heuristics

The Elements of User Experience (PDF)

User Interface Engineering

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.

February 8th, 2010
Posted by Cam Beck

Of all of the different tools we have to evaluate the effectiveness of a website, eyetracking is probably the most misunderstood and underutilized.

Eyetracking is the mechanism we use to observe and measure what people actually look at on a page. For individual users, they show what the order in which various elements caught their attention and how long they looked at a specific area.

This example from the Universtity of Minnesota shows in what order and for how long a single user looked at different objects on this page.

Figure 1: This example from the Universtity of Minnesota shows in what order and for how long a single user looked at different objects on this page.

Typically they also produce heat maps that demonstrate what everyone in the test looked at while they were on the page.

This example shows the areas where a group of users fixated their gaze most often (shown in red).

Figure 2: This example shows the areas where a group of users fixated their gaze most often (shown in red).

What people look at and consequently do is directly tied to what they came to the page to do in the first place. However, people don’t keep seeking until they are 100% certain they found the right answer. They typically stop at the first reasonably plausible one.

In general, the better your design is able to both 1) draw peoples’ attention to the area of the page that will enable them to complete their task and 2) enable them to recognize it as the solution to their problem, the better the page will perform at helping them accomplish their goals and make them happy customers.

So how do you know for certain that that they’re looking where you want them to look so that you can improve your design?

You could ask them what they look at. User interviews, focus groups and properly constructed surveys will help discover what people think. But for more reasons than can be discussed here, they are inadequate measures of behavior.

Site analytics measure behavior, but they don’t explain why that behavior occurred.

Professional usability lab studies explains the “why” question to a great degree – and I recommend at least a quick, inexpensive informal study (often several) for most projects – but it still requires interpretation. Eyetracking can help the design team understand, contextualize, visualize and interpret these problems.

How to Get Started
There are 3 general approaches to getting started with eye-tracking studies. Which one you choose depends on your goals, expertise, capacity, deadlines, margin for error and budget.

  1. Outsource
    Outsourcing is the ideal option for organizations looking to manage the performance of a high-value project that eyetracking can measurably help improve, if your team does not have equipment, time or expertise to conduct them.
  2. Bring it In-House
    Organizations that regularly build and refine websites should consider whether training and hiring in-house experts makes sense. The equipment and software can be obtained at a fixed cost (systems sell for over $20k), and in many cases incremental costs can be relatively low.
  3. Simulate
    If it could be shown that the human eye is typically drawn to certain objects with defined characteristics in specific contexts, accurately predicting what people would look at on a page is a matter of putting the right algorithm in a screen interpretation engine. Eyetracking simulation engine AttentionWizard is said to be able to do just that for static images. Its creators claim 75% correlation with actual eyetracking studies. This is partially because it cannot interpret the context of a specific task, but with prices for testing each image far lower than traditional studies, accuracy at that level may be worthwhile.

Limitations
Eyetracking doesn’t measure peripheral vision. Just because someone’s eyes did not fixate on an area, it doesn’t mean they didn’t see it or weren’t affected by it. Nor do they read minds. Just because it appears as though someone looked at something, it doesn’t mean they comprehended it.

This example from useit.com shows that users looking for the current U.S. population looked and fixated directly at the number. However, only 14% of users successfully identified it for what it was supposed to mean.

Figure 3: This example from useit.com shows that users looking for the current U.S. population looked and fixated directly at the number that answered their question. However, as Jakob Nielsen reports, only 14% of users successfully identified it for what it was. A closer look shows that users fixated on only the left part of the number, implying that they did not really comprehend what they had seen.

To answer questions you have about a Web product (be it a site, application, or some hybrid of both), make sure that the test actually measures what it is you need to study. Just as you would not use a stopwatch to measure the temperature in Hawaii, nor should you ask analytics, surveys and usability lab studies to measure what areas of a page draw peoples’ gaze.

No single research method measures everything, but in many circumstances eyetracking can be a good supplemental tool in your design arsenal.

Related Links
Eyetracking: Is it Worth It?
First 2 Words: A Signal for the Scanning Eye

January 11th, 2010
Posted by John Keehler

newyearhatNew Years has come and gone, and you’ve likely made a decision to work out more, or eat healthier… it’s always the things we know we should be doing, in the name of self-improvement. Why not consider the same for your brand? Here are three things all brands should be doing in 2010:

1. Create a Mobile Version of Your Website
We’ve been talking about mobile for a while, yet a surprisingly small number of brands have created mobile versions of their websites. With the iPhone pushing up mobile Internet usage dramatically, and new phones following the lead, 2010 will be a critical year to get your mobile website up and running. Here are a few things to consider:

Who’s trying to access you via mobile now?
Check out your website traffic statistics. You’ll be able to see the current number of visitors accessing your site via iPhone, Android and Blackberry. This is a good way to figure out which devices and platforms you should optimize towards.

What would a mobile visitor want?
Simply reformatting your website into a mobile-friendly version isn’t the right approach. Ask yourself what kinds of features and content would visitors find most useful if they were on the go?

2. Launch Your Facebook Page
Facebook Pages are free to set up in their most basic form, and even without customization allow your brand to provide a community for your most loyal fans. If you haven’t already set up a Facebook Page, 2010 is the year to start. You can always start free, and customize based on what your fans want. Here are a couple things to keep in mind:

Secure a Facebook URL
You must have 100 fans before you can secure a branded URL for your page, but it’s an important step towards driving traffic directly to your fan community from other media.

Cross-Promote Through Other Digital Channels
Use your existing digital channels to drive traffic first. Put a prominent link on your website and send an email to your customer database letting them know you’ve set up a Facebook Page.

Before You Promote…
Be mindful of how you conduct promotions. Remember Facebook just updated their promotion guidelines, and some of the “do-it-yourself” approaches others have adopted aren’t allowed.

3. Start Monitoring Buzz Around Your Brand
There are some simple ways to begin buzz monitoring without breaking the bank. If you find there’s a good amount of conversation around your brand, then 2010 might be the year to take the next step and build out a more robust buzz monitoring strategy.

Utilize Free Tools
There are many great free tools that can help you easily begin to monitor brand buzz. If you haven’t already, set up Google Alerts for your brand terms.

Twitter Buzz Tools
One of the best free sources to monitor brand buzz is Twitter. It can be as simple as setting up alerts for your brand name through a third-party app like Tweetdeck, or more thorough analysis through the use of a tool like Trendistic.

These three simple resolutions will help keep your brand relevant throughout the year, and on top of the new digital resolutions that are sure to come from whatever technology has in store for us this year.

October 9th, 2009
Posted by Cam Beck

night_of_the_living_dead_1

Home pages have historically been a hotbed of contentious debate.  Because of this, they are what Steve Krug called “The First Casualty of War.”

Why are they so controversial?

Because everyone wants a piece of the action. Because organizations typically work in silos, different departments feel slighted if their discipline isn’t “adequately” represented on the home page. One would think by all the name-calling and weepy eyes that the home page is kind of a big deal.

And they’re right. The home page is – kind of – a big deal. But not for the reasons people tend to get worked up about. After all, typically, only 40% of traffic to a website comes through the home page.

But as a consequence of their inability to set boundaries and priorities, they compromise the very purpose of the page. Every piece of real estate is up for grabs. The result of all the haggling may actually, as Krug suggests, kill the home page. But unlike a typical dead thing, it doesn’t go away. Like a zombie, it is reanimated into an unrecognizable abomination of its formal self.

You have 1/20th of a Second. Go.

The average time a new visitor (who comes to a site through the home page) spends somewhere in the neighborhood of 30-35 seconds on the page. User research tells us that people form lasting impressions of the quality of a website within 50 milliseconds.

That’s 1/20th of a second. It isn’t nearly enough time to process, well, pretty much anything except, apparently, a lasting impression.

There is one thing that can be processed in that amount of time: The presence or absence of clutter – the very thing that all the haggling over home page real estate tends to produce.

Like zombies, they also slowly suck the brains out of the user – making the home page manifestly harder to comprehend.

The purpose of a home page

To prevent this tendency, organizations and everyone who has a say in how the website is designed must realize what a home page is intended to do. A home page for a typical B2B or B2C site needs to do two things very well:

  1. Convey the big picture
  2. Speed people along their way.

Example 1: Hulu does an excellent job providing access to relevant video entertainment while minimizing noise.

hulu

This can be challenging for larger organizations that must communicate distinct messages to and accommodate the discrete tasks of many audiences – especially if they don’t have internal buyoff on priorities, or if they do not understand the purpose of the home page in the first place.

Example 2: Although improved from it’s previous version (on right), BravoTV still suffers from a significant lack of focus created by a failure to establish a clear hierarchy.

Bravo

These organizations ought not rely on the home page to have a message and support each and every task for each and every one of their audiences. That produces clutter, which is enough to form a lasting negative impression within 1/20th of a second.

(As an aside — contrary to popular belief, clutter isn’t the result of simply having “a lot of stuff.” Instead, clutter is  the consequence of failing to establish a clear priority and hierarchy. It is created, not by a multitude of objects or content, but by confusion.)

To serve all the audiences – even the important ones for whom the website was not primarily built – companies must ensure enough time and skill is applied to a comprehensive, consistent, and intuitive navigation – most of all from the perspective of all of the intended primary audiences.

Without a commitment to a process that recognizes that, they’re just tilting at the windmills – or worse – fighting a battle against a horde of undead without as much as a zombie survival guide.

Related Links:

Top Ten Guidelines for Homepage Usability
Don’t Make Me Think
How to Kill a Zombie

October 2nd, 2009
Posted by John Keehler

Google WaveIn anticipation of the first invites going out for Google Wave, earlier this week Shawn Scarsdale, a Multimedia Developer at Click Here, gave a great presentation to the agency to help us all understand this new platform. As of yesterday, the Google Wave invites are out, and already showing up on eBay. We thought this was a great opportunity to share what we learned and answer questions you might have:

Q: What is Google Wave?
A: How email would look if it was invented today… and much more

This was the simple challenge the Google Wave team started out with: What does email look like in the 21st century? The answer was Google Wave, where communication is collaborative, brings in the real-time aspect of instant messaging and the distribution of communication that social media has made ubiquitous. If you prefer the no-nonsense explanation of what the Google Wave is, watch this video.
Google Wave

Q: Why is Google Wave Important?
A: It competes with important platforms like Facebook and Twitter

The jury is still out on whether or not Google Wave truly poses a threat to Facebook and Twitter, but consider that many segments of the online population have already replaced email communication with instant messaging or social networks like Facebook. Google Wave is offering many of the same real-time communication tools. What remains to be seen is if Google can achieve the same scale as these popular platforms. They haven’t been able to do it with some of their other tools.

Q: What Are the Opportunities for my Brand on Google Wave?
A: Gadgets, Robots and Embeds

The folks at Mashable have one of the best Google Wave guides I’ve seen. Beyond the core functionality of Google Wave, the guide outlines three distinct categories of Google Wave features worth paying attention to:

Gadgets: These are fully-functional applications that are shared by a Wave. Most iGoogle and OpenSocial applications will work in Google Wave. An example of a Gadget would be a group poll application or games.

Robots: Robots are essentially an extra “person” in a Wave, but they’re not a person, they’re an automated “robot.” Think similar to the instant messaging bots you might be familiar with.

Embeds: The easiest way to understand embeds is that this is how you take a Wave out into a third-party website. Similar to the way you “embed” a YouTube video on any website.

Q: What Should I be Doing Now?
A: Follow the conversation, request an invitation and get your developers involved

There will be no shortage of conversation about Google Wave and possibilities over the coming weeks and months. It will be important to stay current on these conversations, as we’re likely to see some very smart folks dreaming up some very smart ideas on what Google Wave will eventually be. In the meantime, submit your invitation request, as Google tends to roll these out, well, in “waves.” Most importantly, have your developers or your agency’s developers investigating the Google Wave APIs.

I’m sure we’ll be posting about this subject again in the near future… I can’t help but think that even if Google Wave doesn’t replace email for the 21st century, it will certainly throw down a challenge for our communication tools to evolve, and for us to evolve with them.

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 9th, 2009
Posted by John Keehler

This week, Facebook announced the release of a new feature for those who’ve published Facebook Pages called the “Facebook Fan Box.” The new feature allows brands to promote their Facebook Pages in a much more interactive way on their other websites. A brief explanation of the new feature on the Facebook Developer Blog explains it as:

“A social widget that Page owners can add to their websites to allow users to fan and view the accompanying Facebook Page stream. With the Fan Box, brands can bring content from their Facebook Page into their website and help convert website visitors into Facebook fans. Users can view the most recent posts from the Page, see a list of other fans (including their friends), and, most importantly, become a fan without leaving the site. Additionally, if a user visits the site and isn’t logged in to Facebook, the user can log in and become a fan directly inline as well.”

Here’s a look at the Facebook Fan Box that the clothing retailer Threadless is using on its homepage.

threadlessfanbox

As you can see, the Facebook Fan Box allows you to showcase a few of the latest published updates you’ve made to your fan page, as well as a clear call to action for visitors to your site to become fans of your page. It also appears that some implementations will include overall fan counts. Learn more at the Facebook Developer Blog.

According to Facebook, it’s as simple as adding 4 lines of Javascript to your site. So if you’ve created a Facebook Page, this is an easy way to promote it and build your fans. The Facebook Fan Box is made possible by Facebook Connect, which is changing the way this popular social network interfaces with the rest of the web, and provides a powerful glimpse into the future of the web, where social networking isn’t a fad, it’s a pervasive part of everything we do.