His take was that utilizing the PowerReviews branded “star system” gave customers a greater sense of trust because they recognized this review feature across sites.  From a design perspective, we maintained our point of view.  However, the bigger conversation prompted the questions what is the purpose of reviews and how much does it matter that they maintain their own identity in order to provide better reassurance versus fitting well within the site design.

Fast forward to this week and Google’s announcement regarding their deal with PowerReviews and the option for users to now select Ratings and Reviews as a filter when searching for products.  Internet Retailer estimates that PowerReviews currently works with approximately 1,000 online retailers and almost 3,500 websites.  With this type of adoption and now with everyone’s favorite search engine giant jumping on board, the question becomes should retailers stick with the “star system” PowerReviews provides and maintain a slightly separate identity from their site, or continue to try and brand these product review systems as their own?

Now take this back to the client we were discussing.  Does his average customer find this review system more credible because they recognize the PowerReview system on his site from other online stores and therefore finds these reviews more credible?  How does this help or hurt the overall branding of the site?  Does the online shopper really care?

As we have seen, eCommerce remains a constantly evolving experience.  But, despite the nature of change in this business, maintaining some familiarity is the key to adoption.  Just as we would never encourage someone to change the colors of some of the top assurance badges (because users recognize them), maybe there’s an argument to setting aside brand with Product Reviews and Ratings as well.

Sounds like a great testing opportunity if you ask me…

The Simple Desktop Background

You have undoubtedly come across some of the thousands of websites devoted to distributing desktop wallpaper images.  Visitors will find images ranging from scenic photos to unicorns in flight to abstract designs and everything in between.  After using many background images over the years I have come to find a trend among the ones that I particularly like: the simpler the better.  Backgrounds that have less visual clutter allow icons to stand out more and are easier to navigate.  They also make it easier to distinguish between layered windows and applications.  So what, you ask?  Well, the same holds true for web design.

Making Your Content Pop

When designing an interface that is meant to move the users eye from message to message, contrast is of primary importance.  Contrast can be achieved in many ways, with changes in size, line, hue, value, color intensity and so on.  To draw attention to the focal points of your design they must stand out against their background.  In keeping your site’s main background elements in the background by keeping them uncluttered and relatively subdued, you give your content a better opportunity to stand out.

Notice how elements such as the navigation, buttons, and text when placed on a subtle background stand out and draw the users eye in the eFootWear shopping cart:

On the flip side, the following site features a busy background which only serves to distract the user from the content rather than focus on it.  While this design is certainly over the top it illustrates the point well:

Of course there are exceptions to the rule here.  A busy background can serve to accentuate an uncluttered element that rests above it.  Such is the case with My Mascot where the content resides in a white container on top of a detailed wooden texture background.  This works because the contrast between the highly textured background and the flat white background makes the content rise to the foreground:

Remove the white container and the content fades into the background and the texture become the main focus.  Here you can see just how important the background can be to a design:

If you are a Designer this concept should come as no surprise, but it is helpful to see it in action outside of web design using your own desktop wallpaper as an example.  Even if you aren’t a designer you can experiment with this concept by playing around with a few desktop wallpaper images, both busy and subtle, and see how much of a difference it can make in usability.  Afterwords you might think twice before choosing that Jackson Pollock painting to “Set as background image.”

1. Provide All the Information
I am impressed by how many websites don’t provide their menus or hours online. Checking a menu or checking the restaurant’s hours are the number one and two reasons why people visit a restaurant website. Oh, you managed to have a professional photographer take photos, upload them to the site, and write captions, but you can’t tell me if you’re open past 10pm on a Thursday night? Sure, I might call you to find out your hours, but not if I have a second or third choice for dinner whose websites I can skip on over to. And who really calls to ask about the menu? Do you really want your staff occupied taking these phone calls?

The point of your website is to give potential diners information. Yes, photos, history of the business and chef, etc. is all pertinent information, but it’s second tier when compared to the menu and the restaurant’s hours (and location). Don’t forgot to include this information, and don’t forget to make it easily accessible—hours on the homepage, and a link to the menu on the homepage. And if you must use a PDF for your menu–alert the visitor. Opening a PDF can crash browsers on older computers, and there’s nothing more frustrating than to click on a link and have a browser crash (a good reason to avoid PDF menus all together.)

