I am designing an iPad app. What is the best approach to present summary section in a shopping cart? For now, a have 2 versions:

  • Ver 1. I grouped together Grand Total (in some cases it will be subtotal), Checkout button, PayPal and savings and have a separate section for all the summary including shipping, taxes, Gift Certificates, coupons, etc.
  • Ver 2. I grouped all the details and checkout button in one group.

Which one is a better approach? and why?


enter image description here

2 Answers 2


I like version 2. Users when doing purchases online tend to 'review' items, costs, totals, shipping etc.. before committing to a 'submit or check out' actions.

With first version, I would have to look at the bottom section first, verify, and then focus back on the top section to Check out.

With second version - it is more of a logical order on how real world user 'scans' the check out page.

You can still do grouping in version 2, if you want separation visually between 'review items' and 'check out/payment' action sections.


Personally I prefer the second one more. In most languages we read top to bottom. So our eyes are going to naturally catch a "Check out" button and we're going to click it. However in the second one our eyes are going to naturally scroll the order for the "Check out" button, showing us our order meaning a user will instantly notice something they didn't mean to order, etc.

Also, if your going to get a user to buy more stuff, the second one shows the total price smaller. Creating the impression that the price is smaller (e.g less).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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