Where should you put your most important content?

Web page real estate is precious.  You've got a logo, tagline, navigation, salient images, can't-miss content, important content, and not-as-important-but-still-necessary content that all has to fit on there somewhere.  Complicating things further, marketing, branding, legal, and various other departments compete for representation on the homepage.

Looking for some guidelines on where it should all go?  We've got them for you here.

1. Vertical viewing: Users spend about 80% of their time viewing the part of the screen that is "above the fold," meaning the part they can view with no scrolling, swiping, or paging.
2. Horizontal viewing: Users spend about 70% of their time viewing the left side of the screen, specifically the area that is between 300-500 pixels in from the left.  Users are trained to expect navigation on the left side of the screen, so they are more attentive to the screen after allowing a 200-300 pixel margin for it.     

The testing that led to these conclusions was done in 2010 on a 1024 x 768-sized monitor.  We'd assume higher resolution screens would cause the viewing pattern to stretch or shift to the right .  

What's the bottom line?  User attention and interest peaks at 300 - 400 pixels.  To conform to user expectations, keep navigation on the left, your most important content just to the right of the navigation, and less important content furthest to the right.  Put all of the most important content above the fold as users give just 20% of their attention to content placed below. 

Source: http://www.useit.com/alertbox/horizontal-attention.html

Three ways to end an opinion war

Jared Spool wrote an interesting article last week about ending the opinion war and how his company handles the task. The term opinion war is pretty self-explanatory; but just to be clear, it is when two parties having a vested interest in a project hold differing opinions about how something should be implemented.

Opinion wars can be difficult to navigate.  It can be nearly impossible to sway someone’s opinion on a matter. Many times because each party thinks it has comes to an opinion in a reasoned and rational way, which makes it difficult to see the reason and rationale behind the opposing opinion. This is what makes politics so entertaining/frustrating, right?

As a small business owner, you may argue with yourself more than anyone else about how something should be accomplished, but even still we have a few suggestions on how to come to a sound resolution.  

Spool offers two suggestions in his article.  We added the third.

1. Use an arbitrator. Each project has a not-so-senior project manager who has the full power to make the final decision. This person is tasked with evaluating the opinions, asking for advice from senior practitioners if needed, then banging the gavel. An interesting approach.
2. Let user research guide the way. This is the approach Is It Easy? specializes in. First and foremost, ongoing user research helps orient stakeholders’ opinion in the right way, staving off potential opinion wars. However, when a specific difference does arise, we’ll review what data we may already have about our users (personas, scenarios of use, interviews, surveys) for insights. Then, if needed, we’ll collect new research using prototypes.   
3. Use A/B testing to evaluate each opinion. Rather than using prototypes in a round of user testing, we’ll create two different versions of the same page that will go out live to your users. Each version will be exactly the same, the only difference being the element in question. Half of your users will see one version of the page (version A) and the other half will see the other version (version B). When you set a conversion goal, you can assess which design yields better results.

When should I use A/B testing?  We feel it works best in the following situations.

1. The elements in question are specific and discrete. A/B testing works for questions about particular images, text, colors, labels, and placement. We test one variable at a time to avoid confounding the results. If there are larger questions about whether or not your message is getting across to users or if your subscription or shopping cart flow is confusing, those are questions best left to user testing. You may learn from user testing that your shopping cart flow is confusing because of the placement, wording, or color of your checkout button, in which case we'll use A/B testing to discover the optimal design.
2. Each opinion can be tied to a conversion scenario. For each page version, we’ll want to set up a conversion page or some other way of tracking a “win.” A conversion is the desired behavior from the user, such as subscribing, placing an order, or submitting contact information. Therefore, we can track a conversion when a user lands on the “thank you” for subscribing, ordering, or contacting page. The design that leads to more conversions wins the opinion war.  
3. Results from qualitative user studies were inconclusive. If the element you’re arguing over is specific, sometimes you may not get a clear picture of what would serve the users better during user testing. User testing uses a small sample size, so questions such as which banner placement yields more clicks may not be conclusive. I love user testing, but it can be somewhat artificial because users adopt goals and motivations for the test they may not have in real situations. To get answers to very specific questions, we recommend A/B testing to see what converts a higher rate of customers over a large sample size.  

What are your thoughts? Have you had opinion wars over design decisions in your business? Tell us how you came to a resolution.  

We interrupt this task to bring you…

Getting customers on the path to purchase is an accomplishment. You’ve convinced them they need your product enough to fork over their hard-earned money to you in exchange. Once users click the Buy or Checkout button, they have an expectation of what the next few moments of their life will be like. 

1. Fill in address
2. Dig out and enter credit card info
3. Enter address
4. Select shipping speed
5. Submit order

Also, let’s not forget the subroutine that many of us embark upon somewhere in there.

1. Do a quick search for a coupon code
2. Hopefully find a coupon code
3. Find coupon code entry box
4. Enter code

The other day, I was merrily shopping online when I suddenly found myself on a registration page. It seems I could no longer go about my business in peace. At that point, the powers that be decided it was an appropriate time to put the brakes on my delightful forward progress. I must now tell them who I am and where they can send my advertisements.  

Sigh.

