Final Documentation Hci 2019

UC3F1805SE Group Assignment CT035-3-3-HCIAU
: CT035-3-3-HCIAU
Module Code
Intake Code : UC3F1805SE

Lecturer Name : Ms. Aida Zamnah Binti Zainal Abidin
Hand out Date : 23th October 2018
Hand in Date : 22th February 2019
Student ID Student Name

TP032057 Joshua Jebaraj Joseph
TP034951 Parveen a/l Narayanan
TP038289 Nethyaa a/p Gangatharan
TP037132 Nowen a/l Paul
1
Table of Contents
1.0 Proposal................................................................................................................................ 5
1.1 Introduction ...................................................................................................................... 5
1.2 Objectives ......................................................................................................................... 5
1.3 Problem Statement ........................................................................................................... 6
1.4 Proposed Solution ............................................................................................................ 7
1.5 Gantt Chart ....................................................................................................................... 8
1.6 Task Allocation ................................................................................................................ 9
2.0 Stage 1: User Requirement Analysis (Parveen TP034951) ............................................... 10
2.1 User Profiling ................................................................................................................. 10
2.2 User profiling technique used ........................................................................................ 11
2.3 Data gathering technique used – Questionnaires ........................................................... 12
2.4 Sample Questionnaires ................................................................................................... 13
2.5 Analysis of Questionnaires............................................................................................. 16
2.6 Task Analysis ................................................................................................................. 27
2.6.1 Task analysis chosen- Hierarchical Task Analysis.................................................. 27
2.7 Evaluation....................................................................................................................... 30
3.0 Stage 2: Usability Goals & Competitive analysis (Nowen TP037132) ............................. 31
3.1 Selection of Design Principles ....................................................................................... 31
3.2 Selection of Usability Goals ........................................................................................... 33
4.0 Stage 3: Design & Prototyping (Nethyaa TP038289)........................................................ 35
4.1 Introduction .................................................................................................................... 35
4.2 Parallel Design ............................................................................................................... 35
4.2.1 Conceptual Design ...................................................................................................... 36
4.2 Peer-to-peer Evaluation .................................................................................................. 38
2
4.3 High Fidelity Prototype .................................................................................................. 63
4.3.1 Prototype .................................................................................................................. 63
4.3.2 High – Fidelity Prototyping ..................................................................................... 63
4.4 Storyboard and Design Strategy..................................................................................... 65
4.5 Evaluation of the whole process that impacts the design ............................................... 72
4.6 Prototype, Purpose and Strategies .................................................................................. 73
4.6.1 Homepage ................................................................................................................ 73
4.6.2 Login Page ............................................................................................................... 74
4.6.3 Menu Toggle............................................................................................................ 75
4.6.4 Register .................................................................................................................... 76
4.6.5 Settings Page............................................................................................................ 77
4.6.6 Share Page ............................................................................................................... 78
4.6.6.7 Ticketing Page ...................................................................................................... 79
4.6.6.8 Tracking Page ....................................................................................................... 81
5.0 Stage 4: Evaluation & Testing (Joshua TP032057) ........................................................... 82
5.1 Evaluation....................................................................................................................... 82
5.2 DECIDE FRAMEWORK .............................................................................................. 82
5.2.1 Determine the goals the evaluation addresses. ........................................................ 83
5.2.2 Explore the specific questions to be answered. ....................................................... 84
5.2.3 Choose the evaluation paradigm and techniques to answer the questions. ............. 84
5.2.4 Identify the practical issues. .................................................................................... 85
5.2.5 Decide how to deal with the ethical issues. ............................................................. 85
5.2.6 Evaluate, interpret and present the data. .................................................................. 86
5.3 The details on Heuristic Evaluation performed.............................................................. 86
5.4 The details on the usability testing performed ............................................................... 89
5.4.1 Comparative Usability Testing ................................................................................ 89
5.4.2 Usability Evaluation ................................................................................................ 90
3
5.5 Evaluation of the whole project ..................................................................................... 90
6.0 Individual Assignment ....................................................................................................... 91
6.1 UX vs UI (Nethyaa Gangatharan TP038289) ................................................................ 91
6.1.1 User Experience (UX) ............................................................................................. 92
6.1.2 Comparison Table of UI vs UX ............................................................................... 92
6.1.3 Differences between UI and UX ............................................................................. 93
6.2 Mobile UX (Nowen Paul TP037132)............................................................................. 94
6.2.1 Designing for the Mobile Environment – Some Simple Guidelines ....................... 95
6.2.2 Keep Navigation Simple .......................................................................................... 96
6.2.3 Keep Content to a Minimum ................................................................................... 97
6.2.4 Reduce the Inputs Required from Users .................................................................. 97
6.2.5 Continuous Integrated Experiences ......................................................................... 98
6.3 The HCI Challenges for developing a mobile app ......................................................... 99
6.4 Usability Evaluation – Parveen (TP034951) ................................................................ 104
6.4.1 Usability................................................................................................................. 104
6.4.2 Importance of Usability Evaluation ....................................................................... 104
6.4.3 Usability Goals ...................................................................................................... 105
7.0 References ........................................................................................................................ 109
4
1.0 Proposal
1.1 Introduction
Petrosains KL is a Science Discovery Centre that uses a fun and interactive approach
to tell the story of the science and technology of the energy industry. The sequence of the
exhibits in Petrosains traces the evolution and scientific relevance of the energy industry while
also focusing on general science and its application to everyday life. The hands-on approach
adopted by Petrosains puts an emphasis on the fun and excitement of learning rather than on
the rigorous memorization of scientific facts. (petrosains, 2018)
Petrosains Sdn. Bhd. was incorporated to extend PETRONAS’ commitment as a

socially responsible corporate citizen in providing a rich and stimulating environment aimed
to enhance science literacy and instill in Malaysians a passion for acquiring scientific
knowledge.
1.2 Objectives
 To promote Petrosains Kuala Lumpur by emerging interactive walkthrough application

in procedure of a mobile application.
 To deliver navigation and information for the user by contribution guided tour through
the following mobile application.
 To deliver good user experience by progress the mobile application with additional
interactivity.
5
1.3 Problem Statement
Current system that attainable for the users is currently only in the form of official
website and few additional social network links such as Facebook, Twitter, etc. The website is
not very collaborative for the operators because deficiency of images or photos that preview
the events within the Petrosains Kuala Lumpur even it shows enough information. We take
similar website which is the Bank Negara Malaysia Museum and Art Gallery website that
demonstration unpretentious layout and design joint with satisfactory amount of information
that makes it straightforward for the users.
Website is also not provided that any online ticketing or online booking process for the
users. We take another similar website which is the KL Tower website that offer online
ticketing system for the users, which also can be configured for different kind of attractions.
To conclude, there is no mobile application that work as guide or navigation for the
users that want some information of the activities in Petrosains. The existing mobile application
that available is only for the users to answer several choice questions and redeem gifts from
the points based on the correct answers.
6
1.4 Proposed Solution
Proposed solution that is proposed is to create mobile application for users’ navigation
of Petrosains Kuala Lumpur, because everyone uses mobile devices and it is easier to obtain
the information from mobile apps. This app will give users the necessary information of each
pit stops for at Petrosains. The app will be enhanced with features as track me, easy ticketing
and get the time to get on rides.
The app will also show the ticket prices on the different operation days and the number
of visitors that are expected to visit the place. There will be also a news feed column that will
update users on the latest events that is happening at Petrosains. We will deliver good
interactivity for guiding the users within the mobile application as it will provide navigation of
Petrosains. Subsequent is to provide online ticketing or booking process for the users so they
can easily book the ticket after users plan their visit to the Petrosains Kuala Lumpur.
7
1.5 Gantt Chart
Figure 1: Gantt Chart
8
1.6 Task Allocation
Name TP Number Task Allocated

Joshua Jebaraj A/L Joseph TP032057 Individual: The HCI Challenges for developing
a mobile app
Group: Testing
Parveen A/L Narayanan TP034951 Individual: Usability Evaluation
Group: User Requirement Analysis
Nethyaa A/P Gangatharan TP038289 Individual: UI vs UX
Group: Prototype Walkthrough
Nowen A/L Paul TP037132 Individual: Mobile UX
Group: Usability goals and competitive analysis
Table 1: Task Allocation
9
2.0 Stage 1: User Requirement Analysis (Parveen

TP034951)
2.1 User Profiling
A user profile is a collection of settings and information associate with a user. It can
be defined as the explicit digital representation of the identity of the user with respect to the
operating environment, which could be operating systems, software applications or websites.
The user profile helps in associating characteristics with a user and helps in ascertaining the
interactive behaviour of the user along with preferences (Sumitkumar, 2014).
A user profile can contain personal data. Most user profiles have a set of parameters
which are either mandatory or optional. In some cases, the user profile could have different
sections and tabs. In the case of software applications or network-related ones, user profiles
are usually monitored and maintained by administrators. In some cases, they are maintained
by the users themselves. The user profile enables the personalization of the system and can
help in customizing certain features for their needs (techtarget, 2018).
Preferences and needs of a user can usually be found with the help of a user profile,
user profiles have information for most attributes like system needs, general data, restrictions
and application settings. It can help in specifying the terms for certain features in the system
such as profile visibility, layout view, colour themes, preferred languages, date for mat and
message display format. User profiles can be created, modified and deleted.
10
2.2 User profiling technique used
User profiling allows developers of the Petrosains KL application to understand the

