Re-design of Suvarnabhumi Airport website

Analysis, redesign and evaluation of the website of Bangkok Airport

Suvarnabhumiairport.com

Rune Weise Kofoed, 115431 Nicklas Skov Pape, 768621 Tilburg University Design of Business Communication May 18th, 2013

2

Contents 1. AnAlysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.1 MotivAtion . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.2 the probleM . . . . . . . . . . . . . . . . . . . . . . . 4

3. evAluAtion . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 3.1 Methods . . . . . . . . . . . . . . . . . . . . . . . . . . .16 3.2 results . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 3.3 disCussion . . . . . . . . . . . . . . . . . . . . . . . .18 3.4. vAlidity . . . . . . . . . . . . . . . . . . . . . . . . . . .19

1.3 CoMMuniCAtive objeCtives. . . . . . . 8 1.4 tArget group . . . . . . . . . . . . . . . . . . . . . . 8 1.5 ACtivities of the tArget. . . . . . . . . . 9

4. referenCes . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 5. Appendix. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

1.6 Conditions for the design . . . . . . . 9 2. towArds A ConCeptuAl design . . . . . . .10 2.1 Questions to be Answered. . . . . . .10 2.2 interACtion . . . . . . . . . . . . . . . . . . . . . . .12 2.3 Content And struCture . . . . . . . . .12 2.4 styling And lAy-out. . . . . . . . . . . . . .13

3

1. AnAlysis (9876 characters)

1.1 MotivAtion We believe that a professional and easy-to-use website is vital for a modern and international airport like Suvarnabhumi in Bangkok. The airport management’s mission is to: “(...) enhance the service quality of the airport to be one of 10 world’s excellent service quality airports in the world” (“About us”, 2011).

However, in modern society delivering excellent service is no longer restricted to physical presence thus businesses must also be present online (“Is Your Online Presence up to Standard For 2013?”, 2013). A professional presence on desktop computers as well as on mobile devices is of great importance to the consumer who demands information delivered when they want it, wherever they want it – and the demand for mobility is estimated to increase in the future (“Mary Meeker: Mobile Internet Will Soon Overtake Fixed Internet”, 2010)(ATW 2012 Passenger Self-Service

4

Survey, 2012). A more passenger-centric approach is needed and we argue, that by improving the user experience of suvarnabhumiairport.com, the airport could increase their overall service quality and take crucial steps towards the airport’s mission to become one of top 10 airports in the world.

1.2 the probleM

visitor encounters a cluttered and somewhat unstructured homepage with an abundant amount of information – some seemingly more apt than others. Confronted with disorientated and bewildered user is forced to take time purpose of the main landing page before the sought information can be pursued.

By including a research review by Lee and Kozar (2011) about the understanding of website usability, we are able to take advantage of pre-existing experiences and knowsolutions later in the project).

Research by: Rune Weise Kofoed, 115431 and Nicklas Skov Pape, 768621

5

On the basis of our own experience, conducted empirical user research studies (see Appendix 1, 2, 3) and the measurement instruments and constructs provided in the aforementioned systematic review, we have determined problems within the following three dimensions of Suvarnabhumi Airport’s website:

Navigability: From our studies, we found that users have a hard time locating information. Simple tasks take an unnecessary amount of effort to comprehend; ultimately leaving them puzzled and lost. Many users do not use the main menu and instead either use the top menu in the top margin of the page or waste time searching other places. In short, we have found that the website is not providing the user with effective interactive and navigational guidelines or alternatives to ease the use of the website (Lee & Kozar, 2011, pp. 460).

When using the main menu, too many options is provided to the users. Several of the submenus are unreadable.

There is a lack of visual feedback and therefore it is dif-

6

2011, pp. 460). They are forced to do trials and errors through the menu. Providing two main menus is unnecessary and will only contribute to more clusters on the page. user to locate.

Simplicity: We found that users tend to spend a great amount of time orienting themselves on the website. Several times the information is not found thus forcing the users to give up.

The structure of the website is confusing and it takes a lot of time for the user to comprehend. The website has a large amount of information – many of which are not necessary for the user to be confronted with previous to any interaction (Lee & Kozar, 2011, pp. 460).

Readability (incl. compatibility): The website is not compatible on mobile platforms and presents itself badly on screens with a low resolution.

Some elements cannot be loaded on mobile devices and observations from our “think-aloud”-tests show that the users are pinching their eyes sitting very close to the screen (See Appendix 2). As Bryant James & Mike Jones

(2012) point out, creating a separate site for each device is costly in both development time and resources. Instead, developers should “consider the quickly changing landscape of devices consuming our sites� (James & Jones, 2012, pp. 37). des use of the website on mobile devices. Furthermore, it

In regards to why the users are sitting in bad working-positions in front of the screen with their eyes pinched, we argue that it is due to poor typography and legibility, as Banerjee et al. (2011) found that the amount of mental workload and time was reduced with a font size 14 compared to 10 and 12. In the same study, they also found that using a sans serif font made users feel more relaxed while reading. The majority of text on the current website is in Tahoma, size 11, which is the least preferred according to the study (Banerjee et al., 2011). Furthermore, the website contains an unnecessary amount of information on each page and has a lack of white space, making it harder for the user to read and comprehend (Lee & Kozar, 2011, pp.

460).

(Further sorted data has been analysed by the help of Lee & Kozar’s (2011) measurement instruments, see the appendix 4.)

7

user-friendliness. (See appendix 3) problems concerning the webpage, we have used the following methods: Initially we did an “attention test” with 30+ participants test gave us a broader view of how the website is perceived and which obstacles the general user meets. (See Appendix 1) Second we did a “think aloud” usability test using the tool with a more qualitative approach. Five participants were asked to carry out tasks to give us a thorough and deeper understanding of some of the problems a user meets when seeking certain information on the website. In this case we conducted a list of 5 potential tasks which the participants were then asked to carry out while thinking aloud. (See Appendix 2) Lastly we did two short expert interviews with a graphic tributed with an industry and expert insight in design and

8

