Hci Final

HCI Group Assignment
Table of Contents
ABSTRACT....................................................................................................................................2
1.0
INTRODUCTION................................................................................................................2
2.0
METHODOLOGY...............................................................................................................2
Analysis........................................................................................................................................2
Design........................................................................................................................................11
Development..............................................................................................................................36
Implementation..........................................................................................................................38
Evaluation (Testing)...................................................................................................................54
3.0 INDIVIDUAL PART AND CRITICAL COMMENTS...........................................................64
4.0 CONCLUSION........................................................................................................................69
Gantt Chart.....................................................................................................................................70
Workload Matrix............................................................................................................................72
5.0 REFERENCES........................................................................................................................73
6.0 APPENDIX..............................................................................................................................75
UC2F1501IT

ABSTRACT
ISAI CAR RENTAL is a fictional company which has just recently started operating.
Their main service is to provide for-rent vehicles to anyone as much as possible wherein they are
specialized in high end/luxurious vehicles. Since it is a newly established company, they are
initially using manual manner of registering customers. However, the management noticed that
manually registering customers is not efficient and would rather have a negative feedback from
their customers.
Thus, ISAI CAR RENTAL hired a team of system analysts and designers to develop an
online system with the main objective of replacing the manual manner of registering customers.
1.0
INTRODUCTION
ISAI CAR RENTAL is a newly established company based on Bukit Jalil, Kuala Lumpur,
Malaysia. ISAI CAR RENTAL specializes in high end vehicle rental services. The main target
customers are businessmen who are planning to spend few days or weeks for business meeting
around Kuala Lumpur. At the same time, ISAI CAR RENTAL also extends their services to
tourists or for regular family outings who dont want to subscribe to services of any tour agency.
In addition, they offer a number of sports cars for aspiring racers.
2.0
METHODOLOGY
Analysis
Problem Statement
If ISAI CAR RENTAL constantly use manual way of tracking down all their
customers, the following difficulties are more likely to be encountered by the company
along the way:
UC2F1501IT

(1) Communication Barrier
Customers would usually access the services of the ISAI CAR RENTAL
by reaching them out via telephone calls.
If so, a higher possibility of
communication barriers interfere smooth operation of the company.
For
example, the phone operator might misunderstand a word or phrase that the
customer is trying to explain and would convey a different meaning resulting
to dismay on the side of the customer.
(2) Insufficient Details
Using manual method of registering customers through telephone call may
yield to insufficient details about the available products or services. It is not
effective to inform the customer about the details necessary for them to decide
which car to avail. Important details like description of the car model wont
be emphasized effectively through telephone calls only.
(3) Higher rate of human error
Manually encoding details of all customers one at a time will yield to a
higher rate of human error. Either through telephone calls or walk in visit of
the customer to the branch itself is not effective to minimize error on the side
of the operator. Thus, online registration is effective so that human error is
only to be blamed by the customer had he failed to provide details carefully.
(4) Unsatisfied customer

Overall, manual registration would yield to a poor customer satisfaction.
Solution
Since ISAI CAR RENTAL is a fresh company, the management decided to offer an
online registration services for an efficient manner of operation. Thus ISAI CAR RENTAL hired
UC2F1501IT

a team of system analysts and designers to provide a prototype of how their website would look
like when implemented. It is expected to be complete in all details and functionalities about how
ISAI CAR RENTAL operates as a whole.
Objective
The objective of the project is to create an online system for the ISAI CAR RENTAL in order to
solve the problems they are currently facing. The following objectives are to be met in order to
accomplish this objective:
(1) There should be a committed user involvement in the development of the

proposed system to achieve all the requirements of the user.
(2) Create an online system that benefits both the owner in managing their
business and the customers in making their transactions with the company.
(3) Provide a systematic and organized documentation of the proposed system in
order to fully assist the user about the proposed system.
SWOT ANALYSIS
UC2F1501IT

Strength
Weaknesses
ISAI is local company that provides car
at the reasonable price.

The car provided is at the perfect
The promotion and advertisement still

couldnt reach the targeted customer.
condition and safe to be used.

Opportunity
Threat
The tourist from foreign or local might

choose
car
rental
rather
that
transportation service because it much

cheaper.
The ISAI always have its competitor

that offer better service than ISAI
This competitor has existed far longer

than ISAI and they have a strong
ISAI will penetrate the car rental
experience on how to be dominant in
market and become dominant at the
the rental car market.
valuable fee.
USER PROFILING
A user profile is a record of user-specific data that define the user's working environment.
The record can include display settings, application settings, and network connections
(SearchSecurity, 2015).
UC2F1501IT
The
information above
indicates that there are the high numbers of user who
using internet on their daily basis and this will lead to the higher amount of visitor to ISAI
webpage. Out of that number, most of the users are the targeted audience for the car rental
services. Novice user is the new user to the system and the suitable usability goal for them is
learnability. Experts user is the most experience user to the system and we apply efficiency as
usability goal to save their time.
UC2F1501IT

Hierarchical Task Analysis
UC2F1501IT
QUESTIONAIRE RESULT
CONCLUSION
The analysis section discuss briefly on the step that necessarily should be taken to
perform the complete project in the frame time
Design
STORYBORD
HOME PAGE:
This home page the user can view the information of the company and
how the user can use the system/website and the regulation of the
rental car like if accident happen what is rule and so on.
Quote AND BOOKING
This page the user can check the list cars or the models of the cars and also
which car is available the price for each cars
BOOKING
This page the user can check back the history of the booking car and also
the user can login this page after the registration page is done so the most
function of this page the user can check again the history of the booking
CONTACT US
This page the user can contact the admin of the system/website if something
emergency happen such as accident and so on and also the system
providing comment page so the user can comment the website if is there
any problems and also the admin they can know what the user need so they
can develop system based on the requirement of the users
CHOOSE CAR
This page the user it can choose which he/she need to choose after the user
choose the car the user they can see the price of the car that they chose
then it will go for registration page like Name, email, license, email, address,
phone No and etc.
SCREEN SHORT:
Home page
Homepage.
Purpose: Enables the users to view the information about the company
Strategy: Visibility, Affordance, Constraints and mapping.
Choose a car page
Choose cars Page.

