Interface Design of “Mumbai Navigator”
August 29, 2008 at 6:23 am | In interaction design, interface design | 4 CommentsTags: interface design, mumbai navigator
As we had some discussions/comments (more comments i got on gtalk) on “Mumbai Navigator” about the interface, i am posting the flow of the application here. Though the flow i am showing here in not so much into detail, but enough to understand.
lets assume that user has to go from “andheri” to “mulund”. He can enter source and destination in the given column. By clicking on options, it gives you a list of options which you can select. So, here user an select buses and trains to desired soruce and destination. Also, if user wants he can enter a bus number or train name to find the route of that bus or train.
Here, we will assume that user clicks on “find buses”. He will get the list of buses and their approxi. time from “andheri” to “mulund”. he can click on the desired bus to ckeck the route of the bus. As shows i the above image, if user selects “425 ltd” then he will the route of “425 ltd”.
If there are some buses which directly do not go from andheri-mulund, but one has to change the bus, then user can select an option called “buses with 1 change”.
As user selects “buses with 1 change”, in the current scenario he gets the list of buses with 1 change which is “andheri-sakinaka-mulund”. User can select the option and get list of two routes shown in the above image. then user can get the bus numbers by selecting “andheri to sakinaka”.The user flow might seem a bit long, but the data given by client is huge as there are large number of buses in Mumbai with extra large number of station in it.
I am looking for some critics and inputs about the interface. Would love to get feedback about it.
4 Comments »
RSS feed for comments on this post. TrackBack URI
Leave a comment
-
comments
my del.icio.us
Blog at WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.
Hi Keyur,
I have few comments on visual design and information architecture here.
1. instead of using gradient use solid color. may be you can used two different shades.
2. use some icons along when listing the buses available for a route. So if the user is using that service for more number of times, he’ll learn to visually make out.
3. bring “bus with one change” item in the top of the list. Say there are more number of buses not fitting the screen area “bus with one change” item will go down the list out of screen area, and user may miss that out or have to scroll to dig it.
4. I wonder you haven’t used map here??Any specific reasons?
5.You need not to show Mumbai navigator at the top in every screen. That’s waste of real estate. Try using a small icon instead.
Comment by Kumar — September 15, 2008 #
Hmm Great,
The interface is looking good, I would like to comment on the navigation.
You see the select button is changing with the interface, I think that should not be the case.
Once you are fixing it in middle let it be there then dont change it to left softkey. I no u are trying to use conventions in Nokia phone but may be by not using it and being little diferent u can make navigation simpler.
May be you can do some kind of user studies and you can find some good ideas from context, like the limited and AC bus numbers are written in Red colour. So you can use some kind of colour coding for both buses and train which will make interface easiser and intutive. Just few CIs are required to get these kind of insights.
I think u are not using map because it might be very slow on mobile phones, if this application is not using Local WAP Application to support.
There is huge scope for using icons (which are light on data transfer) to make interface much simpler.
The list will go on and on
May be I’ll talk to you when I come back to IIT.
Regards,
Atish
Comment by Atish — September 17, 2008 #
Hi Kumar,
First of all thanks a lot for your valuable comments.
1. I think using a solid colors is a good idea. Till now whatever phones i have seen (like nokia phone), then they have used solid colors. May be it makes interface look more simple. But i tried to change that and see how it looks. For sure, i can try using solid colors and lets see how simple it makes.
2. there are huge number of buses in the list we got from Best, so using a different icon for every bus will not be possible. Also, if that option we think, user will get confused of lots of different icons appearing every time. What you think?
3. Till now whatever basic testing i did with some users, they wanted direct buses on the top. Basically users are more interested in the buses directly going to the destination. They are not bothered about “buses with one change” if they get a direct bus to the final destination.
4. the reason behind not using maps are, currently we are targeting all phones which includes low end phones also.But for sure, we are even thinking to integrate both text and maps, so user can choose according to his choice.
5. Yes, it is really a nice point.
Thanks again Kumar.
Comment by keyurbsorathia — September 17, 2008 #
Hi Atish,
Thank you for your comments.
Some point which i would like to mention is.:
1. Yes, i agree that at some points “select” button is changing, but option button has to be there to look after other necessary features.Also, every time you press the center button always results in “select”, so in case of left nav key being option, center key will help being “select”, so every time user can “select” by just one press.
2. its really a nice thought of using red text for AC buses, similarly i can use more variation in text wherever needed.
This project is currently on hold because of other work going, but once i complete new version with some very good suggestions from Kumar and Atish, will sure post it again.
Thanks again Atish
Comment by keyurbsorathia — September 17, 2008 #