1.3 CoMMuniCAtive objeCtives The purpose of the current website seems to be somewhat ambivalent. In general the airport website aims to inform both their travelling visitors, business associates, employees as well as local community. Business associates can visit the business page and we believe that the most prominent (and infuriating) element, the brochure, is targeted towards these users. For the travelling visitors, the most ever, as of now, the website has three different objectives the objectives have been assigned equal importance.

1.4 tArget group The target group of our design and the website in general are primarily international and domestic travellers arriving, departing or transferring in Suvarnabhumi Airport, as we expect they account for the majority of the visits. According to WebStatsDomain, international travellers constitute nearly half of the visits of the website (“Overview of Suvarnabhumiairport.com”, 2013). However, airport per-

sonnel and business-related visitors are also to be taken into consideration, as we also expect them to constitute a relevant part of the of the website user group.

The age of our target group is 21 to 40 since people of these ages are the most travelling (“Airport Demographics”, 2011). Furthermore, as the website is used by a broad variety of people from different countries with differences in technical knowledge, it is essential that the website is simple, easily understandable and does not require parmation seeking.

1.5 ACtivities of the tArget Ultimately, users should be able to seek information easily from their mobile devices as well as with their personal computers – while in the airport, on the way there or in the comfort of their homes. As of now the website is incompatible with tablets and smartphones, which constrain possible use contexts and situations. An optimization of this would ultimately make the website more usable, compatible and afford a simpler design.

1.6 Conditions for the design We found four major issues concerning the landing page that we believe is crucial to address: Navigability, simplicity, learnability and compatibility. We argue, that it is important that the website is accessible on desktop computers as well as on mobile platforms. This stresses the importance of a ‘lighter’ website with a responsive design without the use of Flash. Furthermore, the content of the main homepage of the website should display relevant information of value to the more frequent visitors (e.g. curthis should not be attained with the cost of downgrading any user group. The website should therefore be structuformation and access to these, and not be cluttered with sought information.

The styling of the website is to be kept in same bright and blue colors. Several participants commented that this is suitable for an airport website. A proper use of white space and the avoidance of too much content are also to be considered. As to typography, it is important that we always have the readability of the content in mind and that the font is designed for websites.

9

2. towArds A ConCeptuAl design (9255 characters)

2.1 Questions to be Answered From our subjective point of view, the general purpose of an airport website is to present needed and relevant information to travellers in an easily understandable and concisely structured manner, as we believe that most visitors would visit the site with only a few different agendas.

The vast majority of travellers use their mobile phone the coming years. Therefore the importance of mobile presence and usability in the new design is inevitable.

Furthermore, the most popular activity at the airport is (50%), departure gate walking times (40%), directions

10

(21%) and airport parking (21%) (ATW 2012 Passenger Self-Service Survey, 2012).

In combination with the information from the survey and our conducted empirical research (see appendix 1-4) we have established what should be implemented in the new design: 1. Flights: Current arrivals and departures, timetables, what destinations the airport offer and operating airline companies.

2. Accessibility: Directions, parking (e.g. pricing, maps overviewing parking area, etc.), public transport and taxis.

3. Departure information: Check-in information, passport checking, baggage safety regulations, security and special needs assistance. Security information is most important since 31% of passengers in the survey found the security part of the journey most stressful. Several users in our research also found that information important.

4. Search functionality: All information on the website is not possible to present at the landing page. A search bar

Research by: Rune Weise Kofoed, 115431 and Nicklas Skov Pape, 768621

ite quickly (Lee & Kozar, 2011, pp. 460).

porate in the website include the following: 1. Destination suggestions: Destinations the airport offers lers and would provide a ‘feeling of travelling’ to the user.

2. Current events: Rethinking the way of presenting current events has gained an important role in our websites structure.

3. Local weather information bar: Incorporating an interactive weather information feature in the top of the homepage adds presence and vibrancy as well as giving the interface a dynamic touch while also contributing to the ‘feeling of travelling’ we mentioned in #1.

Most visitors of the website are travellers and we have prioritized these users more, compared to business related users, that assumingly mostly seek information regarding jobs, the airport itself, the organisation, annual reports, advertising, security, business opportunities etc. This is clear as the visitors are confronted exclusively with vital travel information in the top of the main page, although business related information is of course easily accessible from the secondary menu feature on top of the page.

We want to incorporate the emotional feelings and experiences of travelling in the new design thus enhance the overall travel experience. Implementing a large slideshow presenting vivid and beautiful photos and stories from Asia, as well as introducing the users with touching travel quotes and local weather forecast will contribute to this feeling. This will also emotionally connect with the overall mission of the airport to be “(...) the Aviation Hub of Asia.” (“About us”, 2011)

4. Other: Restaurants, opening hours, shopping facilities, information and service desk location etc.

11

-

previous levels, however high fuel prices and uncertainty on the market means that there are still risks for the industry. Technology offers a unique possibility to support and enhance the experience for the travellers. By creating ite for the future. The content can easily be changed and adapted to different devices with a suitable content management system and implemented by talented front-end developers. As an important ‘side note’, we would like to stress the importance of dealing with native mobile applications since they today still contain much more possibilities compared to web apps (e.g. GEO-located messages, push-functions, check-in functionality, shopping etc. (2012 passenger Self-service Survey highlights, 2012).

2.2 interACtion We have chosen to focus on incorporating the basis for a better navigational solution, thus make it easy for the user to decode the menu quickly. We have divided the content into four main categories: 1) Flights 2) Accessibility 3) At the airport 4) Before departure.

12

ceed in making both the menu easily comprehensible and all sought information accessible with only very few actions.

As we observed in our participatory test, participants had a on the current website. We claim that this is because the content of the main menu options was not clear enough and therefore the redesign of this feature has been of high priority in our design.

2.3 Content And struCture The methods mentioned and utilized in the previous anaproblems. By asking the participants and professional Design- and UX-experts and combining their information with former research, we believe to have a solid ground for solving these problems. (For an overview of the mentioned problems see “The exact problems”.)

