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.

enter image description here

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.

  • 2
    Nitpick time: checkout isn't a verb! – Rahul Feb 3 '12 at 10:21
  • 1
    Nitpick: accepted. I'll go with 'Check out' instead. – JonW Feb 3 '12 at 10:42
  • 2
    Actually, it's not supposed to be a verb, it's a noun so is acceptable. Leaving the link as 'Checkout' is basically a shortened version of 'Go to the Checkout'. I take back my nitpick acceptance! – JonW Feb 3 '12 at 10:46
  • I counter with button labels should be verbs – Rahul Feb 3 '12 at 10:50
  • 1
    No, because Books is a navigation item, not a button/call to action. It's called call to action for a reason ;-) – Rahul Feb 3 '12 at 11:06

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).

  • I'm happy that the actual check out / basket page (once you get there) is correct. Keeping the basket, delivery and payment information all on one page reduces the steps needed to complete the purchase. I notice I've basically taken your first bullet point and used it in my own answer without really noticing, so it seems we agree on one possible route. – JonW Feb 3 '12 at 11:14

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.

enter image description here

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...

enter image description here

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.

  • Agreed that the link should be a button. I think i'm happy with the redundancy overall, it's more the two links next to eachother that are differently named but do the same thing that didn't sit well with me. I like the idea of giving the whole basket a selectable area, provided there is affordance there that it is clickable. (State change on hover perhaps?) – JonW Feb 3 '12 at 11:07

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.

enter image description here

  • It's another viable option, but like I said in my answer, I would test several alternatives to see which one is the "least confusing" – Rahul Feb 3 '12 at 11:09
  • 1
    You could include the word "View" as part of the underlined items, so it reads: "View 8 Items - $20.62" – LarsTech Feb 3 '12 at 15:11

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!

cart sketch

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.