2

I'm working on the online grocery shop, flexible delivery option is one of its key strengths. This interaction happens as the step of the checkout process.

I'm thinking of 2 options.

A. The buttons are aligned similar to the calendar view in Outlook, the size of the button represent the length of the timeslot. Each button has the time and the delivery price.

B. The price and short description are placed as subheaders on top of the buttons. The buttons show only the timeslot and have the similar size.

enter image description here

Which would you choose and why?

Improve this question
2
  • Interesting question. I'll see if I have more time later for a full answer, but one or two thoughts so far. On first glance, A looks worse on the eye and B seems better structured. But when you actually read it, A is better in terms of visualization and quick understanding, rather than having to read all entries. Maybe a solution C in-between is possible, which takes organization from B but visual differentiation from A?
    – Big_Chair
    Nov 13, 2019 at 14:33
  • Considering Monday on option A: is it a valid example case that the 11:00-13:00 2-hour timeslot would be N/A while the 2 smaller timeslots for the same time are available? If not, there might be avenues to collapse all the options into a single column, and display the price/slot size relationship in an other way.
    – doldt
    Nov 13, 2019 at 18:31

3 Answers 3

Reset to default
2

First of all, the two options you suggest don't offer the exact same information: with option A it is not clear that the prices are controlled exclusively by the length of the delivery slot. For example, one could reasonably assume that the pricing is based on the demand for the particular slot, which would also explain why each slot has its own price displayed on it. Even if that conclusion were obvious (which is debatable), having to look at each individual time slot to figure this out is tedious.

However, otherwise I much prefer option A, because it uses a consistent vertical axis for the passage of time - a paradigm already familiar to users from most calendar applications. Timeslots starting at the same time of day start at the same height visually, and 2-hour timeslots are twice as tall as 1-hour timeslots (and you can tell at a glance which 2 smaller timeslots it corresponds to).

Option B, on the other hand, has basically no information encoded in the layout, except for the separation of the days. You cannot compare the timeslots between days by looking at their vertical position, nor is it easy to tell at a glance how long the timeslots are (you have to read and interpret the numbers, ew).

To summarize, I would go with a modified version of option A, where you move the delivery slot pricing to the column headers.

Improve this answer
4
  • BTW, the irony of posting a text-only answer in which I complain about forcing users to read and interpret things is not lost on me - if someone were to edit in some illustrations (which I can't do now), I think it would greatly benefit this answer.
    – doldt
    Nov 13, 2019 at 18:24
  • That's a good point regarding the availability of the slots. The price fluctuations based on the availability can happen.
    – Anton T
    Nov 14, 2019 at 8:59
  • @AntonT, in that case, how does your option B allow for displaying such fluctuations? It states quite clearly that every 1 hour delivery slot is 6,95 €.
    – doldt
    Nov 14, 2019 at 9:03
  • You are absolutely right, my intention was to make this example less complex.
    – Anton T
    Nov 14, 2019 at 11:51
2

A blend between option A and B works. The pricings can just act as the subheaders for the time column. The visual representation using the different rectangles to give the calender is very nice and A can be tweaked further.

Improve this answer
1

On comparing A and B, I would choose option 'B' because of the better arrangement, good structure and concrete details.

As much as I want the interface to be interactive, I also want it to be simple, detailed, and easy/quick to grasp.

Improve this answer
1
  • I agree, the first one lacks column or row headings so it almost seems random until you figure out the column/price grouping yourself. Though to be honest now that I think about the "1-hour" vs "2-hour" delivery slots header makes me think of the time it will take to get to me like "2-day shipping" phrasing.
    – DasBeasto
    Nov 13, 2019 at 17:52

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.