Human Computer Interaction

Webpage Analysis

Guide: Dr. Subir Das

Aparajita TiwariGaurika Singhal

Harshika JainSailee Adhao

Controls on Book Flight Tab

The prompts that come up while hovering over the ‘Armed Forces Personnel’ and ‘Family FareGroup Booking’ controls respectively

• Special/ Disability assistance when clicked opens up a pop up box. It has a lot of information like rules, guidelines, a link to an annexure and terms & conditions.

• View search history opens a drop-down menu as well when clicked.

Booking a Flight

Default page that opens while booking a flight. Option to book Round Trip

Step by Step Analysis: PAGE 1

If option of one way is selected, pop-up box appears informing that Return fares are cheaper. ‘Close‘ to be pressed to proceed further.

The ‘Returning’ option becomes dysfunctional when the ‘One Way’ button is chosen.

Clicking ‘Multi-city’ leads to another pop-up box which makes the user assume something has been done wrong.

‘Multi city’ as the name suggests allows one to book multiple tickets at the same time.

Calendars of 2 months come up side by side with a control button to navigate forward.

The number of adults can only be 1 or more, although Flying Solo service is available for Minors.The currency option changes to INR automatically if flights selected are domestic.

Search flights icon turns blue to show selection.

Shortlisted names appear in an alphabetical order when the From and To destinations are entered. Unlike convention, pressing enter key does not select them. Default dates for both are set for same day as in the calendar.

Step by Step Analysis: PAGE 2

Status bar at the top of the page to show which step of the four-part process the user is currently on.

Page opens after clicking ‘View by Month‘. This is not always available. The lowest price is light blue. If another bar is clicked, a tiny plane along with the date and fare appears on it. Flight can be booked by clicking ‘Select & Continue’.

Departing Ahmedabad to Jammu

• Light blue bar at top of page which shows the date selected in dark blue. Price for that date appears only on selection, so it is hard to compare prices between dates.

• Flight details and fare are in two columns. Information icon next to Fare heading which shows how much luggage is allowed on that particular fare.

• A benefit option for booking the flight 6E Plus is given. The 6E Plus option box can be checked and the information can be obtained by clicking the dark blue advertisement button.

• Below that is a selection box for Terms and Conditions which is unchecked by default. If we press ‘Select & Continue’ without checking the box for T & C, a light blue prompt comes up on the page.

• There is a drop down menu for View Fare rules.

6E Plus and Price Summary

• Pressing the ‘6E Plus’ button gives more information about the feature.• Under that is information about the flight being booked and breakup of the cost. Total price is highlighted in contrasting light colour.• The price index remains on the side even when one scrolls down. • There is a ‘Nevermind’ and ‘Select and Continue’ button at lower right, which changes colour to light blue when hovered upon.

Step by Step Analysis: PAGE 3

• Colours are light and less use of blue unlike homepage. All fields have similar text and colour and grouping is done by giving adequate spaces and divisions.

• Mandatory fields are marked with light blue asterisks. (Use of light blue as a highlighting colour).• There is also a key for asterisks explaining their meaning. • Alphabetical drop-down menu for countries and states. The area code for contact details changes according to the country chosen and

can be edited later. However the Town/ City blank has to be typed manually. • There are selection boxes for retaining one’s personal information under ‘Register Now’. These are checked with asterisks by default.• On scrolling down, there is a section for IndiGo Passenger details. Most users do not notice the heading for the contact details in the

previous section and may get confused.• A check box ‘I’m this traveler’ enables one to auto-fill contact details for passenger.• Date of Birth has drop down menus for each category.• Summary column is still present on the right in the form of a drop-down menu. Price is still highlighted.

• The last section is for additional services. The selected service turns light blue and opens into details. • The services that add to cost are not shown simultaneously in the price summary column on right. • There are some options that are not available for all flights but are still shown.• The language used further promotes brand, creates element of interest and make the services sound desirable e.g. FastForward,

GoodKarma etc. But some of the terms used may increase load on user they are not easily understood.

IndiMeals# Drop down menu which gives option of veg./ non veg. meal for each passengerIndiBags## Price options for excess baggage. Excess baggage can be paid for while booking the ticket.

Lounge Option available selectively for some flights. The service is offered at a special price of INR 1200 (or SGD 33, AED 105, OMR 9, THB 800 and NPR 2100 respectively) at international terminal and INR 600 at domestic terminal.

IndiCakes Purpose is to surprise someone on the flight and celebrate 35,000 feet in the air. Net weight of Cake: ½ kg Price: Rs. 400 (domestic)/ Rs. 600 or equivalent (International). IndiCakes can be booked through IndiGo’s website by placing an order at least 48 hours in advance of the departure of the flight. Full refund in case of non-delivery.

Fast Forward For priority check in Travel Insurance Association with Tata Insurance. No information is provided but an option to select or not select a particular insur-

ance scheme. The seven insurance options cannot be opened before booking.

TravelExtras Association with Mega Cab service.Good Karma To donate Rs. 10 to the cause ‘Save the Children’ . This money can be added to the total fare.Clean the Air Initiative in partnership with Fair Climate Network. Addition of Rs. 100 to the total fare. The money goes towards

purification of water, development of rural women, photovoltaic cells etc. But passengers do nor know if their money has gone to right source or not.