1. Navigability: The menu needs to be visible at all time and at the same place on all subpages. The titles of the submenu points must be fully visible and has to correspond with the page that it is referring to.

2. Simplicity: A hierarchical structure of the content is the way to solve this problem. What is most important is to be shown on most prominent positions on the website. Less important content should be shown on the bottom of the page, on sub pages or even removed. A rule of thumb here is to only show what is necessary, when it is needed: ”Simplicity is about subtracting the obvious, and adding the meaningful” (Lee & Kozar, 2011, pp. 454).

3. Readability (incl. compatibility): Using HTML5 or jQuery for menu and slideshow could be a possible solution to this problem. Also it should be design to be responsive using e.g. media queries techniques which would make it accessible on all platforms. There are several discussions concerning typography online. The past decade most websites have been using the body font size of 10-13px. However, several usability experts argue that websites with large amount of text should at least provide a 16px body font size, to increase readability. This will be considered in the design phase also.

2.4 styling And lAy-out We could see from our user research that all of our test participants were pinching their eyes and sitting very close to the screen. In the research by Banerjee et al. (2011) they concluded that a font size of 14 is preferred compared to 10 or 12. Further they found that sans serif fonts (e.g. Verdana) are more pleasant to the user (Banerjee et al., 2011).

We therefore argue that implementing a larger sans serif typeface, would improve the readability and overall experience of the website. We use a 17px body font and 28px for headlines with the Google API typeface ‘Dosis’. (17px in Dosis is the equivalent to Verdana 14).

13

The colours used for the website is based on the visual identity from the airport logo and is also inspired by the current website. From our research we found that several users stated that they were positively affected by the general look of the website. We use a great deal of white space and are using the contrasting colour, orange, for call-to-action elements and headlines.

Recent research show that, similar to traditional stimuli in for example physical stores, colours online can also provide information about the company. Colours have a big impact on the users and can ultimately make them feel aroused and trust the site (Pelet, J. et al., 2013). Pelet et al.

(2013) conclude that: “Naturally occurring color combinations with bright, saturated foreground colors that are reminiscent of natural environments lead the consumer to more positive reactions to the site.�

(Pelet, J. et al, 2013).

14

As we argue in the introduction to this phase, it is of great importance for a modern airport website to be compatible on all platforms. Therefore, we have removed the unnecessary use of Flash and created our design applicable for development with media queries. In that way the design can be compatible for users accessing the website on mobile devices as well as on desktop computers.

15

3. evAluAtion (7580 characters)

study – the evaluation phase. In this phase, we will evaluate our designs for two main reasons: 1) To measure if we have been able to improve the landing page compared to the current design; 2) To measure possible further enhancements of this new design – these measurements we argue would be applicable in an evento match and construct all usability criteria, feedback collected in an iterative process would improve the usability of the website (Abras, C., Maloney-Krichmar, D. & Preece, J., 2005). However, this is unfortunately beyond the scope of this project.

3.1 Methods Initially we decided to conduct a simple task-based clicktest. Firstly, this remote unmoderated usability testing

16

method is easy to setup and administer. Secondly, combining it with open-ended questions enables the ability to capture both quantitative and qualitative data, as we can ask the participants to elaborate on and clarify their choices in regards to what they see and think. One disadvantage however, is that we are not able to ask follow-up questions to the participants and therefore must rely on the participants’ ability and inclination to write further explanatory comments. This method’s data-outcome relies on what M. Y. Ivory and M. A. Hearst (2001) refers to as the online survey’s ability to capture collect usability data – in actions (Ivory & Hearst, 2001, p. 470).

Adding automation to usability evaluation has many pothe costs of non-automated methods, aiding in comparisons between alternative designs, and improving consistency in usability evaluation (Ivory & Hearst, 2001, p. 506).

These automated testing-methods should be used in tandem with non-automated evaluation methods, since different techniques uncover different kinds of problems (Ivory & Hearst, 2001, p. 472). Therefore we found it suitable to involve UX experts by the use of guideline reviews. This

Research by: Rune Weise Kofoed, 115431 and Nicklas Skov Pape, 768621

method, acting as qualitative open-end questions, gives our expert participants the possibility to check guideline conformance. Including UX designers with guideline knowledge will help reduce the negative impacts of ’opinion-driven’ design (Bailey et al., 2006). In contrast to our click-test, this critique usability testing activity not only also propose improvements (Ivory & Hearst, 2001, p. 470).

Reducing the need for evaluation expertise among individual evaluator and automating some aspects of evaluation, such as the analysis or critique activities, could potentially aid designers who do not have expertise in those aspects of evaluation (Ivory & Hearst, 2001, p. 471).

3.2 results The following summarizes the results we found essential in the evaluation.

The test scores on the current website showed that a lot of attention were directed towards elements of little or no importance (see analysis). In the new design, the focus was successfully aimed towards departures and arrivals as well as the logo, menu bar and travel inspiration, which was

our main goal. On the current website, it took the participants on average 50.5 seconds to complete a simple task, while it was cut in half in the new design – 25.2 seconds.

(Appendix 1 and 5) On the current site, it took 20.0 seconds to locate information about future arrivals and departures, while they managed to complete the same task in just 15.4 in the new design. In both cases, the majority succeeded in hitting the correct buttons. (Appendix 1 and 5) tion about lost luggage. On the current site, several users more the heat map correspondingly revealed a lot of different ‘guesses’. In the new design, most participants clicked the contact button. However, they did it a bit slower in the new design – 19.0 and 25.9 seconds. (Appendix 1 and 5)

3.2.2.1 Click-tests During the fourth task, participants were asked what they believed could be improved and what they found useful.

A lot of positive comments were added: “it’s good the air-

17

port’s name catches your eye so you know you’re at the

3.3 disCussion The results of the evaluation show us, that the participants and more ‘likeable’. In short, we generally found fewer negative comments and comments about things that were

However, we also discovered that several participants did not see the search bar, found the icons in the menu bar (See appendix 4-5 for a full review of possible improvements according to our participants) (Appendix 5) 3.2.2.2 Experts