2. Be Relevant
If there’s one thing the internet is good for, it’s up-to-the-minute updates on just about everything. This is why it is a cardinal sin to have a menu online that’s not in season. Okay, your menu changes daily, but you don’t have the time update the website daily, that’s forgivable. Just make a note that says, “Our menu changes daily, here is a sample of our typical menu. Please call us if you have any questions.” And don’t forget to date the menu with at least the season or the month. Don’t think because it’s not labeled, your visitor won’t know it’s old.

It’s nearly May, and on a nice day it’s almost 80 degrees F, I don’t want to be reading about pumpkin gnocchi in some heavy, cream sauce. Every chef and restaurateur spends hours, days planning a menu. Don’t let your menu do a disservice to your business online. Update it at least seasonally or whenever any major change takes place – including any change in price! No diner appreciates that little surprise, and it could even be viewed legally as false advertising.

3. Build Your Brand
Some restaurant websites go off the deep end when it comes to recreating the restaurant’s atmosphere online. While other restaurant websites look as though the owner’s nephew hacked together something in Microsoft Office. A restaurant website should absolutely reflect its company and branding through and through. And that usually means having it professionally designed. Do you want the owner’s nephew making your dinner? Do you want your online visitor to think he did? A fine dining establishment should have a refined and sophisticated website design. Even a low-key bar can create a cool web presence with a grunge design. The internet is your opportunity to reach an audience who might not normally step foot in your restaurant.

I’ve visited many restaurant websites, and granted I haven’t visited them all in real life, but at least I have noticed them. They are present in the back of my head as potential places to go for certain occasions. Or when someone else mentions how good the restaurant was, I can reply how good (or bad!) their website is! Your online presence stretches much further than just your patrons. Make sure it’s a positive one.

4. Keep Distractions Minimal
Oh the music. Restaurant websites love music and they love Flash. I like to think that when I walk into a restaurant your hostess isn’t going to scream at me. That’s essentially the equivalent of playing music when a site loads when I haven’t requested that music start playing. If you absolutely MUST have music on your restaurant site follow these rules:

Short music clips or sounds work much better than full songs on repeat. Eventually, what was a pleasant surprise (hopefully) becomes tiresome to the user as they browse your site for what they’re really looking for—information. Woodberry Kitchen is a site that chooses to play background sounds/music. I think the site would be lovely without it, but they chose smartly using background music – just as it would be in real life – to enhance not overshadow the website.

5. You Must Socialize
You’d have to be living under a rock to not realize that there is a food revolution going on in America. From eating healthier to eating local, from dressing up the simplest foods to simplifying the most expensive, from picking out a farm to picking a chemical reaction, from televisions shows to movies to books, the average American restaurant diner loves food. And not just the food itself but everything that it means. And almost more than anything, food represents coming together, socializing. If it’s appropriate to your brand (and it probably is) you need to be interacting with your loyal diners and potential diners online. You have to constantly remind them of your existence.

Through e-mail lists, Facebook, Twitter, Four Square and Yelp, you should be telling your customers about happy hour specials, giving loyal customers discounts and generally creating buzz about your food! Not to mention it’s an excellent way to monitor the good and the bad about your restaurant. I’ve tweeted about how much I enjoyed my entree at a certain restaurant during Baltimore’s restaurant week (as well as the great service I got!), I’ve also tweeted how I wish restaurants would have more/better vegetarian options. That was a direct opportunity for a watchful business to tweet me directly and suggest their vegetarian dishes. The other great thing about all this online socializing? Virtually all of it is available for free.

I hope this helps you avoid some potential pitfalls when creating a restaurant website. These are basic, but can easily get overlooked when the owner wants more “wow” factor or when the owner doesn’t give the site a second thought. Your restaurant website is a powerful tool to keep your afloat in any economy. Use it!

Mentioned in this post:
Meli : Provide All the Information
Joe Squared : Be Relevant
Clementines : Build Your Brand
Talara : Keep Distractions Minimal
Woodberry Kitchen : Keep Distractions Minimal
Miss Shirley’s : You Must Socialize

