Usability? Not an afterthought… (Part 1)

Scenario one -
You’re developing an e-commerce site, you are on a tight time scale and it’s your first project of its kind. You want to do a great job, you have your brief, budget and everything confirmed. You dive right in and start designing screen layouts, while the developers start working on back end functionality. STOP!

Scenario two -
You’ve just finished designing and developing an e-commerce site and you start doing user testing. You discover your site processes are not clear and user testing is revealing many design problems. You didn’t budget in time for re-designs of this nature because you didn’t anticipate them! STOP!

Make sure you budget some time in for these usability tasks at the initial stages of development. This will help to avoid some problematic stages that can bite you in the ass at the crucial last part of a project. You don’t want to end up looking unprofessional and delivering a project late and over budget due to poor user planning and not understanding that this is a critical area to factor into any e-commerce site. (any web site for that matter)

So what should I do?

Your e-commerce site design should be user driven and not design driven! The primary success of an e-commerce site heavily rests on the site visitor’s ease of use and buying experience. You can design the flashy interface around solid tested wire frame prototypes. It really helps to take a step back at the initial stage and reach for your pencil and paper.

Stages to go through -

• Identify functionality
• Group similar goals
• Design flow charts
• Evaluate
• Refine
• Produce wire frames
• Test wire frames
• Evaluate findings
• Produce solutions
• Implement

Identify functionality

Make a list of what your users will be able to do on your site:

• -Add a product to basket
• -Checkout and purchase
• -Browse products by category
• -View and buy special offers
• -Compare products
• -View products by price
• -Register as a customer
• -View status current orders
• -Update details
• -Buy gift vouchers

Group similar goals

By grouping similar goals you can see which elements users might expect to see near another one. This helps when designing navigation, task bars and deciding where to put functionality on a site. We can divide our list into 3 groups -

Buy

-Add a product to basket

-Checkout and purchase

-Buy gift vouchers

Search

-Browse products by category

-View and buy special offers

-Compare products

-View products by price

Account

-Register as a customer

-View status current orders

-Update details

There are crossovers in the lists. This just helps to identify areas that can be grouped when thinking about site structure. The most important element that will be seen throughout the site is the “add a product to basket” action. However by grouping the search ideas, we can clearly see we have 4 ways that a user can organise the products. Perhaps this could be a task bar for sorting search results?

Design flow charts

For this I will use “checkout and purchase” for the example. There are many programs out there to make flow charts very easy and quick to mock up. (OmniGraffle, Visio, Illustrator) I always start with pencil and paper and then move to the computer. A user action as common as “”checkout and purchase”"will have more steps that you anticipate. The flow charting process must capture the whole flow including error handling. This helps to see just how involved the design and development of each action will be. This also helps in deciding on timescales and budgeting your time costs.

Example of flow-charting the “checkout and purchase” function.

Evaluate

Who should be aware of the flowcharts? The developers who will build this functionality and the users. This is a perfect time to:

Compare your stages with competitors -

How are they doing it?

Who has the quickest, sleekest process?

Streamline the process -

Ask yourself if every step is necessary?

Can steps be consolidated?

Talk it through with developers -

Is the flow possible?

Are there constraints that change the order of things?

Show the steps to users -

Is it the order they expect?

Talk them through and ask them to question you on any stage.

Did they expect something else from the process?

Have you missed something crucial?

Is the process one way only?

Refine

You will probably have some changes to do from the research completed in the evaluation stage. See how much time you have saved already by nipping out these problematic issues? These would have been missed and maybe not even found at a later stage depending on your user testing methods.

Reaching the refining stage is just one fundamental phase of work that can really help improve usability (and the work of the developers).

Get ready for part 2 of this article when you can look forward to tackling:

• Produce wire frames
• Test wire frames
• Evaluate findings
• Produce solutions
• Implement