I'm designing an ecommerce checkout process and I would like to get some feedback or other ideas on how to visually display the shipping options for customers.

Currently we have 3 options, regular, express and pick up in store. We can use the drop down option and even 3 radio buttons, but I feel those are outdated.

Below is a couple of wire frames that I would love to get feedback on.


enter image description here

There is a thin grey bar that highlights which option is selected. I also included a radio button as I am uncertain if a user would know whether or not they understand that they can select one of these 3 boxes.


enter image description here

This one I created two visual cues, one is a tab selection option and an arrow that highlights which selection the user is on or has chosen.

Thank you in advance.

By default, the first option is pre-selected.

6 Answers 6


I definitely like the first option the best. The second one, although it looks nice, it kind of gives the appearance that there will be a different form for each delivery option. Also, if you don't like the radio button, you could use a different visual indicator, such as a green check mark.


I don't think that there should three options to choose from in either UI option. Implicitly there are two options for a user in that they can either have their package delivered or they can pick it up in store. I'm also assuming that the information a user would need to enter would be different for an in-store pickup in comparison to a delivery.

My recommendation (see below) would be to use the second UI option you displayed with the tabs but go with only two choices in "Delivery" and "Pickup In-Store". In the "Delivery" tab I would add an opt-in option for "Express" delivery. Feel free to move the "Express Delivery" opt-in option where you see fit (as it's probably not the most optimal location).

UI Checkout Alternative

This should cover off the delivery requirements, allow for the user to choose between a simple two options for receiving their package and accommodate for different information that needs to be captured for the delivery options.


The radio buttons are better associated with uniqueness of the selection than the tabs.

However, I would use none of your options but move the delivery option to the last page just before the user places his order.

Currently, you mix the user details with the order details which is confusing. Also, you have only three options now, take in account that you will have more in the future so the space will not be enough so moving it to its own page will save you from redesigns and also give you the option to explain each method in more detail.

See how it works at Amazon for example.


Tabs idea is bad. We went from "I could have a drop down but it feels outdated" to having three big tabs. Users will wonder what is hiding behind each tab. But I guess it will be the same content on all three tabs? It isn't really clear if the text I enter in one tab will be present on the next.. This is how users think of tabs: enter image description here
(source: guidebookgallery.org)
I think your first solution with visual tweaks is the way to go. Check out segmented controls: enter image description here
(source: kintek.com.au)

  • well, it's pretty obvious for me that the content will be different. Also, you're confirming what I said: tabs are widely used and understood, while segmented controls are novelty for older users (specially those not using mobile devices), not to mention a segmented control block is not a tabbed content selector (like in OP's sample), but granular selection of controls that interact between themselves.
    – Devin
    Jun 30, 2015 at 19:18
  • Maybe we have a misunderstanding? What will be the difference between the three tabs? My understanding is that first name, last name, address, city etc will be exactly the same in all three. If this is the case then its a bad idea to use tabs because this is not how tabs are normally used. My understanding is that OP is after alternatives to a drop down menu/ radio buttons.
    – mauswe
    Jun 30, 2015 at 19:54
  • well, while the first 2 tabs may be quite similar and probably joined, the 3rd is obviously different. See that in the first 2, user address is required, while in 3rd one not only is not required at all, but user will probably need to pick up a store, hence entirely different process and content
    – Devin
    Jun 30, 2015 at 20:20

Your first option is well resolved. It may need some visual work, but it's very clear about its intentionality, without the shadow of a doubt.

As for the second, maybe it's a wireframe thing, and that's why it looks a bit "iffy". However, it's a very common and established pattern. It connects with the old filing systems, Rolodex, address books and even school notebooks, so most living persons has been in contact with this behavior many times in their life. The problem I perceive with your wireframe (and again: it may be just a wireframe thing) is that you lost that connection from a visual point of view.

Now, take a look below:

enter image description here

As you can see now, the connection is back by adding depth with shadows and rounded corners (which according to Contour Bias concept helps to ease friction).

Now it's clear those tabs are actually tabs and they even have an almost tactile/material property. They can be chosen, they can be selected and it's easy to understand picking one of those will select a different sheet of paper

With an approach like this, I'd go with option 2, because it's the most used and common pattern for your purpose


In your case, you need to implement steps, you have to use the stepping behavior since you are dealing with payment. So you must make sure that who enters this page he/she needs to fill all the fields in order to proceed.

So I restructured the screen in a new way as the following. Another thing you must also apply required fields this is important to make sure you got a complete record of the customer.

In the screens, you can keep the delivery options all the way, in order to change if you want to.

Now coming to the delivery options, as my friends mentioned before me, radio buttons are the best implementation in your case. And every step accomplished you can change the number to a tick. But also the user can go back and forward until he/she accomplishes the process successfully.

I didn't include the last step, because it's straight forward.

Best of luck,

enter image description here

enter image description here

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.