21

I'm working on a food ordering mobile website. After ordering the meal, the preparation progress screen that aims to give users a rough estimate on what time their meal will be ready. Due to technical limitations, the time estimate won't update automatically. However if users refresh their browser, the time will be updated.

i'm faced with 2 choices

  1. inform the user in words. that they need to refresh their browser
  2. change the words of the time estimate to manage their expectations.

from these which is the better choice. and how should i convey the message, would appreciate examples. Or is there another way to overcome this?

1

9
  • 71
    Not to get too far off topic, but I don't understand how updating the estimated time automatically could be impossible. Perhaps the constraints you're encountering at the moment have workarounds? Maybe we can provide an ideal UX solution here, and the folks at StackOverflow can assist with the technical limitations you're running into? Jun 29, 2020 at 13:20
  • 16
    Is there any technical limitations on why you can't update in real time?
    – Nick
    Jun 29, 2020 at 14:09
  • 27
    @AmeenAkbar Is it possible to provide details of the technical limitations?
    – lalo
    Jun 29, 2020 at 17:31
  • 41
    <meta http-equiv="refresh" content="60">?
    – lights0123
    Jun 29, 2020 at 17:43
  • 27
    What limitations do you have on a mobile site that its impossible to not update the information in real time? You don't need to make new request, just interpolate on the client side (e.g. via JS).
    – Polygnome
    Jun 29, 2020 at 19:56

4 Answers 4

108

Add the time of the last update. That way users have a better understanding how old or new the information is. But it only works if you can use the users system clock to determine the shown time.

enter image description here

If you see that people don't think about refreshing the page, you can also provide a link for it:

enter image description here

6
  • 2
    For comparison, though not exactly the same thing, the company website I worked on recently has actual statistics on numbers of customers served and people available in the company to help out. These are values established in the database, and we simply provide a subtle grey text underneath saying when it was last updated (7AM, 11/03/2020) This serves the dual role of establishing that these stats aren't rounded off "marketing" stats, they're the real deal, and also tells the reader how accurate they are. It works pretty well, though I'm not personally a fan of the exact text we use. Jun 30, 2020 at 11:53
  • 2
    @jazZRo you could simply display "updated x min ago", if the system clock can't be used.
    – 0xFEE1DEAD
    Jun 30, 2020 at 14:42
  • 8
    @0xFEE1DEAD i think if the value can not be updated due to technical limitations, the "x min ago" also can't be updated
    – Christian
    Jun 30, 2020 at 18:49
  • 1
    @Christian right, I misinterpreted it as the app can't get the latest status from the server
    – 0xFEE1DEAD
    Jun 30, 2020 at 18:51
  • 3
    Also with a circle like that, it kind of looks like a button and so the user will probably want to click/tap it. So OP might consider having something programmed to do ...something (refresh is perfect IMO).
    – BruceWayne
    Jun 30, 2020 at 20:31
98

There is no reason to calculate this for the user unless you truly believe they cannot tell time.

"Your order will be ready at 18:12" should suffice; it does not matter how many minutes away that is.

This allows the user to make a quick mental note of when to check on their order instead of forcing them to think "Oh, it's 18:10 right now and 9 minutes ago it said I have 23 minutes left; or was that 12 minutes ago? Screw it I guess I'll just open the app again." Your current plan gives the end-user both a memory problem and a math problem all at once; don't do that.

10
  • 15
    Yes! There is a fashion at the moment to show everything as a relative time, even where this involves actively reducing the amount of information or increasing the burden on the user to interpret it. (While writing this comment, this answer went from "answered 16 hours ago" to "answered 17 hours ago"; I didn't spend an hour writing the comment!)
    – IMSoP
    Jun 30, 2020 at 11:27
  • 2
    @PLL What would "updated at ..." signify. Does that tell you when the user loaded the page or is that more of a "Last status update from the server". Like at the one minute mark is it going to push out the time another 10 minutes because the order is not ready? If this is the food industry then it is atrociously short-sighted to think that the food staff is going to post real time delays to the app when they are behind on orders.
    – MonkeyZeus
    Jun 30, 2020 at 12:40
  • 1
    @MonkeyZeus: of course I’m not suggesting the staff are manually updating the estimate. Most online delivery-order systems I’ve interacted with have several electronic check-in points — eg order submitted online; restaurant confirms order received; order given to delivery staff —and the estimate is automatically updated at each of these points.
    – PLL
    Jun 30, 2020 at 14:29
  • 1
    @PLL OP makes no mention of a multi-step process so it's more of a "Come get your food at this time and it will probably be ready."
    – MonkeyZeus
    Jun 30, 2020 at 14:56
  • 3
    @anotherdave OP doesn't state that the time is ever updated. OP's literal issue is that they cannot program a simple countdown timer. So they're trying to solve it via UX instead of programming.
    – MonkeyZeus
    Jul 1, 2020 at 13:46
11

Second choice is better to manage user expectations about estimated time.

You can create background process auto refresh every X second for update estimated time left, so user don't need to refresh the browser manually.

Make Optimistic UI with time display as countdown and give progress bar on circle.

enter image description here

8
  • 19
    @AmeenAkbar What's wrong with a countdown timer? Store the amount of time needed (e.g. 3 mins = 180 seconds), then just update the countdown progress every second until 180 seconds have passed. Is Javascript not an option? Jun 29, 2020 at 20:24
  • 6
    @DavidWheatley: From a programming perspective you shouldn't use a counter. You should store the expected datetime and then recalculate using the current datetime each time you want to update the display. That said, the OP was clear that this is not an option. There may be other reasons not to do this than just "I don't know how".
    – musefan
    Jun 30, 2020 at 5:34
  • 13
    @AmeenAkbar Every other food ordering app does this. It is not impossible. It is only impossible for you, for some reason.
    – user253751
    Jun 30, 2020 at 12:23
  • 2
    In terms of expectation management I'd also point out that you should only display meaningful precision. In this case I wouldn't include seconds for sure, and I might not include minutes either unless to the minute delivery times are extremely reliable. Instead I might use generalizations like "soon", "in about 20 minutes", or "on time". Jun 30, 2020 at 20:10
  • 5
    @AmeenAkbar by the way, as a software company, it is your job to choose technology which can do the things the app is supposed to do. You don't get to choose a technology which can't do what the customer wants, and then tell the customer they can't have the thing they want. The customer will find another company who can do it (because it's possible!)
    – user253751
    Jul 1, 2020 at 9:58
3

When reading the question, the Amazon parcel tracking app sprang to mind. That shows the location of the driver, but only updates every 30 seconds or so. In between time, it shows how long ago it was updated, incrementing every 10 seconds.

Something similar might suit your needs - as it gives a view of how current your information is but still updates at a frequency that makes sense for your users.

amazon parcel tracking

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.