Penzo and his colleagues attempted to replicate Wroblewski’s set-up. In doing so, they tested expert users (designers, programmers & usability testers) as well as novice users (the specific numbers of users not provided). They had the test subjects fill out multiple forms and they recorded the “gaze-path” data from the start of movement [assumed] until the submit button was clicked.

They had four scenarios:

1. Left aligned labels to the left of the input fields
2. Right aligned labels to the left of the input fields
3. Left aligned labels above the input fields
4. Bold labels above input fields

The image below shows the mapping of the eye movement for scenario #3—left aligned labels above the input fields.

The findings were much to be expected:
(FYI: A saccade is a fast movement of an eye, head or other part of an animal’s body or device. Saccades are quick, simultaneous movements of both eyes in the same direction.[Wikipedia])

• Left aligned labels had the slowest saccade time: 500ms for all users
• Right aligned labels had faster saccades times: 170ms – expert; 240ms – novice
• Top aligned labels had the fastest saccade times: 50ms – all users [assumed]

It’s important to understand this because the less time a user spends having to visually comprehend what they’re doing, the faster and easier it will be for them to complete the form. Making it more likely for a user to complete the form—crucial for website owners trying to get a lead or complete a sale.

But what about the bold labels atop the input fields? It turns out bold labels left-aligned above input fields had a 80ms saccade time. Yes, bolding the fields increased the saccade time by almost sixty percent. Penzo suggest it is because “there was more visual confusion between the bold text and the heavy adjacent borders of the input fields.”

Before you run out to remove the bold formatting from all of your forms consider this: In the study, the test form had no other visual elements on the page to distract a user. Similarly, there were no required/optional fields to the form. Bold formatting is a conventional way to denote a required field. Note: I did not say the BEST way, just a common way. It’s possible that a form with required/optional fields would have evened the playing field (and saccade time) between plain vs. bold fields. This would be a great thing to test. Would a 30ms difference affect cognition or conversion?

Penzo also concludes, “you might want to style the input fields not to have heavy borders.” It wasn’t just the bold labels that visually hindered users; it was the bold label in conjunction with the heavily bordered field. Don’t assume that changing one element of the problem will instantly create a positive change. Test it.

I definitely recommend reading Penzo’s full article as there is an additional interesting bit about the drop down boxes used in forms and eye tracking.

Sources:

Penzo, Matteo. “Label Placement in Forms.” UXMatters.com. 12 Jul 2006.
Wroblewski, Luke. “Web Application Form Design.” Web Form Design: Filling in the Blanks. Rosenfield Media. 2008. LukeW.com.

Without further adieu:

Depending on where your eyes naturally go (and I’m sure Google has considered this), you’ll probably notice changes immediately. What I notice first is the new left pane.

Left Navigation

On the left is a group of filtering options that offer many of the same options that are available today via the “Show Options” link. With the new design, Google has put more thought (and real estate) into these “modes” of search. After extensive testing, Google and its search team agreed that a three column design provided the user with the best experience. The three column design is not new for search. Bing and Ask.com both utilize the three pane approach.

This new left column provides a more intuitive way to navigate through results than the current solution. Currently I have to either open up the “Show Options” pane or head up to the top navigation (which now becomes somewhat redundant) to switch between “modes.”

The new left pane also contains suggestions, date filtering, and additional search tools, which would likely send the user to tools like the wonder wheel, image spin, fast flip, etc.

The big question about this new addition is how it will influence users on smaller screens and mobile devices. Marissa Mayer, Google’s VP of Search Product and User Experience, states that changing the feel of desktop results is the first step, and believes the left navigation will not impact how users interact with the search results in the middle pane.

As for that redundant top navigation bar, Mayer says the team will revisit its approach next year, though they’re all pretty happy about how users interact with it in its current state.

Search Bar and Logo

Another rather significant change can be seen in the top 15% of the screen.

The search button is now found within the search bar and sports a more eye-catching blue design. Google’s goal here is almost certainly to encourage more new searches and filtering. After all, every new search is another chance for a user to click on a paid advertisement. On an eCommerce site we optimize elements to keep the user on site, increasing metrics like time on site or average number of pageviews in an effort to create more opportunity to grab that conversion. Google’s strategy here is not much different at all.