needs of users based on the information gathered and the following section of the paper,
discusses in detail the steps of user profiling, questionnaires conducted, and the results
gathered (Yinghui, 2010). Although user profiling helps to achieve personalized systems,
certain areas and procedures are challenging and their complexity leads to unforeseen errors.
Main challenges of user profiling would be initial user profiling set up for a new user
and constantly updating and existing user profiles to adapt to changing requirements of a
user, subsequently developers of the Petrosains KL application did come across such
challenges.
In order to deal with difficulties completely, Hybrid User Profiling is used.

Implementation of Hybrid method allowed developers to avoid unforeseen errors that could
occur with the implementation of other methods. The developers of Petrosains KL opt to use
Hybrid user profiling because it is the combination of both implicit and explicit methods
(POO, 2018).
On a brief not, implicit user profiling can be said as a knowledge about the user that
has been well known rather than the current knowledge gained. Explicit user profiling is a
data gathered by online surveys, questionnaires and conducting interview which is than
analysed to get to know the user thoughts on a current application (O'SulIivan, 2018).
This gives the developers of Petrosains KL an upper using Hybrid User Profiling
because it enables the developers to take note about the pros and cons of both the method
mentioned earlier and imply into the application that is being developed. This allows the
developers to gain sufficient amount of information to develop the application because via
Hybrid user profiling, both the explicit and implicit user profiling methods is merged and
gives plenty of methods and ideas on how to develop an application for Petrosains KL.
11
2.3 Data gathering technique used – Questionnaires
The data gathering technique chosen is Questionnaire and a questionnaire is a

research instrument consisting of a series of questions for the purpose of gathering
information from respondents. Questionnaires can be thought of as a kind of written
interview. They can be carried out face to face, by telephone, computer or post.
Questionnaires provide a relatively cheap, quick and efficient way of obtaining large amounts
of information from a large sample of people.
Data can be collected relatively quickly because the researcher would not need to be
present when the questionnaires were completed. This is useful for large populations when
interview would be impractical. However, a problem with questionnaires is that the
respondents may lie due to social desirability (McLeod, 2018). The reason why
questionnaires was chosen as a data gathering technique for the project Petrosains KL is
because it provides developers with rapid and precise feedbacks in a short period of time,
interviews allowed to meet the target audience and the stakeholders face to face, in order to
understand current difficulties of the system in depth.
12
2.4 Sample Questionnaires
1. What is your gender?
a. Prefer not to say

b. Female
c. Male
d. Other:
2. What is your age? *
a. 15-20 years old

b. 21-30 years old
c. 31-40 years old
3. What is your current occupation?
a. Student
b. Engineer
c. Lawyer
d. Doctor
e. Other:
4. How often do you visit Petrosains?
a. Once a year
b. Once a month
c. Twice a week
d. Other:
5. How long do you wait to buy tickets at Petrosains during your visits?
a. Less than 30 minutes

b. More than 30 minutes
c. more than an hour
d. Other:
13
6. Would you agree to have an online ticketing system?
a. Yes
b. No
c. Maybe
7. How do you find the existing tour package provided in Petrosains?
a. Perfect
b. Average
c. Can be improved
d. Regardless
8. Would you prefer a mobile tour guide app for Petrosains?
a. Yes
b. No
9. Do you think that by using the app it would be easier to navigate around Petrosains?
a. Yes
b. No
c. Maybe
10. Do you prefer to read articles or watch videos?
a. Articles
b. Video
11. Do you prefer the news feed should also include articles and journals?
a. Yes
b. No
c. Maybe
12. Which carrier do you use as your telco?
a. DiGi
b. Maxis
c. Celcom
d. U-mobile
e. Telekom
f. Other:
14
13. Do you have a strong mobile data signal in Petrosains?
a. Yes
b. Maybe
14. Would you agree that the security feature enabled is useful?
a. Yes
b. No
15. What additional features would you like the app to have?
……………………………………..
15
2.5 Analysis of Questionnaires
Question: 1 What is your gender
Justification: To find the range of target user.
Analysis: Female- 27.3%

Male – 72.7%
Prefer not to say – 0%
16
Question: 2 What is your age?

Justification: To find the age range of the target audience
Analysis: 15-20 years old – 0%
21-30 years old – 100%
31-40 years old – 0%
17
Question: 3 What is your current occupation?

Justification: To find the job range of target audience
Analysis: Student – 100%
Engineer – 0%
Lawyer – 0%
Doctor – 0%
18
Question: 4 How often do you visit Petrosains?

Justification: Finding the frequency of visits made by
users to the Petrosains
Analysis: Once a year – 70%
Once a month – 0%
Twice a week – 0%
Never – 10%
Few years once – 10%
Once – 10%
19
Question: 5 How long do you wait to buy tickets at

Petrosains during your visits?
Justification: To find out the average time spend at
Petrosains of the targeted users
Analysis: Less than 30 minutes – 20%
More than 30 minutes – 40%
More than an hour – 30%
Never – 10%
20
Question: 6 Would you agree to have an online ticketing

system?
Justification: To find out how many users would like
online ticketing
Analysis: Yes – 100%
No – 0%
Maybe – 0%
21
Question: 7 How do you find the existing tour package

provided in Petrosains?
Justification: To find out how many people are happy
with the existing package
Analysis: Perfect – 0%
Average – 36.4%
Can be improved – 63.6%
Regardless – 0%
22
Question: 8 Would you prefer a mobile tour guide for

app Petrosains?
Justification: To find out how many people prefer mobile
application
Analysis: Yes – 90.9%
No – 9.1%
23
Question: 9 Do you think that by using the app it would

be easier to navigate around Petrosains?
Justification: To find out how many users prefer mobile
application with navigation.
No – 0%
Maybe – 9.1%
24
Question: 10 Do you prefer to read articles or watch

videos?
Justification: Whether targeted user prefer articles or
videos
Analysis: Articles – 36.4%
Video – 63.6%
25
Question: 11 Do you prefer the news feed should also

include articles and journals?
Justification: To find out whether targeted user prefer
articles and journals should be included in
the news feed.
No – 18.2 %
Maybe – 27.3%
26
2.6 Task Analysis
2.6.1 Task analysis chosen- Hierarchical Task Analysis
Hierarchical task analysis (HTA) is an underused approach in user experience, but on

you can easily apply when either modifying an existing design or creating a new design. This
technique has applications across a range of different problem domains, including time-and-
motion studies, personnel selection, or training, and provides a broad and deep understanding
of task performance. While there are core principles that guide hierarchical task analysis, its
possible to adapt the basic approach in a huge number of ways to support the needs of any
domain under consideration Invalid source specified..
Membership Registration
0. To register membership
1. Collect the form at the counter.
2. Fill up the form.
3. Submit.
4. Receive the membership card.
Plan 0: do 1, 2, 3, 4 in order.
Matrix:
Critically Difficulty Frequency

Collect the form. L L M
Fill up the form. L H M
Submit L L L
Receive the L L L
membership card
27
From the Hierarchal Task Analysis above, we infer that the said exercises very tiring
for both new clients and the staff and high chances the form goes missing. Because of this,
we will update this undertaking in the new proposed framework for instance to remove
certain action to accelerate the enlistment procedure with an abnormal state up of
productivity
Booking Facilities
0. To book facility by members
1. Walk in to counter / via phone call.
2. Provide member ID / IC No.
3. Provide booking details.
3.1 Select age.
3.2 Select date.
3.3 Select time.
4. Availability on slot, date and time checked by the staff.
5. Confirm booking.
28
Plan 3: Repeat 3.1-3.3 if 4 is unavailable.
Matrix:
Critically Difficulty Frequency

Walk in to counter / via phone L H H
call.
Select time and date L H H
Availability date and time H M H
check by the staff.
Choose an available slot for L M H
visit based on booking time
and date
Provide membership ID. L L H
From the Hierarchal Task Analysis above, we infer that the present booking process caused
troublesome and is time consuming. Appointments by means of telephone rely upon the
network quality. Sometimes, there is no hard confirmation of appointments being made.
Because of this, we will update this errand in the new proposed framework, for instance to
remove certain action to encourage the booking procedure more viable.
29
2.7 Evaluation
The main goal of Petrosains KL developer is to develop a mobile application that

takes user needs as their primary objective so that users using the application will be satisfied
to and the ease to use the application is better. To justify the context above, the developer has
taken the thoughts and ideas of the user rather than coming up with an own idea because it
might not suit the user requirements. The user profiling and data gathering method that was
chosen by the developer gave a clear picture to the developers on what are the problems of
the current website of Petrosains and what can be improved in the application being
developed. To conclude this, based on all the factors mentioned above the developer must
create an application in which it rectifies the flaws in the current system for the application to
be effective and successful.
30
3.0 Stage 2: Usability Goals & Competitive analysis

(Nowen TP037132)
3.1 Selection of Design Principles
The dictionary defines Design Principles as widely applicable laws, guidelines, biases
and design considerations, all reflecting researchers’ and practitioners’ accumulated
knowledge and experience. Design Principles draw from many disciplines which consists of
behavioural science, sociology, physics and ergonomics. Designers apply them with discretion.
In this project we will be looking on fundamental points of advice for making easy-to-
use, pleasurable designs as we select, create and organize elements and features in our work.
According to few researchers, Design Principles represent the accumulated wisdom of
researchers and practitioners in design and related fields and inform us of how users will likely
react to our creations. “KISS” (“Keep It Simple Stupid”) is an example of a principle for
minimizing confusion by designing for non-experts. Minimizing users’ cognitive loads and
decision-making time is vital in UX design. The authors of the definitive work Universal
Principles of Design state
Design Principles should help designers find ways to improve usability, influence
perception, increase appeal, teach users, and make sound design decisions in projects.
Successful application of Design Principles depends on designers’ grasps of problems, and eye
for how users will accept solutions. For instance, abiding by the principle of “good hierarchy”
doesn’t automatically mean using a 3:1 header-to-text weight ratio. The latter is a standard rule,
whereas a guideline for implementing good hierarchy could be “text should be easy to read”.
Designers anticipate users’ needs discretionally – e.g., judging how to guide the user’s eye
using symmetry or asymmetry. Using judgment in adapting Design Principles means we build
solid experience from addressing users’ needs over time.
31
Figure 2: The four stages in Design Principle
In the process of determining what type of design principle to adhere to the project, the
kingpin of design Jacob Nielsen was used as our guideline. Jacob Nielsen identified ten
“commandments” for designing. Those are:
 Keep users informed of system status with constant feedback.

In this system, a real-time notification will be placed for the users to be aware of updates
of the app as well as notifications for special offers for ticketing’s. This will make users
are aware that they don’t have to be on the app to be notified but could be notified when
they aren’t on the app.
 Set information in a logical, natural order.
The arrangement of the menu will be in order, where the users will be able to view the
menu according to what they want to see first. Therefore, the news section and promo’s
will be the one where they would see first whereas the settings would be the last option
for the users to view on the menu bar.
 Ensure users can easily undo/redo actions.
Users would be able to undo their purchases or undo their settings, as in reset to their
original app settings via the settings menu.
 Maintain consistent standards so users know what to do next without having to
learn new toolsets.
32
The app will be very straightforward in usage, as the minimalist design approach was
taken and not much buttons or high-end features would be added. The simple design
helps users to self-learn and quickly adapt to the app.
 Prevent errors if possible; wherever not, warn users before they commit to actions
The validation process is also added, when they are prompt to create an account or when
they are purchasing ticket.
 Don’t make users remember information; keep options, etc. visible.
 Make systems flexible so novices and experts can choose to do on them.
 Design with aesthetics and minimalism in mind – don’t clutter with unnecessary
items.
 Provide plain-language error messages to pinpoint problems and likely solutions.
 Offer easy-to-search troubleshooting resources, if needed.
3.2 Selection of Usability Goals
One distinction is easy; the difference between useful and useable. Useful means that the
system does what it should. Usable means that it is easy to do it. But there is no usability
without usefulness and no usefulness without usability. Therefore, the distinction is not so
clear. This illustrates one difficulty with defining usability.
We are going to refer to Preece, Rogers and Sharp (Interaction Design) which proposes 5
usability goals for the pragmatic approach:
 Effective: Is the app developed effective to use?

 Efficient: Will the app be efficient enough to be used?
 Learnable: Is the app easy to learn?
 Memorable: Is the app easy to remember?
 Safe: Is the app safe to be used? (Involves ticketing purchases)
As the pragmatic approach is more to generalise the design of the app. The above usability
goals are pragmatic or operational goals. Preece, Rogers and Sharp (Interaction Design)
propose that designers evaluate how well a design achieves these usability goals by asking
questions directed at the design.
33
Effectiveness refer to usefulness. Effectiveness is an overall measure of how well the

system performs. Learnability has been a concern of UI designers. Designers have been
plagued with trying to design “familiar and natural interfaces” that can be learned without
reading a manual. Memorable is how easy is it to remember how to use an interface after the
user has experience with the system. Memorable is related to learnability and has generated
GUIs with menus and icons, but the menu names and icons images need to be appropriate for
them to be memorable. Safety is protecting the users from dangerous errors, for example losing
all the user’s data or protecting the user’s confidential information. Safety can also refer to how
users recover from errors.
As we are developing an app, a usability goals also should focus on subjective goals. User
experience goals is a new aspect of design driven by the video games and ubiquitous devices.
Preece, Rogers and Sharp propose that the user experience goals be used as adjectives to
describe the experiences of a user using the interface. User interfaces should not try to appeal
to all possible experience, but it should provide a positive experience or users will not continue
using it. Therefore, the goals that should be achieved are:
 Visibility – the user should see what the need to do.

 Feedback – the user should be aware of what they have done.
 Affordance – because screen resolution is low, buttons need to be clear. Because our
users will not have much time to learn the app, objects to act on should have good
affordance.
 Responsiveness
 Robustness – the user should always be able to recover for errors, especially when use
a new app.
 Constraints – mobile apps generally do not offer many ways to do a task.
 Consistency – This is a principle that help user learn the system and not to perform
errors.
34
4.0 Stage 3: Design & Prototyping (Nethyaa TP038289)
4.1 Introduction
The terminology of design defines the mechanism of the development of beneficial and
novel ideas on a product or a material. Such advanced ideas such as special features and
attractive icons could be combined on the product proposed as it could increase the market
value of the product (Battistella et al., 2012). Designs are very vital in relations of product
innovation as it generates new meanings in the prototypes. For example, physical design,
conceptual design, parallel design and participatory design are the primary design units that are
majorly focused.
4.2 Parallel Design
Parallel design is where elective designs, regularly interface designs, are made by two
to four design bunches in the meantime. The point is to survey the diverse thoughts previously
settling on a solitary idea for proceeded with improvement. The design bunches work freely of
each other, since the objective is to produce however much decent variety as could be expected.
Design gatherings ought not to talk about their designs with each other until after they have
created their draft design ideas and displayed them in a design workshop. The last design might
be one of the designs or a mix of designs, taking the best highlights from each. Albeit parallel
design may at first appear like a costly approach, since numerous thoughts are created without
executing them, it is an exceptionally shoddy method for investigating a scope of conceivable
ideas previously choosing the plausible ideal. (Anon., n.d.)
The benefits after implementing parallel design are:
 Generating various ideas quickly and cost effectively.

 Requirements of minimal resources and materials to generate product feel.
 The combination of concepts that generated will the final solution.
There is a method for the team members to be available inherently in order to carry put task in
parallel way. Some if the core documents are required to so the design work starts.
 The boundaries of the parallel design will be clearly defined.
35
 Recommended of using low level of prototyping.

 All over the team, members should have equivalent skills.
 Discussion on the criteria, which the design will be assessed.
 The objective is to settle on one design concept based on the total effort.
4.2.1 Conceptual Design

As conceptual design is the first step of the multiphase process involved in creating a new
product. Whether it’s a building, software application or gadget, it’s important to come up with
a general concept before proceeding. The conceptual design phase is immediately followed by
the schematic design phase. (Faris, 2018). This conceptual design will determine the product’s
behaviour and penetrance midst in consumers. If the product is penetrable into the community,
then it marks the success of the product in the market. Furthermore, conceptual design displays
the importance and the feasibility of the product as its emphases on dataflow, special
identifications that users would select, marketing strategies on how to implement the design,
cost draft that calibrates and calculates the cost of the product in a complete manner, primary
drafting in storyboarding strategies and prototyping the final product.
36
4.2.2 Participatory Design
Participatory design is a sub-unit of concepts, practices, and studies associated to

stakeholders, designers, researchers and end-users as full applicants in activities important to
software and hardware computer products and computer-based activities. The above design is
extraordinarily diverse in terms of graphic design, software engineering, architecture, public
policy, psychology, anthropology, sociology, labour studies, communication studies, and
political science, and from localized experiences in diverse national and cultural contexts. A
Participatory Design Session is a great opportunity for designers and researchers to meet and
identify with the end-user. The user is invited to enter the creative process and by listening to
them, we can avoid making mistakes we are often tempted to make as a result of designing for
ourselves instead of designing for the user. (Anic, 2015)
37
4.2 Peer-to-peer Evaluation
In order to select the final design to implement into the prototype, a peer to peer evaluation is
being accepted by obtaining feedback from each group member for each and design has been
done. The attained responses have been organised in a peer- to – peer form.
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
4.3 High Fidelity Prototype
4.3.1 Prototype
A prototype is a unique model, shape or a case that fills in as a reason for different
procedures. In programming innovation, the term prototype is a working case through which
another model or another adaptation of a current item can be determined. A prototype is an
illustration that fills in as a reason for future models. Prototyping gives originators a chance
to investigate new options and test the current outline to affirm an item's usefulness preceding
creation. (Anon., n.d.)
4.3.2 High – Fidelity Prototyping
High-fidelity prototypes are PC based, and as a rule permit reasonable (mouse-

console) client associations. High-fidelity prototypes take you as close as conceivable to a
genuine portrayal of the UI. High-fidelity prototypes are thought to be substantially more
successful in gathering genuine human execution information. (Anon., n.d.)
Although it takes time also cost a lot to develop, it delivers a larger range of feasibility
and usability disorder to be given attention, and other features such as special aesthetics to be
evaluated and countered, and even to impress and overwhelm the management, as it plays a
role as a good marketing and sales medium (Liu, 2017). An example of high-fidelity
prototyping methods is software prototyping. The most efficient and effective systems for
automatically generating programs are focused on relatively to narrow problem domains. These
systems acquire or gain their power from general solution strategies specific to the application domain
that are embodied in program generation schemes. The well-known systems of the above prototyping
create database applications based on graphical interactions with end-users (non-programmers).
Other examples include interactive tools for creating graphical user interfaces, and attribute grammar
tools for generating translators, syntax-directed editors, and other language-based systems.
63
4.3.2.1 Advantages and Disadvantages of High-Fidelity Prototyping
Advantages Disadvantages
 Marketing and sales medium  Management may think it is real
 Use of discovering and testing  Inefficient for requirements design
 Provides navigational plans  Time-consuming
 User driven  High investment
 Fully interactive
Table 1 Advantages and Disadvantages of High-Fidelity Prototyping (Asia Pacific

University, 2018)
64
4.4 Storyboard and Design Strategy
65
66
67
68
69
70
71
4.5 Evaluation of the whole process that impacts the design
The developer has evaluated the process, mobile device has several Human Computer
Interaction challenges in designing the user interface. Considering the clarification over, the
HCI difficulties can be ordered into equipment and programming challenges. The reality of the
matter is that versatile plans are generally following in view of the PC outlines and frequently
being contrasted with PC plans, yet cell phones would one be able to hundred percent beat PC
on the UI. These difficulties must be deliberately examined keeping in mind the end goal to
deliver better UI and client involvement in cell phones.
72
4.6 Prototype, Purpose and Strategies
4.6.1 Homepage
Purpose:
To display latest update and the basic header and footer which contains the read more
contents at the footer section while the image of Petrosains and the Menu toggle tabs such as
Homepage, Tracker, Ticketing, Account Settings and Share App at the header section. It also
displays the feature of Logout at the footer section of menu toggle.
Strategies:
 Visibility, the main tabs above and news below are evidently set to show to the users.
 Feedback, the home tab above is being designated by user where it is highlighted with
a line below.
 Reliability, the position of image in all websites, layout and colour scheme of
application remains constant.
 Iconic metaphor, the symbol of a person which is in the heading section at right
indicates a button which navigates to the user profile and to login as well.
73
4.6.2 Login Page
Purpose:
To allow registered users to log into their accounts to access Petrosains. Registered
users are required to fill in their email address and password, then clicking with the “Login”
button to proceed to the dynamic Home Page. If users are not yet registered, users can login
using a third-party account such as Facebook or the users can click on the “Sign up” button to
be redirected to the Registration Page.
Strategies:
 Visibility, the elements in the login form are being visibly shown clearly to the users.
 Help and documentation, the placeholders in the input fields are guiding the users to
provide proper information since the targeted users are novice and intermediate.
 Error and prevention, it checks and validates the user input by ensuring the fields are
not empty and the email format as well.
 Constraint, the login button will be disabled if the email and password field is empty.
 Consistency, layout and colour scheme of application remains constant.
 Affordances, the eye icon in the password field allows to unhide and hide the password
and the hyperlink of “forgot your password” indicates user interaction. These allow the
novice user to learn to interact with interface.
 Flexibility and Efficiency, third party account such as Facebook and Google can be
used to login instead of signing up for a new account.
74
4.6.3 Menu Toggle
Purpose:
To give privilege to the users who can see the contents in the Menu Toggle. By default, it's
only visible when the selected menu is active. A menu is active when it can be opened/closed.
If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active
and ion-menu-toggle hides itself.
Strategies:
 Visibility, the elements in the menu toggle are being visibly shown clearly to the users.
75
4.6.4 Register
Purpose:
To give pleasure to the users who wants to be share in this mobile application. After doing all
the surveys and tests, registration is required in order to view the results and feedback of the
tests.
Strategies:
 Visibility, the elements in the signup form are being visibly shown clearly to the users.
 Limitations, input fields such as birthdate and gender restrict the user’s input type where
it only allows to choose an option instead of typing it.
 Reliability, layout and colour scheme of application remains constant.
 Help and documentation, the placeholders in the input fields are guiding the users to
provide proper information since the targeted users are novice and intermediate.
76
4.6.5 Settings Page
Purpose:
This page allows the user to edit and update user’s respective username and password.
Besides the users can view purchase history and change of passwords that have been done by
users. Moreover, users are also able to view their purchase history.
Strategies:
 Visibility, the username to be edited and update user’s name and being highlighted in
red colour at the right-hand side. This makes a clear visibility to the user to gain
attention.
 Constraints, the required inputs fields such as name and email should be filled in order
to make the send button enable.
 Affordance, the save changes button makes the beginner user to use the button will be
performed to save the update information of user.
77
4.6.6 Share Page
Purpose:
This page allows the user to share this mobile application to a third-party social media
accounts such as Facebook, Twitter, Pinterest and WhatsApp. Besides the users can copy the
URL link to share the mobile application also able to download it
Strategies:
 Visibility, the social media platforms are linked to this mobile application This makes
a clear visibility to the user to gain attention.
78
4.6.6.7 Ticketing Page
79
Purpose:
This page displays the combo deals such as family plan or school trip. This page also displays
the attractions and book tickets as well.
Strategies:

 Aesthetic and minimalist design, this page only contains the list of combo deals, inside
attraction places also book tickets.
 Simplicity, the list packages is being categorized which makes convenient for the users
to evaluate on which package to choose, list of attractions and booking tickets by users.
80
4.6.6.8 Tracking Page
Purpose:
To display the tracking information and giving the privilege view the direction of walkway. By
clicking on the “Track” it helps users to track the walk pathway
Strategies:
 Visibility, walk way displayed first,

 Recognition, this page allows to store the user tracking information where user doesn’t
have to remember the stored the tracking information.
 Mapping, usage of blue highlighted area to control the pathway tracking.
81
5.0 Stage 4: Evaluation & Testing (Joshua TP032057)
5.1 Evaluation
A central activity involved in the user-cantered design process is usability evaluation.

Cost-effective evaluation is such type of tools which fully support the usability evaluation’s,
however, are still limited. The aim of the evaluation is to introduce a web-based, resource-
supported, interactive evaluation toolkit, which guides evaluation planners through the
various activities involved in planning and conducting usability evaluations. The stages of the
DECIDE framework provide the basis for the design of this toolkit, which currently supports
two evaluation methods: heuristic evaluation for websites and standard questionnaires.
5.2 DECIDE FRAMEWORK
The stages in DECIDE framework are as follows:
• Determine the goals the evaluation addresses.

• Explore the specific questions to be answered.
• Choose the evaluation paradigm and techniques to answer the questions.
• Identify the practical issues.
• Decide how to deal with the ethical issues.
• Evaluate, interpret and present the data.
82
5.2.1 Determine the goals the evaluation addresses.
The main and high-level goals of developing this app are: Fun Pages, Help, Home,
Informative, Ticketing, Tracking and for every goal we have used metaphors. Example: In
Registration menu we have posted a picture which tells the user that this is the way to go to
register yourself. In Ticketing and all the menu, it is easily recognized that what the menu
will do? All the interface having same background colour and the buttons are on the same
place. There is a master page which is related to each goal.
83
5.2.2 Explore the specific questions to be answered.
In order to make goals operational, questions that must be answered to satisfy them have to
be identified. For example, the goal of finding out that:
1. Is the app user friendly?

2. Is the app flowing with consistency?
3. What is the possibility that the feedback of the app will give the unwanted result?
4. Is the user interface to the app so poor that it is hard to use?
5. Is the system difficult to navigate?
6. Is the terminology confusing because it is inconsistent?
7. Is the response time too slow?
8. Is the feedback confusing or maybe insufficient?
9. Whether the app is given proper feedback or not?
5.2.3 Choose the evaluation paradigm and techniques to answer the questions.
After identified the goals and main questions, the next step is to choose the evaluation
paradigm and techniques. The evaluation paradigm determines the kinds of techniques that
are used. Practical and ethical issues must also be considered, and trade-offs made. We have
selected the Usability testing paradigms for evaluation. We have taken some user and they
can perform some task. We watched them carefully, write everything about their key presses
are logged and their expressions. We calculate their performance time and based on this
testing we came to know that how perfect is our Petrosains App. All the data is used to
calculate performance times, identify errors. It is very useful to work on that subject on which
the user failed. It is the easiest testing to recover and make the app perfect.
84
5.2.4 Identify the practical issues.
There are many practical issues to consider when doing any kind of evaluation and it is
important to identify them before starting. Some issues that should be considered include
users, facilities and equipment, schedules and budgets, and evaluators ‘expertise. Depending
on the availability of resources, compromises may involve adapting or substituting
techniques. The main issues are:
1. Project is on time
2. Users are available
3. Project is within the budget.
4. Facilities
5. Equipment related to the project must be available on time.
6. Expert person availability.
5.2.5 Decide how to deal with the ethical issues.
• Users will be treated politely

• If any user participates, keeping in mind that what should they expect.
• Their Information will be confidential. Any payment offered should also be clearly
stated.
• Pay users.
• Avoid including quotes or descriptions that inadvertently reveal a testers identity.
• Ask users permission in advance to quote them, promise them anonymity, and offer to
show them a copy of the report before it is distributed
85
5.2.6 Evaluate, interpret and present the data.
Choosing the evaluation paradigm and techniques to answer the questions that satisfy the
evaluation goal is an important step. So, it is important to identifying the practical and ethical
issues to be resolved. However, decisions are also needed about what data to collect, how to
analyse it, and how to present the findings to the development team. The technique used
determines the type of data collected, but there are still some choices. For example, should
the data be treated statistically? If qualitative data is collected, how should it be analysed and
represented? Some general questions also need to be asked:
• Is the technique reliable?

• Will the approach measure what is intended, i.e., what is its validity?
• Are biases creeping in that will distort the results?
• Are the results generalizable, i.e., what is their scope?
• Is the evaluation ecologically valid or is the fundamental nature of the process being
changed by studying it?
5.3 The details on Heuristic Evaluation performed
In the field of human-computer interaction (HCI), one of the most popular inspection-
based methods for evaluating usability is the Heuristic Evaluation (HE) as described
originally by Nielsen and Molich and later refined by Nielsen. Promoted for its cost
efficiency and ease of implementation, the HE method consists of one or more experienced
evaluators (3-5 recommended) applying an established set of guidelines (or heuristics) as they
review a given system. A heuristic is a guideline or general principle or rule of thumb that
can guide a design decision or be used to critique a decision that has already been made to aid
the evaluators in discovering usability problems, there is a list of 10 heuristics which was
used to generate ideas for this app:
86
1. Visibility of system status: The system should always keep users informed about what is
going on, through appropriate feedback within reasonable time.
2. Match between system and the real world: The system should speak the users' language,
with words, phrases and concepts familiar to the user, rather than system-oriented terms.
Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom: Users often choose system functions by mistake and will need
a clearly marked "emergency exit" to leave the unwanted state without having to go through
an extended dialogue. Support undo and redo.
4. Consistency and standards: Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform conventions.
5. Error prevention: Even better than good error messages is a careful design which
prevents a problem from occurring in the first place.
6. Recognition rather than recall: Make objects, actions, and options visible. The user
should not have to remember information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily retrievable whenever
appropriate.
7. Flexibility and efficiency of use: Accelerators -- unseen by the novice user -- may often
speed up the interaction for the expert user such that the system can cater to both
inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design: Dialogues should not contain information which is
irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the
relevant units of information and diminishes their relative visibility.
87
9. Help users recognize, diagnose, and recover from errors: Error messages should be
expressed in plain language (no codes), precisely indicate the problem, and constructively
suggest a solution.
10. Help and documentation: Even though it is better if the system can be used without
documentation, it may be necessary to provide help and documentation. Any such
information should be easy to search, focused on the user's task, list concrete steps to be
carried out, and not be too large. Types of Help and documentation
• Quick reference: It is used as a reminder to the user of the details of tools the user is
basically familiar with and has used before. It can be used to remind the user of the
syntax of the command
• Task – specific help: It is required when we encountered a problem in performing a task
or if we are uncertain how to apply the tool to his problem. It is direct related to what
is being done.
88
5.4 The details on the usability testing performed
Usability testing is a method used to evaluate how easy a website is to use. The tests
take place with real users to measure how ‘usable’ or ‘intuitive’ a website is and how easy it
is for users to reach their goals. The key difference between usability testing and traditional
testing (bug testing, acceptance testing etc.) is that usability testing takes place with actual
users or customers of the product. Whilst traditional testing might be undertaken by a
developer, designer or project manager, usability testing removes any bias by collecting
feedback direct from the end user. There are various types of usability testing. As for this
development, we chose to use comparative usability testing & usability evaluation.
5.4.1 Comparative Usability Testing
Used to compare the usability of one app with another. Comparative tests are
commonly used to compare a system against peer or competitor sites, however it can also be
used to compare two designs to establish which provides the best user experience. As for
Petrosains app, there are predecessor apps, but we compared it to a relevantly close apps with
same features, Musement. Like the app we are designing, Musement provides features such
as booking tickets for places and providing news about the places that you want to visit as
well going around with the hottest news that is happening. The only vast difference between
these two apps are the usage of it, as Musement provides a broader scope for the purchases as
in there is no limit to where you’re headed to, as for this app, it only limits to the vicinity of
Petrosains KLCC.
89
5.4.2 Usability Evaluation
This is a test of a new or updated service either pre or post-launch. This usability test
introduces users to the new design to ensure it is intuitive to use and provides a positive user
experience. The aim of the usability evaluation is to ensure any potential issues are
highlighted and fixed before the product is launched. We brought the app to have the LIVE
test with users around Petrosains KLCC.
5.5 Evaluation of the whole project
The system is evaluated properly so it is going to more successful & will be able to compete
in the market. The main impacts of the results are:
1. The Interface of the system is consistent. So, user will easily like the system.
2. All the buttons and tools have the proper feedback. So, it is easy to handle the System.
3. Perfect metaphors make the system more memorable.
4. Visibility is perfect.
5. System is error free.
90
6.0 Individual Assignment
6.1 UX vs UI (Nethyaa Gangatharan TP038289)

A UI, which stands for User Interface (UI), is a method in which a man controls a
product application or equipment gadget. “User Interface is the part of the product that people
see, feel, touch, and hear, which captures user intent and communicates back to user. A good
UI design can help create a specific desired experience. (Geordie Kaytes, 2018). Decent UI
gives an “easy to understand” immersion, enabling the client to communicate with the
respective product or equipment in a characteristic and instinctive way. In data innovation,
User Interface (UI) is everything planned into a data gadget which a man many cooperate.
(Anon., 2018). Besides, this can integrate as it displays screens, consoles, a mouse and the
presence of a work area. It is additionally the route through which a client collaborates with an
application or a site. The developing reliance of numerous organizations on web applications
and portable applications has driven numerous organizations to put expanded need on UI with
an end goal to enhance the client's general involvement. (TechTerm , 2018)
Practically all product programs have a graphical UI, or GUI. This indicates the
program incorporates graphical controls, which the client can choose utilizing a mouse or
console. A run of the mill GUI of a product program incorporates a menu bar, toolbar, windows,
catches, and different controls. The Macintosh and Windows working frameworks have
distinctive UIs, however they share many similar components, for example, a work area,
windows, symbols, and so on. These normal components make it workable for individuals to
utilize either working framework without having to totally relearn the interface.
Correspondingly, programs like word processors and Web programs all have rather
comparative interfaces, giving a reliable client encounter over various projects. (Techopedia ,
2018)
Most hardware gadgets additionally incorporate a (UI), however it is regularly not as
unpredictable as a product interface. A typical case of an equipment gadget with a UI is a
remote control. An average TV remote has a numeric keypad, volume and channel catches,
quiet and power catches, an information selector, and different catches that perform different
capacities. This arrangement of catches and the way they are laid out on the controller makes
up the UI. Different gadgets, for example, advanced cameras, sound blending consoles, and
stereo frameworks likewise have a UI. (Franklin, 2018)
91
6.1.1 User Experience (UX)
User experience (UX) plan is the way towards making items that give significant and
important encounters to clients. This includes the plan of the whole procedure of securing and
incorporating the item, including parts of marking, outline, ease of use, and capacity. "User
Experience Design" is regularly utilized conversely with terms, for example, "UI Design". In
any case, while Usability and User Interface Design are essential parts of UX Design, they are
subsets of it – UX configuration covers a huge range of different zones, as well. (SMASHING
MAGAZINE , 2018)
A UX architect is worried about the whole procedure of obtaining and incorporating an
item, including parts of marking, plan, ease of use and capacity. It is a story that starts
previously the gadget is even in the client's hands. User experience configuration is tied in with
endeavoring to influence them to reply "Yes" to those inquiries. This guide plans to acquaint
you with the expert train of UX outline with regards to Web-based frameworks, for example,
sites and applications. UX designers additionally take a gander at sub-frameworks and
procedures inside a framework. (Interaction Design Foundation , 2018)
For instance, they may ponder the checkout procedure of an online business site to see
whether clients discover the way toward purchasing items from the site simple and lovely. They
could dive further by contemplating segments of the sub-framework, for example, perceiving
how proficient and charming is the experience of clients rounding out info fields in a Web
shape. (Smith, 2017)
6.1.2 Comparison Table of UI vs UX
User Interface (UI) User experience (UX)

Gives importance on how a product’s Gives importance on the user’s effort to
design looks and functionality solve a problem
Focuses more on the tangible elements Focuses on the theoretical aspects of a design
process
Give importance about visual and Focuses on entire experience and does not
information design around screens give importance about the screen
Product is given importance Importance on user and how is their
experience with the product
Table 1: Comparison Table of UI vs UX (User Testing , 2018)
92
6.1.3 Differences between UI and UX
UX Designer are mostly working to identify what are the users needed, then produce
the initial prototype which show the flows or steps that needs to be done by the users to
complete the tasks and how they know if the tasks are completed based on the research and
analysis processes, while UX Designer will take those initial design and flows then refine the
overall design by applying appropriate color, typography, and interaction details in order to
make it more interesting aesthetically, improve the visual representation, and the goals which
is to improve the interaction between user and the product by guiding them to complete their
tasks. (Dimitroff, 2017)
UX basically enable the users to achieve their goals, what are they try to do or
accomplish, research and analysis are conducted to get the features right for the users, but UI
will define the personality of interface provided for the users, they can stay longer to explore
because the interface design are interesting and get them personally, or they can leave after
they get what they wanted. The coverage of UX Designer and UI Designer also different, while
most of UX Designer can be involved in many segments of the product development, while UI
Designer only involved in user interface design. This is caused by the complexity of UX
Designer roles that needs to be involved in many parts of the development.
Figure 1: Difference Between UI and UX?

Source: https://blog.salecycle.com/featured/whats-the-difference-between-ui-and-
ux/attachment/ux-v-ui/
93
6.2 Mobile UX (Nowen Paul TP037132)
Mobile user experience (UX) design refers to the design of positive experiences
during the use of mobile devices and wearables, and applications or services running on such
devices. The mobile market, like the contexts in which mobiles are used, places unique
requirements on the design of the user experience. Mobile UX design focuses strongly on
efficiency and discoverability. Mobile users engage with their devices at crucial moments and
only for short periods. Their experiences need to be personalized, efficient and enjoyable in
order to keep them engaged and ensure their continued use of such items. Therefore, mobile
UX design focuses on delivering devices and services that are streamlined to serve
spontaneous user needs that change with the context the user finds himself or herself in, while
keeping the interaction levels as low as possible. For instance, a user may have two free
hands and fewer distractions while standing in a coffee shop than she would if, five minutes
later, she must grasp a pole or railing on a bus traveling on an uneven road.
Another significant challenge for mobile UX is discoverability (i.e., how easily

potential users can find the service or app) due to the sheer size of app marketplaces. For the
same reason, retention and engagement also pose significant challenges, since users are often
able to find plentiful and free alternatives to suit their needs. For mobile UX designers, the
careful shaping of the mobile user experience—from discovery to operation and co-operation
with other devices or services—is a key goal in creating positive and personally meaningful
experiences for users. Designing for mobile also involves appreciating the need for brand
consistency and the users’ expectations of content regarding their threshold for inferior
versions of “full-fledged” designs they would find on computers at home or in the office.
94
6.2.1 Designing for the Mobile Environment – Some Simple Guidelines
To design for mobile, then it’s likely you’re going to need to consider the way that the
device is used and the specifics of the device itself. There are some general principles that
can help designers for mobile get started but don’t forget that these don’t replace the need for
user research. They are guidelines not hard and fast rules. There are many things to consider
when designing for mobile and while many are standard UX considerations; there are going
to be mobile specific design considerations too. Are you going to integrate your mobile
offering with your current offering? Will you use responsive design or adaptive design if you
do? A lot of this will boil down to context. E.g the context in which the mobile device will be
used. If your users access the mobile web from their desks, that’s awesome, but many users
don’t. They’re going to be trying to use them in the supermarket, on their daily commute, on
the walk to the coffee shop, etc. That means you’re going to have to consider how to reduce
distractions and make it easy for the user to focus on the task in hand too.
Josh Clark, the author of Tapworthy- Designing Great iPhone Apps, offers three categories
for mobile web access: (Gomma, 2004)
 Micro tasking: When the user interacts with their device for brief but frenzied periods
of activity
 Local: When the user wants to know what’s going on around them
 Bored: When the user has nothing better to do and is looking to be entertained or
otherwise diverted
 Basic Design Considerations for the Mobile Web
 Small Screens
 You don’t have as much screen real estate for mobile devices as you do for PCs and
laptops. That means, normally, you’ll be designing for multiple screen sizes. You need
to make a decision early as to whether to use responsive design (where the device
handles the changes in display) or adaptive design (where your servers handle the
changes).
95
A good process to follow would be: (Apple, 2010)
 Group device types based on similar screen sizes and try to keep this to a manageable
number of groups
 Define content rules and design adaption rules that enable you to display things well on
each group of devices
 Try to adhere as closely to web standards (W3) as possible when implementing flexible
layouts
6.2.2 Keep Navigation Simple
Keypads and touch screens don’t make for precise navigation like mice do – so try to:
(Educational Research , 2013)
 Prioritize navigation based on the way users work with functionality – the most popular
go at the top
 Minimize the levels of navigation involved
 Ensure labelling is clear and concise for navigation
 Offer short-key access to different features
 Remember to offer a 30x30 pixel space for touch screen tap points
 Ensure that links are visually distinct and make it clear when they have been activated
too
 Make it easy to swap between the mobile and full site (if you choose to implement
separate versions)
96
6.2.3 Keep Content to a Minimum
The minimalistic approach in design took the world by storm, and it remains to be
widely used today. It was no surprise that it also influenced today’s mobile app UX design.
Its simplicity already became the metaphor for a business’ professionalism and credibility.
Who knew that something so simple and uncomplicated can say so much more? A pattern
following a minimalistic approach is ideal to create a pleasing experience for mobile users. In
a significantly smaller screen, they do not need to be crowded with overly-decorated apps or
websites. What they seek is functionality and ease of navigation. (An, et al., 2015)
This is where a designer’s creativity will truly shine. It is easy to make a simple design,
but it can be a challenge to make it outstanding. Once you get that perfect balance of
simplicity and uniqueness, your app or website will surely stand out.Don’t overwhelm your
users – respect the small screen space. Keep content to a minimum. Make sure that content is
universally supported on all devices or avoid it. Think Flash and then don’t use it, for
example.
 Make page descriptions short and to the point – for relevant bookmarks.
6.2.4 Reduce the Inputs Required from Users
The less the user has to fiddle with their phone; the more they’re going to enjoy using your
mobile web offering. Consider:
 Keeping URLs short.

 Offering alternative input mechanisms (video, voice, etc.)
 Minimizing inputs in forms (you can always ask for more data when the user logs on
to the desktop)
 Allowing permanent sign in (most smartphones are password or fingerprint protected –
the risks of staying logged in are less than on the desktop)
 Keep scrolling to a minimum and only allow scrolling in one direction
97
6.2.5 Continuous Integrated Experiences
As users move between mobile and the desktop, they’re going to expect similar
experiences. Remember to: Maintain continuity. If they log into your webstore on mobile,
they should be able to track orders and make purchases just like they would on the desktop.
Maintain consistency. (An, et al., 2015)Offer the option to switch between mobile and
desktop offerings at will. Maintain brand. The look and feel of each version should be
similar. Mobile is different from the traditional desktop environment and while standard UX
and usability considerations are needed in a mobile context – the mobile environment also
brings new design considerations. It’s important for mobile designers to pay attention to the
details in order to deliver the best possible user experiences. In today’s world, there are a lot
of trends and guidelines to follow for success. Fortunately, you won’t have to deal with it
alone. Fire art Studio has helped plenty of businesses reach their digital success dream. These
were made possible through our use of custom mobile app design patterns, fresh and well-
executed ideas, and appropriate tools.
98
6.3 The HCI Challenges for developing a mobile app
Human-computer interaction (HCI) is the study of the interaction between humans

and computers. Such interaction is mainly done at the user interface. One of the major
concerns of professional practitioners in the field of HCI is the design of interactive
computing systems for human use. As a result, it is a basic goal of HCI designers to make
computers more usable and more receptive to the user’s needs. To provide the best possible
interface within given constraints, the HCI designers are supposed to develop systems that
minimize the barrier between the human’s cognitive model of what users want to accomplish
and the computer’s understanding of the users’ tasks. (DUNLOP, 2007) This also leads to the
emerging technological research in smartphones being used widely, among the citizens of the
globe. This emerging technology has made HCI researchers think out of the box on how to
make this pocket computer more user friendly for the human interactions.
Mobile devices play an important role in the modern society. They are being used by
people of all walks of life for various purposes. They can be found in the fields of education,
entertainment, medicine, communication service, military systems, and so on. Due to the
multidisciplinary nature of HCI, designing user interfaces for mobile devices poses several
interaction challenges. Some of these challenges are hardware-related, while the others
software-related. Owing to the fast development in the digital technology, the operation of
human-computer interface is becoming more and more complicated. Consequently, to catch
up with the speedy and fleeting transformation, the user of digital interactive products can
only keep on learning various operating interfaces, programming languages, and development
environments. (Hongwarittorrn, 2017) Nowadays, in our daily lives, we can hear more and
more people complaining about the bad design in interaction interface. Is this problem caused
by the bad design of the interactive products or by the shortage of users’ knowledge about the
logics of the human-machine interaction design? (DUNLOP, 2007)
99
Most researchers in HCI take interest in developing new design methodologies,

experiencing with new hardware devices, prototyping new software systems, and exploring
new paradigms for interaction. Designs in HCI aim to create user interfaces which can be
operated with ease and efficiency. Many digital products that require users to interact with
them to accomplish their tasks have not necessarily designed with the users in mind. The
designer always claims how usable the products are; however, an even more basic
requirement is that the interface should allow the user to carry out relevant tasks completely.
In other words, the design must be both usable and useful for the user and it must be a user-
centred design. Current mobile computing devices such as palmtop computers, Personal
Digital Assistants (PAD), and mobile phones have a problem in common—attempting to
provide users with powerful computing services and resources through small interfaces. As is
usually the case with mobile devices, limited screen size makes it difficult to efficiently
present information and help users navigate to and from the information they want.
(DUNLOP, 2007) And since mobile devices are often required to possess multiple
functionalities, the convergence of electronics, computing, and communication is becoming a
must in the mobile industry. In addition, because mobile devices need to operate with limited
battery charge, how to deal with the power consumption has also become one of the most
important issues for system designers. But that is mainly researched for the outer of a mobile
device which indirectly affects the usability of the device. (Hongwarittorrn, 2017)
Moving forward, applications on the mobile device also known as the shorter term
“Mobile apps” which also needs to be very persuasive and user friendly to be used.
Therefore, as we emerge in time, we can see that the number of times an application is
updated is way higher than normal. (Kraleva, 2017) Social media apps such as “Facebook”
and “Instagram” will update their looks of their UX only to make it easier for the user to use
it. The problem arises at the necessity of doing so. According to a researcher, User experience
(UX) has been defined as “the combined experience of what a user feels, perceives, thinks,
and physically and mentally reacts to before and during the use of a product or service”.
Basically, an important concept in UX is the process by which users form experiences since
they first encounter the product and as the product is used throughout a period (Reem
Alnaniha, 2016). UX can be explained by three characteristics. The first one is the holistic
nature of UX. What is meant by holistic nature is that UX encompasses a broad range of
qualities and includes not only the visual, tactile, auditory aspects of the system but also how
100
the system functions under an appropriate usage environment or context . The second
characteristic is that UX focus is heavily tilted towards user’s perspective. UX is often
misunderstood for UI (user interface), as their abbreviations are similar. UI tends to tilt
towards computer side, and UI evaluations are often subjected to quantitative measurement or
usability testing. UX, in contrast, concerns how users think, feel, and behave. The third
characteristic is that UX has strategic value in firm’s development of a product or service.
UX has recently become an important topic worth consideration by top executives. (Reem
Alnaniha, 2016)
The goal of designing for UX is to encourage positive feelings (e.g., satisfying,

enjoyable, exciting, motivating, and fun) and minimizing negative feelings (e.g., boring,
frustrating, annoying, and cutesy) towards the product. Unlike usability goals, UX goals are
subjective qualities and concerned with how a product feels to a user. There were attempts to
utilize quantitative measurements to measure user’s emotion. The measurements were
adopted from medical applications, such as measuring pulse and blood pressure, or using
facial electromyography (EMG) and electroencephalography (EEG) to reflect computer
frustration. However, its validity in measuring user experience remains questionable.
Although usability and UX are different, they are not completely separated. In fact, usability
is part of user experience. For example, a product that is visually pleasing might evoke
positive first-contact experience; however, if its usability was inadequate, it could damage
overall user experience. Apart from usability, other core components of UX include useful
and desirable content, accessibility, credibility, visually pleasing, and enjoyment.
(Hongwarittorrn, 2017)
One of the most important design philosophies in HCI is the universal design. It is the
process of creating products that can be accessed by as many people as possible, with the
widest possible range of abilities, operating within the widest possible range of situations. To
make products that can be used by everyone is impossible; however, designers can try to
exclude as few people as possible, by ensuring that the products are flexible and adaptable to
individual needs and preferences. To accomplish universal design goals, the understanding of
user diversity is needed. There are several dimensions of user diversity that differentiate
groups of users. (Reem Alnaniha, 2016)
101
The first dimension is disabilities. Much of experimental research has been conducted
to understand how disabilities affect interaction with technology. The main efforts of studies
were to study the users themselves, their requirements for interaction, appropriate modalities,
interactive devices, and techniques to address their needs. The research includes visual
impairments, auditory impairments, motor and physical impairments, and cognitive
impairments. Visual impairments greatly affect human interaction with technology, as human
relies on vision to operate computer systems. Visual impairments encompass a wide range of
vision problems related to acuity, accommodation (ability to focus on objects at different
distances from the eyes), illumination adaption, perception of depth, and color vision. Minor
visual impairments can usually be addressed by magnifying the size of interactive elements,
increasing color contrast, or selecting appropriate color combinations for color-blinded users.
Unlike visual impairments, blindness refers to a complete or nearly complete vision loss .
Blind users benefit from audio and haptic modality for input and output. They are supported
by screen readers, speech input and output, and Braille displays. Auditory impairments (or
hearing impairments) can also affect interaction with technology. The impairments may vary
in degree, from slight to severe. Majority of people with hearing impairments have lost their
hearing usually through aging. They have partially lost perception of frequency (cannot
discriminate between pitches), intensity (need louder sounds), signal to noise (distracted by
background noise), and complexity (can hardly perceive speech). Some people were
prelingually deaf, either were born deaf or had lost their hearing before they can speak . Some
strategies to address hearing impairments are to provide subtitles or captions to auditory
contents or to provide sign-language translation of the contents . Motor and physical
impairments interfere with interaction with technology. (Hongwarittorrn, 2017)
102
Although causes and severity of motor impairments vary, the common problems faced
by individuals with motor impairments include poor muscle control, arthritis, weakness and
fatigue, difficulty in walking, talking, and reaching objects, total or partial paralysis, lack of
sensitivity, lack of coordination of fine movement, and lack of limbs. The main strategy to
address motor impairments is to minimize movement and physical effort required for input,
for instance, using text prediction, voice input, switch control devices, and eye-tracking.
Besides the aforesaid impairments, cognitive impairments can also limit user’s interaction
with technology. Cognitive impairments can be the result of brain injury, Alzheimer’s disease
and dementia, dyslexia, Down’s syndrome, and stroke. Cognitive disabilities limit user’s
capacities to think, to remember (either long-term or short-term), to sequence thoughts and
actions, and to understand symbols. The strategies are to keep user interface simple, provide
simple methods for remembering, provide continuous feedback about position in the system,
provide longer time to complete task, and support user’s attention (Hongwarittorrn, 2017)
103
6.4 Usability Evaluation – Parveen (TP034951)
6.4.1 Usability
Usability is a fairly new concept in relation to the interaction between computers and
their user-human and the machines software some of our brightest minds have developed.
Design, philosophy, cognitive psychology, and ergonomics all play a role in understanding
usability, but you don’t need to be an expert in any of these fields (Dynomapper.com, 2018).
Simply put, usability is all about how effectively your site of software is designed,
and how happy your users are. It’s not quite as clear-cut all that of course, as usability is the
combination of factors, including ease of learning, intuitive design, efficiency of use,
satisfaction, memorability, and the rate of severity errors (Dynomapper.com, 2018).
6.4.2 Importance of Usability Evaluation
Conducting usability evaluations is a crucial step in taking your site to the next level
when it comes to reaching your target market and getting ahead of your competition. We
have all experienced at least one site where the layout made no sense to you, you couldn’t
find anything you were looking for (even if you knew the content was available on that site),
and you kept getting errors or unnecessary redirects. And chances are, every time you came
across a site like that, you decide to move on to the next option on your search engine’s
results page (Dynomapper.com, 2018).
Usability evaluations allow you to minimize and very nearly eliminate the possibility
of that happening when visitors view your site by showing you where your design,
categorization, and layout is lacking. It gives you a better understanding of how your target
market think, and therefore shows you how best to develop and optimize your site
(Dynomapper.com, 2018).
104
6.4.3 Usability Goals
Usability goals is very important to meet user expectations in every systems or

applications. Before heading off to that objectives, usability refers to a product however is
important to any items which characterizes the quality, efficiency, effect vines, and fulfilment
of specific item. The reason of significance of convenience is to choose whether the client
will return to utilize that specific system (Jacob Nielsen, 2012).
According to (Jacob Nielsen, 2012), discussed 5 quality components: -
1. Errors
Errors refer to the context to help user to avoid any kind of doing unwanted action
accidentally or undesirable condition when performing task.
2. Memorability
Memorability refers to how easy a system is to be remembered by the user once learned
which means user should not need to re-learn the same thing again and again when using the
system.
3. Efficiency
Efficiency refers to the way a system can support user in carrying out task which makes user
to be able to perform task quickly
4. Learnability
Learnability refers to how easy a system is learned and use since the user wanted to get
started right away and become competent at carrying out task with much lesser effort.
In the proposed solution, the mobile application promoted Petrosains Kuala Lumpur
will be developed. Petrosains is a science discovery center which is located in Kuala Lumpur.
Currently, there is no mobile applications available for Petrosains Kuala Lumpur. Because of
that, the researchers could not identify what the main problems are. For the new mobile
application, the researchers will choose “Learnability”, and “Efficiency” as the usability
goals of the system (Martin Christensen, n.d.).
105
Efficiency
Another factor to make this application to meet the usability evaluation is efficiency
of the system. We can assume that the users never use this application before because they
most likely to use this application when they are visiting Petrosains Kuala Lumpur.
Therefore, the system must provide efficiency for users to perform their operations and
complete their task. For example, the search feature can be added to the system, so the users
do not need to search certain topic manually from the list. By improving the efficiency, the
application can also achieve effectiveness. Besides that, consistent design can also help
improving the efficiency of the application (Usability, 2013).
Learnability
Since Petrosains is a science discovery center, it can be considered that most people
would only go to this place once or twice a year. Besides that, most of the visitors are
children with their parents. Children which is categorized as novice users and some parents
can be categorized as novice or knowledge intermittent users. This is where “Learnability”
plays it part. There is a high percentage for them to no understand a complex application and
most of them never use the application before, so the proposed solution needs to be
developed as simple and interactive as possible for the children to use to complete their tasks
or operations. For example, minimalist design and colour representation can help them to
learn how to use the application faster.
Design Principle
The principles of design help the designer to arrange all elements in the page layout
and how to connect between one page to another page (Interaction Design Foundation, 2018).
Therefore, these guidelines must be followed to ensure the proposed application to meet the
usability goals. Based on (Jacob Nielsen, 2013), there are 10 heuristic principles for user
interface design offered by Jacob Nielsen which will be discussed below: -
1. Visibility of system status
Visibility of system status means that the system will have to always keep informing their
users about the current state through feedback within reasonable time. For example, when
uploading file to the website, it must show the progress bar of that process to inform user that
the file is being uploaded and it will take some time to finish.
106
2. Match between system and the real world
The system should use the user’s language, through words, phrases, or concepts, so that users
can easily understand what operations they should choose to complete their task. For
example, to delete something, it can be represented by using trash bin.
3. User control and freedom
User control and freedom means that the system enables the user to easily manage when they
are mistakenly pressed wrong button. It gives the user ability to go back to previous page or
undo what they have done.
4. Consistency and standards
The system must be built as consistent as possible and it must follow the existing standard in
order for user to easily locate what functions that they want to search. For example, the menu
functions are always located at the top left on every page and the icon always shown at the
left side to identify the text next to it.
Design Guidelines (Learnability)
 Match between system and real world
This is very important for the proposed solution as it will use the user’s language
which is English. The reason why it will be using English is because most of the
visitors are from local citizens and tourists, so using this language is the best choice to
solve this problem. Besides that, since the application will be developed for education
for children, some unique and simple icons will be used to represent some of the
functions to make it interactive.
 Consistency and standards
The system should also enhance its consistency to make it to look nice and make it
attractive for the users. Besides that, the standards still must be followed to not
confuse the users when doing their tasks. If the system is not consistent enough, the
users would likely to be not interested in using the application.
107
 Visibility
Visibility is one of design principle which was introduced by Donald Norman.
Visibility means to show all the functions very clearly to be seen by the users once they
come to that page. This can help a lot for novice users to know what they should do in
that page. The project is considered bad if the functions are out of sight, so it makes the
users having difficulty in finding functions.
Design Guidelines (Efficiency)
 Help and documentation
Sometimes, a little documentation is also important in the system, since the users of
the application will be most likely novice users. Although it seems very simple, but
this design principle will help them a lot when performing their tasks. In the proposed
solution, this principle can be applied in the registration form to show the simple
description or correct format on how to key in their details.
 Flexibility and efficiency of use
Because of the system will be used by novice to intermediate users, it is better if the
system can improve its efficiency and flexibility to help the users completing their
tasks faster. In the proposed application, one simple way to improve this area is to
create a menu bar to cover all the topics inside and search functions to find specific
functions inside the system.
 Affordance
The proposed system also needs to apply affordance principle, because it can improve
the user experience of the system. Novice users will not spend their time figuring
what the functions are. Affordance principle can help users identifying the function
without the needs of documentation.
108
7.0 References
1. Garenne Bigby. 2018. How to Perform a Usability Evaluation. [ONLINE] Available
at: https://dynomapper.com/blog/19-ux/427-how-to-perform-a-usability-evaluation.
[Accessed 02 December 2018].
2. Nielsen Norman Group. 2018. Usability 101: Introduction to Usability. [ONLINE]

Available at: https://www.nngroup.com/articles/usability-101-introduction-to-
usability/. [Accessed 02 December 2018].
3. 10 Usability Heuristics for User Interface Design | Design Principles FTW. 2018. 10
Usability Heuristics for User Interface Design | Design Principles FTW. [ONLINE]
Available at: https://www.designprinciplesftw.com/collections/10-usability-heuristics-
for-user-interface-design. [Accessed 02 December 2018].
4. Assistant Secretary for Public Affairs. 2018. With Measurable Usability Goals – We
All Score | Usability.gov. [ONLINE] Available at: https://www.usability.gov/get-
involved/blog/2013/09/measurable-usability-goals.html. [Accessed 02 December
2018].
5. Usability Evaluation Methods | Usability Body of Knowledge. 2018. Usability

Evaluation Methods | Usability Body of Knowledge. [ONLINE] Available at:
https://www.usabilitybok.org/usability-evaluation-methods. [Accessed 02 December
2018].
6. Usability Evaluation. 2018. Usability Evaluation. [ONLINE] Available at:

http://www.usabilityhome.com/. [Accessed 02 December 2018].
7. An, T., Thi, N. & Chen, Y.-C., 2015. Design and Development of a Cloud-based Trip-
Tracking System. 39th Annual International Computers, Software & Applications
Conference, 2(3), pp. 638 - 639.
109
8. Apple, 2010. EMS Tracker - EMT, Fire and Ambulance GPS Log. [Online]
Available at: https://itunes.apple.com/us/app/ems-tracker-emt-fire-and-ambulance-
gps-log/id568791190?mt=8
[Accessed 29 November 2018].
9. Educational Research , 2013. Chatbot technology: A possible means of unlocking.

International Research Journal , 4(2), pp. 218 - 219.
10. Gomma, H., 2004. Designing Real-Time and Embedded Systems with the
COMET/UML method. UML & SDL, 2(1), pp. 44-49.
11. Gui, G. & Scott, P. D., 2009. Measuring Software Component Reusability by.
JOURNAL OF COMPUTERS, 4(9), pp. 797-805.
12. Reem Alnaniha, O. O., 2016. Mapping HCI Principles to Design Quality of Mobile
User. Procedia Computer Science 94 ( 2016 ), 23(11), p. 75 – 82.
110
13. Garden, H., Software, C. and Systems, O. (2018). How Operating Systems
Work. [online] HowStuffWorks. Available at:
https://computer.howstuffworks.com/operating-system10.htm [Accessed 2
Dec. 2018].
14. Prototype. (2018). What is User Experience? What Makes a Good UX