solved faster in the new design, which we argue is a sign that the participants obtained an understanding of the cognitive landscape more easily. However, it took the participants longer to solve task number 3 in the new design.

We argue that the reason for this is that the icons did not match the menu perfectly – which was also pointed out by the experts in the interviews.

Digital Designer from Kontrapunkt, Nilas Kaalund Anderfriendly. He tells us that he: “(…) kinda feels like “I’m there” in a sense.”. The round elements, the image, weather information etc. makes him feel this way. Camilla Berlick, who is a Media Graphic Designer, backs up some of Nilas’

“(…) very clean, which I like (…)”.

Full interviews can be found in the appendix 6 and summarized results in appendix 7.

18

Both the experts and some users criticised the element of ‘travel inspiration’ – i.e. the slideshow. The goal with this element was to inspire and ultimately give a sense of a ‘travel feeling’. In spite of the critique, we argue that this element, as well as the ‘travel quote’ and ‘local weather’, are considered successes since both experts and users hoped. However, adjustments could improve the design even further.

We now have a solid base for a new design phase that

could ultimately make the site even better (Abras, C., Maloney-Krichmar, D. & Preece, J., 2005).

3.4. vAlidity user-centred development very interesting and contributing to the process of digital design, we recognise that it is a time consuming way to work. Because of the limitations of time and budget in this project, we have a very small amount of participants and the validity might suffer from that (Faulkner, L., 2003). With more time or a larger budget, more participants could have been appropriated thus the validity of the research might have been superior. That said, we argue that by using UX expert to backup the testing, we increase the validity of our research.

19

Research Methods, Instruments, & Computers. 35 (3), pp.

379-383

4. referenCes

Is Your Online Presence up to Standard For 2013?. (2013).

About us.

Abras, C., Maloney-Krichmar, D. & Preece, J. (2005).

User-Centred Design. Berkshire Encyclopedia of Human-Computer Interaction: When Science Fiction Becomes Science Fact. Vol.2. pp. 763-768.

Jones Jay & Jones Mike (2012). Pro HTML5 Performance. (pp. 37-49). Apress, 2012.

Airport Demographics. (2011). Retrieved May 19, 2013, -

Banerjee, Jayeeta; Majumdar, Deepti; Pal, Madhu Sudan; Majumdar, Dhurjati. Al Ameen (2011). Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading. (pp. 131-143) Journal of Medical Sciences4, Apr-Jun 2011.

-

20

Jean-Eric Pelet, Christopher M. Conway, Panagiota Papadopoulou, Moez Limayem (2013). Chromatic Scales on our Eyes: How User Trust in a Website Can Be Altered By Color Via Emotion. Digital Enterprise Design and Management 2013. (pp. 111-221). Springer Berlin Heidelberg, 2013.

Mary Meeker: Mobile Internet Will Soon Overtake Fixed Internet.

-

Melody Y. Ivory & Marti A. Hearst (2001). The State of the Art in Automating Usability Evaluation of User Interfaces.

University of California, Berkeley, ACM Computing Surveys, Vol. 33, No. 4. pp. 470–516.

Overview of Suvarnabhumiairport.com. (2013). Retrieved -

Robert W. Bailey, Carol Barnum, John Bosley, Barbara Chaparro, Joseph Dumas, Melody Y. Ivory, Bonnie John, … Don Zimmerman (2006). Research-Based Web Design & Usability Guidelines. U.S. Dept. of Health and Human Services.

Société Internationale de Télécommunications Aéronautiques (SITA). (2012). ATW 2012 Passenger Self-Service Survey (report). (Report No. 7).

Younghwa Lee & Kenneth A. Kozar (2011). Understanding of website usability: Specifying and measuring constructs and their relationships. Decision Support Systems 52, pp.

450–463.

21

corner. #2, 4, 5. One wrote the comment: “Main menu and logo in one? Wtf.

great sum of the participants unexpectedly located the main menu in top left

ticipants also found the brochure and anniversary very dominating #3, 6, 24. A

den things on the page persuaded a user investigate #28. Further, several par-

wrote: “Seems like a logo” (indicating that he was not sure about that) #2. Hid-

1

what would happen if clicked #7,9,10,12,13 etc. One user pointed at the logo and

most attention. Several users asked why this button was there and questioned

buttons situated right in the middle of the browser was the element that cached

what drew the users attention the most. As we had expected the red “closing”

catches their eye the most. We did this to get a quantitative measurement of

seconds. We asked the users to point out the elements on the landing page that

32 participated in this first and most important task spending an average of 49

Result summary:

Task 1: “Click on the four things that draw your attention the most”

Appendix 1 – Attention test for analysis

side with departure/arrivals.

menu at the top of the screen. However, most users went for the box in the left

hidden “passenger guide in the slideshow”, while six participants went for the

2

cial part of an airport website – the arrival/departure element. Few went for the

initiated to see if the participants where able to locate what we believe is a cru-

32 participated in this task spending an average of 19.6 seconds. This task was

Result summary:

and arrivals?”

Task 2: “Where would you click to access information about future departures

you see first.” #5

The menu at the top might be the secondary menu, but it is actually the one

an FAQ. Three participants had no clue #21, 24, 26.

3

make sense. Interesting comments from participant #22 was he was looking for

users choose to click the ‘Passenger’ and ‘Service’ links. Which of course will

topic. As the heat map shows, not a single user went for the main menu. Most

menu was even noticed when asked to navigate to find an answer to a specific

primarily to trick test the participants. In short we wanted to know if the main

32 participated in this task spending an average of 18.3 seconds. We did this test

Result summary:

find information about your lost luggage?”

Task 3: “You lost your luggage on a flight yesterday. Where would you click to

and/or delays #8, 22-31, 39, 41, 42. Baggage info #15.

on/off the flight #4, 9, 11, 12, 16. Language settings #2, 10. Departure/arrivals

Information about VISA #11, 43. Safety requirements #8. Maps #8, 18. Service

most frequent elements the users identified as important:

screen where amongst the most popular elements. Following is some of the

