4

'Life can only be understood backwards; but it must be lived forwards.' - Søren Kierkegaard

In an ecommerce order tracker, where there are a list of 'events' (for example, order placed, out for delivery, delivered) - should the top event be the event furthest in the past, or the event furthest in the future?

I am leaning towards chronological order, so:

  • order placed

  • order out for delivery

  • [delivery failed]

  • [order rescheduled]

  • order delivered

This goes against most websites which update the most recent event at the top - like Facebook, Twitter etc.

Is there a compelling reason why I should or shouldn't match that pattern?

  • FWIW, Newegg shows the most recent event at the top when using their order tracker. – MonkeyZeus Mar 11 '16 at 22:20
  • Likewise with UPS. – MonkeyZeus Mar 11 '16 at 22:22
  • You should match the standard shipment tracking pattern. – MonkeyZeus Mar 11 '16 at 22:23
  • Amazon shows the most recent event at the bottom, so I don't think it is a standard pattern. – Midas Mar 11 '16 at 22:53
10
+100

Forward chronological order lends itself well to finite amount of data that tells a story. Reverse chronological order lends itself well to (potentially) infinite amount of data that loses usefulness over time.

For example, in Facebook, each post is listed in reverse chronological order, so you scroll back through history, but within each post the comments run in forward chronological order so you can easily follow the conversation.

Therefore, your order tracker should probably present the list of orders in reverse chronological order, so users can easily find the newest orders first, while the events of that order may be presented in forward chronological order, so users can easily understand and follow the progress of their order. If you also wanted to present useful information first, you might consider a top-level element before the list of events that provides the most recent status.

Current Status [ Delivered ]

Order History

Placed

Out for Delivery

Returned

Out for Delivery

Delivered

4

I also had this issue on the latest product I worked on and being our most important area of the product we went ahead and had quite a few user interviews to study the behaviour. We came to the conclusion that our users were expecting the first item to be the one furthest in the future(10 face to face user interview and over 200 online selected from different age ranges and domains). I cannot tell you that one way is better but I can share this information with you so you can draw your own conclusion. I do believe that this behaviour pattern is strongly affected by the large social platforms that use it.

Concluding our two week interview period for the endpoint client timeline we are presenting you the summary of our findings with a few statistical details to explain our final conclusion. Finally the interview was conducted on a pool of 237 users with ages ranging from 16 to 56, broken down in 6 different groups identified as following:

  • Group Alpha: 78 subjects age from 25 to 40, good computer knowledge, past interaction with the product
  • Group Beta: 26 subjects age from 16 to 25, good computer knowledge, past interaction with the product
  • Group Gamma: 25 subjects age from 40 to 56, basic level computer knowledge, past interaction with the product
  • Group Delta: 54 subjects age from 25 to 40, good computer knowledge and no past interaction with the product
  • Group Epsilon: 33 subjects age from 16 to 25, good computer knowledge and no past interaction with the product
  • Group Zeta: 21 subjects age from 40 to 56, basic computer knowledge, no past interaction with product

Our main goals were to determine whether our new method of approaching the timeline area is adding consumer benefit and if the issues should be approached in a chronological order or not. Grouping the issues in clusters of information was also one of the issues addressed.

The products demos that were available will be called from here on the X and Y where the X is the product with a chronological timeline and the Y a product with the reverse chronological order. Both of them have the grouping feature active.

Here are the results for the chronological/reverse chronological product choices of our pool of customers(we’ve represented the data with pie charts for ease of read, where X is orange, Y is blue, and irrelevant is green). Most of them choose the reverse chronological version of the timeline as being clearer and easier to read. Each category result in the following images:

enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

Sorry for the different dimensions on the images, I made some quick crops from a pdf. This is part the information I am allowed to share, the statistical data I cannot due to company reglementations. I tried to translate the information as best as I can from my native language and striped down confidential information but I've made it on the rush so there might be grammar mistakes. Hope this helps you!

  • 1
    If you want more details about our statistics upon finishing the interviews I can help you with that too. – Aleodor Tabarcea Mar 15 '16 at 12:51
  • +1 "Most of them choose the reverse chronological version of the timeline as being clearer and easier to read" - thanks for the very useful research highlights. – Midas Mar 16 '16 at 17:02
2

When it comes to usability, you should keep in mind that there are some patterns which you shouldn't ignore or deviate from.

The most common pattern used, when it comes to order status, is the one having the top item in the list being the furthest in the past. This is because the flow is finite (you start from ordering and you end at receiving your order). If you were to use the other way of displaying the information, it will create a disruptive pattern which may confuse the user (considering the fact the the user is not ordering something online for the first time in his life).

For more information, read this article regarding the UX patterns. (search on uxmag the article "The price of not using the UX patterns"). You will find that using the opposite way for displaying the list (the top event being the furthest in the future) will not be such a good idea.

I would recommend you to use your idea.

