Experience Planner

Here’s a link to the Flickr stream of the “I <3 Wireframes” group.
http://www.flickr.com/groups/ilovewireframes/

I particularly like Martin Kulakowski’s sketch. A lovely, hand drawn UI. Hooray for nerds!

Working on a site with a serious Flash video sequence… and I find myself referring back to Chapter 2: Flow in Web Design from Andrew King’s book Website Optimization.

I’m particularly taken with this quote:

“Mihaly Csikszentmihalyi, a professor and former chair of the Department of Psychology at the University of Chicago, pioneered the study of flow. He wrote that flow is the ‘holistic sensation that people feel when they act with total involvement.’”

And, this one:

“People who have experienced flow consistently report the same nine dimensions:

• Clear goals
• Unambiguous and immediate feedback
• Skills that just match challenges
• Merging of action and awareness
• Centering of attention on a limited stimulus field
• A sense of potential control
• A loss of self-consciousness
• An altered sense of time
• An autotelic experience

Flow depends on how we perceive our skills and the challenges at hand. We may feel ‘anxious one moment, bored the next, and in a state of flow immediately afterward.’”

The chapter goes on to break out “experiential” and “goal-directed flow,” and it goes on to say:

“Less-experienced users tend to see the web in a hedonic, playful way, while more experienced users tend to view the web in a utilitarian way, or a means to accomplish tasks. The authors found that telepresence/time distortion, exploratory behavior, focused attention, and challenge/arousal correlated with recreational web use, while skill/control, importance, and experience correlated with task-oriented activities, such as research, work, and shopping.”

Which to me is very interesting. I’ve long noticed that some people “play” with websites. They look at the layouts and how  “pretty.” Other people “engage” with websites. They’re actually interacting with functionality, leveraging features to do what they gotta do. Flow is giving control to the users, responding back to them, and providing outs and multiple paths.

King A. Website Optimization. O’Reilly, 2008.

Last April, I joined Todd Zaki Warfel’s seminar on data-driven personas at the IA Summit. In his presentation, he showed some really excellent templates for presenting persona data, which I frantically copied down. In fact, I’ve already used a variation on his template for one of my own projects.

But now Todd has shared the source files for his templates, which I highly recommend that you download. It includes the page layout in an InDesign file and an Illustrator file with his graphs. I’ve found the graphs to be particularly useful, since they’re really easy for clients and team members to scan and digest.

One of the most interesting notes that I remember from Todd’s IA Summit presentation was the amount and variety of data that should go into a persona. He recommends at least 3 sources, including a mix of qualitative and quantitative research. (e.g. in-person interviews + survey + secondary research on your target demographic)

In my own experience, I have to agree that this range of data is invaluable. When you have a complete, data-driven persona in front of you, you feel much more empowered to say that a new feature or design decision will actually improve the user experience, or drive more ROI. This confidence is good for both the agency and the client.

There has been an interesting overlap of topics between two of my favorite reading materials:

1. Seth Godin wrote about three ways to think about your audience’s background.

2. Jared Spool posted to the Interaction Design Association (IxDA) email list about his view of User Centered Design (UCD) and Activity Centered Design (ACD).

Seth is probably thinking about giving presentations, and knowing how much background knowledge your audience already has. (Should you explain what YouTube is? Does your audience already know what you said on this subject last year?) And here are his three options:

• Inquire. Ask some people in your target audience so you know what they do and do not already know.
• Assume. Make a reasonable guess about what they already know.
• Punt. Don’t ask or even guess. Just pretend everybody already has all the background they need.

His point is that too many people choose the third option, and end up missing a chance to connect with their audience.

Of course, this sounded all too familiar to me, since user experience professionals run into this question all the time. Who am I designing for? What do they need to know? What do they want to know? etc.

So it’s interesting that Jared Spool recently outlined 5 ways for UX professionals to think about their audience:

• User Centered Design. Discover at your audience’s goals, needs, and context before you design.
• Activity Centered Design. Consider only the activities or steps necessary for the design to function.
• Genius Design. People who have been designing for years, and have great intuition, can just follow their instincts.
• Self Design. Assuming you were the audience, what would you want?
• Unintended Design. This represents those who did not think about their design from anyone’s perspective. They just put down something they thought would work.

