USER INTERFACE EVALUATIONIM 2063 HUMAN COMPUTER INTERACTION

Name:

ROSIADI BIN TAJUDIN

SCHOOL OF INFORAMTICS SCIENCEUNIVERSITY MALAYSIA SABAH

LABUAN INTERNATIONAL CAMPUS

Evaluator’s Profile

Name : Rosiadi Bin Tajudin

Date of Birth : August 28th, 1984

Nationality : Malaysia

Race : Malay

Sex : Male

Marital Status : Single

Education : SPM, STPM, BSc. (Multimedia Technology)

Hobby : Reading and Listening Radio

Content Inside

:: Introduction

:: General Evaluation of the Three Websites

:: Evaluates the Attractiveness

:: Critique on the Choice of Media

:: Evaluates the Navigation and Usability

:: Critique the Content of the Three Websites

:: Rating Using Nielsen’s Usability Heuristics

:: Conclusion

:: References

:: Appendix

1) Introduction

Evaluation is an important part in overall phases of design process. The evaluation being

done to ensure that a systems being developed behave as we expect and would fulfill

user requirements. Evaluation must occur throughout the design life cycle, because

through evaluation developer will know the advance and weaknesses of their systems.

So that, modification of the systems can be done to improve the systems performance

before it goes to the end users.

In evaluating systems, there are three important goals to be achieved. There are

to assess the extent and accessibility of the system’s functionality, to assess user’s

experience of the interaction and also to identify any specific problems with the system.

Many types of evaluation technique can be followed to evaluate a multimedia

system such as the evaluation through expert analysis, the evaluation through user

participation and some more. One of the most popular is Heuristic Evaluation.

Thus in this assignment I had evaluates three websites. The evaluation being

done includes:

a) Evaluates the attractiveness of the three websites

b) Evaluates and critique the choice of media of the three websites

c) Evaluates the navigation and usability of the three websites

d) Evaluates and critique the content of the three websites, and

e) Rate each site using Nielsen’s usability evaluation heuristics

2) General Evaluation of the three websites.

Evaluation FactorScore given

asiarooms.com Asia.hotels.com HotelTravel.com

Attractiveness:

How the site catch my eyes

7 4 7

Was the information interesting

7 4 7

Was the information memorable

6 6 6

Choice of media:

Was the use of text helpful and interesting

6 6 6

Was the use of graphics animation helpful and interesting

5 5 6

Was the use of color helpful and interesting

7 4 7

Navigation and usability 6 5 7

*For each scale given on the table above please refer to the reference on the next page

and for the explanation of each evaluations factor please refer to point 3-6.

Reference:

1 = Awful 2 = Worse 3 = Bad 4 = Average

5 = Good 6 = Excellent 7 = Wonderful

Table 1.1: Scale given to the three websites based on some evaluation factor

(Refer to evaluation point 3 to 6)

3) Evaluates the attractiveness

The most attractive website for me is hotelTravel.com. When I firstly open that site I am

really interested on the design of the website which is interesting and could attract my

attention to browse inside that site. The entire multimedia element on its interface

presented nicely with a nice blue color in different tones. In term of information

presented, for me it’s quite interesting and the information we need are easily access

with multiple navigation button provided. We also can go to the specific information on

our search. In example, if we search Malaysia then the map of Malaysia will exist and we

can click inside Malaysia map to go to the state and the city map.

The second attractive website for me is asiarooms.com. Firstly is because I like

the orange color it used for the banner on the top of the website. It catches my eyes to

browse inside this site. The information also presented nicely with picture and it provides

details information of our search. Besides, I believe that user could remember the

information presented because it has presented clearly with picture, address, contact

number of the hotel we search and many more.

For the Asia.hotels.com, for me it is not attractive. When I firstly logon to that site

I become bored with its background color and its banner is not interesting. It is too

simple website, full with text without animation and will make user felt bored to browse

inside. However, the information can be memorable and the picture on the first page

present nicely in big size.

4) Critique on the choice of media

In term of the use of text, all of three websites have use plain text which is easy to read

and the words they use were understandable. However the different between them is the

use of other media such as animation and graphics (picture).