val/departure box. Also the ‘Passenger guide’ and ‘Passenger’ link in top of the

useful to travellers. As expected, the most participants selected the arri-

particular task was to make the users identify the elements they thought to be

4

32 participated in this task spending an average of 55.2 seconds. The aim of this

Result summary:

travellers on this particular page.”

Task 4: “Mark the information and elements you can imagine being useful to

ticipants, but they only need one #2, 5, 12

5

important issue for improvement. Language settings is important to several par-

it as advertising #27, 32, 48, 75, 78. The visibility of the main menu was also an

the red ’close’ button as well as the brochure should be removed. Some even saw

In general a lot of users argued, that there is a lot of ’noise’ on the page, and that

ing in midair for no reason.” #23

more visible. It is hidden in the side.” #20, ”This close sign seems like its float-

placement and visibility.” #4, ”Where can I search?” #8, ”Main menu should be

”The menu must be one of the most important features of the site. Needs better

teresting comments such as:

proved, we let the users point out important issues. A lot of users had quite in-

participants to mark the things they did not like or they thought should be im-

32 participated in this task spending an average of 74.0 seconds. By asking the

Result summary:

website”

Task 5: “Mark the things that you think should or could be improved on this

is the same all the time and doesn’t change”.

the webpage as a thing he would change. “It is easier to find things, if the menu

6

The participant mentions the constant changing of the index menu in the top of

pecting information.

The participant clicks interactive items and elements without any purpose ex-

formation is solely sought by consulting underlying pages.

At no point does the participant use the main menu bar in the homepage. In-

by using the main menu feature.

The participant consults another page, to find information that could be found

seen or used the main menu feature. Task 2 is completed anyway.

(1.20) After nearly one minute, the participant still has not

expectation.

The participants click on non-clickable items with visible

Participant 2:

able to return to the main page.

(14.00) The participant is seemingly stuck in a part of the website, not being

By coincidence the participant completes task 3.

es the time to investigate the website and trying to understand the structure.

Half way through it seems that the participant has abandoned the tasks, and us-

The participant is unable to distinct differences in certain markers

ticipant.

The lack of feedback and action on seemingly clickable items frustrates the par-

proper information. Task 2 and 3 is consequently skipped.

A simple task as to find “shallow” information is difficult due to the lack of

quently not used once during the whole test.

ad that is placed in front of the drop-down menu itself. The menu is conse-

Participant is having difficulties using the “main menu” feature because of the

is.

ticipant still doesn’t know what the purpose of the website

Even after one minute of browsing the homepage, the par-

Participant 1:

Appendix 2 – “Think-aloud”-test

less options and therefore was easier to navigate.

The participant states that task 4 was easier because the menu tab had much

Task 3 is consequently skipped.

read all the options – it’s not very logic, the way in which they are ordered”.

menu feature. “I don’t like that if you have to look for information, you have to

The participant continues to have difficulties finding information via the main

homepage, seems like spam.

The participant states that the ad, that continues to open when returning to the

even though the ad is blocking the interaction.

When returning to the homepage, the participant tries to use the main menu

7

The participant states that she finds the menus complicated and difficult to use.

making the participant look there for information rather than in the top menus.

The bottom menu is slightly more graphic than the index menu, consequently

participant puzzled as to how it works.

main menu. However, the lack of interactive feedback and guidelines leaves the

After one minute on the homepage the participant closes the ad and finds the

don’t know how it works”.

the purpose of the website is. She is aware that it concerns travelling, “but I

on the screen. However, after one minute the participant still has no clue what

The participant looks disorientated, seemingly because of too much information

cluttered.

The participant finds the homepage poorly organized and

Participant 3:

Task 3 quickly.

8

the “home”-tab again. When the Main Menu appears the participant completes

main menu takes time to load. The participant is slightly puzzled, and presses

(07.00) The participant returns to the home page to continue to Task 3, but the

mation is found – consequently completing Task 2.

(04.00) Third time the participant consults the main menu the Security Infor-

participant again looks to the main page for a link to the sought information.

(03.30) After trying to find the information in the main menu and failing, the

over.

mation, but is distracted by the fact that the Shopping & Dining-tab is crossed

(03.12) The participant opens the main menu to search for the Security Infor-

page, rather than using the menu.

(03.08) The participant looks for the Security Information-tab on the main

(03.00) The participant starts on the tasks

scrolling.

tences in the tabs and not being able to see all options of the main menu without

(01.09) The participant complains about not being able to see the whole sen-

getting acquainted with the webpage.

(01.00) The participant sees the main menu tab, as a result of taking his time

screen.

you are supposed to close it” Refers to the “Close” tab in the middle of the

(00.55) The participant closes the ad, “I am going to close this, because I think

“I have to really focus on the text, to see it clearly”

of information on the main page and that the fonts are small.

(00.13) The participant states that he thinks that there is a lot

Participant 4:

9

(03.45) The participant has a trouble finding out where to start on the web page.

self and started over.)

participant figured this out and found the home page by him-

skipped, as the test started on the wrong screen. Luckily, the

(The first couple of minutes of this this particular test is

Participant 5:

(19.00) The participant has completed the 6 tasks.

mation.

throughout the website. Furthermore, there is not the right amount of infor-

(18.30) The participant point out that the map is small and hard to use, as text is

dining, the participant returns to the home page to complete Task 6.

(17.55) Even though the index menu in the top contains a link to shopping and

on the website.

proper information. Seems that he does not fully trust the information displayed

(17.35) The participant states that he would go to another website to get the

plete task 4 yet, and tries to start over.

(15.00) The participant returns to the Home Page without being able to com-

Menu.

be easier to complete Task 4 by a search feature, than using the existing Main

faults and biases in web designs. The participant seemingly thinks that it would

is a search-tab. This is a good example of the human ability to create mental de-

participant presses the language button in the top-right corner, as he thinks this

(10.40) The participant notes that it is not possible to search the website. The

and again the main menu load time keeps the participant waiting.

(09.00) Again the participant returns to the home page to continue to Task 4

again – again, closing the ad immediately. Now, for Task 6, the participant

10

(20.00) The participant completes Task 5 quickly and returns to the home page

part of or easily accessible from the home page.

(19.00) Participant states that a map is useful, and that it should probably be a

participant is the only participant to use this)

