13

I am developing a London jouney planner app (called Pubtran London, it's on Android Market).

Somebody told me that the results are hard to understand and I was quite surprised by that. Maybe it's because Londoners (I'm from Prague) are used to something a bit different. I take a different approach than TFL and other journey planning apps.

Here are some screenshots, what should I change (if anything at all)?

alt text alt text alt text alt text alt text

|improve this question
6

Let me tell you what I think I'm seeing (AKA "Think Aloud Protocol"). Perhaps that will help you pinpoint areas that are unclear...

Screen Capture 1

I want to go from High Street Kensington to Marble Arch.

  • I don't understand what "Approximate location known" means. Specifically, why do you say "known"? Is it supposed to be "Approximate location if known"?

I'm supposed to fill in a time. Is it the time I want to depart or the time I want to arrive (or something else)? I assume arrive, but it's not clear to me.

Screen Capture 2

At first, I didn't notice that there were two "journeys" displayed on the screen. How about adding a heading to each journey. For example:

Option 1 - Duration 1 h 8 min
Option 2 - Duration 1 h 1 min

I see "Gidea Park" and "London Liverpool St" with times next to them. I assume those are stops that a bus/train makes?

Next, I see the gray text. At first, I'm not sure what it means. After staring at it for a while, I think it's telling me I should take the Natinal Express E.A. and get off at London Liverpool St.

Later, I realized I completely wasn't paying attention to the red symbols. My eyes just weren't going there for some reason. The red symbol seems to be telling me what bus/train service I should be using. The gray text seems to be providing clarifying information. So, for leg #2, I think I need the 78 bus destined for "Nunhead / St. Mary's Rd".

Screen Captures 3-5

Once I understand the pattern, these should work the same as Screen 2.

Suggestions

I think you need to add a few cues/hints about what people are looking at:

  1. Perhaps "Time" on the first screen should be changed to "Arrive At".

  2. As I said above, headings for each option would be good.

  3. Try putting the symbol (the bus/train service) and gray clarifying text (which direction/"destined for") all in one obvious row across the top of each leg of the journey. Below that, perhaps something like this:

    Board - Gildea Park 13:25
    Exit - London Liverpool St 13:56

|improve this answer
  • As for “Approximate location known,” I had also wondered what it meant, but 10 seconds later I had realized that it could mean that the default value for the “From” field was provided by using the information about the current approximate location obtained from the location service (GPS etc.). (Of course, I may be completely wrong.) – Tsuyoshi Ito Nov 1 '10 at 2:49
  • Thanks, helpful answer. 1) I was also quite unsure whether "Approximate location known" was clear (English is my second language, I'm from Prague). It means, that I obtained location fix from mobile network (it's somehow calculated using signal strength from nearby mobile cells/antenna-towers, usually about 500m accuracy). The location is used as one of the factors by which I sort suggested stops (see first picture here: sites.google.com/site/pubtranforandroid). Good point with the time, I'll change that to "Depart At". – fhucho Nov 1 '10 at 9:45
  • (continuation of previous comment) 2) I'll consider adding headings or maybe I could make some stronger visual distinction between options. 3) I'll test how the different layout will look and then decide. – fhucho Nov 1 '10 at 9:57
  • I agree with most of the feedback here - great content in somewhat confusing presentation. I'd like to know the start/end times of a journey, and how long (countdown/updating 'in 26 min' text) until the transport departs. Very promising app with great results. – David Snabel-Caunt Nov 3 '10 at 14:55
2

I also find the results confusing initially (after looking at them for a few minutes, I'm still not sure I understand them completely).

Trein

Try checking out the Dutch iPhone app Trein, which is a great UI for planning trips using the Dutch train system, NS. Here are some screenshots of that app:

Trein app screenshot - Stations Trein app screenshot - a station

The Trein app is very well done. The left screenshot shows stations and departing trains in the next few minutes. The right screenshot shows an individual station with trains listed (when it's leaving, where it's heading, and on what platform). This is a very easy to understand structure.

Your app

What I'm missing in your results list is this ease of use, or in any case the immediate ability to understand what's being presented. On your screens, I can kind of see similar elements (destinations, lines, times, locations, etc) but the relationship between the different elements is unclear. For instance, there's no language indicating what the two street names by each list item mean. Are they from/to locations? I should assume so, considering the timestamp present by each line, but I have to guess - it's not entirely clear. Then, below each item is an arrow pointing to the right followed by the name of a location. Sometimes the arrow is preceded by something. I'm not sure what this means.

Also, on the home screen, you have a field labeled "time" but it's not clear whether that's departure or arrival time. Sometimes I want to specify my trip by one or the other. It might be convenient to allow that distinction.

Hope that helps. It might be useful to check out more alternatives like Trein to see what competing apps are doing. You can also try having people in your immediate environment try to use the app without giving them any hints, and see what they're confused about (and what's clear to them). That will also give you a lot of insight into what direction to make changes in.

