Is it a problem to have a link to 'View Your Basket' and 'Go To Checkout' that both go to the same place?

Question

I have an eComm site i'm specing at the moment. When you add stuff to the basket the on-page basket at the top of the page will update to give you a running total with links to view the full basket as well as to go to the checkout. However, currently both these links will go to the same page; the basket page with the option to review the items and then purchase all on the same page.

I've toyed with the idea of only having a link to 'View Items' but then it's not clear how to checkout. Conversly having only the 'Checkout' option on display means that it's not clear how you view the basket contents.

This leaves the two links, both with different names both going to the same page. I guess this could potentially confuse customers as both links do the same thing, but I can't think of a better way to go about this. Will this approach confuse users, or is this route the best way to handle this situation?

It's very likely that the basket will contain numerous items, it's not a single item type of store, so showing the actual basket items in this header area isn't practical.

Answer 1

The larger question here is: "Is it okay to have redundancy in your UI to solve some surface problems?". The surface problem is that some concepts in your UI are potentially confusing, which is causing people to expect one thing and receive another. In this case you want to just use one screen even though people may have become accustomed to separate processes for View Items and Checkout.

Here's what you should be considering: is the benefit of combining your basket and checkout flow (ie. deviating from the current convention) worth the potential confusion?

And you might not be able to figure that out without doing some usability tests with some alternatives.

Speaking of which, here are some you could consider:

• Show a Check out link, remove the View Items link, and have Basket be a link that leads to the list of items.
• Make "Check out" a button and remove the other alternatives (this is what sales people would do!)
• Just have the whole square act as a link to the basket page

There's no way to know which works best without actually testing them. So given time and budget, I would probably select two and figure out which convert best or do well in usability tests (which aren't necessarily mutually exclusive, but may give different signals).

Answer 2

No this is not a problem and is actually very common, although I would make the following changes to bring a little more harmony to the area.

I would make Checkout a button (call to action), whilst additionally making the whole area clickable through to the one destination page thus creating the effect of the whole box being the clickable thing rather than a container with a collection of different clickable things.

The whole area can then be simplified slightly by making the title View Basket and not actually making that an underlined link (or whatever style you happen to use for links) - then remove the View Items completely - so dispensing with the duplicated word 'items' in the process.

Also give the area some background to better show it as a single entity.

Here's a real world example from John Lewis - albeit slightly different orientation. Maybe this orientation would actually better fit the rest of the page? There's a big space to the left of the checkout box...

But is the redundancy ok?

In terms of the apparent redundancy, it's important to retain the access via two slightly different routes, as they user is not thinking in terms of where they want to go - but in terms of what they want to do.

In one case the user just wants to see their basket - it would of course make sense to provide a checkout facility on that page.

In the other case the user wants to go straight to the checkout - it would of course make sense to also provide a review of the basket on that page.

So for reasons of convenience, efficiency and usability they are displayed as one and the same thing - just arrived at via two different ways of thinking.

Answer 3

Actually, I'm going to provide an answer to my own question, see what UX think of this one.

If I replace the "view items | checkout" link with a button for just Checkout and then just underline the item in the basket like so, this may work.

Answer 4

If you break each element down into something that a user has to process, you can eliminate redundancies.

The icon of a cart is universal, no text needed.

Showing me how many items I have as a link implies that if I click, something will happen (edit it)

The pricing, although important to the task, is minimized.

Which leaves the big shiny BUTTON left to click on, and hopefully complete the task flow!