AB Testing - usability

UI Anti-Pattern: Non-Clickable Borders

Mon, 28 Jul 2008 07:56:00 -0700

Summer time is here and blogging time is at a minimum. The arrival of grand theft auto 4 at my house hasn't helped. There's a cybercafe in the game and a mockup computer interface. It suffers from extreme usability issues. Here's an anti-pattern: The non-clickable border... This is especially common in pagination hyperlinks, where a box is often implied but may not be hot. You want to make sure that the area surrounding the text in your buttons or pagination is also clickable.

Have you authored a CLICK HERE link lately?

Wed, 23 Jan 2008 07:25:00 -0700

Tsk tsk. "Click here" is one of the most extensively used bad interface elements on the web. Descriptive hyperlinks are way more effective -- a drum that industry gurus have been arguing for some time. There's some new data from Internet-Based Research group at UWash.

Spyridakis, J.H., Mobrand, K.A., Cuddihy, E.,and C.Y. Wei. Using Structural Cues to Guide Readers on the Internet. Information Design Journal, (in press).

Users got more out of the content in the Sem/Org link configuration than any other. Sem was the next runner up.

This illustrates the value of descriptive, informative links... not simply mechanical expressions like "next" or "click here".

One productive way to think about this is to imagine that the links the user clicks on are part of a conversation. It's quite boring to talk about the mechanics of using your web browser. If you want to impact the user in a significant way, whether it be to inform or sell, writing descriptive and informative links is the way to go.

If you're not convinced, check out some other views.

The Luck of the Draw: Position 10 is Better 9

Tue, 15 Jan 2008 23:09:00 -0700

One of the mind-blowing data points we shared in the StomperNet Click Fu video was that position 10 in the search results often gets more clicks than position 9. In a review of pagination UIs, Jesper spots a great reference that replicates this datapoint (previous citation). In Accurately Interpreting Clickthrough Data as Implicit Feedback, position 10 clicks are reported as 4% versus the 1% of position 9. Surprising perhaps? There are two potential explanations, one pedestrian but with practical implications and the other lofty with practical implications that are harder to derive. #1: White space and the end of the scroll pane combine to create a much greater ease of access for result #10 than #9. This is especially the case if the footer is long and result 9 may scroll offscreen. Independent of this, typical whitespace layouts at the bottom of the page make result 10 easier to read than result 9. #2: There's a cost function evaluation going on in the user's head. This evaluation is essentially estimating the probability of success versus the cost of trying. The cost of trying the next page of results is a lot higher than the cost of clicking position 10, or even position 9. The sense of relevance is a more complex function, but position 10 is given an overall boost in capturing clicks as it's less effort. So, no, I don't recommend you aim for position 10 instead of a higher rank, it's luck of the draw at that stage. That said, a double listing will increase click probability no matter where you're ranked.

Heuristic Evaluation: Down to Earth Lessons from MIT

Sun, 26 Aug 2007 19:01:00 -0700

One of my favorite techniques in usability is simple "heuristic review". This is a sort of the "what would do" style evaluation guided by a set of questions. Debuted by Jakob Nielsen, the idea of a set of principles to evaluate as one of the most efficient ways to conduct a expertise oriented (as opposed to observation oriented) evalution has spread with lot of variants from the original ten heuristics.

This came to mind today as I was browsing the MIT Open Courseware site -- a really neat online repository of materials from the last few years of MIT classes. Yep, you can learn from the same materials as MIT students!

To get a quick feel for heuristics, take a look at this usability checklist from web.mit. For a heavy-weight engagement with heuristic review, check out the lecture notes (lesson 14) from User Interface Design and Implementation, Fall 2004. Foundational principles are discussed in Lesson 8

Button Gravity Caught in Eye Gaze

Sun, 08 Apr 2007 07:47:00 -0700

A learning from commercial usability work in the nineties still holds true. Button gravity describes the tendency for users to home to the bottom submit button on a form page.

One of our early designs for the new e-commerce transaction flow suffered from an unfortunate case of button gravity. Note: This is a phenomena that you can use to aid your site's efficiency, by making it work for you, not against you.

The image below shows a step in the checkout process where the user can select "same as billing" for ship-to, or enter an alternate ship-to address. The green numbered circles, and the blue "meta steps", show the ordering of user attention while working through a checkout.

The user first checks out the billing address, quite in detail, and should have determined that this was the desired outcome. He proceeds to check the price and order contents and is drawn into the last submit button on the page by sheer force of gravity! He realizes this is not the right option and eventually makes his way back to the correct button at the top of the screen.

Heads down on the new e-commerce platform

Thu, 22 Mar 2007 23:20:00 -0700

We're re-building our e-commerce framework to improve overall performance, increase our flexibility, and specifically optimize our checkout flow.

Here's a little visual review of a wide ranging set of add to cart buttons.

In every case, the price is grouped with and located nearby the "add to cart" button.

This chunking produces minimal effort by the user for the multi-step process of check the price and committing to the buy. Understanding the (obvious in this case) user "task model" creates the realization that the user always checks the price if there's any chance of completing add to cart. By grouping the add to cart near the price, typically only separated from the price by product options, the site designers are confident that user will know where the affordance (an opportunity for action) is to buy.

The usability lab is almost ready -- we should be open for business on Monday and one of our first evaluations will be a series of add to cart layouts. Stay tuned.