GROUP ASSIGNMENT

TECHNOLOGY PARK MALAYSIA

CT026-3.5-2-HCI

HUMAN COMPUTER INTERACTION

NP2F1709IT

HAND OUT DATE: 3 MAY 2018

HAND IN DATE: 2 JULY 2018

WEIGHTAGE: 50%

INSTRUCTIONS TO CANDIDATES:

1. Submit your assignment at the administrative counter.

2. Students are advised to underpin their answers with the use of references (sites
using the Harvard Name System of Referencing)
3. Late submission will be awarded zero (0) unless Extenuating Circumstances
(EC) are upheld.
4. Cases of plagiarism will be penalized.
5. The assignment should be bound in an appropriate style (Comb Bound or
Stapled).
6. Where the assignment should be submitted in both hardcopy and softcopy, the
softcopy of the written assignment and source code (where appropriate) should
be on a CD in an envelope/ CD cover and attached to the hardcopy.
7. You must obtain 50% overall to pass this module.
 TECHNOLOGY PARK MALAYSIA

SYSTEM DEVELOPMENT METHODS

CT046-3.5-2-SDMS

INTAKE CODE: NP2F1709IT

SUBMITTED BY:

Prasant Mahajan (NP000087

Roshan Shahi (NP000091)

Saroj Dangal (NP00093)

 Acknowledgement
First, we thank GOD Almighty, for his provision of health and strength throughout the duration
of this project.

Secondly, our faculty Mr. Roshan Thandukar for her guidance and knowledge influenced along
the way.

Last but not the least, we the Group members Prasant Maharjan, Roshan Shahi and Saroj
Dangol for our kind cooperation and our best intentions throughout the project.

My sincere thanks to you all.

Table of Contents
1 Introduction ................................................................................................................................... 1
1.1 Objective ................................................................................................................................ 1
1.2 Problem Statement................................................................................................................ 1
1.3 Solution .................................................................................................................................. 1
2 User Requirement ......................................................................................................................... 2
2.1 User Profiling ........................................................................................................................ 2
2.2 Stake Holder Analysis........................................................................................................... 5
2.3 Task Analysis......................................................................................................................... 8
3 Usability Goals and Competitive Analysis ................................................................................ 10
3.1 Selection of design principle ............................................................................................... 10
3.2 Selection of usability goals .................................................................................................. 12
3.3 Competitive analysis ........................................................................................................... 12
4 Prototype and Walkthrough ...................................................................................................... 13
4.1 Parallel Design ..................................................................................................................... 13
4.2 Participatory Design ........................................................................................................... 15
4.4 Storyboard ........................................................................................................................... 16
4.5 Screen Description .............................................................................................................. 19
5 Testing of Design ......................................................................................................................... 21
5.1 Formative Evaluation ......................................................................................................... 21
5.2 Impact on Design.................................................................... Error! Bookmark not defined.
6 Conclusion ................................................................................................................................... 27
References ............................................................................................................................................ 28
Workload Matrix ................................................................................................................................ 29
Marking Scheme ................................................................................................................................. 30
1 Introduction
The global era of media is changing. It is really hard to find right mobile with budget. Peoples
demanding the more of technology than anything. They visit lots of sites to find details and
features about phone. We developed a mobile world web application where peoples find right
mobile with compare with other and reading news, reviews about phones. Mobile World is a
web application which provide us information about all kind of mobiles. This application
contains all the details and features of all types of mobile phone in one place. This application
also provides news, reviews and videos about phone and its features. We also can compare
feature of mobile phone with other phone through this application.

1.1 Objective
• To provide detail information and features of mobile phone in one place
• To save time of people to surf different mobile at different website
• To aware people about features of mobile phone before buying
• To make people easier to learn feature of mobile phone in one place
• To aware people about new mobile phone before launch

1.2 Problem Statement

As we know every product have its own sites through which we can get reviews/details
information and features of mobile phone. But, they need to surf individual sites or blog to
know the details information of each mobile phone. It will consume time of people as well as
internet money cost too. This isn’t efficient and effective to search and click each and every
site to get the details information for a single mobile phone of same features but different brands
mobile phone.

1.3 Solution
Instead of surfing individual sites, user can get the details information’s and functions of
different brand mobile phone in one place by surfing mobile world. This web applications help
user easy to surf and search different brands mobile phone of different model in one place
which will make users easier to search and get information’s of any mobile phone. This will
save their time as well as internet surfing costs too. By surfing one site they can have
knowledge/features of latest or upcoming mobile phone.

1
2 User Requirement
2.1 User Profiling
The process of establishing knowledge about the users by finding out who the users are, what
the goal is in the use of the product and the tasks that are involved by observation of existing
practices is user profiling. The stakeholders are the focus of the user profiling process. The
main stake holders / the categories of users are the primary and the secondary users. These
users can be of any age, gender, culture, abilities, background, experiences and so on.

The main purpose of the user profiling is that there can be an infinite variety of tasks and users,
so in order to have a specific type of profile for a specific type of user so that the use can easily
adapt to the system to be developed. The targeted group of users for the project i.e. Mobile
world web application are the general public.

The selection of data gathering methods

Data gathering process is the of determining requirements from the users by using certain
methods. It is an important part of the requirement and evaluation activity. These methods lead
to a concluding result. The main purpose of data gathering is to collect relevant and appropriate
data to create a list of requirements.

Few of the data gathering methods are listed as below:

• Questionnaire
• Interview
• Workshops or focus groups
• Naturalistic observation
• Studying documents

Questionnaire

A series of structured questions designed to elicit specific information that can help obtain
quantitative as well as qualitative data. The questionnaires are a medium to collect data that is
administered at distance with no one to explain or help in answering. The users are to answer
by giving their own opinions on the questions they are presented with. There are basically two
types of questionnaire:

Free-format questionnaires Fixed format questionnaires.

2
Advantages:

• Quick answers can be obtained

• It can be completed by people at their own convenience
• The benefit of anonymity allows people to express their opinions freely
• The responses can be sorted quickly
• It is very cost efficient to gather data from a large group

Disadvantages:

• The rate of returning the questionnaires by people are often low

• All the questions might not be answered by people
• No way to explain any misunderstood questions
• One of the main aspects of determining people’s opinion on the matter i.e. body
language cannot be observed
• Difficulty in preparing the right questions for the right audience

Sample questionnaire:

Name: ____________________________

Email: ____________________________

Contact: ___________________________

*Questions with * are mandatory to be answered

Directions: Please indicate your level of agreement with each of the statements. Place an “x”
mark in the box of your answer where 1 is
1 2 3 4 5
never and 5 is frequently

How often do you search specifications of

phones?

Would an informative and comparing site

be helpful?

How often do you change your phone?

How up to date are you in technological field?

3
Are you satisfied by the review done by the review bloggers/vloggers? (if yes/no then give
your reason)

___________________________________________________________________________
___________________________________________________________________________
____________________

How helpful are the ratings and feedback features in the existing informative sites? What would
you prefer?

___________________________________________________________________________
___________________________________________________________________________
____________________

4
2.2 Stake Holder Analysis
Stakeholders are persons, groups or business units with interests in MobileWorld web
application. Stakeholder are the person, "who is the user of System?"," who are the people
effected by the system?" and "who are the people that effect the project?".

Stakeholder Onion Model

The MobileWorld web application project is represented by three concentrate circles

The website in this project is web application or system. it is all software and hardware
associated with the project.

The system in the project is primary stakeholders/users/secondary users. They are the users
who use the application directly as intended in the design.

The containing system in the project is secondary stakeholders who either use the results of the
system /provide input to the system.

The wider environment in the project is tertiary stakeholders, who influence on the project, for
example the developers.

Example: MobileWorld website Stakeholder onion Model

People used desktop or mobile to surf different site to view the specification of mobile.
Therefore, we create single website from where people can get the specification of all types of
mobile in one website. This help general people to search information of all in one site and
they can compare the specification of the two products.

Who are the stakeholders?

Instead of drawing the onion, I make annotated table:

Website User Secondary Tertiary

MobileWorld web General People, Developer Website Designer
application Admin

http://cs4760.csl.mtu.edu/2017/lectures/project-and-stakeholders/

5
Primary, Secondary and Tertiary User

I have encountered different users like general people, admin, Developer, website designer etc.
I like to classify this user into three levels: primary, secondary and Tertiary users. Primary users
of the website are the targeted user of the design. Secondary users are users who do not used
system primarily. Tertiary users are the users who do not used system primarily/often but they
are the effected/influenced by the system. For example, Website is design for general people
who want to learn/view the specification of mobile and admin who used to add/edit and delete
the content of the system. Secondary users are the developer who develop the system and check
the functionality of the system if they are working properly/not. Tertiary users are the designer
who design the system but do not used the system and effect if user do not like their design.

Stakeholders Goals and Influences

Stakeholders either used system/effect the project by it. Everyone has their one goal to use a
system, which influences them. I have use onion stakeholder analysis table, which is associates
stakeholder roles and knowledge classes. For our project, I have used simpler table that defines
the stakeholders’ goals and influences. They are contributing and constraining. Contributing
influences is what output stakeholder can give to the project, for example data or code.
Constraining influences is how the stakeholder limits the design of the system.

Examples: MobileWorld Web Application Goals and Influences

Stakeholder Goals Influences

Contributing Constraining
General users • View Mobile • Visiting sites • Fast and easy
Specification interaction
• Update about
new
Technology
used in mobile
phone

Admin Add/update/delete Updating the content Automatic and fast

content of website of the website updated of the
contents

6
Developer Developing full Check the input and Desired output for
functional system output is based on given input
requirement/not
Designer User friendly design Design the page of Simple and user-
website friendly design

7
2.3 Task Analysis

View
specification

1. Open 2. Select 3. View

website product specification

Plan 0: do 1

Then do 2 and 3

IN order to view different product specification

Repeat 1,2 and 3

Manage
category

1. Open 2. go to 3. admin login 4. choose add 5. edit/delete

website manage new category category

Plan 0: do 1

Then do 2 and 3

In order to add new category, do 4

Else to edit or delete do 5

8
 Manage
product

1. Open 2. go to 3. admin login 4. choose add 5. edit/delete

website manage new product product

Plan 0: do 1

Then do 2 and 3

In order to add new product, do 4

9
3 Usability Goals and Competitive Analysis
Usability is an attribute that assesses the easiness of the user interface. The term usability
comprises of the ease of learning, use, remembering, satisfaction as well as the efficiency and
effectiveness of use. Usability is the extent to which a product can be used by specified users
to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context
of use. In order to achieve optimum level of usability a developer needs to as himself “can you
achieve what you want to?”, “can you do it without wasting effort?” and? do you enjoy the
process?”.

3.1 Selection of design principle

The design principle are the fundamentals of design that are widely applicable and are
enduring. There are six design principles which are:

Visibility

Visibility principle of design asks who can see it or how to make it more visible for the users.
Visibility is important so that the state of the action happening or possible action is clear to the
user. This makes sure that the user can find and locate the desired action. This is achieved by
placing the items in a visible place or making it visible through different means such as using
highlighting colors, making a specific type of icon or even placing it front and center.

In our project the visibility design principle is used by showing relevant icons to the user of
the information they desire. It is also used such that the phone they are searching for is
identifiable by the picture of it.

Feedback

Feedback asks the question what and how is it doing now. It is an important part of design
principle as it provides user with the information to the user about the action that is happening
or the result of the action. This tells the user that the program has performed in response to the
user’s input. In our project feedback can be seen when the user press add category or add
product button. It can also be used when they switch from one page to the other or one product
to the other.

10
Affordance.

The question of how one use does it is risen in this design principle. Affordance refers to the
property of an object which indicates how it can be used. The affordance of the object may
differ as per the perceived and the actual properties that give clue to its operation. In the context
of our project, the mobile world web application clearly shows that it is used to view as well
compare the specifications phones. This can be used in various aspects such as comparing the
which phone is better for its price, which is the users preferred phone and which is the better
phone in overall.

Mapping

One of the important part of the design principle is where am I and where can I go. Mapping
shows the relation between controls and the action. Mapping takes advantage of the natural
mapping and the physical analogies and standards that help the user to understand how
somethings can be done or how an action can be carried out. For example, in case of our web
application there are button that are labeled respective to the task they perform such as the
home button on the navigation bar takes the user to the home page, the contact us button takes
the user to the contact information page and similarly the manage button takes the user to the
page where they can manage certain aspects of the page such as adding, editing and deleting
certain categories and products.

Constraint

Why can’t I do that is the question asked by the constraint principle of design? The constraints
are like a barricade or limitation that can be used by an object to prevent the possibilities of
user error or help the users to make fixed and to the point decisions. There are three main types
of constraints as categorized by Norman i.e. physical, logical and cultural. Physical constraints
are the constrains that physically limit the user’s accessibility, the logical constraints as the
name suggests is the limitation that depends of the logical reasoning of the user whereas the
cultural constraints are the cultural norms and values that have been set by cultural groups and
are universally accepted.

The mobile world web application allows only two devices to be compared at a time as to
prevent confusion of the user during the viewing. There is also limitation to how much data is
provided to the users so that they do not get confused more so as a general person doesn’t have

11
much idea of the technology. If in-depth information of the technology is provided to the user
then they might feel get more confused can see problem in that.

Consistency

Consistency design principle makes the user think that he has seen this before by having a
consistent throughout the program. The interface of a program need to be consistent to make it
easier for users to learn and use the system efficiently. There are four types of consistency
namely aesthetic, functional, internal and external. The aesthetics represent the appearance,
functional represents the actions, internal represents the design operations and well-thought-
out plans, and the external represents the operation, interfaces, etc. be same throughout the
program. The mobile world web application has all four types of consistency the aesthetic is
repeated, the function is consistent and well labelled, the internals all operate the same within
the application as well as the external are as per the requirement.

3.2 Selection of usability goals

Clarity

Learnability

Flexibility

Efficiency

Errors

Memorability

Satisfaction

Relevancy

3.3 Competitive analysis

12
4 Prototype and Walkthrough
4.1 Parallel Design
Parallel design is a technique where several groups of designers create an alternative design for
same project. The designers work independently and create different designs from the same set
of requirements. When the designs are finished, the designer group compare their design with
each other. Then they select the best one which is the best to further improve.

Using the parallel design technique, it helps to generate many different ideas and compare
between designs to ensure that the best concept form each design are instigated into the final
solution (usability.gov, n.d.). The advantage of implementing the parallel design technique are
listed below:

• Allows a range of ideas to be generated quickly and cost effectively.

• Parallel nature of the approach allows several approaches to be explored at the same
time, thus compressing the concept development schedule.
• The concepts generated can often be combined so that the final solution benefits from
all ideas proposed.
• Only minimal resources and materials are required to convey product feel.
• The technique can be utilized by those with little or no human factors expertise
(usabilitybok, 2012).

Figure 1: Different Home Page Design

13
In above, there are different design of homepage which are created by our group member.
Before create design, we written a proposal which gives us same information. Then, we started
work with the same list of user needs. We worked independently to generate different ideas
and we get different design from different mind. We didn’t discuss our design with each other
until we haven’t produced our draft design concepts and presented in design workshop. After
creating design, we combine each design and make changes with taking best features from
each.

14
4.2 Participatory Design
Participatory design is an approach to design that attempts to actively involve the end users in
the design process to help ensure that the product designed meets their needs and is usable.

Traditional design projects typically include the paying client and professionals within similar
and related industries; in participatory design, members of the wider community — from the
users who are directly affected by the design, to the local business owners who may be
peripheral to it — are also recognized as legitimate stakeholders with the ability to impact the
project.

The extent of their involvement can range from being passively informed of a project’s
development, to actively sharing roles and responsibilities in decision making. While there may
be times when informing is a necessary part of the process, we believe that real impact is often
made when we intentionally build up a person’s capacity to contribute at higher levels
(Participate In Design, n.d.).

Component of Participatory Design

Figure 2: Components of Participatory Design

15
4.4 Storyboard

Logo Home Contact US Compare Reviews Management

Product Image Product Image Product Image Product Image

Product Name Product Name Product Name Product Name

Footer

Figure 3: Home Page

Product Name and

Product Image
Specification

Product Specification in Details

Figure 4: Product Description

16
 Username:
Password:

Login

Figure 5: Login Page

Add New Product

TH TH TH TH TH TH
Edit
Delete
Edit
Delete
Edit
Delete
Edit
Delete
Edit
Delete

Add New
Category
TH TH
Edit Delete

Edit Delete

Edit Delete

Edit Delete

Edit Delete

Figure 6: Product Management Page by Admin

17
 Add New Product

Device Name:
Display:

Camera:
Battery:

Memory:
System:

Price:

Release Date:

Submit

Figure 7: Add Product Page

Add New Category

Category:

Submit

Figure 8: Add Category Page

18
4.5 Screen Description

Figure 9: Home Page

The above picture is the homepage of mobile world website. Its shows the overall function of
website. In this page, it displays website logo, navigation product and products. The main
purpose of this page is to provide all information about the fictions of website. We create this
page to make easy to interact with user and admin.

Figure 10: Product Management Page

19
In above picture, it shows that the product manages by admin. After login admin, admin can
add the new product and also add the new category. The main purpose of this page is to manage
description of product and add new product.

20
5 Testing of Design
5.1 Formative Evaluation
A formative evaluation is a method for judging the worth of a program while the program
activities are forming. They can be conducted during any phase of the ADDIE process. This
part of the evaluation focuses on the process.

Thus, formative evaluations are basically done on the fly. They permit the designers, learners,
instructors, and managers to monitor how well the instructional goals and objectives are being
met. Its main purpose is to catch deficiencies ASAP so that the proper learning interventions
can take place that allows the learners to master the required skills and knowledge.

In addition, prototyping is used in formative evaluations to test a particular design aspect by

using one or more iterations.

Types of formative evaluation

There are many types of evaluating methods such as observations, interviews, surveys, analysis
etc. which can be a par in the process of formative evaluation. Within the range of formative
evaluation, there are four primary goals for formative evaluation approaches which each of it
will more or less emphasis on the requirement and the objectives of the programming.

1. Planning evaluation.

Planning evaluation simplifies and determines the plans of the project. This involves checking
if the goals and timelines are appropriate. IT checks for the suitability of the goals and timelines
and if the methods implemented to reach the requirements. Furthermore, a planning evaluation
can lay the ground work for the future formative and summative evaluations by developing
indicators.

2. Implementation evaluation

This step concentrates on the focuses on the subject to which a program is proceeding according
to the schedule. Designers can check on their application development of the product I they
find out the team is going out of the scope of development.

21
3. Monitoring evaluation

This action is conducted by external source of evaluation during the time of the development.
The observer may choose to monitor implementation of a conflict resolution project by way of
like going through a workshop, having discussion with the people in the project.

4. Progress evaluation

This determines the progress of the system. The main goals of the system should work as a
benchmark for the purpose of measuring the system progress. Information obtained through
this can be used in a summative evaluation later on.

Home Page
After compiling program, default home page is open as shown in figure below.

Figure 11: Home Page

This is our home page in which it contains the added product. After clicking the product, user
will be get following output.

22
 Figure 12 After clicking product shown in home page

This image shows the specification page of the product which show the detail specification of
selected product. After clicking manage button following page is open.

Figure 13 after clicking manage button in manage page is open

This image shows the manage page where admin can manage the product i.e. add, edit and
delete product specifications and category. After clicking add new category button following
page is open.

23
 Figure 14 Category Page
After clicking add new category button of manage button. New category adding page is open
through which we can add new category as shown below.

24
 Figure 15 after submitting category

Figure 16 after adding new category changes in category table

Figure 17 after clicking edit in add new category button

Figure 18 after clicking updating button

25
Figure 19 after clicking delete button in add new category

26
6 Conclusion
While doing this assignment, our team have wonderful experience of team work and doing
assignment with fun, helping and sharing idea with each other. This assignment helps us to
develop quite good skill in communication skills, documentations, website development in
asp.net and team work skill which will help us the future life in the real work field.

27
References
Participate In Design, n.d. What is participatory design?. [Online]
Available at: http://participateindesign.org/approach/what/
[Accessed 22 June 2018].

usability.gov, n.d. Parallel Design. [Online]

Available at: https://www.usability.gov/how-to-and-tools/methods/parallel-design.html
[Accessed 20 June 2018].

usabilitybok, 2012. Parallel Design. [Online]

Available at: http://www.usabilitybok.org/parallel-design
[Accessed 20 June 2018].

28
Workload Matrix

Student Name Work Percentage Signature

Prasant Maharjan
User Profiling 34%
(NP000087)

Usability Goals and

Saroj Dangol
33%
(NP000093) Competitive Analysis

Prototype and
Roshan Shahi
33%
(NP000091) Walkthrough

29
Marking Scheme

30