A longer search bar and larger, softer colored Google logo are a reaction to the changing landscape of its users’ computers. Larger, brighter screens provide Google with more real estate with which to make their mark.

Google Responding to Competition

You’d have to go back pretty far to find a change this substantial to Google’s flagship product. With Bing making strides and social networks dominating user’s habits, Google is making efforts to stay ahead of the curve. Danny Sullivan reports that the new SERP will go live to around 3% of Google’s users tonight, with a full roll out early in the new year, assuming all goes well with testing.

What is credibility?
Credibility is a perceived feeling by a user towards a website. Credibility is the combined perception of trustworthiness and expertise. There are other areas of credibility but trustworthiness and expertise are the major identified aspects in credibility research.

Do you trust the information as dependable? (Trustworthiness)
Do you accept it as true? (Expertise)
Do you believe it as true? (Perception)
All signs point to credibility.

Study #2 [What] and #3 [Stanford] used the data of about 1,400 web users, Americans and Finns, to compile a credibility chart with varying variables that affect credibility positively and negatively. Before I get into the chart, here’s a little more about the demographics:

1. The median age was 33 years
2. 44% were female, 56% were male
3. 42% were Americans, 58% were Finns
4. Average education level was “some university”
5. Mean income was $31,459
6. Mean years on the Internet: 3.7 years
7. Mean number of purchases online: 1 to 5 purchases
8. Mean number of hours spent online in a week: 13.9 hours/week

Here’s the chart:

And here are some highlights [Stanford 8]: (because you probably can’t read that image)

Take note of the actions that positively influence credibility in the greatest amount—look familiar? They should, they are all things you would be doing if your website was a brick and mortar store:

• Quick customer service
• Physical address and phone number listed, e-mail provided
• Site (store) arranged in a way that makes sense. (I promise you, grocery stores put a lot of thought into layout to make you buy more. They really direct how you move—produce first, bakery, meats, winding through each aisle, then to the dairy and frozen stuff. Navigate your users online too!)
• Professional design
• Recommended by a friend or news media outlet
• Emails confirming transactions aka receipts

People are already familiar with shopping. Our entire culture is based on consuming. There are many subliminal messages involved in shopping, so don’t forget to shift those attributes to your online store to increase its credibility.

Also notice how many of the top items (1.0 and above) reflect truthiness (yeah, it’s a word) and expertise—the two defining principles of credibility—such as location, phone numbers, contact information, receipts, information backed up by sources, being regularly updated, etc. These items all seem to be void of bias, untruths, and agenda. Or rather, these items are informational not selling points. And because they’re not selling points—like free shipping with its questionable asterisk, or a live chat representative who we can only assume is a salesperson—they get overlooked when creating an online store.

In fact, having a commercial purpose brings down your credibility (-.3) [8]! The minute you say you are selling something or promoting something, people think negatively. Understanding this is very important, because it’s going to influence how you choose to persuade your visitors.

Most of the things that lower credibility make sense. (Pop-ups? Of course that’s a negative.)What is surprising is the degree to which they negatively impact the user’s perception. Sure, a broken link is a -1.4, but a typographical error (e.g. a spelling mistake) is -1.3 [8]. Wow. I mean have you combed through every page of your site to check for teh instead of the?

Study #3 [Stanford] recommended six design implications based on the study:

1. Add value to each web visit [13] – First and foremost, it’s about customer service. Sometimes, when people focus on the user experience, they get wrapped up in all the flashing and blinking things the web can do that they forget the basics such as quick customer responses, consistently updated content, contact information, search capabilities, etc.

2. Guard the integrity of your content [13] – The big failure here were sites that didn’t separate their editorial content from the look of the ads. Trying to trick your users, or allowing your advertisers to try to trick your user, is definitely going to push your site down the scale. On the upside, people “accept commercialization to an extent” and that well done banner ads can even enhance perceived credibility [What 67].

