Cognitive Science and RedBus - Part 2
Second part of my previous article cognitive science and RedBus.in
I will start by stating one of the Gestalts law of grouping which is proximity.
The principle of proximity states that, all else being equal, perception tends to group stimuli that are close together as part of the same object, and stimuli that are far apart as two separate objects. This allows for the grouping together of elements into larger sets, and reduces the need to process a larger number of smaller stimuli.
Grouping happens without us knowing about it. When we see a flock of birds moving in one direction we group them into a single entity. When we see a flock moving in different directions we consider them different entities.
Blue is desired grouping. Green is actual grouping
In the above image the blue highlighted regions show the desired way of grouping. Timings in supposed to be one group, ratings in another and information of the travels in one group. Instead the amount of spacing between the top level information and the second level information forces us to interpret the data as different entities rather than a single group. The travels, timings and ratings become 3 times the no. of stimuli and these are all visual loads on any user.
Each of the rows is either 114px/120px/124px/ 130px depending on whether the row has icons or sometimes top/second level information goes to 2 lines. Is it too much of row height? Or is it because of the typography? Travel’s name, Bus Type and canc. policy and address links all of these are of same size 11px.
Windows mobile uses a combination of contrast,typography and spacing to create groups so that our brain can easily process information.
The blue is the first level of scanning where user can just go through the top level and then finally when he reaches the desired option, he notices the second level information in yellow.
In the RedBus website the a horizontal double line separates two different travels. Separating two entities with a border is good,but sometimes a little white space can act as a clean separator. Like in the windows mobile’s screenshot above.
It just leaves me in awe when I see how the ticketing in India has transformed. In a listing of 25 travels only 2 do not posses mTkt facility and that’s really amazing. In that case wouldn't it be easier to mention that most of the buses use mTkt. In this way one column could be completely removed and the details of mTkt not being available can be mentioned in the next step where user clicks view seats.
Taking a print out is an extra motor load on the user,which is solved by giving the ticket to him as SMS. Great!
That’s the RebBus ticket I booked for bangalore. Though I hate bus travel I wanted to experience booking through RedBus and see for myself.I really appreciate the neatly formatted ticket, separating info from headers.
There is simply too much of information which is quite not required on a mticket. This particular message is 4 SMS long! Fare paid, RedBus message, Landmark and then address too? The ticket checkers are always in a hurry. When he asks for your seat no. you panic to find it among so much information. The order makes much more sense when its <Travels>, <Dep>, <Seat>, <Address> and <Contact>. <PNR>, <TIN> are secondary information which as an user I wouldn't be using while boarding a bus.
When only one ticket is booked why would it say <Seats>? A simple message in the end saying reply HELP for assistance would prove a better experience. In reply to the message you could place a call which you do in case of booking tickets wouldn't you? Cut the SMS to bare bones and give out the essential information in it, 4 SMS long message is too long! Imagine a user having to forward this message?
View Seats feature has been carefully thought of and designed too. The idea of not moving user from the current page as soon as he clicks it or not showing a pop-up like in the case of IRCTC is great.
Even on click event of view seats is also well thought off. When a user clicks a view seats button for a listing which is in the middle the listing is taken to the top and it expands to show the seats. Although, the animation is so fast that the user doesn't really get what had happened. If the animation were a little slower he’d have appreciated it. It almost looks like a magic trick with no presentation skills!
Selecting a Boarding point
Well recently RedBus launched virtual Bus stops where you can view pictures of the boarding points. I myself found it really useful! But I dint know it existed, and i dint know it was going to show me pictures of boarding points too!
May be the message Help me select the boarding point isn’t the best way to communicate the virtual bus stop feature. The indication of using maps to select my boarding point is completely lost. The message would have been effective if it stated “select your boarding point on our maps.”
Would it not be great to show the virtual bus top with a small map once the choice is made instead of just showing the textual address? Well here you are giving users the feel “Oh.. I can now see the address in maps.” A feature so good should be used to the fullest.
Introduce a little typography, grid and colors
I did three things here. Firstly, used a baseline grid and a vertical grid too. Secondly I used typography and separated information and assigned weights according to the importance it carried. And Finally I chose a color palette which gives the brain a logical hint.
When trying to read through a row your eye would easily scan Travel’s name(1), Departure time(2), Seats available(3) and Price(4). This happens because color is visual selective so its easy for us to read the information in same color even though they are not in the same group. The reason for giving same color for 1,2,3&4 is that these are the quintessential information required to consider booking a ticket.
The typography and baseline grid allows us to maintain an order and scan the columns of same group. Consider reading the arrival times in the current design and compare it with proposed design. Even the reason for shifting price into a different column is also because it easily allows one to go up and down the column easily.
My previous article and the present one are an attempt to apply my knowledge on cognition in design. It felt great when my previous article reached RedBus design team and they commented on it.
Update: This article got mentioned in usabledeck which is maintained by a team UX experts.
I am Imran Parvez, a digital Product Designer. I observe human patterns and real life activities and build platforms that engages them in the easiest way possible. Sometimes I do envision products that are made for the future.