I am trying to design an app that shows the amount of time until buses arrive at a given stop. Originally I had something like this in mind:

Original idea

But I was wondering if something more graphical would be better: New idea

The reason I am looking into a graphical representation is that there are some stops with over a dozen buses, and some stops with just a single bus. I would like to design the layout so that it doesn't look crowded for the busy stops, and not too empty for the more idle stops.

  • For a time-based app, time is a fairly quick an accurate way to figure things out. A visual representative may be a good idea, but be sure to validate that through testing. People may very well prefer the simplicity of the time stamps. – DA01 Nov 13 '13 at 1:18
  • A major flaw is the lack of GPS on the buses (which I know isn't your fault). If I'm waiting at a bus stop I need to know when the next bus will actually arrive, not what the timetable says. But perhaps your buses are more reliable than the ones I use! This is a real reason not to use a countdown, which gives the impression that the bus will actually arrive at "zero"; but if you don't know where it is, it might be early (and I miss it while I'm in the coffee shop) or late (and I'm left standing in the rain). At least the timetable view is dispassionate. – Andrew Leach Nov 13 '13 at 7:38

Take a look at how Google does real-time flight tracking: Google flight tracking

This configuration displays everything a user might need to know about a flight, and fits it into constant space regardless of flight time or distance.

If you wanted to run with this idea, you could do something like this:

enter image description here

Points to consider:

  1. What graphic is the correct one? Will a pictogram be more useful than a simple shape?
  2. How will you adjust for late or cancelled services?
  3. How important is accuracy? ie: It seems useful to know the exact expected time as well as an overall progress meter
  • The data itself is just static (there is no GPS tracking on the buses, all I have to go on is what time they are supposed to be there according to the schedule), so I don't have to worry about late/cancelled services. Thanks for your feedback – TylerAndFriends Nov 13 '13 at 0:08
  • 2
    Side note: people standing in the sun looking at their glossy, reflective phone screens need a very high-contrast colour scheme. Please make sure your final app has higher contrast than your mockup! – Bryce Nov 13 '13 at 0:13
  • Out of curiosity, where did you get that silhouette of the bus? – TylerAndFriends Nov 13 '13 at 0:16
  • A Google image search for 'bus icon' led me to this page: fatkook.com/FATKOOK/+.html . I then flipped it and chopped it in Photoshop. If you're after an excellent source of icons, check out thenounproject.com – Bryce Nov 13 '13 at 0:19
  • There is a difference with planes and buses, however. Planes move from point A to point B. Buses, on the other hand, have many start points and many end points. Look at the diagram, where the bus is 75% the way across. As a user, it's not obvious what this is 75% of. Is it of 10 minutes, is it of 10 km? – Brendon Nov 14 '13 at 9:13

What came immediately to mind for me was icons like this:

Countdown image

You could colour code the image by urgency/time. There are different ways of styling an analog countdown clock face like this, another option I've seen is a ring around the outside, and the remaining time in the middle of the ring.

It wasn't immediately obvious to me what the numbers were in your mockup. Are those bus route numbers? Time until next bus? Is the bottom number expected arrival time? What is the top number?

What would be important for me to know is time remaining until the bus arrives. I would ensure this number is large and marked with the interval. Expected arrival: "22m" or "12min" or "Now".

  • +1 for duration rather than time. If a user has already arrived at a bus stop (or is close by), it doesn't matter what the time is. They've already arrived, so it is only the duration that matters to them. – Brendon Nov 14 '13 at 9:15

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.