(17.30) The participant uses the Personal Guide for the first time. (Note: This

ad immediately.

(15.25) The participant returns to the home screen to start Task 4 and closes the

(14.00) Task 3 is completed with the use of the main menu.

main page first.

mation easy to find. The participant does this after searching the rest of the

menu feature, although the participant previously stated that it made infor-

(13.35) When embarking on Task 3 the participant does not firstly use the main

not able to close it again or navigate it properly.

easy to use, although he shows signs confusion in his facial expressions and is

(11.41) Initially, when using the main menu the participant states that he finds it

that he now finds the front page “pretty simple”.

(11.35) After closing the ad and not using the main menu, the participant states

(04.18) “There was an ad, in front of the main menu – got me kind of lost”

cause of the ad.

(04.07) The participant detects the main menu, and states that it is hidden be-

has still not been used.

tabs, as this is somewhat more appealing than the index menu. The main menu

(3.59) The participant looks to the bottom of the page to find information and

Julie: GOOD: I pretty fast see that it has something to do with flights.

Researcher: What is good and bad about this site?

Jonathan: WTF – This must be a fake, hacked ad-site.

looks rather unmodern visually and technically.

go that are created to the specified and primary user group. Design wise it

11

cannot really figure out where to go next. I need a guide with specific ways to

Julie: Clear signal of what their services is. On first sight a bit cluttered and I

Researcher: What is your first impression of the frontpage?

Jonathan: Jonathan, Copenhagen, Graphic and Interactive Designer

Julie: Julie Sofie Schouboe, Copenhagen, Graphic Designer

rience and what is your professional title?

Researcher: In short, what is your name, where do you live, what is your expe-

signers

Appendix 3 – Short expert interviews with two graphic de-

although humorously stating: “How did I end up here?”

(24.00) After consulting the main menu, the participant completes the last task,

secondary page, the participant returns to the main menu to try over again.

(23.00) Even though “Shopping and Dining” is a part of the top menu tab in this

information.

again confronts the Passenger Guide and not the main menu to find the sought

the clutter. And then, a lot more....

12

Jonathan: Firstly, consider a mobile friendly version of the site, and remove all

tionally, general redesign of whole site and structure.

gate. Remove sekundary information. I vote for a responsive version. Addi-

Julie: Point out the primary user and make precise ways for them to navi-

this page?

Researcher: Lastly, as a designer, what would you do if you had to redesign

Jonathan: It is too small, too boring, not inspiring at all.

to “smart” . Really weird to use.

Julie: Seems like sort of a game in its look and feel. Very confusing and a bit

Researcher: What is your opinion about the navigation of the site?

blue color.

Good: Easy access to flight status on the left of the page. Consistent use of the

The landing page contains much info I personally don’t know what means.

seems the publish date is the most important. Besides, it aint really news...

ages, and more info about the content would be nice – horrible designed, its

for mobile access. News section is not interesting, elements needs headers, im-

Jonathan: Bad: Top hero element created with flash, and no fallback served

and give me no clues of what is most important.

BAD: To many informations on on page. Or the information weighs the same

Appendix 4: Data analysed by the help of Lee & Kozar’s (2011) measurement instruments Navigability

Evaluation

Simplicity

Evaluation

Readability

Evaluation

(1) The website provides multiple search features (e.g., search engine, menu bar, go-back-and-forward button, etc.) to obtain the target information.

The website does not contain neither a search-function or go-back-and-forward buttons.

Furthermore the main menu feature works poorly and is rarely used by our testparticipants when asked to complete our tasks.

The users of the website have multiple ways of reaching sought information. However, these pathways are not clear to the user.

(1) The structure of the website is succinct.

The structure of the website is generally cluttered and each page contains a large amount of elements and components.

(1) The website's wording is clear and easy to understand.

The wording is generally acceptable. However the amount of information on each page, distract the user and makes it hard for the user to focus on a task.

(2) I can comprehend most components of a page within seconds.

Mostly, our test participants were unable to comprehend key components of the website – even on the main page.

(2) The website has enough white space (or margins) to make it readable.

Mostly the website use an acceptable amount of white space, although it could be used fore effectively.

(3) There are multiple ways to access the web page that I am looking for and/or return to shopping menus.

The participants in our tests, continued to return to the homepage after a task had been completed. We believe that this was a result of a lack of visible alternatives and possible pathways from a current screen.

*(3) The website has components that are not necessary.

(3) Every page contains the appropriate amount of components to fit into a page.

The website generally contains too many different and inconsistently looking components.

Furthermore, the structure and use of flash makes the website incompatible with mobile devises.

**(4) It is very easy to locate what is needed in this website

Mostly it was hard for our participants to find information of any kind – whether they used the main menu feature or not.

(4) There are redundant components in the website.

Be believe that the website does indeed have components on the main page that are not necessary for the general user.

However, most of these should still be easily accessible and demand minimal effort.

The website does contain redundant components, as previously mentioned.

(4) The website uses colors and structures that are easy on the eyes.

Overall the website uses a good combination of colours. However, the forms of different components are too inconsistent from page to page.

(2) The web page that I am looking for can be reached through multiple pathways.

Appendix 5 – Attention-test for evaluation phase Attention-test. Task 1: “Click on the two things that draw your attention the most”.

Time: 25.2s average, Participants: 40

13

14

Task 2: “Where would you click to access information about future departures and arrivals?� Time: 15.4s average, Participants: 40

Task 3: “You lost your luggage on a flight yesterday. Where would you click to find information about your lost luggage?� Time: 25.9s average, Participants: 40

15

16

Task 4: “Mark the information and elements you can imagine being useful to travellers on this particular page. Write why in a very short note.� Time: 65.5s average, Participants: 40

17

1. for a airport company website is important to have more languages 2. good to know if i encounter a problem how i can contact and get a reply in a short time 3. looks like it tells travelers what they need to know about the airport before they get there 4. how to get there, where to park, until what time the parking works...

5. where to eat? is there free wifi? ultra-relevant information that i normally lack...

6. what the airport offers (restaurants, coffees..)

7. Its allways nice to know how to get around in the airport. Either its for knowlegde about how to get around in the airport, and what shopping options you have.

8. what to do before the flight 9. if this includes info about how to get to the airport (not all the people take taxis...) this may be a key element in the webpage 10. i don't know what can be included in this section, but i will check it for sure. i may be forgetting sth that i should take (any legal documentation, visa, passport, etc.)

11. The weather shows if the airport is working normally 12. kinda obvious why 13. Need to know what flights leave from where and the prices=most important.

14. How to get to airport, how much is it and the time it takes to get there by car or public transport specially its one of the first thing i would like the page to have 15. to find a flight that is not in the main page (is later or was before) 16. I think it is nice to check the things needed before you go on the flight, regulations might vary from airport to airport 17. it's the essence of the webpage... normally, i imagine myself accessing it to get info about the flights 18. it would be good to know what time at least to check in for particular flights and what i can bring on board etc.

19. luggage weight and extra fees 20. Useful to find info about how to reach the airport 21. you can see all the flights in one 22. God detalje, men hvor er tiden 13.21? Der bruges en del plads pĂĽ at skrive "The time is now:" hvor der ku stĂĽ noget ala "Bangkok time" 23. Flight information is the most important thing 24. important for family/friends picking you up 25. Flight information is the most important thing 26. for travelers, this is essential. for people waiting for travelers, arrivals might be of interest 27. Fint overblik over afgange 28. Important to know your flight time and if it is delayed 29. useful to see when the departures are 30. It looks like here they can find information about the destination which I think is the most important thing 31. When does my flight leave 32. Vigtig, men den skal ikke lĂŚgge oppe ved vejr information istedet?

33. helpful reminders 34. So you dont have to throw anything out 35. Might point something out that you would otherwise have forgotten 36. Always good to know 37. Good advice 38. Its always nice to know rules and what to do in general

18

39. Shopping is always good 40. What is at the airport, do we need to eat anything before the flight. Possible most important when flying low cost 41. I think travellers would want to check this because the rest of the information is usually the same in most airports. But one of the things one usually looks for is how to get to the airport.

42. How do i get to the airport, and can i Park.. Maybee it would be nice with info on public transportation as well

19

1. I would write the address, a phone number and fax of the airport in visible place in the home page.

Task 5: “Mark the things that you think are good or could be improved on this website.

Please explain with a short note.� Time: 59.9s average, Participants: 40

20

2. it's good the airport's name catches your eye so you know you're at the good page 3. Måske flaget er en anelse stort? og er sproget ikke allerede engelsk? Hvad er funktionaliteten her? :) 4. Kan genkende navnet på lufthavnen, men hvad sender dette menupunkt mig til?

5. weather: very important. to decide whether to take the umbrella out of the suitcase or not 6. good to know how to get the airports by different transportations 7. Jeg synes ikonerne er misvisende. Umiddelbart tænker jeg ikke at "At the airport" kun indeholder noget med mad fx..

8. I realize you want an airy design, but instead I feel you are wasting space. If people are viewing the site on a small-screen lap-top or a tablet, much of the information will disappear on the right and be 'below the fold' at the bottom. This is an overall annoyance that I feel is unjustified.

9. i like the toolbar across the top - it is streamlined and helpful looking 10. i cannot figure out anything that can be improved. i particularly like the lil' symbols/pictures/drawings next to "flights/accessibility..." coz they make me figure out what info can be found there 11. maybe just leave it simple in the home page? and all the info under this just put it with the links 12. local time. perfect.

13. I think that flight information will be better without an image in the background 14. very visually appealing (the font and the picture) 15. are u using local times?

16. at first i thought it was an advertisement for thailand, so maybe this should be smaller 17. Need more promotion that it's an airport's site--looks like a travel site for Thailand.

18. Really good, gives a first overview of where you coul go.

19. where to the plane goes.

20. Der er ret stor variation i hvordan knapperne ser ud. Der kan godt strømlignes lidt, så de passer sammen.

21. Nice background picture 22. Maybee check in functionality could be cool. Most airlines do it online now, so you can do it before going to the airport 23. maybe the "search" could be more on the top of the website (with no need to roll down the page) 24. Did not notice this earlier in the click test, maybe it should be a bit more clear..

25. Need help eller søg? Hvad kan jeg her. Hvis det er søg, så skal der bare stå search eller lign. Men hvis det er to funktionaliteter, så skal de nok adskilles lidt.

26. good idea with a search bar. would make more sense for me if it were closer to the top of the page 27. you already have this on the menu at the top, i think the link is enough 28. I would probably prefer this space with sliding tabs that include all the infos below so that i don't have to scroll down the page too much. (hope you understand what i mean) 29. Her fungerer ikonerne bedre. Men pas på det hele ikke ender med at ligne et template.

30. Hvorfor ikke vise fire nyheder?

21

31. Den orange baggrundsfarve giver illusionen af en afslutning/bund på siden, informationerne herunder er afskæret fra siden. Jeg bemærkede først ved dette sidste spørgsmål at siden fortsatte nedad.

32. Der kunne måske godt være en anelse mere hierarki i informationerne. Fx kunne dato her være en anelse mindre..

33. Maybe expand this a bit with possibilities of renting a car or booking a hotel. It could also be that you can buy your dutyfree before bording 34. Hvorfor? Makes no sense..

35. this webpage is very long, and requires scrolling to reach the bottom, with some useful information down there, like "The quickest route to Suvarnabhumi"/map 36. A section about public transportation as well. Maybe it would be cool if you could get info on traffic to and from the airport, are there any delays?.. Maybe you could type in your address, and you are given the time estimates of how long it will take to get to the airport dependent on the traffic info 37. Mangler der ikke en footer? Et sted jeg kan scrolle ned og få et overblik over siden? Sådan noget her er brugbart synes jeg, tjek bunden: http://www.itsnicethat.com/ 38. Maybee a link to Click A Taxi would be cool for those business travellers.

-

-

22

Too many icons, what does the actual airport look like?

The icons used does not always fit very well with their context. For example I wouldn't think that "At the airport" is only about food? It is critical that if you use icons these can stand alone, without text, because a lot of user will read them without the text.

Where is the time "13.31"? Bangkok May 9 23.56 The suvarnabhumi navigational link, where does it take me? I know its the name of the airport, but I'm still not sure where it takes me.

The good thing about this design is that I feel welcome and that I quickly get a good overview of the information and functionalities. It is the simple navigation, information about flights and calm layout that makes it foreseeable. Overall it's a nice design and a more modern take on a airport website.

A problem that I might see coming with this website is that it doesn't really look like a airport website, it looks more like a travel agency / online flight booking website. I feel "I'm there" but does the airport only take charter tourists? Where do I park my car and so on. It looks like it tries to sell Thailand and not a great airport with great facilities.

Maybe more like a product than a service and a place to be. And the different responsive versions incl. the mobile version are great.

I've listed a couple of things that I see a problem with, some of these have something to do with mentioned above, others don't. The things are not necessarily ugly, not functional or critical things, but details that overall decreases the usability of the website:

– What is good and bad about this site?

That it feels very light and friendly. Its pretty foreseeable and I get a sense that it is about travel, flights and thailand. It is the the beach image, weather information, flight schedule that makes me think of these things. But it's also the rounded corners, icons, choice of color and the partly transparent elements that makes me focus on previous mentioned elements. It kinda feels like "I'm there" in a sense.

– What is your first impression of the page? (Style, colours, content etc.)

Name: Nilas Kaalund Andersen Experience: I've designed and developed websites for over 7 years. I've worked for large scale clients such as Carlsberg, Egmont and smaller lifestyle related clients such as The Apartment, CPH Vision and Sophie Bille Brahe. I study Graphic Design at the Danish School of Media and Journalism and work as a digital designer at Kontrapunkt.

– In short, what is your name, what is your experience (incl. workplace, school, etc.) and what is your professional title?

Appendix 6 Interview 1. Nilas Kaalund Andersen, Digital Designer @ Kontrapunkt

Maybe you could show more that 3 news stories or are they that important at all? What about directions and parking?

The quote thing needs to go, it just takes space.

The buttons are very different in their design, this can be improved.

23

I like the fact, that it has pictures in the top - gives you a feeling of traveling/staying in Thailand.

The colors are very suitable for the airport. I've been to it several times, and it has a clean look which I think you've managed to capture. But as I remember it, the icons at the airport was more clean - not that many details. I like the ones you've made, cause they've got more charm, but maybe they should look more like the ones at the airport to give a continuously look?

In a way it's a bit confusing that the icons with text "Before Departure" "At the Airport" & "Accessibility" is separated by the orange box and the white box. I guess it's because I think it's the same category of "Things you'll need to know", so in a way it would be nice to have them together, to give a quick overview for the consumer.

And maybe not that big, 3 in a row instead of to.

The links in the top is not in the same order as the subjects on the page?

The look is very clean, which I like, but in a way it would be easier on the eye if you could gather the subjects more.

Right now everything is at the same size, which makes the things kind of float - or most important, everything seems equally important. It's a bit like with "The Gestalt law" of things belonging together.

– What is your first impression of the page? (Style, colours, content etc.)

Camilla Berlick, Media Graphic Designer & currently studying a BA in Art Direction and concept making

– In short, what is your name, where do you live, what is your experience and professional title?

Interview 2. Camilla Berlick, Media Graphic Designer currently studying a BA in Art Direction

I think the structural idea is good. Its nicely compact and a get a great overview. I do miss a few more concrete menu links, like parking and directions, so maybe a secondary navigation would be a good idea. Not everyone like scrolling, even though is getting more common, therefore I would accommodate some users by adding a bit more navigational links :) I do think the search bar is too big and is positioned in an odd spot.