Purpose: Enables the users to choose the model of cars and then
registration and the booking it will be done
Strategy: Consistency, Visibility and constraints.
Contact us page
Contact Us Page.
Purpose: It displays the contact information in choose car for the users to
stay in contact with rental car via Facebook, contacting rental car admin or
by following the location provided in the map above.
Strategy: Feedback, mapping and visibility.
Booking page
Booking page
Purpose: keep the user to check again the history about the booking car
exam: the user can forget the time he or she booked so the user can check
again
Strategy: mapping and constraints.
Quote and booking (Gallery)
QUOTE PAGE
Purpose: this page the user can see the models car and the price for each
car and also after login/registration it can see the available car
Strategy: visibility and constraints.
Logical Design
Donald Norman Guidelines
Visibility
It is one of the most important role. It deals with how a mind can be good at finding and looking
for clues and use the clues to input or interpret something out of it thus placing the control in a
highly visible locations is a must to ease user interactions. Lack of visibility can lead to lack of
controls, superstition and false casualties.
Feedbacks
Concerned with the provision of information about the result of an action inother words
Feedback is about sending back information about what action has been done and what has been
accomplished, allowing the person to continue with the activity. Various kinds of feedback are
available for interaction design-audio, tactile, verbal, and combinations of these.
Constraints
Limiting or restricting a specific type of user or stakeholders to only interact and feedbacks with
the system is a key to prevent user selecting incorrect options
Mapping
Concerned with the relationships between the control and its effect in other words connect
elements of computing artefacts to the real world.
4.3.0.5 Consistency
It deals with the concept and interface of similarity in order for user to get ease of familiar with
the design.
Can be categorized into 2:
a) Internal deals with consistency on design within the systems
b) External deals with consistency across all platforms and devices
Affordances
Affordances are the actions that the design of an object suggests to its user. Affordances provide
strong clues so that no instructions or labels are needed: a design with labels is often a bad design
and this is also true in the case of computing artefacts. Exceptions exist and they include
Usability Definition
Usability can be define as the extent to which a product can be used by specified users to achieve
specified goals with effectiveness, efficiency and satisfaction in a specified context of use. In
simple words it is factor or keys that analyze how effective and easy it is to use the interface.
According to Jakob Nielsen (2003), usability can be defined by 5 quality components:

Learnability: ease of learning for novice users. How easy for new users to adapt to the basic
tasks and initial interface for the first times.
Efficiency: steady-state performance of expert users. Once user passed the novice level, they are
considered a pro or expert; after long adaptation to the basic tasks, it then goes to how fast can do
the tasks perfectly.
Memorability: ease of using system intermittently for casual users. Not everyone use the
interface full time so adaptation might be require again for few times. This measure how familiar
can user get back to after few to long time of no usage.
Errors: error rate for minor and catastrophic errors. This measure how an error can easily occur,
made by users and the length it takes to fix.
Satisfaction: how pleasant the system is to use. Is the system doable by anyone, manageable and
does it improve things? If all is yes then satisfaction is met.
Usability does not usually come alone as it always come utility, that is, how easy is it for a user to
achieve their goal by using a given system or a website (for our system) and this will lead to the
usefulness or the purposes of the system. Does the Web site do what users need it to do? This
question confronts the design and functionality of that Web site, and requires us to consider
the user experience.
Usability and utility combined together makes something useful thus both are important equally.
It matters little that something is easy if it's not what you want. It's also no good if the system can
hypothetically do what you want, but you can't make it happen because the user interface is too
difficult. To study a design's utility, you can use the same user research methods that improve
usability.
After all, usability really just means that making sure that something works well: that a person of
average (or even below average) ability and experience can use the thing - whether it's a Web
site, a fighter jet, or a revolving door - for its intended purpose without getting hopelessly
frustrated.
- Steve Krug, Don't Make Me Think, 2000, p. 5
Importance of Usability
For any systems, usability is a key success factors. A system depends on a user, without users the
system is useless. A good user-friendly well design interfaces on a system will attract all type of
users from novice to experts.
On the Website and our system, usability is a necessary condition for survival. If a website is
difficult to use, people leave. If the homepage fails to clearly state what a company offers and
what users can do on the site, people leave. If users get lost on a website, they leave. If a
website's information is hard to read or doesn't answer users' key questions, they leave. Note a
pattern here? There's no such thing as a user reading a website manual or otherwise spending
much time trying to figure out an interface. There are plenty of other websites available; leaving
is the first line of defense when users encounter a difficulty.
Usability Engineering Life Cycle
The Usability Engineering Life Cycle (UEL)

It is invented the Usability Engineering Life Cycle by Bias and Mayhew in 2005, which simply
divides the lifecycle into 3 main stages namely design, analysis, and testing. Its main purpose is
to create a usability test plan. Implementation at the early stage will provide a full analysis of
testing and reports which will then be use to on the 3 stages.
According to Nielsen, UEL stages can be simplified indepth into sub stages. The stages are:
I.
Identify (Know) the user

a. Individual user characteristics
b. The user's current and desired tasks
c. Functional analysis
d. The evolution of the user and the job
II.
Competitive analysis
III.
Setting usability goals