3. Make it simple to get around [Stanford 14] – Ease of use is extremely important in credibility (+1.5). Research shows credibility increases in three user situations: when the user is trying to orient himself or navigate, when the user is attempting to solve a problem he couldn’t and when the user has a strong need for information [Elements 82]. Building a website that is easy to navigate helps solve all three of these user situations, no wonder it’s so important. Plan your site map and then have other people check it, then make up some scenarios and see if it works.

4. Appearances matter [Stanford 14] – There are many aspects to this recommendation. Your website should look good and up-to-date. Spelling and grammatical mistakes are a big no-no. And your URL domain name should include the company name, and no third party hosting (i.e. don’t put your company website at AOL or Geocities or the like—I hope that’s a no brainer.)

5. Make sure everything works [14] – Page loading time and broken links also influence a user’s perception of credibility. Again, imagine going to a store and your desired product is nowhere to be found, you search everywhere and it’s just not around. That’s essentially the same as going to a web page and getting a 404 error.

6. Watch your reputation and affiliations [14] – Public Relations 101 says associations have a lot of impact on your company’s credibility. Try to control them as best you can. Don’t link to a site that doesn’t seem credible, it reflects badly on you (why link to Wikipedia, if you can link to the NY Times?) Don’t publicize any financial or legal troubles—keep that Facebook status professional and positive.

Study #2 [What] addressed the credibility scores by demographic. For example: The youngest third in the study (age < 27.9 years) were more critical of amateurism than the oldest third of the sample [65]; and while you might think that people with more web experience would view website credibility differently than people with little web experience but all statistical different were negligible [66]. I don’t want to cover everything, because who knows what’s applicable to whom, so if you want to read more about credibility based on demographic, here’s that study [PDF].

One final thing to point out, regaining credibility is difficult. And there are two ways to go about, first, provide correct information over time; and second, by committing the same error repeatedly so that the user learns to anticipate and compensate for the error [Elements 82]. Really?! Consider the use of the “Please do not hit your back button” or “Using the back button will result in multiple payments” messages on checkout pages. Really this is a development/security error, but users have become so familiar with it, that it no longer takes away from a site’s credibility. But the best way to regain credibility is to go over the credibility chart and do your best not to lose it in the first place.

Sources:
#1: Fogg, BJ and Hsiang Tseng. “The Elements of Computer Credibility.” CHI 99. 15-20 May 1999: 80-87. [PDF]

#2: Fogg, B.J., Marshall, J., Laraki, O., Osipovich, A., Varma, C., Fang, N., Paul, J., Rangnekar, A., Shon, J., Swani, P., Trinen, M. “What Makes Web Sites Credible? A Report on a Large Quantitative Study.” CHI 2001. Vol. 3, Issue 1. 31 Mar – 5 Apr: 61-68. [PDF]

#3: Fogg, B.J., Kameda, T., Boyd, J., Marshall, J., Sethi, R., Sockol, M., Trowbridge, T. (2002). Stanford-Makovsky Web Credibility Study 2002: Investigating what makes Web sites credible today. A Research Report by the Stanford Persuasive Technology Lab in collaboration with Makovsky & Company. Stanford University. 2002: 8-15. [PDF]

This got me thinking about our clients and what they are doing to reach as many customers as possible. When I got to the office I looked up the numbers and there are approximately 1.7 billion internet users with the largest concentration in Asia. Only 251 million online users reside in North America. I know it can be said that this is consistent with overall population; it does not diminish the fact that there are potential customers internationally who may not be getting the attention they deserve.  Additionally, given the current weakness of the dollar, buying online using USD also makes financial sense for those shopping overseas.

A few things to keep in mind when tapping into the international market:

• Security: By opening your site to a larger audience and more potential sales you are also opening your site to more hackers and people with nefarious intentions. You need to ensure you can withstand both the new traffic and new threats.
• Communication: You need to let your customers know that you ship outside North America. Provide international dialing instructions or an international phone number so customers can place orders by phone.
• Shipping: Once you figure out how to provide competitive international shipping, you need to provide clear shipping details on your site to ensure a smooth check-out and customer satisfaction.
• Foreign Currency: While most major credit cards allow buyers to purchase in local currency, having a currency conversion tool on your site, for informational purposes only, will provide your customers with more transparency as to what the real cost of your products will be. This will again enhance customer satisfaction and provide for a smooth checkout process.

