Matching the offline shopping experience with an established web presence

About the Mission Bicycle Project

Mission Bicycle was started in 2008 as a online side business of web development consultancy Chapter Three. With strong initial sales, Mission Bicycle looked to open a flagship retail space in the Mission District of San Francisco and secured a lease on 766 Valencia St. in February 2009. With three months to open the store, Mission Bicycle partnered with Grayscale to design the interior space and Adaptive Path to develop product selection and purchase experience and signage system. The store opened in May 2009 resulting in a 50%+ net increase in bicycle sales for the company.

Bad UI – sign up form

Which form should I fill in to sign up to

Okay it doesn’t take a rocket scientist to work out that the form on the left is the actual sign-up form. BUT when I was presented with the page I was immediately drawn to the “Tweet from” pannel. I though, perhaps I could use my Twitter credentials to sign up.

Being the curious guy that I am, I decided, to just enter my details and click sign up. That when I got the customary error traps.

Hey how about doing a Five Second Test? I’m certain you’ll find the visual prominence of the “Tweet from” panel overpowers your goal of getting people to sign-up to the service.

My advice

Move it to after the sign up process is complete or at the very least, reverse out the panels.

P.s. Why would I actually want to tweet from what’s the sell?

Bad UI – Which icon is delete?

Web outlook task bar showing X and recycle bin for delete

Which icon should I click to delete a selected message?

  • If you chose the ‘X’ then yep you’re way smarter then I am 🙂
  • If you chose the Recycle bin then you’ve just emptied your deleted messages.

Two function on the page which do very different things but both use a standard visual vocabulary for the delete function. On the messages screen what is the most important function? To delete a message or to empty your delete messages folder?

Don’t make this mistake.

Think about the context a task exists in and simplify your UI to match the users mental model. Global actions should be reserved for an area of the screen which is away from contextual, task based actions.

Beginners, Experts and Perpetual Intermediates – User Typology

In Twitter usability: Is it really a problem? I argued that the “usability” issues experienced by novice users aren’t worth worrying about as user is only a beginner for a fleeting period of time.

I’d like to expand on that slightly as the concept of designing for Beginners, Expert and Intermediate users. This topic preoccupies most people who design interactive systems, Who are our target audience? What are their competencies?, and if we don’t understand the nature of the users over the long term we are liable to design in problems without even realising it.

As Alan Cooper writes in both About Face and The Inmates are Running the Asylum it’s the Perpetual Intermediate who you want to keep in mind.

The experience level of people performing and activity tends, like most population distributions, to follow the classic statistical bell curve. For almost any activity requiring knowledge or skill, if we graph number of people against skill level, a relatively small number of beginners are on the left side, a few experts are on the right and the majority – intermediate users — are in the centre.

He goes on to say

Statistics don’t tell the whole story, however… the beginners do not remain beginners for very long. The difficulty of maintaing a high level of expertise also means that experts come and go rapidly, but beginners change even more rapidly.

The occupants of the beginner end of the curve will either migrate into the centre bulge of intermediates, or they will drop off the graph altogether and find some product or activity in which they can migrate to intermediacy.

If this is true then a good user interface must enable beginners to make a smooth transition into intermediacy. It must enable them to quickly understand the features and scope of the application while not restricting the expert user, who demand faster access to functionality they use most in their work. However, a really good user interface must dedicate most of its efforts to meetings the need and objectives of the perpetual intermediates.

As cooper says

Perpetual intermediates need access to tools. They don’t need scope and purpose explained to them because they already know these things [ED: they learn that in the beginners stage]. Perpetual intermediates will be establishing the functions that they use with regularity and those that they only use rarely. The user will demand that the tools in their working set are place front and centre in the UI, easy to find and easy to remember.

If you’re interested in find out more about this, I’d strongly recommend reading The inmates are Running the Asylum by Alan Cooper for a good UX orientated view. If you want in a more technical book then read About Face 3: The essentials of interaction design also by Alan Cooper  (they both cover pretty much the same ground with About Face going into slightly more technical detail).

[UX Technique] Wireflows Diagram

Image credit: nForn’s UX Trading Cards series

A Wireflow is a blend of a wireframe and a user journey.

By all accounts it’s a little bit labour intensive. Although I assume that will depend on how detailed the wirefame aspect of your diagram is but it strikes me as a great way of helping clients to visualise the user journey in context of the screen layouts.

Other resources