a. Financial impact analysis
IV.
V.
Parallel design
Participatory design
VI.
Coordinated design of the total interface
VII.
Apply guidelines and heuristic analysis
VIII.
IX.
X.
Prototyping
Empirical testing
Iterative design
a. Capture design rationale
XI.
Collect feedback from field use
Usability Goals
Usability goals and user experience goals is to be noted that it is two different things. Usability
goals can be define as providing effectiveness, efficiency and satisfaction in terms of learning
and memory ability for users on use of the system or products whether it is prior, during or after
the development of the system or product.(Van der Peijl 2012)
Purposes
Designing or creating a system without any goals in mind is making a blind choice (Wixon and
Wilson 1977). According to Mayhew (1999) usability goals has two main purposes.
One of the purposes are usability goals should drive design (Mayhew 1999). Designers are doing
meetings hours, days, months full with arguments without realizing the effect of the design and
asks; can it really achieve the main goals of the system. Instead of wasting time on designs, why
not focus on the usability goals while creating and discuss the design. What is the point of a
system or product that looks like a Ferrari but does not feel like one inside. From my
interpretation on this is; why people still buy fake or graded products is because of what is
inside which is it has the functionality of a system or product that the buyer need.
The second purposes of usability goals are to be use as acceptance criteria during usability
evaluation prior to finishing the design process. Each of the step of the design process will lead
to evaluations whether it has achieved the usability goals requirement and is it satisfactory?
When this evaluation ends which means it does fulfilled the usability goals and satisfaction, the
developer will then can proceed to another design process. Any problems found during
evaluation whether it is usability goals related or not can be but into level of preference of fix or
priority. This is beneficial when resources are limited or getting less thus by looking at the level
of priority and use the resources more on the design which is more closer towards the usability
goals.
Usability goals drive the evaluation process as well as the design process together ( Wixon &
Wilson 1977)
Usability goals are mainly based on the user profile and the contextual task analysis. They are
also made on general business goals as well. They can derived from marketing groups, technical
support groups, competitive analysis or jus informed opinion. The selection of usability goals has
to be done very careful y since it has a huge effect on the development of the required solution.
According to Wixon and Wilson (1997 cited in Mayhew 1999: P 125) for example it won't be
necessary to concentrate on ease of learning goals for a system which is going to be used by
people who are going to be well trained and which going to u.se frequently. Space shuttle
systems, air traffic control systems can be considered as such systems. But for systems such as
online ordering systems, bank teller machines etc. are systems which the ease of learning has to
be a vital usability aspect hence considered as a usability goal. Through even sources such as
marketing groups, competitive analysis or even just informed opinion we can originate usability
goals (Wixon and Wilson 1997 cited in Mayhew 1999; p126).they can be considered as the main
driven force behind the construction of the proposed design from the interface to the system
functionalities.
Types
Usability goals has various different types categories but can be simplified in to two. Qualitative
usability goals and Quantitative usability goals. Both has its own advantages and disadvantages
by using and knowing these two types and implementations, the usability goals will be managed
handled and reached much efficiently.
QUANTITATIVE USABILITY GOALS
Goals which have a quantitative task to be achieved are called quantitative usability goals.
Though qualitative goals are hard to be determined if they have been achieved by the end of the system
design. Quantitative goals on the other hand can be determined if they have been fulfilled since they are
so widely spread throughout the development of the whole system hence they can be regarded as
objective and measurable. These goals have a clear measurement of performance and as a result of that
developers can keep in mind to make sure they do the designing according to the required quantitative
target. Examples for such goal are as follows:
Experienced users should take no longer than 3 minutes on average to finish conducting a transaction.(For
a bank teller machine) Novice users should take no longer than 5 minutes on average to complete a
transaction. (For a computer Game)A novice player should take no longer than 20 minutes to completely
gain the knowledge on the basic movements of the character. An expert player should be able to finish
any stage of the game other than the final part within an average time of 3 hours. (For a university online
library system) a novice student (A first time student) should be able to understand the gain the know
edge of the system within a time period of 5 minutes. A normal student should have the advantage of
viewing a pdf file within a maximum time of 3 minutes.
TYPES OF USABILITY QUANTITATIVE GOALS
Ease-of-use goals- Takes a look at the use of the system by the users who are well experienced
and trained to u.se the product. It checks on the performance users achieve through the use of the
product. Developers basically focus on the attributes such as speed, efficiency and flexibility
which an experienced user obtains (Mayhew 1999; p 128).
Ease-of-learning goals- the main focus on this type of goals is to determine the usability level of
first time users. This can be applied even to the users who do not use the system very much
frequently. In other words ea.se-of-learning goals measure the length and the slope of a user's
learning curve that is still in the process of mastering the application (Mayhew 1999; p128).
Absolute goals- this type of goals have a specific number for the attribute it's being referred to.
Both ease-of-use goals and ease-of-learning goals fall to this category since they have a specific
numbered value for the job the goal is made for (Mayhew 1999; p 128).
Relative goals- relative goals refer to the performance achieved by a user using the built system
with comparison to another system which the individual has been using before. It can be an older
version of the same system, a manual process or a different system which does the same process.
Example can be such as:
1. Experienced users should take less time to do a money transfer from another account compared with
the time taken to do the same at bank X.
2. A normal user should be able to create a Page with Frames within a less amount of time as compared
with the previous version. (Mayhew 1999; 13128)
Conclusion:
Concluding this section of the report several topics has been further discussed and applied such
as the prototype categorization, the advantages as well as the disadvantages of the prototype, the
horizontal and the vertical prototype which falls under high-fidelity prototype, a further
discussion about high-fidelity and low fidelity prototype, types of prototypes such as highfidelity prototype, low-fidelity prototype as well as paper prototype. Moreover, the types of highfidelity prototype has been discussed and mentioned on this report such as the role of computerbased simulation, slideshow and video prototyping as well as how screenshots plays a big role on
helping the designer to perform processes. In addition, various types of low-fidelity prototype
has been discussed in this report such as interface sketch, storyboard, flipbook, physical mockup
as well as screenshot, Wizard-Of-Oz and Fictive techniques that fall under evaluation
technique, the differences between sketches and prototype including to the advantages and
disadvantages of the high-fidelity and low fidelity all has been discussed in details along what
kind of impacts will occur on the design and to what extent will it go.
Development
DEVELOPMENT
For our car rental system we used a basic car rental template based on a WordPress; an online,
open source website creation tool written in PHP script. We also uses CSS styling language. It is
template but the template is not a straight forward set up. To set up we still have to access the
Administration page where the pages and settings then can be integrated to the system. We
acquired a domain from https://esy.es thus we are able to obtain a domain name called
https://isaicarrental.esy.es. Not only that we are able to obtain a pre-installed database, although
inaccessible as an Admin but it is what it is for a free domain.
There are 5 pages consisting of the Home page, Quote & Booking, Booking, Contact Us and
Choose a Car page (combined with a registration page) which are to be set up manually and
linked to the pre-installed pages done by the template. Within this template and with the help of
WordPress, the headings and list menus storyboard are designed and the colors changeable
within the administration panel.
SITEMAP
Diagram below are drawn using http://draw.io site
CONCLUSION
To conclude our project and the development for the Car Rental System turns
out to be a satisfactory accomplishment; not good but an acceptable as far as the
system goes, as the aim is just simple which is only to create a Car Rental System
where user can book a car anytime anywhere. The system is quite functional but the
hassle we went through developing this system is quite troublesome. Within the
development, some of the process has led us to learn new materials such as PHP and
WordPress which none of us have any experienced before. With all these new gain of
knowledge and the application makes the development of the system a satisfaction.
The final or finishing system would have been better if the knowledge of WordPress
and PHP gained prior to starting the assignments. Thank you to the E-Book provided
by Google and YouTube which allow us to learn materials regarding WordPress that
has helped tremendously. We have learned that as a developer we need to think as user
whether you have knowledge of coding and lots of feature if no one going to use it
basically it is just useless. Applying the Donald Norman 6 stages of principle feels
like a must when designing and implementing during the development process.
Overall it was a great teamwork from everyone and feel almost like a real team
working on something big.
Implementation
Screenshot of the main page
Figure 1 Main Page of the ISAI website
Sample code to implement the main page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> ISAI Car Rental</title>
<link rel="pingback" href="http://isaicarrental.esy.es/xmlrpc.php" />
<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/reset.css"