Design?. [online] Available at: https://blog.prototypr.io/what-is-user-
experience-what-makes-a-good-ux-design-b404bb933bd0 [Accessed 2 Dec.
2018].
15. SitePoint. (2018). UI vs UX: What is the Difference? — SitePoint. [online]
Available at: https://www.sitepoint.com/ui-vs-ux-what-is-the-difference/
[Accessed 2 Dec. 2018].
16. Smashing Magazine. (2018). What Is User Experience Design? Overview,
Tools And Resources. [online] Available at:
https://www.smashingmagazine.com/2010/10/what-is-user-experience-
design-overview-tools-and-resources/ [Accessed 2 Dec. 2018].
17. Techopedia.com. (2018). What is a User Interface (UI)? - Definition from
Techopedia. [online] Available at:
https://www.techopedia.com/definition/4685/user-interface-ui [Accessed 2
Dec. 2018].
18. Techterms.com. (2018). User Interface Definition. [online] Available at:
https://techterms.com/definition/user_interface [Accessed 2 Dec. 2018].
19. Techterms.com. (2018). User Interface Definition. [online] Available at:
https://techterms.com/definition/user_interface [Accessed 2 Dec. 2018].
20. The Interaction Design Foundation. (2018). What is User Experience (UX)
Design?. [online] Available at: https://www.interaction-
design.org/literature/topics/ux-design [Accessed 2 Dec. 2018].
21. Umbach, H. (2018). What is User Interface Design? - Fresh Tilled Soil.
[online] Fresh Tilled Soil. Available at:
https://www.freshtilledsoil.com/what-is-user-interface-design/ [Accessed 2
Dec. 2018].
22. UserTesting Blog. (2018). UI vs. UX: What’s the Difference?. [online]
Available at: https://www.usertesting.com/blog/2016/04/27/ui-vs-ux/
[Accessed 2 Dec. 2018].
111