Maybe the weather information takes too much space and the speech could be there instead.

– What is your opinion about the navigational composition of this particular page? (Due to the fact that we have not made the website practically usable and interactive, we are interested solely on your opinion on the overall structural idea.)

-

-

Ideas for improvements • It looks like it tries to sell Thailand and not a great airport.

• Too many icons.

• Icons should match the icons at the airport.

• Icons does not always fit with context – At the airport and food icon.

• Local time should be clearer.

• The suvarnabhumi navigational link is not clear.

• More news stories.

• Quote is unnecessary.

• The visual consistency of the buttons could be improved.

• Search bar is too big and maybe more suitable instead of weather.

• Everything is same size which makes everything equally important.

24

Appendix 7 – Interview results Positive things • Light and friendly, colours very suitable for the airport.

• Gives you a feeling of belonging and knowing the country (red. Thailand).

• It has a travel “look and feel”.

• Latest news is always nice to know before going.

• Weather information is good.

• Quickly get a good overview of the information and functionalities.

• The simple navigation, information about flights and calm layout makes it foreseeable.

• Nice design and a more modern take on an airport website.

• The structural idea of the menu is good – compact and with great overview.

• Different responsive versions are great.

I don't have that much experience on the structural part of it.

If you can keep it down to the four subjects at the top, it would keep the clean look even stronger.

Because of the clean look I would really advise you to keep the structure very clean and simple also.

Few subjects that is right to the point with small subjects under each.

What is your opinion about the navigational composition of this particular page? (Due to the fact that we have not made the website practically usable and interactive, we are interested solely on your opinion on the overall structural idea.)

I think the colors and the simple look is very suitable.

I think the different subjects could be more categorized and have several subjects under.

Fx. "Before Departure" "At the Airport" & "Accessibility" could be under a subject like What you'll need to know..

I think it's a very very good idea to have the latest news. It's always really nice to know, what's going on in the country, you're about to visit, and gives you a feeling of belonging and knowing the country. I also really like the weather information.

– What is good and bad about this site?