There are many types of usability tests, moderated live tests, wizard of oz test, remote moderated test, and automated un-moderated test for example. So what makes automated testing unique? It is one of the few types of usability test that doesn’t require a moderator.  Instead, the test is created and then sent out through various means to multiple people. Each participant takes the same test, much like they would an online survey. Then once the testing period has ended the facilitator closes the study and reviews the results.

This is a great method for answering specific questions and measuring task success without the need for the extensive scheduling and recruiting that goes with live moderated test sessions. In addition, many of the application available will do most of the metrics and results analysis on your behalf.

However, you can’t just jump in and ask questions and expect good results. As with any test, careful preparation is required. Tasks must be vetted, recruiting methods determined, and question makeup analyzed in order to remove bias, ensure actionable results, and organizes a representative audience.

These slides briefly discuss some of these points. They were accompanied with a live demo when they were presented, but for those interested I recommend checking out many of the sites that offer free demo versions like Loop11 to get more acquainted.

Hard Fun
Hard fun is comprised of challenge and mastery and is all about the reward. It typically involves high level of frustration that leads to a strong feeling of personal accomplishment once overcome. It’s about how you feel throughout the process, and what you gain from play. Learning another language is very hard, but sites like LiveMocha and smart.fm can provide that feeling of accomplishment and reward once you’ve mastered the different levels.

Easy Fun
More about “exploration and role play, storytelling…”. The fun of using your curiosity to simply seeing what you can do and enjoy a game or task without a defined score or end point.

People Fun
This engagement is about social experiences bonding that takes place when people are pulled together through emotion. Bonds can be amplified by laughter as well as reciprocity when games allow you to give and receive “tokens”. It’s about actions and connections, and a lot of it is motivated by social influence. Social media platforms like Facebook and Twitter are good examples.

Serious Fun
Serious fun is about fun that ties into the real world, our personal values and motivations. . “Were using the fun of games to do real work often”, for example flight simulators and eco-games. Games that motivate us to accomplish a real goal like losing weight with Wii-Fit.

She points out how the most successful games tend to have at least 3 of these elements, and the most engaged players experience 3 of these types of fun in just 20 minutes of play. I challenge you to look at your website, or application and think about how motivation and game like fun could be tied in to help make your users more engaged.

References:

• Why We Play Games: http://www.xeodesign.com/xeodesign_whyweplaygames.pdf
• Big Think Experts: Nicole Lazzaro: http://bigthink.com/nicolelazzaro
• Smart.fm: Developing a Great Experience: http://www.adaptivepath.com/blog/category/smartfm/

“Oh crap, I didn’t mean to do that, I hope it didn’t send an email to all my subscribers”. I then went on to check my email, and sure enough a new post update had sent out right on cue. Unfortunately, my post was far from ready. So I immediately looked for an option to un-publish, that I hoped would stop the email link from working. Much to my dismay the un-publish button didn’t seem to exist. So I employed a crafty little workaround, and copy and pasted my post content into a new post record, giving it a new URL, and deleted the original which then “broke” the old URL that was sent out.

After all this I still blamed myself. “Geesh Lauren, you should really have known better!” …but then it occurred to me, while some of the responsibility was indeed mine, it was not ALL my fault. Take a look at the screen shot to the right. This is what the action buttons for the page look like while I’m working on a new post.

There are a couple interesting things happening here:

Existing WordPress Publish Container

1. The Delete action has been made secondary to the Publish action. It takes up less visual space, has less contrast than the white “Publish” text on the dark blue button, and the text is not bold. The Publish button is definitely the clear winner. In fact the Publish button has the highest level of contrast, and visually pop’s from the page more than any other element anywhere, not just in this publish box.

2. The Edit links which allow you to edit the settings for the post are presented as blue links that open options panels. The blue links have a clickable affordance but almost fade into the background until you go looking for them. They are very close in proximity to the bold black text next to them, and don’t really stand out from any other area on the page until you focus on them.