Final Documentation Hci 2019

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Final Documentation Hci 2019

Caricato da

Copyright:

Formati disponibili

UC3F1805SE Group Assignment CT035-3-3-HCIAU

Intake Code : UC3F1805SE

Student ID Student Name

1.1 Introduction ...................................................................................................................... 5

1.2 Objectives ......................................................................................................................... 5

1.3 Problem Statement ........................................................................................................... 6

1.4 Proposed Solution ............................................................................................................ 7

1.5 Gantt Chart ....................................................................................................................... 8

1.6 Task Allocation ................................................................................................................ 9

2.0 Stage 1: User Requirement Analysis (Parveen TP034951) ............................................... 10

2.1 User Profiling ................................................................................................................. 10

2.2 User profiling technique used ........................................................................................ 11

2.3 Data gathering technique used – Questionnaires ........................................................... 12

2.4 Sample Questionnaires ................................................................................................... 13

2.5 Analysis of Questionnaires............................................................................................. 16

2.6 Task Analysis ................................................................................................................. 27

2.6.1 Task analysis chosen- Hierarchical Task Analysis.................................................. 27

3.1 Selection of Design Principles ....................................................................................... 31

3.2 Selection of Usability Goals ........................................................................................... 33

4.0 Stage 3: Design & Prototyping (Nethyaa TP038289)........................................................ 35