For the asiarooms.com, it hasn’t used any animation in presented the

information. However, the use of color (orange) could attract user to pay attention to this

site. They use orange color for their banner, box inside the pages, and also for the

button in different tones of color and it is very match with its white background. Besides,

the pictures of the hotel also very nice and may attract user attention to browse the hotel

that being advertised. In example when users click the hotel they want then the big

picture of the hotel will exist along with the hotel information. Besides, the page also

always updated, user can see at the bottom of the page the date it just updated. So,

whenever users browse this website the picture they presented always changed to the

new picture. This could make user to stayed using this websites as their main reference

before go on their vacation.

While, for the hotelTravel.com it has excellently used of media elements in its

websites. The role of blue color it used for background and overall elements inside its

pages (such as boxes) in different tone of blue color make it very interesting to be

browse. Besides, it also uses some simple animation for advertisement and promotion

such as an animated picture. The use of animation also can be seen in the maps (inform

of flash animation). When users browse the maps pages it will show the world maps. For

example, if user click on Malaysia, then Malaysia maps will appear in the box size and

then, user can click the state in Malaysia they like to surf. The use of animation on the

maps, can give user information on the location of their holiday because when user click

on the maps the information of the maps they click will be shown with the list of hotels

where they can stayed on that locations. Same as asiarooms.com, hotelTravel.com also

present nice picture for the hotel advertisement.

For Asia.hotels.com, the use of color is not interesting and I think the color its use

can not help to attract user attention. The blue colors it use looks shabby and not match

with the white background color. So, it looks uninteresting. Besides, when we browse

other page inside most of the media we can see is only text. Picture just can be seen

when we use its search box to search for the hotels, then the list of the hotels comes

with picture will be presented. However, Asia.hotel.com presents the hotel picture in

bigger size as we can see in the first page of this website.

5) Evaluates the navigation and usability

For the evaluation on the navigation and usability, all of the three websites provides

good navigation and usability function for user. However there is some navigation

functionality that makes them different.

For the asiarooms.com it provides many navigation buttons for user to browse

inside its website. It also provides 3 option of language which is English, French and

Dutch. It also provides a good search functions for user. The search box on the top of

website functions like search engine in which when user type the words they search then

the list related to the words they search will be appeared and they can select which one

satisfy their searching. It also provides search option at the right side of the search page

which gives user to do search following the country, state, and the city. Then the results

of their search will be listed and user may click any results to get more information. It

also provides searching hotel locations using maps. Overall, I didn’t encounter any

problem with the search in this website.

The same thing goes to the hotelTravel.com. It also provides a good navigation

and usability as same as asiarooms.com. However, hotelsTravel.com provides more

interesting search results and multiple options of languages. These enable people from

multiple races and languages to use this website. User can search for the hotel following

their wish by using maps (flash maps) or search box. However the usage of search

maps is quite interesting for example is user click the world map and choose Asia

region, then Asia maps in bigger size will appeared. User then can choose the maps of

the county they wish in Asia region and when the map is click the big map of the country

will appeared. Same goes if user clicks the map of the country to go to the state inside. It

also provides much information to user following what they search. And overall, I also

didn’t encounter any problem with the search in this website.

For the Asia.hotels.com it provides less navigation buttons. However the search

option it’s provides also good. In which user can search the hotel they wish following the

region, country, or the city. It also provides the advance search option in which user can

search the information they wish more specifically. But for the search using map, the

maps provides is not interesting and user can not go inside the maps specifically. In

example if they choose the world maps, and then choose Asia, just few countries name

in Asia will be listed and they need to click on the list provided to browse to the country

they have select. This is because the maps just ends until region and not until the city

maps like offered in hotelTravel.com or until the state map like in asiarooms.com. And in

term of usability, Asia.hotels.com is not user friendly since it’s only offered English as an

option for the language.

6) Critique the content of the three websites

In term of the content presented in asiarooms.com, for me the content in this website

was presented clearly and can be understood even for the novice user. The ten user

interface that I can remember from this site is:

1- Orange color it use for banner

2- A hotel search box at the right side of the website

3- Advertisement of hotel offered which always changed at the top right side on

the banner.

4- A symbol of people (like ancient China soldier)

