Cognitive Science and Redbus.in - Part 1
Redesigning and reviewing Redbus.in by applying cognitive science
I call myself a train person rather than a bus person. I prefer trains and have traveled mostly in them compared to buses. Recent news about the RedBus.in acquired by ibibo group got me to this website. Though design is not of primary focus for everything, but it makes people feel they aren’t doing a very difficult task.
Perceived Top Left
Our perception to websites has forced us to ignore the actual top left as it majorly consists of the logos or branding. So for everyone the top left starts just after the logo/ branding part of the website.
Redbus does great by placing the most important piece of it on the perceived (vs actual) top left. Users fill from, to and date of journey and here I find a great feature which is quite innovative and useful, the optional Date of Return. This feature is amazing!
This little pop-over comes a few milliseconds after you come on the site. During those few milliseconds user had actually clicked on the ‘from’ input box and started typing. As this pops up and animates to show the ad, the peripheral vision which is good at noticing motion drags the central vision from the input box to see the ad.
You still can’t be sure whether the user read it though!
Now because of this ad, the user who was typing in the ‘from’ input-box got delayed and distracted. So then, how do you send this information and make the user book round-trips without distracting or annoying him?
Date of return
Make the most of the amazing feature Date of Return. A small detail to it can change the way its perceived. Instead of just writing (optional) it could be made (optional, with discount).
Roundtrip feature in the listing page
User’s perceived left forces them to start seeing the website starting from the listing or the sort able options above the listing, which is definitely good. But the Make a round trip booking feature which comes in the ignored area is completely missed.
People will not see everything that is on screen when they are looking for something else on screen. In the listing page the user intends to look for the buses and completely misses out on the make a round trip feature, even though it helps them. We can get the user to notice this with the help of his peripheral vision which actively notices motion, blinking or animations.
A simple animation would force our peripheral vision to notice the round-trip feature.
Departure, Arrival and Hours listing and Our Eyes
Our eyes are good at scanning, we make jumps from one group to other to scan the data rather than reading it. Like shown in the image.
The current style of listing forces users to read data because the jump is difficult. Users are forced to sort the data according to Dep/Arr/Hrs. There is a small icon which reads Dep/Arr/Hrs but since both the Dep time and Arrival time are in the same color and same column it makes it difficult for the user to scan data.
Lets say user X wants to book a bus at 5:30. Our brain has this great capability of recognizing a particular no. in the middle of a random sequence of numbers. All it needs is a cluster of numbers which fall in the same category. X needs to know what all numbers are departure times and he will instantly find out whats the time he prefers.
For an user who is particular about amenities, I’m sure quite a few look for charging ports or reading lights. Here I’ll be applying Gestalt’s law of similarity.
The law of similarity states that elements within an assortment of objects are perceptually grouped together if they are similar to each other.
With the spacing being uniform it would be easy for our brain to scan down a column and figure out what all is applicable for each row. Whereas the way the amenities are shown now doesn’t consider grouping. Sometimes the ‘+’ icon for other amenities is seen in the 4th column and its in 5th for others. The spacing too is not so uniform which takes the whole arrangement away from the grid and makes it difficult for the brain to process.
The image above contains two different cases the right is difficult for the brain to process, whereas the left fails at the law of grouping. The right part of the image is the actual redbus listing, here the user’s brain never starts to scan the amenities column, because it really is difficult for him to process it. The break in blue part shows how he processes information. In the left part of image as soon as the user is shown a grid he instantly tries to scan down the columns. But you can see that the ‘+’ icon still doesn't obey the law of similarity, which makes him difficult to scan that particular column.
I will continue this in the next article and conclude it with possible suggestions to improving. All these are applications of cognitive science to the current design and might be proved right/wrong with the actual data of how users are using it. The points mentioned above result in a delay in processing information, which delays customer to book tickets.
I am a Digital Product Designer, you can get in touch with me on twitter or email me on email@example.com