4.1 Introduction .................................................................................................................... 35

4.2 Parallel Design ............................................................................................................... 35

4.2.1 Conceptual Design ...................................................................................................... 36

4.2 Peer-to-peer Evaluation .................................................................................................. 38

4.3 High Fidelity Prototype .................................................................................................. 63

4.3.1 Prototype .................................................................................................................. 63

4.3.2 High – Fidelity Prototyping ..................................................................................... 63

4.4 Storyboard and Design Strategy..................................................................................... 65

4.6 Prototype, Purpose and Strategies .................................................................................. 73

4.6.1 Homepage ................................................................................................................ 73

4.6.2 Login Page ............................................................................................................... 74

4.6.3 Menu Toggle............................................................................................................ 75

4.6.4 Register .................................................................................................................... 76

4.6.5 Settings Page............................................................................................................ 77

4.6.6 Share Page ............................................................................................................... 78

4.6.6.7 Ticketing Page ...................................................................................................... 79

4.6.6.8 Tracking Page ....................................................................................................... 81

5.0 Stage 4: Evaluation & Testing (Joshua TP032057) ........................................................... 82

5.2 DECIDE FRAMEWORK .............................................................................................. 82

5.2.1 Determine the goals the evaluation addresses. ........................................................ 83

5.2.2 Explore the specific questions to be answered. ....................................................... 84

