0

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.

1

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.

2

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.

3

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.

2

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.

1

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: http://www.guidebookgallery.org/pics/gui/settings/mouse/win98-1-1.png I think your first solution with visual tweaks is the way to go. Check out segmented controls: http://kintek.com.au/assets/UISegmentedControl_Button_iOS7.jpg

  • 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 '15 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 '15 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 '15 at 20:20
1

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.

0

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

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.