3. The Save Draft and Preview buttons are given the rounded button status, but no color. In fact the rounded button status almost does nothing to call out these buttons aside from outlining them. The text is still dark/gray black, and only Save Draft is given bold formatting. In addition, these buttons are placed at the top of the Publish container, even though the primary Publish actions is at the bottom. These buttons are given nearly a lower priority than the Delete link. Even though the Delete link isn’t a button, it has the advantage of color contrast and proximity to the primary action on the page.

4. Once you Publish, if you have an email alert tied to your post there is no way to cancel out of the action.

One Possible New Design

Looking at all of these things combined, you can see how the interface is partly to blame for this mistake. In a editing workflow where it is typical for an individual to write in multiple sessions, or work on drafts the interface should highlight the Save feature. You cannot make a mistake by saving. Until you leave the page your actions are still reversible by a simple undo. Yet this is not the primary action being visually identified. Instead Publish, the irreversible action is given top priority. By simply rearranging the visual impact of these buttons and placement, this form could have helped me to avoid this mistake.

What does your homepage say about you?
What if in each of those examples, each of those locations all sold the same one product, soap. Which place would you want to buy your soap from, and how much would you be willing to pay at each of those places? Even if each location is just a warehouse in real life, which feeling, which brand, which type of storefront do you want your customers to “see” when they look at you online? Are you a low-price all in one shopping center, or a one-of-a-kind hole in the wall trinket filled treasure?

The inspiration for this article comes from a great post by Seth Godin entitled Telling a story on the label. In his post, he talks about just that, soap. But not just any soap, instead a particular bottle of AHAVA soap that tells a story. That reaches out to the customer and says “I’m fascinating, unique, luxurious, rare, authentic, and worth the extra $17.”

It’s about the perceived experience.
We pay for the experience. For a story that we can think of every time we see the product, a story that reflects on the way we want to see ourselves. The most important thing to remember is that it is usually the little nuances, the details that make the story important. What is your online storefront saying about you? Does your customer’s first impression match the brand, the story, you’re trying to convey?

Here are a few examples of different online storefronts, continuing with the soap concept:

The Luxury Store

The Quaint Boutique

The One-Stop Shop

The Warehouse

Ways to Reduce Choices

Simple, help them make a decision by reducing the number of options they have to chose from. Well, it’s kind of that simple, there is a wee bit more to it. For example, if you reduce your product offering, how are you going to get the customer in the door in the first place? Unfortunately the answer is, you probably won’t. Well, that is unless you have one or two really super star products that keep your doors open.

Market Your Range of Features
So what’s an entrepreneur to do? Market to people with your features, your expansive product line and all of your fancy options and add-ins. Pull them in the door with awe and wonder knowing that you are there one-stop-shop solution. But, and this is important, once you get them in the door you need to reduce the number options. Research shows that we are attracted to the idea of options, but when it comes down to it, the more we have to chose from the less likely we will be to make a choice at all.

Narrow The Options
How can you do this? Think filters, grouping, categories, classes, levels, etc. All things can be categorized, get out the organizer in you and find a way to seemingly reduce the number of options so that your customer is more likely to make a choice. Our working memory can really only process about 4-6 things at once. That means in our heads we can really only compare about 4-6 unique items at one time assuming we are giving our full attention (which we rarely are). So this is a good number to shoot for.

Clear Separation of Choices and Recommendation,
Bonus: Social Impact Ratings