5- A currency option box bellow the banner

6- A flag of three countries which symbolize the language it offer below the

banner.

7- A big picture of a vacation location on the first page.

8- The maps.

9- The search results presented like search engine.

10- List of major hotel in some region with small picture for each hotel at the left

side on the first page.

From my experience browsing this site, I can get more information on hotels

booking, car rental, and places to visit around the world. Besides, the information

regarding the hotel or places they provide to end user is very clear and understandable.

So, from my view I conclude that asiarooms.com have presented the message clearly to

me as the user.

The same thing goes to r hotelTravel.com There are many things that user could

remember after leaving this website. For me the 10 thing I can remember is:

1) Blue color it use for banner

2) Easy navigation button to search following the region at the left side of the first

page.

3) Eight flag at the top left symbolize the language options its offered

4) The earth symbol on the banner with an arrow move around it.

5) Graphics of credit card at the bottom of the first page.

6) Loge of their links at the bottom of the first page.

7) A digital certificate symbol at the bottom of the first page which indicates this site

is fully secured.

8) The nice maps in flash animation

9) The multiple button it provides (at the top, side and also at the bottom) of its

page.

10) A live agent box at the right side which is the chat space.

And for the Asia.hotel.com, for me this website is not excellently presents its content to

the user. Even it provides much information in form of text but the way they presented

the information is not interesting. Besides, the color use actually is the cause why these

pages look uninteresting. I just can remember some user interface in this websites

because when I surf it for the first time, I don’t like to serve it ever. Below are the only

things that I can remember for its first interface:

1) The blue and white color use for its banner and main interface

2) A man hanging 2 bags in the hotel logo.

3) Two biggest buttons represent the hotels and rental vacation buttons under the

banner.

4) The biggest search box on the first page.

5) Nice and big hotel picture list on the first page.

6) Big picture on its banner which always changed

That is, the only thing I can remember from the first interface of Asia.Hotels.com.

Even it provides a good information of it services, but the way it looks make we are not

attracted to read the information unless you are the person who don’t want to miss the

information.

7) Rating using Nielsen’s usability evaluation heuristics.

Rating

Nielsen’s Usability Evaluation Heuristics

Rating Given

asiarooms.com

Asia.hotels.com

hotelTravel.com

Visibility of system status 6 5 6

Match between system and the real world

5 3 7

User control and freedom 6 6 6

Consistency and standard 7 7 7

Error prevention 6 6 6

Recognition rather than recall 6 4 7

Flexibility and efficiency of use 6 4 6

Aesthetic and minimalist design 7 7 7

Help users recognize, diagnose, and recover from errors

6 6 6

Help and documentation 7 3 7

* For the rating given on the table 2.1 please refer the reference below and the

explanation for each rating on the next pages.

Reference:

1 = Awful 2 = Worse 3 = Bad 4 = Average

5 = Good 6 = Excellent 7 = Very good

Table 2.1: Show the rating given of each site based on Nielsen’s usability evaluation

heuristics

Explanation of Nielsen’s Usability Evaluation Heuristics

Based on the rating given, as shown on table 2.1, I have made some conclusion based

on my views on the three websites after give rating for the each site using Nielsen’s ten

heuristics.

For the first evaluation concerned on the visibility of system status I give 6 score

for asiarooms.com and hotelTravel.com because for both websites we just need a few

seconds to wait when we browse other site inside their sites. In comparison I take

1minutes 30 seconds to load hotelTravel.com and around 1 minute to load

asiarooms.com. Besides, for the hotelTravel.com it will show the uploading bar inside a

box where we ask for certain particular thing such as if we click Malaysia maps and

choose Sabah than the uploading bar will emerge inside the same place where the

maps box was located. However, for Asia.Hotel.com I just give 5 score because we will

take a long time to wait to open other pages inside this website. I take about 2 minutes

to load this site and sometimes I even can’t open this site. Even, it has show the box

“one moment please” but it not much helps to make user waiting. However, all of these

differences in time taking to load the three sites depend on the internet connection. In

this evaluation process I use wireless connection in which the connection only 11.0Mbps

(Megabit per second)

For the second evaluation concerned on how the each sites match between