With “Cyber-Monday” on November 30 and only 21 business days until Thanksgiving many of our clients are implementing final website tweaks to prepare for the holiday season. Now might not be the right time to focus on expanding your customer base, but don’t overlook the large areas of expansion for improving your sales in the New Year.

The saying above is a tongue and cheek reference to a very real phenomenon: people’s willingness to fudge the truth in order to prove their point. If I’m arguing for something and say, it’s proven that 32% of people don’t like xyz, it’s harder for my opponent to argue otherwise. Statistics are powerful because people think of them as facts, as undeniable, set in stone truths. But statistics can easily be miscalculated, misrepresented and manipulated to serve an agenda.

Why does this matter to you? Clients often request such-and-such because the stats show it increases conversion. But as the designer, as the person hired by the client to be an expert in this field, I know that the stats aren’t all that they seem. And once in this spot, it’s not easy to persuade the client that the numbers are wrong. I imagine most designers and developers have been in a similar situation. And most importantly, maybe the stats aren’t “wrong” or misleading or manipulated, but that doesn’t mean that the actions they point to are absolutely “right” for your client.

From beginning to end: I’ve created this handy (simplified) diagram that explains the process and end result of usability studying:

The Study – Someone somewhere does a usability study using standard scientific protocols. Nothing complicated, just your standard 8th grade science class stuff: a hypothesis, a control environment, a variable, etc.

The Stats – Based on the results of the study, the creators create some statistics. I have no doubt that the creators are legit people, so the stats are accurate and well reported.

Publishing – The creators have to eat, so they write up some press releases, write up the study for publication and throw it to the wolves in hope for a little financial return and recognition.

Verification – This is the step I feel is getting missed. People should be reading the original studies in full to determine validity. Are there any missing holes? Anything that people should be aware of? Don’t take a study and statistics at face value. (Yes, I am on the cynical side of life, if you’re wondering.) If at all possible, people should run a similar study to see if the results are the same. Findings should be repeatable. If they are voilà, the findings/stats are legitimate and you should pass them along with fervor. And if they’re not, a healthy discussion about why should ensue. Running the study again is a win-win.

Public Support – This is when blogs take that press release or journal abstract and then rewrite it. And then another blog takes that post and regurgitates it and so on and so on. Until the results and statistics of the study are so far removed from the study itself that the numbers lose their value.

Action – This is the step that makes all the previous steps matter. This is when the client wants that button red and HUGE because he read a three paragraph blog that a big red button increased conversion 3% in usability/conversion study #123. This is also the step where, an informed expert knows the ins, outs, loopholes and shortcomings of study #123 (and not just the three paragraph blog) that she can say, wait, this is how YOUR button differentiates from the study’s button, this is how YOUR users differentiate from the study’s subjects, this is how YOUR site differentiates from the study’s site. Hopefully, resolving any conflict between her and her client, and between the user and the design.

What’s this all mean for you? That depends are you a designer or a client? As a client, I’d make sure that my designer knows what’s up. Not only because that’s what you pay them for, but also because it will set you at ease. You won’t need to bring up every small change that you’ve heard will increase your conversions or traffic, because your designer, a good designer, should already know them. If you’re a designer, you’re being hired because you’re an expert in your field. And if you’re doing web design, knowing how a user interacts with the web and how certain elements affect conversion or traffic is part of being an expert. Don’t let other people tell you what works and why–read those primary sources!

I’m a strong believer in two things:

1. Single usability studies don’t prove anything; they just beg the need for repeat studying and individualized studying,
2. It’s always about the individual client, the individual website, the individual webpage, the individual user and their needs in relation to one another.

Design and development should be driven by the user’s situation not the usability statistics. And 99% of all online users in the entire universe agree with me.

Coming up in future months: I’ll be delving into some specific usability studies and talking about the parameters, controls, statistical outcomes etc. (don’t worry, it won’t be overly scientific) to provide a well rounded look at some common web elements such as page length, forms, credibility, eCommerce checkouts etc. Check back each month!

AND if you have a usability study or question that you want me to delve into, please leave it in the comments!