Air France
Usability testing of the EBT
Last updated: June 27, 2013 2:27 PM
Summary Copyright: MobileAware Date: June 27, 2013 2:27 PM
Introduction................................................................................................... 01 Usability testing Usability heuristics................................................................................. 01 Full Flow presentation............................................................................ 01 Homepage.............................................................................................. 01 Flight booking page................................................................................ 01 Search result page w/ flexi dates........................................................... 01 Search result page w/ departure/arrival flights results........................... 01 Flight detail............................................................................................. 01 Passenger information form................................................................... 01 Payment................................................................................................. 01
Recommendations Usability heuristics................................................................................. 01 Full Flow presentation............................................................................ 01 Homepage.............................................................................................. 01 Flight booking page................................................................................ 01 Search result page w/ flexi dates........................................................... 01 Search result page w/ departure/arrival flights results........................... 01 Flight detail............................................................................................. 01 Passenger information form................................................................... 01 Payment................................................................................................. 01
Introduction Copyright: MobileAware Date: June 27, 2013 2:27 PM
The main focus of this usability test is the EBT(Electronic Booking Tool). Jacob Nielsen’s 10 usability heuristics are used to identify the various problems found in the interface designs of the mobile website of Air France.
Usability Heuristics Copyright: MobileAware Date: June 27, 2013 2:27 PM
1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
6. Recognition rather than recall Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
2. Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
7. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
3. User control and freedom Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
5. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Source: Article http://www.nngroup.com/articles/ten-usability-heuristics/ Author: Jakob Nielsen
Date: January 1, 1995 Copyright © 2005 by Jakob Nielsen. ISSN 1548-5552
Usability testing
Full flow presentation Copyright: MobileAware Date: June 27, 2013 2:27 PM
EBT can be divided into seven different interfaces. They are as follows:
1 Home
2 Flight booking
3
4
5
6
7
8
9
10
Date selection
Fare selection
Flight detail
Passenger information
Payment Option
Credit card details
Payment confirmation
Thank you
The various problems found were grouped based on the pages they were identified. There were several other pages braching out from the main flows. The problems found in those pages were grouped under special cases.
Full Flow Copyright: MobileAware Date: June 27, 2013 2:27 PM
1. Home
2. Flight booking
3. Date selection
4. Fare selection
5. Flight detail
6. Passenger information
7. Pay ticket
8. Validation
1. Home Copyright: MobileAware Date: June 27, 2013 2:27 PM
Aesthetic and minimalist design Hard to read due to small font size and use of white text color on light gray background and also difficult to touch due to small touch target.
2. Flight Booking Copyright: MobileAware Date: June 27, 2013 2:27 PM
Aesthetic and minimalist design Low resolution icon used which doesn’t fit well with rest of the high resolution icons present on the screen.
Match between the system and the real world The icons doesn’t represent a list of airports.
Consistency and standards The statement says to find the conditions “below” which are not present below but takes ther user to a next screen.
3. Date selection Copyright: MobileAware Date: June 27, 2013 2:27 PM
Flexibility and efficiency of use User is presented with a lot of flight details with critical info missing like the flight details, connecting time (if any), total flight duration etc.
Aesthetic and minimalist design The information is not arranged properly and is difficult to read.
4. Fare selection Copyright: MobileAware Date: June 27, 2013 2:27 PM
Flexibility and efficiency of use Critical information and features are missing to take a more informed decision. For example, sort by feature is missing.
5. Flight detail Copyright: MobileAware Date: June 27, 2013 2:27 PM
Aesthetic and minimalist design, Help and documentation The information displayed is inconsistent and without any proper help and documentation.
Consistency and standards The price breakup is difficult to read since it is from right to left whereas it is from left to right in other places.
Consistency and standards The “details” block shows the various fees and taxes but not the total figure and it’s unclear whether they are incuded in the total cost or not.
6. Passenger information Copyright: MobileAware Date: June 27, 2013 2:27 PM
Error prevention The fields are not specified as mandatory but gives an error when left blank.
7. Payment option Copyright: MobileAware Date: June 27, 2013 2:27 PM
User control and freedom Country is fixed for the user which unable him to type in a different address associated with a foreign credit card.
Special Cases Copyright: MobileAware Date: June 27, 2013 2:27 PM
Consistency and standards The Baby and child info is confusing for the user. How to differentiate between “less than 2 years old” and “under 12”. Page: Flight booking page Action : Booking flights for children
Help and documentation The error message is not clear and doesn’t clarify its origin. Page: flight booking page Action : When selected “Child” as the first passenger
Error prevention User finds nothing when touches the question mark icon for the conditions. Page: Flight booking page Action : Booking flights for children
Match between system and the real world The “back” doesn’t take the user to the last page rather it takes him to the start of the search result page.
Aesthetic and minimalist design A lot of info is given under a single check box which is hard to remember as well. Page: Flight booking page
User control and freedom No back button to go back to the last page. Page: Error page
Special Cases Copyright: MobileAware Date: June 27, 2013 2:27 PM
Consistency and standards The page doesn’t mention anything about leaving the mobile website to the full website when clicked on any link. Page: Terms and Conditions
Match between system and the real world The graphic doesn’t reflect the real number of steps. Page: All pages
User control and freedom No way to get back to the last page of the mobile website. Page: Terms and Conditions
Aesthetic and minimalist design Match between the desktop and the mobile experience.
Aesthetic and minimalist design The buttons’ design is inconsistent and of low quality. Page: Overall website
Recommendations
Persona Copyright: MobileAware Date: June 27, 2013 2:27 PM
User 1
User 2
Rose is 25 years of age with a bachelor’s degree and is working as an entry level employee in a design firm. She lives in Dublin, Ireland where she would like to buy a house in the future. That’s why she saves certain amount of money from her salary. She likes to travel to new places with his boyfriend. So, she takes holidays once every 6 months. She prefers cheap flights and would like to spend most from his budget on food. She likes to analyze a lot before buying the flight tickets and often gets the best deal out of it.
Aesh is a frequent flyer who likes to travel with Air France as much as possible. He is a senior UX designer who meets a lot of clients across the globe. Most of this working hours are on the plane so he prefers the best facilities that are available in Air France. All his expenses are paid by the company. He often uses his smartphone to book and check for his flights but doesn’t want to analyze much rather wants to book tickets with minimum fuzz.
Key characteristics: . Romantic . Budget traveller . Groupon and skyscanner user . Enthusiastic
Key characteristics: . Hard-working . Flying Blue member . Value time . Ambitious
,,
,,
,,
I choose my flights in order to get the best price and adapt my holidays in consequences.
,,
Meetings dedicates my flights. I mostly travel from Europe to USA and vise versa.
UX Solutions Copyright: MobileAware Date: June 27, 2013 2:27 PM
Date selection Instead of pre-selecting “round trip” or “one-way” the user has a button that appears after selecting his first date.
Date selection The calendar is used for both dates. We highlight the duration of the travel (6 days). The user can scroll inside the calendar to go in further months.
Passenger Adding a passenger is made clearer with a “plus” button.
Breadcrumb The navigation bar is condensed to its minimum to gain space on the rest of the page.
FlyingBlue Bar On the search page, we could display at the bottom of the screen a FlyingBlue login. It would help personalizing the content, pre-filling informations.
Thank you ;)
Last updated: June 27, 2013 2:27 PM