Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We have a checkout process which follows this sequence:

  1. choose between two possible products
  2. select a duration for the chosen product
  3. enter payment details
  4. your receipt

We want to compress steps 1 and 2 into one page, where once the user chooses product A or product B there is a dynamic change in the page. As opposed to taking the user to a new page.

It would look something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

However ... once a user chooses one of the membership types we don't have an obvious way for the user to go back that one step.

Any suggestions on how a user could go back to deciding between A vs B?

share|improve this question
    
When you say membership type, you mean between Alpha and Beta membership? Or when they click the buy button? –  Majo0od Aug 18 at 11:53
    
@Majed Alpha vs Beta. The buy buttons is simply for the duration. –  Erics Aug 19 at 10:59

2 Answers 2

You can use 2x4 matrix, with Y-axis the product and X-axis the duration.

EDIT : Roughly something like this : When a checkbox is selected all other checkboxes are unselected.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

You could use 2 accordions on the 1st step. Once the user chooses the membership type, the accordion will expand and the details will show. Clicking it again will collapse the details.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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