You can see an obvious correlation between the options Seth and Jared both put forward.

The clear takeaway is that, just like you would never give a presentation without thinking about your audience and what they need, you should never design a product (digital or otherwise) without thinking about your audience.

Thanks to the current emphasis on Design in business, we don’t see very many clients recommending Unintended Design any more. But I have seen clients try everything from Self Design to User Centered Design. And I can tell you that we always see better results as we move along the scale that diminishes personal bias and increases our user insights.

P.S. The discussion on IxDA about User Centered Design is actually really interesting (if you’re into that kind of thing). You can jump to my response or read the whole thing.

As anyone who has tried already knows, creating community is hard. But Christina Wodtke recently explained why it’s so hard in way I thought was pretty enlightening. She refers to Lewin’s Equation, which is…

B=f(P,E)
Behavior is a function of a Person and his Environment.

Wodtke goes on to explain that, as websites turn over more and more control and content to users, we have less and less control over the environment. Therefore, we have less control over how people behave.

So I thought I would highlight a couple of unique, innovative ways to use our limited control of Environment to positively affect user behavior.

Example 1: Mail Goggles
How often have you written an email late at night, mindlessly clicked “Send” and then regretted the email the next morning? Maybe it was filled with typos. Maybe it said something horribly offensive. Either way, you wish somebody had pointed out that you weren’t thinking and should have just gone to bed.

Thanks to the new Gmail Labs program, that kind of mistake can be a thing of the past. Google engineer Jon Perlow developed an add-on for Gmail called Mail Goggles, which cleverly stops you from sending email while your brain is off.

When you send an email late at night, it asks you a series of math problems (difficulty can be adjusted) that must be correctly answered before the email can be sent. If your mind isn’t totally sharp, it prevents you from hitting that all-important Send button.

Example 2: Audio Playback of YouTube Comments
If you’re not already familiar with the web comic XKCD, then you need to get up to speed. It not only jokes about internet memes, it creates them. In fact, it sometimes has a profound impact on the web’s most influential sites.

In this case, an XKCD comic illustrated what life might be like if YouTube required everybody who writes a comment to hear their comment said back to them before it gets posted.

The people at YouTube liked the idea well enough that it’s now a live feature you can try out. It’s not required like the comic joked, but it is the first button you see after writing a comment. Even before “Post Comment”.

The Future
Do you think this is what the future of influencing user behavior looks like? Even before these examples came out, people commonly pointed to sites that use an informal tone to influence user behavior. Maybe the secret to influencing user behavior is presenting it in a way that’s fun, lighthearted, and which people choose to engage with.

Note: For more thoughts on building websites so that users choose to engage with them, check out the Marketing with Meaning blog, written by Bob Gilbreath, the Chief Marketing Strategist at Bridge Worldwide. He regularly discusses examples of how marketing can be so good that people choose to engage with it. Good stuff!

Like most, I’ve gone through many a gadget. However, deleting this particular gadget was kind of a bummer.

I’ve had the Dictionary.com gadget for a long time, but recently they’ve added extremely prominent ad space to their once-fun widget. The ad space includes a large banner and a website address. It is in fact larger than the the word of the day. What an insult.

[UPDATE: While writing this brief opinion piece, I had to add dictionary.com to iGoogle. No ads... and an abridged definition was available upon mouse-over. Still, not as simple as the previous widget and so deleted.]

Part of the experience planning toolkit at agency X is our library of POVs. We’re a fairly new discipline, so a library involves both backfill and the ongoing development of POVs. It fills our infrequent periods of downtime, but they’re handy as the basis of rationale that we provide to our client partners.

So, my assignment is to write about scrolling. To me, an argument about scrolling has its basis in the fold. And the fold has its basis in print. And the dynamics of user/print interaction has very little analogue in digital.

So, quit worrying about the fold and learn to love scrolling.

Ok. So, that would be my POV, but it doesn’t sound very POV-y.

So, where is the fold? My associates and I optimize for 1024×768. Jakob Nielsen’s post “Screen Resolution and Page Layout” says that 60 percent of all monitors are set at 1024×768 (Nielsen 2006). That data is going on 3 years old, but still seems to be applicable. [Anecdotal: I recently have performed some in-home research and found that a good number of folks from all across the socioeconomic spectrum were using widescreen monitors. I hope people continue to adopt them so that I can optimize for 1280x1024.]