5.2.4 Identify the practical issues. .................................................................................... 85

5.2.5 Decide how to deal with the ethical issues. ............................................................. 85

5.2.6 Evaluate, interpret and present the data. .................................................................. 86

5.3 The details on Heuristic Evaluation performed.............................................................. 86

5.4 The details on the usability testing performed ............................................................... 89

5.4.1 Comparative Usability Testing ................................................................................ 89

5.4.2 Usability Evaluation ................................................................................................ 90

5.5 Evaluation of the whole project ..................................................................................... 90

6.0 Individual Assignment ....................................................................................................... 91

6.1 UX vs UI (Nethyaa Gangatharan TP038289) ................................................................ 91

6.1.1 User Experience (UX) ............................................................................................. 92

6.1.2 Comparison Table of UI vs UX ............................................................................... 92

6.1.3 Differences between UI and UX ............................................................................. 93

6.2 Mobile UX (Nowen Paul TP037132)............................................................................. 94

6.2.2 Keep Navigation Simple .......................................................................................... 96

6.2.3 Keep Content to a Minimum ................................................................................... 97

6.2.4 Reduce the Inputs Required from Users .................................................................. 97

6.2.5 Continuous Integrated Experiences ......................................................................... 98

6.3 The HCI Challenges for developing a mobile app ......................................................... 99

6.4 Usability Evaluation – Parveen (TP034951) ................................................................ 104

6.4.1 Usability................................................................................................................. 104