system and the real world, I give 7 score for hotelTravel.com because it provides eight

option of language. This make user free to choose any language they understand more

such as English (Default), German, French, Italian, Spanish, Japanese, Chinese and

Korean. While, for asiaroom.com I give 5 score because it only provides three options

for language namely English (default), French and Dutch. And, for Asia.hotels.com I give

3 score because it only provides English version and this is not user friendly because

only people who understand English can browse that site. I guess that, their target user

might be peoples who live in the west countries where the websites is operated. Besides

matching between system and the real world also can be evaluate from the usage of

currency that the three sites provide to the end user. For example, in asiarooms.com it

provides combo box at the top of the websites where user can select the currency the

want. Besides, the default currency in asiarooms.com will be following where the site is

being opened. Let says it opened in Malaysia then the default currency will be in

Malaysia Ringgit and all of the hotel price will be in Malaysia Ringgit. For

HotelTravel.com it provides USD as default currency for the hotel they have advertise.

However, the also provide the currency converter to enable user to convert the USD to

the currency they want. And the same thing goes to Asia.Hotel.com, where it also makes

USD as the default currency and provides the currency converter. (Refer to appendix)

The third evaluation concerned on user control and freedom. 6 score given to trio

websites because all the three websites enable user “emergency exit” to leave the

unwanted site without give the message box such as “Are sure to leave this site?”.

These save user time to leave the unwanted site.

The forth evaluation, I give 7 score for the consistency and standards to all three

websites. High score was given because all of three websites use clearly words,

symbols which can be understand and the concept use in each page is similar in other

pages. Besides all three websites using accepted standard such as use phone symbols

for “contact us” and use envelope symbol for “e-mail us”.

The fifth evaluation is error prevention. For this evaluation 6 score given to all

three websites all of the three websites have a good design that prevents a problem

occurred. In example, if user looking for the hotel in a county, they will be provided with

the information of the country and details of their search and after that the list of hotels

they search will appear. So, it is impossible for user to book the hotels they don’t want

to.

While, for the sixth evaluation which is recognition and recalls 7 score given to

hotelTravel.com because the objects, actions and option for all of the information

presented are visible (similar interface with multiple button). 6 score given to

asiarooms.com because it is not fixed its main button for the all pages. For example

there are main button which is not available on all pages and this force user to

remember where the information they have read before located. The same goes for

Asia.hotels.com, but the different is Asia.hotels.com provides limited navigation button.

The seventh evaluation “flexibility and efficiency of use” 6 score given to

asiarooms.com and hotelTravel.com because both of this websites allow user to

navigate all pages on their websites easily by provides navigation button which is

understandable by all users. And for Asia.hotels.com 4 score given because some of the

action users do in this websites can not be understand by all users. Means that only

common users well know how to use this site, since it’s only provides few navigation

buttons.

For the eight evaluation “Aesthetic and minimalist design”, 7 score were given to

all of the three websites because all of them provides information which is related to their

functions on providing user with hotel information. For example, when user looking for

Shangri-La Rasa Ria Resort in Kota Kinabalu, Malaysia, then the information of the hotel

will be presented including the picture of the hotels, information about empty room, price

of rooms and even the rating of the rooms. All of the three websites have presenting the

same matter on this but in difference way. (Refer to appendix for details view). Thus,

from my view, I don’t realize any irrelevant information or irrelevant advertisement

presented in the three websites.

For the ninth evaluation I also give 6 score for all of the three websites because

all of them give error messages in plain language which is understandable and not

presented in for of codes. For example if the location or hotel user search is not found,

all of the three websites will inform user that their search come with no result or can not

be found.

Lastly is the evaluation on “help and documentation”. For this evaluation I give 7

score for asiarooms.com and hoteTravel.com because both of them provides user with

help option such as Travel Guide page in asiarooms.com and Guides page and my

holiday plan in hotelTravel.com. And, only 3 score given to Asia.hotels.com because it

didn’t provides any travel guides for user and if user like to search something they need

to look for it by search option.

Conclusion

After doing some evaluation of the three websites, I found that the most important thing

of a websites is not only the information it provides to user but how the information being

presented to user. The way the information was presented along with the use of