Now, let’s say you are providing your customer with 5 distinct options. That should do it right? Sorry, not quite yet. You have increased the likelihood that a choice can and will be made, but there is still a little more you can do. By providing a recommended option you again increase your odds that a decision will be made. In addition, if you can provide social proof to back up that recommendation (think customer ratings, # sold, testimonials, etc…) then you can help answer that little question in most everyone’s heads when making a decision…”what would you do?”.

Summary
So how can you entice users to your product or service through a range of options, but still close the sale by getting them to commit to a choice? Reduce the number of options. While options may bring people in the door, you also need to provide a way to filter those options down to a manageable list to aid in the decision making process. Keep in mind that our working memory can really only hold about 5 items at a time. If your presenting me with 10 choices it’s going to be impossible for me to evaluate them all without narrowing them into at least two sets of options first.

Additional Examples

The examples shown are mostly price plan screen shots, but keep in mind the principles above persist anytime you are asking your customers to choose between many options.

Provide a Recommendation

Make Choices Clear

Bad Example:
Sprints Calling Plans

This site is called SpeedyMarks. It’s a visual bookmarking site that allows you to bookmark a webpage then view retrieve it here visually. I really like the idea, although I don’t think I’ll end up using it unless I can tie it into my existing list in Google bookmarks.

In addition to having a cool idea on ways to handle bookmarks though, I found they also have a great way of handling user preferences with color. A simple drop down list that allows you to choose amongst a predefined set of colors. Each then sets a monochromatic theme based on the chosen hue. It’s simple, easy, doesn’t get in the way, and just works. A perfect example of a delightful, usable feature.

Originally uploaded by cshorechica

Motivation for throwing away your trash.

Make the activity in and of its self enjoyable. Think for example about recycling, and throwing away your trash. Sounds like a socially extrinsic motivation right? Well what if we make it fun to throw away your trash?

See the image to the right. I came across this while snowboarding in Ohio (yes, you can snowboard in Ohio). One of the major audiences of a ski and snowboard park like this is teenagers. Teenagers who are too cool to follow the rules, and like to litter. However, if you place a hoop over a trash can suddenly throwing away your trash becomes fun. When your riding the lift and find yourself with trash in hand, waiting to score a slam dunk becomes more fun then throwing your trash on the ground. Win-win.

These same principles can be applied in websites to motivate behavior. It can be done in subtle ways to get the user up to speed as shown in the Wufoo screen shot below. Here the user has just created a new account but has not yet made any forms. To help avoid drop off Wufoo cleverly reaches out to you and entices you to get started. This is certainly more motivating than if they had presented a blank page with only the tiny “New Form!” button at the top right.

Another example is profile progress indicators. These are used in sites like slideshare, linkedin and facebook to keep people from signing up, and then never committing. By using progress indicators to show levels of profile completeness they show us visually that we have left something unfinished. We naturally strive to complete things, and seeing this bar only make it a tiny way across makes us want finish it. Then as long as the website clearly tells us what we need to do to move the indicator, we will be intrinsically motivated to take those additional steps for the reward of seeing the progress move closer to its end.

What types of things can you do on your website to motivate? Some examples are to set challenges. Keep in mind, for a challenge to be motivating you must show someone’s progress, set clear goals and expectations, provide feedback and allow experimentation. Finally, you must give the user a sense of completion when the challenge is finished providing a feeling of reward and recognition. Challenges can also be motivated through competition. This can be done simply by making challenge public so that participants are socially motivated in knowing others can see their progress.

Wufoo – Getting Started.

Slideshare Profile Progress Indicator

Knowing what your customers do and don’t like, and how they feel about your products. On top of that, when you make this information public it has a persuasive social influence factor that can affect others who read those reviews and their opinions of your service or product. This is why amazon uses reviews, they know if 5 people say thing 1 is good, and 5 people say thing 2 is bad, even without knowing those people you will buy thing 1 over thing 2.

I was pleasantly surprised to see all these factors at play the other day when checking out the Foodspotting website regarding their new app. I was disappointed to see that it wasn’t available for Android phone users and looked for a way to request this. This is when I found the “Feedback” link.

This link is provided as a service to the site through GetSatisfaction.com. It opens a feedback panel that I found designed particularly well. Not only could I read other ideas from the community (including seeing the idea I was about to post), but I also had options. I could chose how I gave feedback, whether it was to share an idea, a question, a problem or simply praise for the site. My favorite part however was under the “Add more details” drop down when they asked how does this make me feel.

How does this make you feel?

It sounds so simple, but it is so powerful at the same time. It says not only that your feedback is valuable, but that the company is genuinely concerned with your feelings. It says “We care about what you think, and you are important to us”. And who doesn’t want to feel important? It plays to our core of wanting to be recognized, appreciated and heard. In return for their genuine concern, we then feel better about, and more inclined to, return the favor by using their product or service over a competitor who we don’t feel cares quite as personally about our feelings.

It reminded me how important it is to visually display information. It took me weeks to try and craft into words the way the Cinematch engine’s algorithms worked. How the movies you rate are compared to how others rate movies, based on the types of movies that both you and another member like. Then how these ratings, and your shared tastes are collected and dumped into complex algorithms that can predict rather accurately what you will think of another movie you have not yet seen.

While it sound somewhat simple on the surface, there are many complicated issues to be handled. What if you rated a chick-flick you may have normally liked very poorly because you just got out of a bad relationship. What if you were having a really good time with friends, and rated an otherwise terrible movie 5 stars? And what about those cult classics like Napoleon Dynamite, that no one can seem to predict no matter how common your movie tastes? These had to be handled too.

All of these complexities can be hard to explain. It takes real work, cognitive spatial work to try and map out these relationships in your head. Not only the connectors that network the movies together, but the strength of those connections as well. Yet, with all this complexity one graphic sums it up brilliantly. It takes very little effort, and even less explanation. It is presented right in front of you requiring almost no work to put the pieces together. This is the value of presenting information visually.

1. Visual Call to Action
Get your visitors attention on your website’s goal.

• One primary action you want your visitors to take.
• Use contrast and size to catch attention.
• The action text should be clear and obvious.
• Located near the top of pageabove the fold.

2. Organized Layout
Importance based structure and scan-ability.

• Convey information about what’s important.
• Lead the user into content there looking for.
• Improves scan-ability.
• Use header tags (h1, h2, h3, etc…) appropriately.
• Provides visual breaks, groups, and chunks.
• Use alignment, date, subject, etc to create sections.
• Size and color to convey priority and importance.

3. Accessibility
508 Compliance = websites should work for everyone, that includes people with disabilities.

• Use ALT tags on images for screen readers
• Ensure HTML is ordered by hierarchy.
• Improve readability for those with low-vision through size and contrast
• Options to increase font size
• Avoid pop-ups
• Use proper input-field/labeling
• Don’t use color as a sole indicator for differentiation
• Design for smaller screen sizes, then scale.

4. Affordances
Indicate where you can take an action.

• Links should not be the same color as your text
• Buttons should appear beveled or have a hover to differentiate them from plain graphics.
• Form items should be grayed out if they are not clickable.
• Mouse icon should change to indicate when something is clickable.
• Textures and patterns can imply grips when things can be dragged.

5. Assistance
Don’t leave me hanging, give me some help.

• Provide an FAQ or help section
• Try to avoid allowing errors, but when they occur explain:
• What’s wrong
• What you need from the user
• How they need to do it
• Instructions should be clear, specific and to the point.
• Provide good defaults and constant feedback.

6. Real-World Mental Model
We throw things away in the trash, we do not re-allocate disk space.

• Avoid fancy, industry, or techie terms. Use Layman’s terms.
• When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase.
• Design concepts to be consistent with how they work in everyday life.
• Similar in functionality, language and appearance.

7. Keep it Simple
The simplest explanation or strategy tends to be the best one –Occam’s Razor

• 80/20 Rule
• Avoid excessive text or explanation
• Forms shouldn’t ask for unnecessary\additional information.
• Reduce clutter, and appreciate white space like a pause in a sentence.
• Be upfront, clear, and to the point. The rest is unnecessary.
• Focus on the core goals and tasks.

8. Suitable Graphics
We tend to look at smiling faces, and products. Our eyes seem to jump over the rest resulting in just more stuff on the page we have to get past.

• Put thought into your graphics.
• Stick to a color scheme.
• Avoid overly generic clip art just to add to the page.
• Every image and graphic should have a specific purpose.
• Stick to a themeor consistency in appearance. (all sketchy, or all photos etc)
• Focus on your product or offering.

9. Navigation
Where am I? Where can I go?

• Take advantage of standards, and place the navigation near the top, or down the left side.
• Clean, clear, simple labels, easy to read and see.
• Highlight the visitors current location vs. other locations.
• Provide feedback when in sub-levels as to the visitors location and how to get back.
• Should be easy to see how much information the site offers, how deep each level is.

10. Delight
There’s just something fun about this.

• Once you have everything else figured out, add a smile.
• Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc.
• Little fun interactions used sparingly.
• Take the user away from the mundane.
• Pleasant surprises.