I’m interrupted. I was 2-seconds away from inputting my credit card information, but instead of clicking “Submit Order,” I’m typing in a user name, entering a password, and checking boxes. My hope at this point is that I’ll be dropped back at the same spot I was taken away from. Too often, that doesn’t happen.  Too often, I’m dropped off at some sort of welcome page or even the home page again. And, to add insult to injury, sometimes I’m even asked to log in!  What?!?

If there is some benefit to logging in the user may want to take advantage of, like avoiding having to fill in a mailing address or credit card information, then by all means offer the user a way to do that. But for the user who is focused on completing a goal; let him complete it, uninterrupted by your agenda. The site can always offer a way to create an account during the checkout process. Also, be sure to state the benefits of creating an account and include information about how your company intends to use the account information. Many users are wary of filling up their inbox with even more marketing emails.

Just like mom used to make it...

The current Human Factors International newsletter led me to an explanation of the “Mere Exposure Effect.” Wikipedia tells us it is “a psychological phenomenon by which people tend to develop a preference for things merely because they are familiar with them.”  In the persuasive design world, this concept is labeled the Familiarity principle.  Changingminds.org states,

“Our brains are excellent pattern-matchers and reward us for using this very helpful skill. Repetition creates a pattern, which consequently and naturally grabs our attention.”

Explaining further,

“Repetition creates familiarity, but does familiarity breed contempt? Although it can happen, the reality is that familiarity leads to liking in far more case than it does to contempt. When we are in a supermarket, we are far more likely to buy familiar brands, even if we have never tried the product before. Advertisers know this very well.”

Surprised by the realization the song that used to irritate you when it played on the radio suddenly started to “grow on you”? Would you rather have your mom’s lasagna over the one at the five-star Italian restaurant in town? Well, you can blame your self-organizing, pattern-loving brain. We prefer the familiar.

What is the implication for design?

1. Make sure the same words and actions mean and do the same thing throughout your website. In addition, as Bruce Tognazzini states, “It is just as important to be visually inconsistent when things must act differently as it is to be visually consistent when things act the same.” Consistency is important not only because it is frustrating when something doesn’t behave as expected, but because consistency compels familiarity and familiarity compels favorability. 
2. When possible, leverage existing models for layout, navigation, terminology, and interaction used on popular websites with which your users are familiar. If you sell accessories, think about the other sites your users are likely visiting to purchase accessories. How do those sites organize and categorize their inventory, display reviews and ratings, link to similar products, or support search? These familiar elements will give your users the sense they already know how to process and interact with your website, even at the first visit. 

Keep in mind, however, that the most important consistency is the consistency with user expectations (Tognazzini). Existing patterns may not work for your user. It’s perfectly admirable to do something new and different if it serves your user better. 

This all started with reading about Gestalt psychology in design. Look for a future post exploring this subject.

This is not easy - LeapFrog Connect

Recently, while loading some books onto my daughter's Tag Junior, I found myself filling out a typical form.  First name, "Sloane."  Date of birth, "March...uh..."  Rather than filled with months, the drop down box was filled with years.  "Hmm...you must have read it wrong," I thought to myself.  Nope, the label reads "Date of birth."  I was still paralyzed for a moment with confusion (I'm not exaggerating here).  At that time, I skipped ahead and noticed the next label, "Month."  Why did the page designers complicate a simple and familiar entry form?  I would guess it made sense to the them at the time, and they did not put it in front of users for usability testing.  

This form is just another illustration of why usability testing is so important.  Designers, like writers, have a hard time editing their work.  It's important to get your designs in front of users during the design phase when changes can easily be made.  Your designs will eventually go in front of all of your users where usability mistakes can cost you credibility, likeability, and customers.

Ralph Lauren believes in personas

Back when Oprah was still on (it wasn't as long ago as it seems), she devoted one of her last shows to Ralph Lauren.  I loved something he said.  

If you said, ‘Just design that dress for that girl,’ I couldn’t do it.  But if you say, ‘She lives in a mansion or she lives in Soho and she’s an artist,’ I could design exactly how she should look, how her hair should be, what she should be wearing, and I could create a world with her.  And I pin her up on a wall and I say, ‘Now I know what she needs.’ 

What Ralph Lauren is describing here is personas, in a loose way.  He knows to design that effectively, he's got to know something about his user.  He wants to know who his end user is, how she'll interact with his product, how it will meet her specific needs, and how it will fit into her life.  He uses this information for inspiration but also for usability.

Personas are descriptions of your user archetypes.  After hours and hours of interviews of dozens of users, you'll find they typically fall in about 3-6 categories that are differentiated by goals, skill levels, expectations, and other characteristics.  You create a detailed description, or "a world with her" for each archetype, slap on a name, and suddenly instead of designing for a population of nameless, faceless users, you're designing for "Sue," "Robert," "Allie," etc.  

Historically, creating personas is a protracted process.  However, if time and money are tight, we believe personas are important enough to create using the data you have available.  Pull out everything you know about your customers now, and put it to use.  Review it all, discover the main differentiators among your customers, and separate them into a handful of groups.  Your persona is a generalized, but detailed, description of each group.  You'll be astonished at the empowering impact these have on your designs.