|improve this answer
  • Thanks for answer, a brief comment: Trein - I think you have to guess here too (e.g. how to interpret the second screen) but overall looks like neat app. My app - the gray text "52 -> Victoria" means "Take bus 52 towards Victoria". Do you think I should be more literal? I think the biggest problem of my UI is that it gets messy when there are more bus options (like in the last screenshot). The time is departure time, I'll add an option to choose if it's departure/arrival time later. – fhucho Oct 31 '10 at 20:15
  • Thing about Trein is that it uses information in a familiar way - to people traveling with trains in the Netherlands, it's obvious what the numbers are. Yes, being more literal (perhaps with microcopy) could help. If there are more bus options, perhaps you should consider hiding them behind an interaction, such as the way Trein makes it possible to tap through to another screen to see more details about a specific train. – Rahul Oct 31 '10 at 23:04
  • 1
    I like the emphasis on minutes, that helps deal with the informaiton overload quite well. – peterchen Dec 2 '10 at 12:05
2

Pubtran? So it gets you from one pub to another? Yes, I'm making a joke, but I do wonder what signal this name sends.

I like that the icons are recognizable, and I like that the colours match the official colours of the underground's lines. The three-letter abbreviations work, and I also figured out that the arrow indicates the direction/terminus of the line/train/bus. I also like that each option tells me how many minutes I've got to get myself to the platform or to the bus stop before that particular option expires. Perhaps use the same font, although it's probably priprietary.

Maybe the reason people are confused is because of the sheer volume of results. I know it's Bus 10 from Kensington High Street to Marble Arch (does Bus 9 also work), or else the other option is to just walk across the park, whereas your app seems to list many, many other options. What's up with that? Or am I misunderstanding the screen shots?

|improve this answer
  • Pubtran = Public Transport. If you have a better name, let me know :-) (seriously, I think "Pubtran" sounds a bit weird...). What do you mean by "same font" - same as what font? As for the options - e.g. in the last screen you can use buses 10, 9, 452 or 52 to get from Prince... to Rutland... You seem to be from London - do people there often need destination stations for buses? Or can I omit that from results? – fhucho Nov 1 '10 at 10:16
  • I mean this font (en.wikipedia.org/wiki/Johnston_(typeface)) or this font (en.wikipedia.org/wiki/Transport_(typeface)) – JeromeR Nov 8 '10 at 2:50
2

I would go for a visual approach instead like

http://worrydream.com/bartwidget/

Also people tend to focus too much on the interaction part instead of the visualization.

What you should aim for is to remove interaction from the process. Let the app learn what your needs are and adjust to that. Show the schedule visually, adapt to the user.

This is the power of the mobile platform.

|improve this answer
  • To be honest, I find that quite hard to understand... – fhucho Nov 1 '10 at 11:29
  • Which part do you find hard to understand fhucho? – ThomPete Nov 1 '10 at 19:50
  • 1) What does the text like "Fremont" mean, but that won't probably be problem for local people 2) Where do I transfer? (it took me a while to notice the gray text) – fhucho Nov 2 '10 at 16:16
  • If you live there you would know. It won several awards. – ThomPete Nov 2 '10 at 20:38
  • BART is nice, but what you already have is very easy to follow, provides multiple options and just needs better labelling, not a whole new approach. – David Snabel-Caunt Nov 3 '10 at 15:22
2

This is how I redesigned it:

alt text

I think it's much better now :-)

|improve this answer
1

How about the German Öffi?

You can se hhere very good how much time do you need to get to your destination, how many time you need what transprtation do you need..

And than, if youser interestend on some connection he drill deeper into data..

I am not allowed to post images :(

...here is the link to the app http://www.appbrain.com/app/%C3%B6ffi-for-de-at-ch-be-uk/de.schildbach.oeffi

|improve this answer
0

The redesign looks much cleaner!

I have a few comments and ideas, not a real answer - but a bit to much for a comment field:

One thing I found immensely useful on the road: indicate the direction of the transport I have to get on - in most PT systems, that's the end of the line station.

When all I know is "from here, take #12 to Blaxley Rd", I often have two #12 to pick from, and have to resort to studying the route plans or asking people (blech).

Indicating ca. 2 stations before the station to get off can be helpful. Even now, with in-transport signs and station announcements: in a crowded bus, station and in-transport signs can be hard to see, and street names announced in a foreign language can be impossible to understand.

Idea: When picking which option, I don't really need all the details at once - e.g. the change times should be accessible but usually aren't necessary. Also, when carrying the app with me, it would be cool to highlight the current step.

So maybe giving the list a "Detail View" for each step (by just tapping it) would be a simple solution to reduce information overload while actually packing more data in.

Another nice addition would be easily rerouting from the current point - in case I miss a connection, there is a delay, etc.

|improve this answer

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.