multimedia element plays an important role to catch user attention on the websites and

stay with the services offered.

So, user interface actually play a big role in a web design. The early development

of a website should determine the interface that fulfill user requirements and may attract

user attention. It also must speaks the language that user understands. Besides, the

choice of media also must be suitable. In example the text information must be comes

along with a picture or animation which could translate the information given in more

details.

Overall, the entire three website presents good information of hotel location

around the world. However, the different between them is the way they presents their

information and the usage of interesting interfaces to satisfy user requirement. User’s

view is different following the region where they come from. Their culture, language and

custom are all different. Thus, a website must be design and developed following the

standard which can be accepted worldwide.

Lastly, all of the information, evaluation and comment in this report were based

on my opinion. The score and rating given I evaluating the three websites also based on

my experience in browsing all of the sites. This evaluation may different with others

because the way we evaluates something is different following the perception and

technique we used. Beside the fast of internet connection also may cause different

result.

Reference

Dix, A., Finlay, J., D. Abowd, G., and Beale, R. 2004. Human-Computer Interaction: Third Edition. UK: Pearson Education Limited

http://asia.Hotels.com

http://www.asiarooms.com

http://www.hotelTravel.com

http://www.useit.com/papers/heuristic/severityrating.html

http://www.useit.com/papers/heuristic/

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.webcredible.co.uk/services/web-accessibility-evaluation.shtml

APPENDIX

hotelTravel.com

First Page of hotelTravel.com (Default -English)

The first page of hotelTravel.com if users choose Japanese language

Option to change to other language

Search option by country and city

Help function in term of guides and travel plan

Search using maps

Search Box

List of travel destination

Result exist when user use search option (Country=Malaysia and Area=Sabah)

Help option using world wide travel guide (Maps)

Currency used in HotelTravel.com and Information Provided of the Hotel

Lists of related link, when users search for “Sabah”

Page loading and after that world map exist

When user click on Asia region then Asia map will exist in a bigger size

When user click on then Malaysia map will exist in a bigger size

When user click on Sabah, then Sabah maps will appear along with some information and lists of hotels in Sabah will be listen below the map

Lists of hotel in Sabah

HotelTravel.com also use USD as default currency for the hotel price

However, HotelTravel.com also provide currency converter to enable their customer to convert crrency from USD into another currency

Address

Location

Picture of the hotel

Rating on services

Date/ Period

Types of room with price

First page of asiarooms.com

Option to change the language

Search option 1

Travel guides is the help for users

Lists of Hotels in Asia Pasific

Date that show it always updated

Search Box by country and city

Search functions using the search box

1 2

3

1- When user use search box and select Malaysia, and Kota Kinabalu, then

2- The lists of hotels in Kota Kinabalu will be listed.

3- And if user select one of the hotels in Kota Kinabalu, then the information and picture of the hotel be presented

When user search Kota Kinabalu using this search text box, then lists of link to the hotels and related information of users search will be listed

List of hotel and related information to user search

Currency used in asiarooms.com

Malaysia Ringgits will be default currency in asiarooms.com when the pages open in Malaysia

List of currencies where user can choose to make payments. It will be changed automatically following where the pages being opened (country)

If user use Malaysia Ringgit, then the price of hotels they view will be in MYR (Malaysia Ringgit)

First page of Asia.hotels.com

The only two main buttons which can be clearly see by user

The option box provides find the hotel and advance search to users

The hotel advertisement promotion presented in a big picture and can be seen clearly by the user

It provides the global sites but still use English as intermediary language

Search functions in Asia.hotels.com

Search using select vacation rental (using Maps)

When user search for Kota Kinabalu using advance search in the search box, then the lists of hotel in Kota Kinabalu will appeared

List of hotel in Kota Kinabalu with url link

When users search using maps, they just can click the maps until region only (i.e Asia region). Then, for the next search they need to key in their search inside the next search box

Next search

Click Asia region on the world maps, then the Asia maps will appeared in big size

Currency use in Asia.Hotel.com

USD is the default currency used for hotel price in Asia.Hotels.com

However, its provide currency converter to make user esy to change the price following their currency.

User may convert USD into other currency