I want to know if anyone can help me with my problem. I want to switch the stepper in my wireframe. I want to put details in step 2 in step 1 and vice versa. At the same time I want to keep the user aware with the estimated price before s/he process the order. Here's my current wireframe. I want to know what do you think and hope for some good feedback. thank you.

enter image description here

and here's the switched steps

enter image description here


You can split your Process button to be able show the estimated price at the end

Spilt Process button to show estimated price


If you need step two details in step one, then those details are step one details I would assume. I guess it depends on your informational hierarchy but if they need it, it should be there.

This all depends on your specific user goals but I've seen many companies online use a global "cart" price. It just sits somewhere clearly labeled (text or icon) and usually a tool tip reveals cart details. There are a plethora of ways to keep the user updated on their price.

  • I want to switch it so the user no need to put effort in inserting his personal detail if somehow he doesn't want to make order because his order doesnt meet the specification on order details. I understand the global price thing, but I need some suggestion where to put it within the stepper. just a note, when user finish with step 1, the system will automatically close the step 1 and open the step 2 instead – surisuri Feb 22 '17 at 5:10
  • It seems the price is based on selected options by the user? Step one looks good, have all necessary (for updating the price) options appear first to the user, then update the price accordingly. – Nolan Park Feb 22 '17 at 5:21
  • yes, it is. with the page automatically change after the user insert his input, don't you think they will accidentally missed the estimated price? This thought kinda bother me, but I dont know where else to put the price so the user will be aware of it – surisuri Feb 22 '17 at 6:27
  • Make it bigger if it's important or animate it in to draw attention. – Nolan Park Mar 3 '17 at 23:14

enter image description hereFollowing on from Shreyas Tripathy's idea - it would be ideal to keep the estimated price in the same location with the same styling. For Step 1 mockup - Create a 'Next' button with the estimated price similarly to the 'Process' button with estimated price. The step 1 and step 2 caption bars could display as breadcrumbs at the top.

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.