To be even more specific, take a look on the flow of a courier company regarding your order (this represents the most used pattern):

  • first you are given an AWB tracking number.
  • in order to keep track of your order, you just enter the company's website and search for your order status using that AWB.
  • after you hit the search button, you will get a list with the updates.
  • the list you see, is showing the furthest event in the past as being the top item (see the image bellow).

display of the timeline

To make it even easier to understand, you can design and display the flow as a timeline spread horizontally. Something like this:

a more visual understandable timeline

The image above shows the order status in this way: 1. Order placed // 2. Payment accepted // 3. Products handed over to courier // 4. Products in courier's deposit // 5. Products being delivered // 6. Products delivered

Both ways show the timeline having the top event being the furthest in the past. This is why I recommend you to use the idea you have and you shouldn't take as example websites like Facebook or Twitter (or any social media / news website for that matter) because in these cases the flow is totally different and it's not a finite one.

I hope that this answers your question.

  • Also, keep in mind that this is a process divided in steps and you have to go through all the steps in order to finalize it. This is why your solution is the recommended one, because you cannot start the process from the last step. – Phreak Mar 17 '16 at 9:24
  • 1
    "The most common pattern used, when it comes to order status, is the one having the top item in the list being the furthest in the past." - do you have evidence for that? See @MonkeyZeus comments on the OP. I have seen examples of both. – Midas Mar 17 '16 at 14:47
  • Here is an article that explains better my point of view: smashingmagazine.com/2010/01/… Read it entirely or just from this paragraph: "Best Practices in Progress Tracker Design". Sam principle applies for vertical listing. I hope it helps you. – Phreak Mar 18 '16 at 15:45
  • I think you are conflating two separate scenarios. The article above is about placing your order, entering your details etc, which has 'tracking your order' as a step. That's more comprehensive than my scenario, which is just tracking your order. – Midas Mar 18 '16 at 15:49
  • I think I expressed my idea in a wrong way. What I want to tell you is that "Tracking your order" is a process that it's divided into a certain amount of steps and it's a finite process. So the logical display of the process is to have the first element, of the list, the first step, continuing with the other steps in chronological order ending the list with the last step (order delivered). You can have, as @phyrfox said, another element above the list which shows the current state of the order, but it's separeted from the list itself. – Phreak Mar 20 '16 at 11:09
1

Always as a user my interest/reason to track my order would be the current status of it and for that reason i would always go with reverse chronological order. So for a user tracking an order is about knowing the present status of the order and not when it was ordered/shipped etc.

Hope this helps.

  • This is an interesting opinion but doesn't really help. sorry. – Midas Mar 14 '16 at 16:14
  • I agree with Kartik. Refering to patterns does not make sense if the use cases are ignored. For the specific use case described in your question, users want to know the status of their order. Question is: is it useful to make users scroll to find out the current status, or should we display it immediately? I guess the answer is quite obvious. And the different patterns that were quoted follow their corresponding use case. – Yako Mar 20 '16 at 7:34
0

I think you should actually provide both options because they fit with the two different behaviours/expectations that I think a user might have for what the tracking app does.

In the first instance (ideal scenario), the user places the order and everything is going well so they just want to know when something is going to arrive in the mail, in which case, they want to see when something is out for delivery upfront so they know when to expect something to arrive in the mail. In this case a reverse chronological order is good because the other details don't matter and perhaps you could even put a filter option so they only see out for delivery or delivered items.

The alternate scenario is that something hasn't arrived like it should, so they want to go through the history of the order and see how long it has been stuck at a particular point so they can chase up the person/organisation responsible for the delay. In this case you need a chronological order to help them figure out the steps that have already been completed and how long it has taken.

However, there are always going to be users that will use the app in their own way, which is why I think both options should be provided, with the default option for the ideal or most frequency use case, and the alternate option for the less likely scenarios.

  • Giving the option for both is a bit of a cop-out isn't it? – Midas Mar 14 '16 at 16:13
  • @Midas It would be a totally cop-out but I did provide a default and alternate option :D – Michael Lai Mar 14 '16 at 21:23
  • I do not think it is a cop-out and would have given a similar answer. At the end of the day, users are probably familiar with (and indeed expect) the ability to filter and/or sort this type of data. This is normal behaviour in many websites and other user interfaces, not just for orders placed, but search results, banking transaction history, etc. So it really is a case of meeting user expectations. To my mind, the only question you need to answer is what the default state should be (and I suggest that it would be the most recent at top). I would also make the sort/filter option obvious! – Monomeeth Mar 16 '16 at 1:43
0

A Delivery Tracking System follows a predefined process, where the process has a definitive start and finish and a number of intermediate steps, where each step may have different states.

Facebook and Twitter are very different. They display a continuous stream organised with most recent item first. There is no start or finish and there are no predefined steps or states.

So Facebook and Twitter are probably not good comparison examples to use as inspiration. Apples an Oranges.

It therefore makes sense to display the stages in the process up front, with Start first and Finish last because this follows the typical mental model of how a process will work. You can organise the process steps vertically or horizontally without braking this process mental model. Highlight the current stage and visually indicate the various states for each step, e.g. Completed, Current, Not Completed, etc.

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.