/>
<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/960.css"

/>
<link
rel="stylesheet"
href="http://isaicarrental.esy.es/wp-content/themes/car-rental/style.css"
type="text/css"
media="screen"
/>
<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/styles/green.css"

/>
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #000000 !important; }
/*]]>*/
</style>
<script
type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.1.4.4.js"></script>
<link rel="alternate" type="application/rss+xml"

title="ISAI Car Rental » Feed"
href="http://isaicarrental.esy.es/feed/"
/>
<link
type="application/rss+xml" title="ISAI
Feed"rel="alternate"
href="http://isaicarrental.esy.es/comments/feed/"
/> Car Rental » Comments
<script type="text/javascript">
window._wpemojiSettings
=
{"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":
{"concatemoji":"http:\/\/isaicarrental.esy.es\/wp-includes\/js\/wp-emoji-release.min.js?
ver=4.3.1"}};
!function(a,b,c){function
d(a){var 32px Arial","flag"===a?
c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return
d&&d.fillText?
(d.textBaseline="top",d.font="600
(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):
(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!
1}function
e(a){var
c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")
[0].appendChild(c)}var
f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!
1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||
(g=function(){c.readyCallback()},b.addEventListener?
(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):
(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function()
{"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?
e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}
(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
</style>
<link rel='stylesheet' id='wpclef-main-css' href='http://isaicarrental.esy.es/wpcontent/plugins/wpclef/assets/dist/css/main.min.css?ver=2.3.1'

type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" />

title="RSD"
href="http://isaicarrental.esy.es/xmlrpc.php?rsd"
<link
rel="wlwmanifest" type="application/wlwmanifest+xml" />
href="http://isaicarrental.esy.es/wp-includes/wlwmanifest.xml"
<link rel='canonical' href='http://isaicarrental.esy.es/' />
<link rel='shortlink' href='http://isaicarrental.esy.es/' />
<script
type="text/javascript" rel="icon"
src="http://maps.google.com/maps/api/js?
sensor=false"></script><link
href="http://isaicarrental.esy.es/wpcontent/uploads/2015/11/cropped-SAGA-32x32.jpg"
sizes="32x32" />
<link rel="icon"
href="http://isaicarrental.esy.es/wp-content/uploads/2015/11/cropped-SAGA192x192.jpg"
sizes="192x192"
/>
<link rel="apple-touch-icon-precomposed" href="http://isaicarrental.esy.es/wpcontent/uploads/2015/11/cropped-SAGA-180x180.jpg">
<meta
name="msapplication-TileImage" content="http://isaicarrental.esy.es/wpcontent/uploads/2015/11/cropped-SAGA-270x270.jpg">
<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/extensions.js"></script>
<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.cookie.js"></script>
<script
type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.color-box.js"></script>
<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.calendar.js"></script>
<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" >
//<![CDATA[
jQuery(document).ready(function($) {
$('#menu-primary li').hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
);
$('#menu-primary
.sub-menu li.current-menu-item').parents('li:first').addClass('current-menuitem');
$(".faq_answer").hide();
$("h4.faq_question").toggle(
function(){
$(this).addClass("toggle_active");
},
function () {
$(this).removeClass("toggle_active");
});
$("h4.faq_question").click(function(){
$(this).next(".faq_answer").slideToggle();
return false;
});
$('.button input, .button a, .rich_button input, .rich_button a').hover(
function(){
$(this).css({opacity:'0.9'});
},
function () {
$(this).css({opacity:'1.0'});
});
$.fn.superImage = function() {
return this.each(function() {
var img = $(this).children('img');
var img_position = $(img).position();
var zoom_top = img_position.top + $(img).outerHeight()/2;
var zoom_left = img_position.left + $(img).outerWidth()/2;
$('<img
class="zoom" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/images/zoom.png"
/>').css({opacity:'0',top:zoom_top,left:zoom_left}).appendTo(this);
$('<i
class="round_corner_tl"></i><i
class="round_corner_tr"></i><i
class="round_corner_bl"></i><i
class="round_corner_br"></i>').appendTo(this);
$(this).hover(
function(){
$(this).children('img.zoom').animate( {opacity:'1'} , 500);
$(this).children('img[class!=zoom]').animate( {opacity:'0.5'} , 500);
},
function () {
$(this).children('img.zoom').animate( {opacity:'0'} , 500);
$(this).children('img[class!=zoom]').animate( {opacity:'1.0'} , 500);
});
});
$(".gallery").each(function(){
$('a',this)
.superImage()
.attr('rel','image_gallery');
$("a[rel='image_gallery']").colorbox({width:"80%", height:"80%"});
});
$("a[href$=.png], a[href$=.jpeg], a[href$=.jpg], a[href$=.gif]")
.filter(':has(img)')
.css({display: 'block', position:'relative'})
.superImage()
.attr('rel','image_gallery');
$("a[rel='image_gallery']").colorbox({width:"80%", height:"80%"});
});
//]]>
</script>
</head>
<body>

<div id="main-wrapper">

<div id="header" class="block-wrapper">

<div class="container_16 clearfix">
<div class="grid_5">
<div id="logotype">
<a
href="http://isaicarrental.esy.es"><img src="http://isaicarrental.esy.es/wpcontent/uploads/car-rental/logo_ISAI.jpg"
alt="ISAI Car Rental" /></a>
</div>
</div>
</div>
<div class="clear"> </div>
<div id="navigation-container" class="grid_16">
<div id="navigation-bar" class="navigation-bar">
<div
id="primary-navigation"
class="menu-home-container"><ul
id="menu-primary"
class="menu"><li
id="menu-item-10"
class="menu-item
menu-item-type-custom
menu-itemobject-custom
current-menu-item
current_page_item
menu-item-home
menu-item-10"><a
href="http://isaicarrental.esy.es">Home</a></li>
<li
id="menu-item-48"
class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-48"><a
href="http://isaicarrental.esy.es/quote-booking/">Quote
&
Booking</a></li>
<li
id="menu-item-31"
menu-item-31"><a
href="http://isaicarrental.esy.es/booking/">Booking</a></li>
<li id="menu-item-20"
menu-item-20"><a
href="http://isaicarrental.esy.es/contact-us-2/">Contact
Us</a></li>
<li id="menu-item-23"
menu-item-23"><a
href="http://isaicarrental.esy.es/choose-a-car/">Choose
a Car</a></li>
</ul></div> </div>
<div id="breadcrumbs">
<h5>You are here:</h5>
<ul>
<li><a href="http://isaicarrental.esy.es">Home</a></li>
<li class="seporator"><span>/</span></li>
<li>Home</li>
</ul>
</div>
</div>
<div class="clear"> </div>
</div>

</div>

<div id="content" class="block-wrapper">

<div id="main" class="grid_12">
<div id="post-38" class="post-38 page type-page status-publish hentry">
<h1 class="big-title">Home</h1>
<div class="entry">
<h1><strong>Welcome
the best
car rental services
in Malaysia.
ISAI
the car
firstrenting
car rental
provider
in Malaysia. Wetoensure
you’re
safe and
satisfactory
for isyour
purposes</strong></h1>
<div class="clear"> </div> </div>
</div>
</div>

<div id="sidebar" class="grid_4">
<div id="sidebar-widget-area">
</div>
</div>

</div>

</div>


<div id="footer" class="block-wrapper">

<h4>Information</h4>
<div
id="secondary-navigation"
class="menu-home-container"><ul
id="menu-secondary"
class="menu"><li
class="menu-item
menu-item-type-custom
menu-item-object-custom
current-menu-item
current_page_item
menu-item-home menu-item-10"><a
href="http://isaicarrental.esy.es">Home</a></li>
<li
menu-item-48"><a
href="http://isaicarrental.esy.es/quote-booking/">Quote
& Booking</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a

href="http://isaicarrental.esy.es/booking/">Booking</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page

menu-item-20"><a
href="http://isaicarrental.esy.es/contact-us-2/">Contact
Us</a></li>
<li
href="http://isaicarrental.esy.es/choose-a-car/">Choose
a Car</a></li> menu-item-23"><a
</ul></div> </div>
</div>
</div>

</div>


<div id="copyright" class="block-wrapper">

<p>Copyright © 2011 www.yourdomain.com, all rights reserved.</p>
</div>
</div>

</div>

</div>


</body>
</html>
Conclusion
To conclude this, the implementation taking a long time because we want to ensure the
end user get the best experience while using this service.
Evaluation (Testing)
4.
is there any least attractive page you have found in the

website so far?
______________________________________________
_________________________________
5.
How user friendly is it?

______________________________________________
_________________________________
6.
What is the advantage of this website?

______________________________________________
_________________________________
7.
What is the disadvantage of the website?
USER ACCEPTANCE TEST
Interviewee Name:
1.
2.
Do you like the concept of having ISAI Car Rental?
What OS platform your smartphone is?

______________________________________________
__________________________
______________________________________________
_________________________________
8.
3.
Is there any issues faced during the website browsing?
How the is responding time of the website?

______________________________________________
_________________________________
Extremely Fast
Fast
Slow
Extremely Slow
9.
If theres any additional feature needs to be added, what

would it be and why?
______________________________________________
______________________________________________
______________________________________________
____________________
10.
How likely is it that you would recommend our ISAI Car

Rental Website to your colleague?
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
7.
Interviewee Name:
1.
2.

______________________________________________
__________________________
______________________________________________
_________________________________
8.
3.
______________________________________________
_________________________________
Extremely Fast
9.
Fast
Slow
Extremely Slow
4.

website so far?
______________________________________________
_________________________________

______________________________________________
______________________________________________
______________________________________________
____________________
How likely is it that you would recommend

our ISAI Car Rental ?
2.

______________________________________________
__________________________
3.
Interviewee Name:
1.
Extremely Fast
7.
Fast

______________________________________________
_________________________________
Slow
Extremely Slow
8.

______________________________________________
_________________________________
4.

website so far?
______________________________________________
_________________________________
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
9.

______________________________________________
______________________________________________
______________________________________________
____________________
How likely is it that you would

recommend our ISAI Car
Slow
Extremely Slow
Interviewee Name:
1.
2.
3.

4.

website so far?
______________________________________________
_________________________________
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
7.

______________________________________________
__________________________
Extremely Fast
Fast
______________________________________________
_________________________________
8.
______________________________________________
______________________________________________
____________________
______________________________________________
_________________________________
9.

______________________________________________

our ISAI Car
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
7.
Interviewee Name:
1.
2.

______________________________________________
__________________________
______________________________________________
_________________________________
8.
3.
Fast
Slow
Extremely Slow
4.
______________________________________________
_________________________________
Extremely Fast

website so far?
______________________________________________
_________________________________
9.

______________________________________________
______________________________________________
______________________________________________
____________________

our ISAI Car
Interviewee Name:
1.
2.

______________________________________________
__________________________
6.

______________________________________________
_________________________________
7.

______________________________________________
_________________________________
3.
8.

______________________________________________
_________________________________
Extremely Fast
Fast
Slow
9.
Extremely Slow
4.
5.

website so far?
______________________________________________
_________________________________

______________________________________________
______________________________________________
______________________________________________
____________________

our ISAI Car

______________________________________________
_________________________________
Interviewee Name:
3.
1.

Extremely Fast
Fast
Slow
2.

______________________________________________
__________________________
Extremely Slow
4.
5.

website so far?
______________________________________________
_________________________________
8.

______________________________________________
_________________________________

______________________________________________
_________________________________
9.
6.

______________________________________________
_________________________________
7.

______________________________________________
______________________________________________
______________________________________________
____________________

our ISAI Car
______________________________________________
_________________________________
Interviewee Name:
1.
4.

website so far?
______________________________________________
_________________________________
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
7.
2.

______________________________________________
__________________________
3.

______________________________________________
_________________________________
Extremely Fast
Fast
Slow
Extremely Slow
8.

______________________________________________
_________________________________
9.

______________________________________________
______________________________________________
______________________________________________
____________________

our ISAI Car
5.

______________________________________________
_________________________________
6.

______________________________________________
_________________________________
7.
Interviewee Name:
1.
2.

______________________________________________
__________________________
______________________________________________
_________________________________
8.
3.
Fast
Slow
Extremely Slow
4.
______________________________________________
_________________________________
Extremely Fast

website so far?
______________________________________________
_________________________________
9.

______________________________________________
______________________________________________
______________________________________________
____________________

our ISAI Car
Usability Testing
Types
Pass
Main page
Register
Select Car
Payment Method
Delivered Car
Fail
Remarks
3.0 INDIVIDUAL PART AND CRITICAL COMMENTS
Mohd Izwan Afiz Bin Che Hasan (TP034201)

Critical Comments
I was in charging Analysis, Implementation and overall documentation. As the
group leader, managing time is challenging especially with the deadlines of other group
works coming together. In addition, individual member's daily activities make it much
more complicated to conduct a decent meeting. To be more specific, one of my group
mates is so busy with all his club/social activities which make it much more impossible to
meet up.
To overcome this problem, the group decided to allot a day or two to stay in my
home and finish up everything as soon as possible. This made the flow of the assignment
faster and more convenient to finish up everything.
However, another problem we encountered is the failure of creating a decent
reservation form as the software we used blocked our account for terms of service
violation issues. We were almost done with the work but we had to repeat all forms we
made and do it over again to successfully create a decent online system.
These were the problems that we encountered as a group and we managed to
overcome all of it.
HJ MOHD IZZUL HAFIZ BIN HJ AWG DAMIT (TP030580)

I considered my individual part (Development) to be one of the most difficult task to do
especially for our chosen system Car Rental System. There are definitely differences of what
each companies can provide experiences to user but for a car rental system, there seems to be a
lot of similarities in the functions; some are more functions and features; others are just simple
but limited such as only available through calling. Thus I chose 2 different types of companies
where both offers Car Renting to customers however user interaction especially on Mayflower
requires less to no interaction despite their website where they only show offers, contacts and
about their companies and whereabouts. It is safe to say Avis a modern web based system to an
old system of Mayflower both has a lot of advantages and disadvantages as mentioned thus
combination of all the advantages and by improvising their disadvantages it provides could lead
to implementation of a better systems which provide more satisfaction users and customers
relationship will be much more stronger.
Abdourahman Aabeh Bouh (TP030537)

Assignments are always a great challenge every semester, every year. In order to these
challenges, we need to make sure we are prepared for it. In this module, we had a group
assignment consisting of 4 group members. The assignment was divided in to 4 categories, with
each category done by each member of the group.
First of all, as soon the assignment was assigned, we made sure we all knew what should have
the outcome of this assignment be. We distributed each task among the group members and
started off with their respective tasks. As soon as I received my expected contribution of the
assignment, I immediately set a time period in order to complete the task. This was highly
necessary because of many other assignments issued at the same time. On the other hand, group
meeting were held every week after the tutorials or the lecture classes, so whatever we learned in
those classes, we would immediately apply it to our assignment. This made my concentration
level more towards the topics taught in the classes which made it easier for me to directly apply
it in my assignment. Secondly, being punctual in the group meetings called. I made sure to set
the timings right for the day in order to attend the group meetings on time. This helped me to
prioritize the tasks on my schedule of work. I had to keep track of my progress and kept up to
date with the other group members. As I have had many group assignments before, but this time
I witnessed a totally different group members, who I never worked with.So I wasnt quite sure of
their mindset towards the assignment. Due to this, we often used to gather together, at lunch and
just get along to know more about each other apart from the assignment. This enhanced my
social and peer interactions.
Assignment discussions were also carried out through social networking site, such as Facebook.
A group was set up on Facebook in order to share our views and thoughts about the assignment. I
and all of our group members were socially active and respond immediately if there was any
problem or confusion. Teamwork surely played a major part in this assignment. I felt as playing a
major role in this teamwork which motivated me to do my best for the assignment. Appreciation
for my work from other group members kept me further motivated.
With all the above benefits mentioned above, I also faced some difficulties in
progression of the assignments. There were many other assignments were
assigned to us which actually made it difficult to manage many assignments
at one time. Almost all the assignment deadlines were closer, which was all
due in the same week. As the presentation of this assignment was before the
final submission of the assignment, I had to get prepared for the assignment
as well as for the documentation. This is where I faced difficulties as the
other group members too had faced these problems. I had lost track of the
assignment, as now I concentrated more on the presentation. At this
moment, no meetings were called, until before the last hour of the
presentation, to make sure everyone knew their parts. At the very same day,
I had 3 more presentations in the morning and later in the afternoon. As soon
as I finished my morning presentations in FBM Mines, I immediately rushed
to TPM for my PDT presentation. My schedule was all messed up and couldnt
manage the time at the very last moment. There were certain distractions
too where I would lose my focus towards the assignment. Distractions such
as unnecessary Internet surfing, Facebook, music and other things which
would catch your eyes. I tend to lose track of the flow and end up losing the
key points which run through my mind.
Although with all those difficulties faced, we managed to finish our

assignment and overcame the obstacles which came in our way. I felt myself
more organized in doing this assignment and faced the difficulties which
came in my way. This will help me in future to organize myself in bigger
projects, and to prioritize the tasks for each day or a week. Overall, this has
helped me develop my communication, inter-personal and team-work skills. I
now know where I stand in the team, whats the importance of myself in the
team and how I can improve myself as regards to better team work in the
future. With the progression of this coursework, this also helps me to prepare
myself for the examinations. This is because; extensive research would help
me to write better answers in the exams with the best of my knowledge.
For further improvements, I need to make sure I dont panic when the
deadlines come closer. I need to be more focused and avoid any distractions
to get work done more efficiently. Make note of the points and facts which I
think would be beneficial for the assignment rather than just remembering
them. Keep updated with the group and interact with them more often to
know about the progress of the assignment.
In conclusion, all thanks to our lecturers who were readily available for any
help we required. All the tutorial and lecture exercises made it more
convenient to complete our assignment. Any queries or doubts which we had
were well explained. Lastly, I enjoyed working with my team and hope for a
good result for our efforts.
Sheroze Ali Tp031374
First of all I would like to thank APU for providing us with such a great and interesting
module named Human computer interaction and Secondly providing every student with one of
the best lecturer Mr. Harsha Rao who made the lectures, tutorials and assignment pretty
interesting and fun to do. I learnt a lot of things from this module such as designing and
implementing different methods of testing. This assignment was pretty tough in terms of word
count as it required a lot of data. It was simply made easy by our lecturer by dividing the work in
weeks which obviously helped me a lot. Paper prototyping and UAT were the 2 concepts which
were new to me. Designing a website with keeping the main factors of HCI in mind such as
consistency was also done and many questions/ doubts were cleared for me while doing this
coursework. Lastly I would conclude by thanking my lecturer for his support and way of
teaching and making the Module an interesting one.
4.0 CONCLUSION
When we create this website, we have learn how important is the IT and how important
teamwork because we split the task to all of group members. If one of the group members facing
a problem, other members will help to solve the problem beside we gain knowledge but we make
our teamwork and professionalism more strong.
We were facing problem in designing the website but manage to solve it with the help
from respected classmate. Future enhancement could be we create the mobile app for the ISAI
car rental and continuing maintain and enhance the feature inside the created system just as
facebook does.
As the conclusion, the objective of the assignment is achieved as the entire group
members understand deeply the theory of human computer interaction. We portrayed our
understanding via the car rental website that features all the technique and knowledge from the
theory of HCI. With this signature, we hope that our effort is worthy to significantly reach the
standard of the HCI project and bring a new level of achievement to the modern human computer
interaction.
Gantt Chart
Workload Matrix
NAME
IZWAN
IZZUL
RAHMAN
Website
Video Prototype
Analysis
Design
Development
Implementation
Evaluation
Signature
SHEROZE
5.0 REFERENCES
Anon, (2015). Parallel Design. [online] Available at: http://www.usability.gov/how-to-andtools/methods/parallel-design.html [Accessed 26 October 2015].
Anon, (2014). What is Prototype model, advantages, disadvantages and when to use it?. [online]
Available at: http://istqbexamcertification.com/what-is-prototype-model-advantagesdisadvantages-and-when-to-use-it/ [Accessed 31 October 2015].
Anon, (2014). Prototyping. [online] Available at: http://www.usability.gov/how-to-andtools/methods/prototyping.html [Accessed 30 October. 2015].
Anon, (2011). Advantages and Disadvantages of Card Sorting. [online] Available at:
https://dirtarchitecture.wordpress.com/advantages-and-disadvantages/ [Accessed 29 October.
2015].
Website, 2015. Life cycle of HCI. [Online]
Available at: http://www.cs.bham.ac.uk/~rxb/HTML_text/hci/HCIDesignLifecycle.html
[Accessed 21 October 2015].
Internetworldstats.com, (2015). World Internet Users Statistics and 2015 World Population Stats.
[online] Available at: http://www.internetworldstats.com/stats.htm [Accessed 5 Nov. 2015].
SearchSecurity, (2015). What is user profile? - Definition from WhatIs.com. [online] Available at:
http://searchsecurity.techtarget.com/definition/user-profile [Accessed 5 Nov. 2015].
One-Stop Travel Site: Cheap Hotels, Flights & Holidays | Mayflower.com.my. 2015. OneStop Travel Site: Cheap Hotels, Flights & Holidays | Mayflower.com.my. [ONLINE]
Available at: http://www.MayFlower.com.my. [Accessed 1 November 2015].
Avis Car Rental - Rent A Car with Avis. 2015. Avis Car Rental - Rent A Car with Avis.
[ONLINE] Available at: http://www.avis.com. [Accessed 1 November 2015].
Benyon, D. (2010) Designing Interactive Systems: A comprehensive guide to HCI and

interaction design, 2nd ed., London: Addison Wesley.
Binder, T. Lowgren, J. and Malmborg, L. (2009) (Re) Searching the Digital Bauhaus, London:
Springer.
Nielsen, J., (1993) Usability Engineering, Morgan Kaufman Publishers
Mayhew, D.J, (1999) The Usability Engineering Life Cycle: practitioners handbook for user
interface design, Morgan Kaufman Publishers
6.0 APPENDIX

Hci Final

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Hci Final

Hochgeladen von

Copyright:

Verfügbare Formate

HCI Group Assignment

HCI Group Assignment

HCI Group Assignment

If so, a higher possibility of

communication barriers interfere smooth operation of the company.

(4) Unsatisfied customer

HCI Group Assignment

(1) There should be a committed user involvement in the development of the

HCI Group Assignment

ISAI is local company that provides car

at the reasonable price.

The promotion and advertisement still

condition and safe to be used.

The tourist from foreign or local might

transportation service because it much

The ISAI always have its competitor

This competitor has existed far longer

ISAI will penetrate the car rental

experience on how to be dominant in

market and become dominant at the

the rental car market.

HCI Group Assignment

HCI Group Assignment

Quote AND BOOKING

Choose cars Page.

Donald Norman Guidelines

According to Jakob Nielsen (2003), usability can be defined by 5 quality components:

The Usability Engineering Life Cycle (UEL)

Identify (Know) the user

Setting usability goals

Coordinated design of the total interface

Apply guidelines and heuristic analysis

Collect feedback from field use

TYPES OF USABILITY QUANTITATIVE GOALS

Figure 1 Main Page of the ISAI website

Sample code to implement the main page.

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> ISAI Car Rental</title>

<link rel="pingback" href="http://isaicarrental.esy.es/xmlrpc.php" />

<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/reset.css"

<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/960.css"

<link rel="stylesheet" type="text/css" media="all" href="http://isaicarrental.esy.es/wpcontent/themes/car-rental/front/templates/css/styles/green.css"

background-color: #000000 !important; }

<link rel="alternate" type="application/rss+xml"

display: inline !important;

border: none !important;

box-shadow: none !important;

height: 1em !important;

width: 1em !important;

margin: 0 .07em !important;

vertical-align: -0.1em !important;

background: none !important;

<link rel='stylesheet' id='wpclef-main-css' href='http://isaicarrental.esy.es/wpcontent/plugins/wpclef/assets/dist/css/main.min.css?ver=2.3.1'

<link rel="EditURI" type="application/rsd+xml" />

<link rel='canonical' href='http://isaicarrental.esy.es/' />

<link rel='shortlink' href='http://isaicarrental.esy.es/' />

<link rel="apple-touch-icon-precomposed" href="http://isaicarrental.esy.es/wpcontent/uploads/2015/11/cropped-SAGA-180x180.jpg">

<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/extensions.js"></script>

<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.cookie.js"></script>

<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/jquery.calendar.js"></script>

<script type="text/javascript" src="http://isaicarrental.esy.es/wp-content/themes/carrental/front/templates/js/nivo-slider/jquery.nivo.slider.pack.js"></script>

<div class="clear"> </div> </div>

<p>Copyright © 2011 www.yourdomain.com, all rights reserved.</p>