However, I would say that what makes the fold argument hard for me is that there is no set fold. The ClickTale Blog has a great post on scrolling. They’ve done quite a bit of data crunching and their finding is in “ClickTale Scrolling Research Report V2.0 — Part 1: Visibility and Scroll Reach.”

In the post, they talk about the fold being a:

“broadly dispersed distribution with three peaks located at roughly 430, 600, and 860 pixels. These peaks correspond to the three most popular screen resolutions used today: 800×600, 1024×768, and 1280×1024, minus about 170 pixels used up by the non-client area of the browser. In other words, depending on the screen size, users will typically see at least 430 and up to 860 vertical pixels worth of information on their screens when they open their site, without having to scroll” (ClickTale 2007).

[BTW, I'd like to thank ClickTale for this great info and their excellent graphs. Very cool stuff.]

So, in my actual POV I’ll go into that ClickTale data more, but for this web rumination, I’m going to focus on 1024×768.

While 1024×768 is a nice chunk of real estate, with the advent of the scrolling mouse, it’s only the gateway. During in-home research, I found that when I asked users to visit a website, most would wait for the page to load and then immediately scroll. Often, it was to get that dearly-paid-for logo out of the way. A site without much below “the fold” did not often elicit a positive reaction. Granted, the sites were supposed to be topic sites meant to be deeply informative about a fairly broad subject.

When asked to go to a site with a lot junk in its trunk, users felt that the site was far more credible. The site drew reactions such as “wow, there’s a lot of info” and “I’m going to bookmark this.”

At this point, I should point at that for me credibility is huge. My work is focused on healthcare. And, there’s a lot of healthcare info out there. A lot of it is junk. For example, marketing quackery such as salves and poultices that cure lung cancer. The websites I design must cover a lot of education and “value add content.” I don’t want to just market a product, I want the consumer/business transaction to at least benefit the consumer–I want them to be knowledgeable so that they can make the decisions that are right for them.

What I’ve learned over the years is that the more information you provide to the user (depending on the subject of course), the more likely they will be to revisit the site, to sign up for the email program, and to share it out with their friends.

ClickTale, in their post, concluded that “visitors scroll in a relative way — about the same percentage of page views will reach the middle of the web page regardless of the actual page height in pixels.”

In “ClickTale Scrolling Research Report V2.09 — Part 2: Visitor Attention and Web Page Exposure,” they answer the question: sure, users scroll and scroll and scroll … but what do they pay attention to? After all, I often scroll to the bottom of the page. But, what do I really focus my resources on?

According to ClickTale,

“Visitors’ attention follows a similar pattern for pages of different heights. It peaks both near the page top, at 540 pixels, and near the bottom about 500 pixels from the end of the page…attention decreases exponentially as visitors scroll down the page…page areas near the top of the page get about 17 times more exposure than the areas near the page bottom…[However,] the footer is important” (ClickTale 2007).

Now, this is where scrolling finally gets interesting. It’s an experience planner’s prerogative to say “it depends” and then fashion a custom solution for the problem/opportunity. So, for my sites (which focus on knowledge sharing), a nice hefty page with clear, scannable headlines and text and smart use of graphics can help create a compelling experience for the user. Remember, I’m not in a hurry to sell people stuff. My sites are long-term relationship builders.

However, for experience planners who are working on more promotional sites, this may not ring true. We can safely say: Nail the important message within the top 800 pixels. For users who need more information, provide it to them … you’re not going to lose anything, and you may gain users’ trust.

If you were to go to the iTunes App Store and drill down to Productivity, you might come across a very lovely icon. It’s a big, orange “2″ on a blue background (seriously, that 2 is pretty). The app name is compellingly enough, “Number Two.”

As those who know me can attest to, I will be inexorably drawn to #2. 

It’s called #2! I couldn’t wait to find out what it would help me do.

So, here’s the description: “Who is your Number Two? Your Number Two is the person you call second most often. This app is the simplest dialing app in the App Store.” 

Open the 99 cent app, and it immediately starts dialing your #2. 

Of course, for another 99 cents you can call that someone in your life that is more important than #2 with the app, “Number One.”

So, I experienced an interesting problem/opportunity recently.

I was working on a project to add community to an existing website. The client is in healthcare. If you’ve not worked in healthcare before, it is a highly regulated industry. For example, getting site content approved requires several rounds of review by several reviewers. It sounds tedious, but it isn’t bad.

So, adding forums and user-generated content represented a significant step… it will be a moderated community, but one in which the approval cycle is shortened to minutes and not weeks.

So, all in all, it’s an excellent step.

However, while discussing the interactions and experience during the wireframing process, two points were brought up by the marketers:

1. Why can’t people just write what they want without signing in or registering for the community?
2. Why should we let people upload an avatar? They might upload something “bad.”

I thought these were very interesting issues… particularly because they seem to counter the idea of community and specifically the community we were creating for our personas.

Issue One: Guests

The site’s personas rely heavily on peer to peer contact for shared wisdom. Personal knowledge of the person or an understanding that the person who is providing the wisdom is or has undergone similar experiences lends a high level of credibility to what they are saying/writing. Our research indicated that this expertise was extraordinarily important to our users.

The goal of this community was to foster online social groups through shared conditions and experiences. It’s hard to foster friendships and alliances with people who are not invested in the community, who are not in the community.

Issue Two: Avatars

Let me just first say that I don’t know that I want to imagine this community without avatars.

An avatar is a simple way of saying, “Hi! I’m a person.” An avatar is quickly recognizable and gives some indication of what kind of person you are. For example, a friend of mine’s avatar is a monkey and a banana smiling, with their arms around each other. The caption says, “BFF.” Goofy, yes… but hey, so is she.

Compare that to the default avatar: the gray silhouette of a woman. What about that says there is a person with a unique identity here? Does that convey credibility?

How It Went

Fortunately, we addressed the issues and were able to re-align as a group and move on. Yes, letting the people take the reigns of the dialogue can be nerve-wracking for brands in highly regulated spaces. But, ultimately, it can also be very rewarding.

The Challenge

One of my clients is starting work on a global redesign of their registration form, across every site they own. It’s a big deal, and it has the possibility of being very contentious. Multiple areas of the company have a vested interest in the questions, so we need to have a strong justification for every change we recommend.

The client is mostly concerned about getting the right mix of questions that let us gather good, useful information about our visitors without causing drop-off. But this is also a good opportunity to build in some usability best practices that have been missing.

Since our client is awesome, they agreed to run a test. We’re going to design 3 versions of the form, probably representing small/medium/long, and see which one hits a sweet spot in terms of gathering information without causing drop-off. We’ll run all 3 forms at the same time, randomly serving 1 of the 3 to each visitor who registers.

The Solution

Thankfully, Luke Wroblewski just published a book on web form design called… Web Form Design. I picked up a copy and read it during a few short plane flights this week.

In the interest of full disclosure, I should say that I saw Luke speak at this year’s IA Summit and even joined his lunch table discussion group, and I think pretty much everything he says is spot on. So I was predisposed to like the book. But it still exceeded my expectations.

For me, the book follows a perfect outline — exactly the format I want every professional book to follow. It deconstructs the issue of web form design into 14 discrete issues (e.g. “Help Text” “Inline Validation” and “Gradual Engagement”), and focuses one chapter on each issue. Then, within each chapter, he breaks out the various problems and solutions that he has observed within that issue.

The end result is extremely readable, and the content is very strong. Luke makes recommendations based on hard data, common-sense observations, and his own UX expertise. Also, the book comes with a digital version that links to a Flickr library of all the images he used. So it’s easy to take his work and repurpose it for your own presentations.

While researching, I also came across a couple of interesting articles on Smashing Magazine. They did their own research into the most common ways web forms are done. You can read Part 1 and Part 2 here. For me, it’s only somewhat interesting, since it’s reporting more raw data and less actual UX expertise.

Conclusion

I’ll update later with results from the form design project. Stay tuned.

In the mean time, let me recommend a site I just found called Wordle. You can enter in any text you want, or paste in a URL, and it will create an attractive word cloud based on the words in your text! You can even customize the appearance of the cloud. It’s kind of fun, but it’s also useful if you want to quickly pull out the words most commonly used in a source file.

I pasted in the text from Web Form Design and here’s what I got: