Question the details

I have been working on a wireframe walk through of an ecommerce checkout the last few days. What has struck me most is how important it is to question the details of your design.

They say “the devil is in the details”. Cliche though it is, it is actually true. When deadlines are looming and budgets are tight it is easy to make snap decisions about the details of your design that can ultimately be incredibly detrimental.

To produce truly great design we need to find the time to think about and question the details of our work.

To give you an indication of the type of questions you should be asking I thought I would share some of the details I have obsessed over while working on wire framing a recent ecommerce checkout process.

Question whether more clicks are bad

Conventional wisdom dictates that we should minimise the number of clicks required to complete any task on a website. However, in a world of broadband and Ajax I’m not sure that is always true.

I think the most important thing is to ensure that users feel they are making progress and that sometimes making them click a few extra times is the best way to achieve this.

While working on wire framing my e-commerce checkout process I decided to add an additional screen for users paying by cash, cheque or voucher. Without this additional step the experience felt jarring and left users wondering whether they had clicked on the right thing. The one extra screen provided them with the reassurance that they were heading in the right direction. In my opinion this was more important than reducing the number of clicks.

Cash payment Screen

Question conventional wisdom

The number of clicks is not the only conventional wisdom we should be challenging. It is easy to blindly follow supposed best practice without asking whether it is right for your site or not.

Take for example those “remember me” checkboxes you find on most login screens. I found myself asking whether a user needed to confirm their login if they previously checked this box. After all if they have asked us to store their e-mail address and password why can’t we automatically log them in?

Remember me checkbox

Ultimately we decided against this partly for security reasons (because we store credit card information) and partly because we felt it would just freak users out. However, even if you end up agreeing with the conventional wisdom that does not mean it should never be challenged.

Question the need for data entry

One detail that should always be challenged is the need for users to enter data. Nothing will prevent the user from completing a call to action more than being asked to fill out a form. It is really important that we challenge the need for every field that appears on our website.

A simple example of this is remembering data that the user has already entered once. For example if the user has been required to enter their e-mail address in order to recover a password they should not have to enter it again to then log in.

Note reminding me to avoid data re-entry

However sometimes you may wish to add additional fields so you can ultimately reduce the overall amount of data a user has to enter. For example we decided to ask users for their credit card type even know we do not need this data. This then allowed us to hide some additional fields like start date and issue number from credit card users who do not have that information on their cards.

Credit card type selection option

Question the “what if” scenarios

Another area of detail we all need to pay particular attention to is the “what if” scenarios. There are hundreds of these edge cases which need to be considered in any interaction flow and yet it is often left to the developer to decide what happens.

A good example of this occurred while working on my checkout process. I have to decide what would happen if a user tried to register with an e-mail address already tied to an account in. The easiest solution was to display an error message. However that leaves the user to work out what they should do next. Instead I decided to take them to the password recovery because if their e-mail address is already registered they would need to recover their password before they could login.

Note saying we should take users to a password recovery screen

Question your micro copy

Micro copy is one area where few questions are asked and details are largely ignored. Often it is left to the developer to throw together some instructions when more consideration and questioning is desperately needed.

Micro copy is a huge area and not something that I’m going to discuss in detail here. But in order to give you a sense of the kind of questions you should be asking, let me tell you about a single question I asked while designing my e-commerce checkout process.

The question was this: “should instructional text, buttons and links being written in the third person or the first person?” In other words should we be talking about “my order” or “your order”?

Eventually we decided that when we were providing instructions these would be written in the third person (e.g. “select your delivery address”). However, when the user was required to take an action it would be written in the first person (e.g. “deliver to my home address”).

Screenshot showing the various use of language we employ

Question how you can differentiate

How to differentiate your website from everybody else’s is a burning question that most website owners ask. However they often content themselves with just addressing this issue on one or two pages of their site (often the homepage).

I believe we should be looking for opportunities to differentiate ourselves in the details on every page of our website. As you are working on pages ask yourself the question “how can I differentiate here?”

While working on this e-commerce checkout process I used the fact that the company in question works through a network of local franchisees to personalise the experience. Throughout the entire process I named the local franchisee the customer will be dealing with and even provided a local number they could call. This is not something that their competitors could do.

Introducing their local driver

Questioning the desire to go with the simple (for you) solution

Finally I want to encourage you to question the motivation you have for the little decisions you make while working on a website. Are you going for the simplest solution for you, or the simplest solution for users?

It would have been easy to force users to register by creating a password, before they were allowed to place an order. However we knew users saw registration as a barrier to completing their main task (placing an order).

We decided instead of going the easy route we would automatically generate a password. However we knew that many users would not remember there are automatically generated password and so also gave them the ability to set their own password if they so wished.

Create an easy to remember password

Going the extra mile and paying attention to this kind of detail turns a mediocre experience into a truly exceptional one. It does take extra time but ultimately it will pay dividends both in the reputation of the web designer, the profitability of the website and the experience of users.

Related Post

How to tell if you are a design snob High quality bespoke design can generate return on investment. But custom design is not always the right solution. Sometimes design assets you buy-in ...
Why It’s Time to Prioritize Visual Content You should never underestimate the power of visual content. Whether you have a website, or a blog, the visuals you choose are key to your marketing st...
Is it ever okay for designers to manipulate people? Our job as designers isn’t to convince people to do things they do not want to do. It is to persuade them to act now and act with our clients rather t...
  • I’ve been a staunch advocate of wireframing since my early days as a web professional. I’ve always felt that wireframes were sexy and really help me to focus on the details of the UI. To me there is no design without them; design work without specification is called “speculation” or simply dressing up the dross.

    The thing that always struck me as odd is how little wireframing is used within the development processes on some of the teams and companies I’ve worked with. I recently worked with a fairly well-known US agency and after asking repeatedly about their wireframing process I received one of the oddest and totally asinine responses of my career:

    “I don’t care about the wireframe, William. The client wants to see the design NOW. You can wireframe all you want AFTER you’ve finished the design!!!”

    I’ll let that sink in for a bit…

    Obviously this statement was based on an almost complete lack of understanding of what wireframes are actually for. But I also feel that a large portion of our community feel the same way this woman does. It’s nice to see others who value and understand the benefits of wireframing.

  • I’ve gotten into web development in the last two years but I’ve never really thought about all these details that should be considered on a wireframe.

    You have pointed out some great things that got me thinking on a totally different level when it comes to saving users time and get right to the good stuff and thanks for making me realize to go with the simple solution for the user. Again, these are things I usually not think about but now will.

    Great post Paul, thanks.

  • Good post. I think this illustrates how wireframes can demonstrate to your client how you’ve thought about their problem. A visual design is nice, but probably makes it hard for the client to see anything other than the “look”. The wireframe lets them see the real design underneath.

    One question Paul — are you building a custom checkout from scratch to have such control over all these things?

    • Its all custom because this site has very specific requirements. That said, I am not convinced that much in my list couldn’t be achieved with an off the shelf system and a bit of creativity.

  • BTW is it Keynote you’re using for the prototype?