Seat Plus Option for priority seating. There are two types: Premium(larger leg space- Rs. 600 per person) and Window/ Aisle seats(Rs. 200 - 300). Terms and conditions are given alongside. But to select this type of seat, one has to press the se-lect seat button at the bottom of the page.

Explanation of Functions

Overall Analysis

• The details are written in paragraphs which does not impart valuable information immediately to the user, like price, terms and conditions etc.

• Use of icons only for SeatPlus and Insurance. The icons for insurance are not explanatory and serve no function.• The terms used, like IndiBags, Seatplus are not self-explanatory and may confuse user. They are used to support brand identity.• Some of the options are unavailable yet displayed.

Step by Step Analysis: PAGE 4

Select Seat Page

• The seating is depicted iconographically. Although Indigo Colouris used to depict the seats, use of green for selected seats and grey for occupied seats (follow convention). Exits are shown in red.

• Provision of the colour coded key is very helpful. • Flight details/ Summary column still on the right. User has to scroll down to see the

whole flight but it depends on the screen size. The price also moves simultaneously as one moves down the length of the plane.

• When a premium or window/aisle seat is selected, a small box appears informing about additional cost.

• To deselect, one has to go the ‘Remove’ button on left. • ‘Confirm and Continue’ button is placed at three locations - top left, top right and

bottom right, as the user cannot see the entire screen at once. But ‘Remove’ button is only at top left.

Step by Step Analysis: PAGE 5

A ‘Review Booking’ window pops up in which one can check all the details and the seat booked prior to making the payment. The rest of the screen is covered in a transparent grey layer during this moment.

The review booking button when pressed shows the details again but in a condensed form. Also, there is an option to change the seat before proceeding for the final payment.

Credit/ Debit Card Customers who hold international cards are called for cross verification

Voucher Voucher number can be put and hence voucher can be retrieved. Instructions given under the blank for typing to aid users and remove ambiguity.

Net Banking On clicking the pay button, one is directed to the BillDesk Payment Gateway, adding yet another step in the payment process.

RuPay/ Maestro/ ATM-Debit This option also directs the user to the BillDesk Payment Gateway on pressing the pay button given at the bottom of the page. Yet another step is added in the payment process

AMEX eze Click Exclusive booking tab for American Express Card members. Feature only valid for Indian customersCitibanks Rewards Indigo booking can be paid for with Citibank reward points provided that the user owns a Citibank

Card. A button given to refer to the T & C.

• The control buttons are grouped in order of priority vertically. Amex eze Click and Citibank Rewards are options redeemed by a select few, therefore it makes sense to group them at the bottom of the page. Similarly, paying by Credit/ Debit card is the most common mode of payment, therefore it is rightly placed first on the list.

• When clicked, the control tabs of the various modes of payment become light blue from white.

Icons & Advertisements

• Consistent use of blue colour and the typeface. Essence of brand is conveyed through it.•The font size of advertisement is the largest on the homepage, almost 3x larger than the others.

+ There is no use of lengthy text to access any function, so information is processed quickly.+ Information is arranged on basis of priority and not alphabetical order. + Principle of simplicity is followed through use of icons and good break-up of functions. Whole data set of inter-est is displayed on homepage.+ The brand has been given a cheeky, quirky personality through use of witty ads. On the website this is limited but appears in a few places.

- Several ways to access same information or functions is displayed. This redundancy reduces mental load to re-member or search. - The ads keep moving every 5 seconds which is very distracting.

Colour Palette, Typeface and Font Size

130 px43 px

13 px

• The font is very contemporary and geometric at the same time it doesn’t look elite which compliments their image of a budget airline.

• The colour indigo is very prominent in the palette. The palette gives an idea of a trustworthy, friendly and cool.

Graphics and Brand Language• Have a clear, strong

brand language• The typeface itself is a

brand identity• The quirk is consistent,

it is like a personality• The initial reaction

to the typeface was redundance but is paired it up with catchy, quirky marketing like hello 6E & sleep with your wife.

Suggestions

• We removed the option of 6e alumni from the top because a very small % of the viewers would want access to it.• Size of the font in advertisement (130 px original) ‘on time is a …..’ is made smaller. Currently, it grabs more attention than is required of

the user. Because it has been made smaller, there is some resting area.• The time intervals after which the ad changes (4 seconds original) should be changed to 6 seconds. • ‘View Search History’ has been placed in a box to differentiate it from the other control. The rest are related to the type of flight but dis-

tinguishing the search history for viewership might simplify browsing.

• Drop down menu for Town/city should be present and it should be placed after country and state to narrow the search sequentially.• PIN/ ZIP should be written.• Currently only 52 characters can be entered and the prompt comes only after the whole address has been entered. Therefore, we should

be able to enter more characters for the street address .

Suggestions for improving other buttons

• When the user selects extra services like lounge, food etc. it does not show in the bill summary immediately. The Bill Summary should therefore keep on adding up the total and showing it side by side.

• Inappropriate Terminology for extra services like #IndiMeals, #Indibags makes it difficult for users to understand what the service/ button is all about.

• The details of the extra services should be presented in a better way as currently there are just paragraphs which are difficult to comprehend and also take up a lot of time of the user.