You are on page 1of 26

USER INTERFACE EVALUATION

IM 2063 HUMAN COMPUTER INTERACTION

Name:

ROSIADI BIN TAJUDIN

SCHOOL OF INFORAMTICS SCIENCE


UNIVERSITY 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.

Score given
Evaluation Factor
asiarooms.com Asia.hotels.com HotelTravel.com
Attractiveness:
How the site catch my
7 4 7
eyes
Was the information
7 4 7
interesting
Was the information
6 6 6
memorable
Choice of media:
Was the use of text
6 6 6
helpful and interesting
Was the use of
graphics animation 5 5 6
helpful and interesting
Was the use of color
7 4 7
helpful and interesting
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

Rating Given
Nielsen’s Usability Evaluation
Heuristics asiarooms.co Asia.hotels.co hotelTravel.co
m m m
Visibility of system status 6 5 6
Match between system and the
5 3 7
real world
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,
6 6 6
and recover from errors
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)

Help function in term of


Option to change to Search option by
guides and travel plan
other language country and city

Search using maps

Search Box
List of travel
destination

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

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

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


Help option using world wide travel guide (Maps)

Page loading and after that world


map exist

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

When user click on Sabah, then Sabah maps will


Currency used in HotelTravel.com appear
and Lists of hotel in Sabah
along with some information and lists of
Information Provided of the Hotel hotels in Sabah will be listen below the map

Address

Location

Picture of the hotel

Rating on services

Date/ Period available

Types of room with


price

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

First page of asiarooms.com

Search option 1

Option to change
the language

Search Box by
country and city

Travel guides is the


help for users

Date that show it


always updated
Lists of Hotels in
Asia Pasific

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
List of currencies
when the pages
where user can
open in Malaysia
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


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

Search using select vacation rental (using Maps)

Click Asia region on


the world maps,
then the Asia maps
will appeared in big
size

When users search using maps, they just can click


the maps until region only (i.e Asia region). Then, for Next search
the next search they need to key in their search
inside the next search box

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