INDIVIDUIAL ASSIGNMENT

LORD BUDDHA EDUCATION FOUNDATION

CT026-3.5-2-HCI

HUMAN COMPUTER INTERACTION

NP2F1701IT

HAND OUT DATE: 27 AUGUST 2017

HAND IN DATE: 7 NOVEMBER 2017
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 (cited 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
Table of Contents
1 Introduction ............................................................................................................................. 7
2 Objectives ................................................................................................................................ 7
3 Problem Statement ................................................................................................................... 7
4 Solution.................................................................................................................................... 8
5 User Profiling .......................................................................................................................... 8
5.1 Data gathering methods .................................................................................................... 8
5.1.1 Interview ................................................................................................................... 8
5.1.2 Questionnaires and Surveys ...................................................................................... 9
5.1.3 Observations ............................................................................................................. 9
5.1.4 Focus Groups ............................................................................................................ 9
5.1.5 User profiling process performed ............................................................................. 9
5.1.6 Observation ............................................................................................................. 10
5.1.7 Questionnaire .......................................................................................................... 10
6 Impact of user profiling results .............................................................................................. 11
6.1 Result Analysis ............................................................................................................... 13
7 Task analysis.......................................................................................................................... 18
8 Design Principle .................................................................................................................... 18
8.1 Visibility ......................................................................................................................... 19
8.2 Feedback......................................................................................................................... 19
8.3 Affordance ...................................................................................................................... 20
8.4 Mapping ......................................................................................................................... 21
8.5 Constraint ....................................................................................................................... 21
9 Heuristics and Usability Principle ......................................................................................... 22
10 Usability Goals................................................................................................................... 23
10.1 Efficiency ....................................................................................................................... 23
10.2 Satisfaction ..................................................................................................................... 23
10.3 Learnability .................................................................................................................... 24
10.4 Memorability .................................................................................................................. 24
10.5 Error ............................................................................................................................... 24
11 Competitive Analysis ......................................................................................................... 24
12 Prototype and Walkthrough ............................................................................................... 27
 12.1 Storyboarding ................................................................................................................. 27
12.2 Screens of website .......................................................................................................... 30
13 Parallel Design ................................................................................................................... 35
14 Final Design ....................................................................................................................... 39
15 Participatory Design........................................................................................................... 41
16 Testing of Design ............................................................................................................... 42
16.1 Formative Testing .......................................................................................................... 42
16.1.1 Rapid Feedback ....................................................................................................... 42
16.1.2 Documentation ........................................................................................................ 42
16.1.3 Planning .................................................................................................................. 43
16.2 Categories of formative evaluation ................................................................................ 43
17 Conclusion ......................................................................................................................... 44
References ..................................................................................................................................... 45
Table of Figures
Figure 1: Visibility Example ......................................................................................................... 19
Figure 2: Progress bar ................................................................................................................... 20
Figure 3: Affordance ..................................................................................................................... 20
Figure 4: Constraints ..................................................................................................................... 22
Figure 5:Kathmandu Infosys......................................................................................................... 25
Figure 6:Nepal International Education Consultancy ................................................................... 25
Figure 7: BRP Consultant ............................................................................................................. 26
Figure 8: Main Page ...................................................................................................................... 28
Figure 9: Abroad Studies .............................................................................................................. 29
Figure 10: Training Courses ......................................................................................................... 29
Figure 11: Main Page .................................................................................................................... 30
Figure 12: Parallex Effect ............................................................................................................. 31
Figure 13: Abroad Study............................................................................................................... 32
Figure 14: Hover ........................................................................................................................... 34
Figure 15: Pop-up ......................................................................................................................... 34
Figure 16: Rabina's Design ........................................................................................................... 36
Figure 18: Prakriti’s Design .......................................................................................................... 37
Figure 19: Bijay's Design .............................................................................................................. 38
Figure 20: Final Design ................................................................................................................ 39
 ABSTRACT
This project report is prepared for the partial fulfillment of the requirement for the degree of
BSc.IT in accordance to the rules and regulations prescribed by Asia Pacific University. So,
I would like to express my heartfelt gratitude to APU for providing me an opportunity to
apply my theoretical knowledge into the practical world enhances our knowledge.
Our sincere gratitude goes to College for Professional Studies Lord Buddha Education
Foundation for providing us with learning environment and facilities without which this
project would have been impossible to complete. We would like to thank all the faculty
members, program coordinators and group member for their constant supervision and
support.
A special gratitude we give to our project guide and faculty teacher Mr. Roshan Tandulkar,
whose contribution in simultaneous suggestions and encouragement, helped us to coordinate
and built our project.
Sincerely,
Rabina Bhattarai (NP000050)
Prakrity Neupane (NP000048)
Bijay Kumar Shrestha (NP000025)
 ABSTRACT
As per the prescription of the syllabus of BSc.IT 3rd semester according to Asia Pacific University
(APU), it provides students like us an opportunity to put forward the knowledge we acquire in a
practical term and enhance our technical skill. This is fulfilled by the curriculum of syllabus
prescribed by Asia Pacific University (APU). Here, we are assigned to build a system with good
interface design. We have chosen to build website of consultancy. This project will give us the
good interface design of “BRP Consultant” with its fluent function.
This project is a challenging project would not possible without constant support of LBEF faculty
member and a good coordination of team member. We would like to express a heart full thank to
Asia Pacific University as well As LORD BUDDHA EDUCATION FOUNDATION for
providing us such a golden opportunity to explore our knowledge in a practical way. We have got
a chance to sharpen our mind and our skill in this project.
1 Introduction
A BRP consultancy is a consultant agency or student-service oriented company that provides
services to the students for the abroad study. BRP consultancy provides opportunity for
student to continue their education in various countries, as per student's qualification, need
and interest. In addition to full filling students demand, it provides best suggestion to the
students. It has list of countries and each countries has its top rated university in a link of this
consultancy. Hence, BRP provides number of choice and more broad option to the students.
All the related tests, exams and other information’s are showed clearly. Overall, BRP guided
the journey from Nepal to other country for students regarding their study.

These all information’s are hard to maintain to all the students throughout the country.so to
minimize the working and information of BRP consultant, and to make their task more easy
our group had come up with an idea of developing a website of BRP consultancy. Which is
made through html/css using Dreamweaver software.

2 Objectives
The overall objective of this BRP consultancy website are:

 To provide a sufficient and easy access to the information and various action related
to the consultancy.
 To be well informed about the university details, classes, test, etc.
 Problem regarding confusion will be less.
 Student can easily see test routines, see classes’ hour and can receive important study
material via this site.

3 Problem Statement
Some of problem statements because of which we have come up with this website as a solution
are:

 Location and the contacts of the consultancy is unknown

 There is a problem of limited information.
 Lack of clients to consultancy.
  Training courses information is not clear.
 The wider option of choices.
 No any idea about the courses that they are going to learn.

4 Solution
To make a website using the concept of Human Computer Interaction by taking as per the
result of user profiling. As per the main visitors of our website we are going to create it such
that it would be easy for user to use and even a non-technical user will be able to use it easily
with the addition of training courses, wider option of choices, idea of the courses they are
going to learn, more varieties of required information etc.

5 User Profiling
User Profiling can be defined as the process of identifying the data about a user interest
domain. This information can be used by the system to understand more about user and this
knowledge can be further used for enhancing the retrieval for providing satisfaction to the
user. User profiling has two important aspects as efficiently knowing user and based on those
recommending items of his interest.

5.1 Data gathering methods

5.1.1 Interview
An interview is a formal meeting at which someone is asked questions in order to find out if
they are suitable for a job or anything. Conducting interviews can us to overcome most of the
shortfalls of the other data collection techniques by allowing us to build a deeper understanding
of the thinking behind the respondents’ answers. We have chosen interview for data gathering
because:

 Interviews help us to uncover rich, deep insight and learn information which we may
have missed otherwise.
 The presence of an interviewer can give the respondents additional comfort while
answering the questionnaire and ensure correct interpretation of the questions.
 The physical presence of a persistent, well-trained interviewer can significantly
improve the response rate which could help us to know exactly about how users will
 feel good what should be added to the site or how it should be designed so that the users
will be able to use and understand easily. (Anon., n.d.)

5.1.2 Questionnaires and Surveys

A questionnaire is a research instrument consisting of a series of questions and other prompts
for the purpose of gathering information from respondents. A survey is a data gathering method
that is utilized to collect, analyze and interpret the views of a group of people from a target
population. Questionnaires Data can be collected relatively quickly because the researcher
would not need to be present when the questionnaires were completed.

 Responses can be analyzed with quantitative methods by assigning numerical values to

Likert-type scales
 Results are generally easier (than qualitative techniques) to analyze
 Pretest/Posttest can be compared and analyzed

5.1.3 Observations
It is the action or process of closely observing or monitoring something or someone.

 It allows for the study of the dynamics of a situation, frequency counts of target
behaviors, or other behaviors as indicated by needs of the evaluation
 It is a good source for providing additional information about a particular group, can
use video to provide documentation

5.1.4 Focus Groups

It is a facilitated group interview with individuals that have something in common it help
us to gathers information about combined perspectives and opinions. Responses here are
often coded into categories and analyzed thematically.

5.1.5 User profiling process performed

User Profiling can be defined as the process of identifying the data about a user interest
domain. This information can be used by the system to understand more about user and
this knowledge can be further used for enhancing the retrieval and for providing
satisfaction to the user. (Anon., n.d.)
5.1.6 Observation
Seeing is believing, they say. Making direct observations, when the situation allows for it, was
a very quick and effective way of collecting data with minimal intrusion for us. So establishing
the right mechanism for making the observation was all we need. By observing a consultancy
website we were able to know the problems in user interface of the website. We have chosen
observation method for data gathering because:

 It was not as time-consuming as the other methods.

 Infrastructure requirement and preparation time needed was minimal as we could
access the website easily. (Anon., n.d.)

5.1.7 Questionnaire
It is a list of questions, usually printed, submitted for replies that can be analyzed for usable
information. We have chosen questionnaire because:

 It was Practical.
 We were able to collect large amounts of information from a large number of people in
a short period of time and in a relatively cost effective way.
 It provides a relatively cheap, quick and efficient way of obtaining large amounts of
information from a large sample of people.
 We were able to carry it out by the researcher or by any number of people with limited
affect to its validity and reliability.
 The results of the questionnaires was usually quick and was easily quantified by either
a researcher or through the use of a software package.
 We were able to analyze the research more 'scientifically' and objectively than other
forms of research
 When data was quantified, we were able to use it to compare and contrast other research
and used to measure change. (Anon., n.d.)
6 Impact of user profiling results
The questions on questionnaire were:

1. Reading characters on the screen

Hard

Easy

2. Information of the Organization

Confusing

Very Clear

3. Sequence of screens
Confusing

Very Clear

4. Location and the contacts of the place is easy to find

Yes

No

5. Position of messages on screen

Inconsistent

Consistent

6. Prompts for input

Confusing

Clear

7. Error messages
Unhelpful

Helpful
8. Performing tasks is straightforward
Never

Always

9. System speed
Too slow

Fast enough

10. System reliability

Unreliable

Reliable

11. Designed for all levels of users

No

Yes

12. Training courses information is clear.

Yes
No
13. The wider option of choices.
Yes
No
14. Idea about the courses that you are going to learn.
Yes
No
6.1 Result Analysis
Result Analysis is the process or method of studying the nature of something or of determining its
essential features and their relations. We conducted questionnaire with students who are willing to
go abroad for further studies. From the questionnaire we were able to know the place where we
can fix the user Interface. (Anon., n.d.)

1. Reading characters on the screen

Hard Easy

2. Information of the Organization

confusing Clear

3. The result of question Sequence of screens is

confusing Clear
4. Location and the contacts of the place is easy to find

No yes

5. The result of Use of terms throughout system

Inconsistent consistent

6. Prompts for input

confusing clear
7. Error messages

Unhelpful Helpful

8. Performing tasks is straightforward

Never Always

9. System speed

Too slow Fast Enough

10. System reliability

Unreliable Reliable

11. Designed for all levels of users

yes No

12. Training courses information is clear.

No Yes
13. The wider option of choices.

No Yes

14. Idea about the courses that you are going to learn.

No Yes
7 Task analysis
Task analysis is the process of learning about ordinary users by observing them in action to
understand in detail how they perform their tasks and achieve their intended goals. Tasks
analysis help us to identify the tasks that our consultancy website and applications must support
and also help us refine or re-define our site’s navigation or search by determining the
appropriate content scope. We conducted task analysis because it help us to know:

 What our users’ goals are; what they are trying to achieve
 What users actually do to achieve those goals
 What experiences (personal, social, and cultural) users bring to the tasks
 How users are influenced by their physical environment
 How users’ previous knowledge and experience influence:
How they think about their work &
The workflow they follow to perform their tasks (Anon., n.d.)
In this project we have used Hierarchical task analysis. It is a structured, objective approach to
describing users’ performance of tasks, hierarchical task analysis originated in human factors.
In its most basic form, a hierarchical task analysis could provide us an understanding of the
tasks users need to perform to achieve certain goals. In hierarchical task analysis, we can easily
break down these tasks into multiple levels of subtasks. The main advantage we got from using
hierarchical task analysis was, it served as an effective form of system documentation, enabling
us to rapidly understand how users interact with a system. As software engineers are all too
aware, the intimate familiarity we have gained with why users do something in a certain way
can quickly fade in just a few days or weeks. A hierarchical task analysis is an effective means
of capturing this information. (Anon., n.d.)

8 Design Principle
We know that every web site should be design in a way, such that the web-site become
more fundamental, widely applicable, and enduring. Our website of ‘BRP Consultant’
is also made in a way meet that design. In order to meet that goal, WE have gone through
some design principle, which are explained below:
8.1 Visibility
One of the most important design principles is visibility. Term “Visibility” answers
the question “Who can see it?” Visibility can be achieved by placing the controls in
a highly visible location. Designing for visibility means that just by looking, users
can see the possibilities for action. It means it guides the user to operate it just as per
it looks. Visibility is often violated in order to make things "look good”. Visibility
should follow both “Good look” and “Good guide of operation through its
appearance”.

Figure 1: Visibility Example

Here, on the above page of our site. There are different menu like Home, About Us,
etc. By just looking at those menu user understands about “How the operation should
be carry out”. Menu itself is titled such that, user can clearly understand about where
these menu will redirect us. For example: Here in our website, if we clicked menu
“Trained”, we will be redirected to the information. Web page with different menu and
flow of our website is design in such a way that it will guide the user and gives clearly
idea about how to use it.
8.2 Feedback
Term “Feedback” answers the question “What and how is it doing?” Feedback is the
provision of information to a user about the result of an action. When feedback is used
in design, the system tells the user that it has done something in response to the user's
input.
 Figure 2: Progress bar
The above shown figure is of progress bar. This shows how the site is responding as a
current functioning to the user’s input.
8.3 Affordance
Term “Affordance” answers “How do I use it”. It is related to “visibility”. Affordance
is the properties of an object that indicate how it can be used. Affordance Perceived
and actual properties of an object that give clues to its operation. There are basically
two types of affordance: Physical affordance and Logical (Virtual) affordance.
Physical affordance is all about how the properties of those physical objects afford for
the users to use it whereas Logical affordance shows how the screen objects affords
and how the icons work. Since we have made web-site, we have followed the logical
affordance in order to follow good designing principles.

Figure 3: Affordance

In the above figure, the icons of “Facebook”, “Twitter” and “Google” simply shows
how they afford and how they work. Simply by seeing this properties we can be clear
that how these screen icons afford.
8.4 Mapping
Term “Mapping” answers “Where am I and where can I go”. Mapping is the
relationship between controls and their action or effect in the world. Natural mapping
takes advantage of physical analogies and cultural standards to provide the user with
an understanding of how something works. It shows how the items can be arranged
in correct map and order such that user can use it in much effective and efficient way.
Here, in our website we have arranged all flow properly in a good order such that
user can have clear visibility and usability as a result will have good “MAPPING”.
8.5 Constraint
Term “constraints” answers “Why can’t I do that?” It means restricting the possible
actions that can be performed helps prevent user from selecting incorrect options.
Constraints are properties of an object that limit the ways in which it can be used.
When constraints are used in design, we reduce the possibility of users making errors.
For example: Jigsaws puzzle pieces utilize shape as well as the printed picture/pattern
to provide constraints. Three main types to represent constraints: (Norman, 1999).
 Physical
 Logical
 Cultural
Physical constraints are follow on the way that device can be fitted only in a perfect
way. Like: Floppy disk. As we are developing web site we are following logical
constraints. We have design in such a way that for several operational function there
are only perfect ways that are easily recognized. Such that users are prevented from
using incorrect options.
Figure 4: Constraints

Here, in above figure the training menus are organized in such a way that users are
restricted to choose other option. We can see each menus are on bigger area with wider
space, such that when users goes for one menu there won’t be cause of choosing wrong
menu.

9 Heuristics and Usability Principle

These are ten general principles for user interface design. They are termed as "heuristics" because
they are more on the nature of rules of thumb rather than specifying usability guidelines developed
by Nielsen (2005). They are:

1. Visibility of system status: - the system should always keep informing users about what
is going on, by providing appropriate feedback within reasonable time.
2. Match between system and the real world: - Using the users’ language, words, phrases
and concepts which are familiar to the user, rather that system oriented terms.
3. User control and freedom;- To provide ways of allowing users to easily escape or go out
from places they unexpectedly find themselves, by using clearly mentioned emergency
exits.
4. Consistency and standards; - Avoid making users confuse about whether different words,
situations, or actions mean the same thing or different.
 5. Help users recognize, diagnose and recover from errors;-Use plain language to explain
the nature of the problem and also suggest some ways of solving those problems.
6. Error prevention; -Prevent errors from occurring in the first place, where ever possible.
7. Recognition rather than recall; - Make objects, actions and options visible.
8. Flexibility and efficiency of use; - Provide accelerators which are invisible for novice
users, but always allow more experienced/expert users to carry out those tasks quickly.
9. Aesthetic and minimalist design:-Avoid using information which is irrelevant or is rarely
needed.
10. Help and documentation:-Provide information which can be easily searched and which
will provides help in set a set of concrete steps which can be easily followed.

10 Usability Goals
Usability goal is meeting the goal, which will facilitate the users in a perfect way. Not only a
good designing principal will result to a good website. For our web site to be more usable
and more attractive to users we have taken into consideration all the five usability goals. Here
is how we are going to meet them:

10.1 Efficiency
Term “Efficiency” refers to the “Steady-State performance of expert users”. Efficiency
analyzes the user’s ability to quickly perform task once they came to know about
designing and information flow. Website should be accurate in information flow.
Website should not only be attractive and informative, but is should be able to process
fluently. Our website is a fluent, expert users can easily operate it. Hence, website of
“BRP Consultant” successfully meets the “Efficiency” goal.
10.2 Satisfaction
Term “Satisfaction” refers to the “How satisfied the visitor was with the process of
completing the task”. Satisfaction is not about own part, It is a good combination of
all part. A good design principle, “Accuracy”, “Speed”, interactive design etc. reaches
the all requirement as a result the system will be able to satisfy user. We have gone
through asking the users about subjective opinion (questionnaire, interview), before
building our website.
10.3 Learnability
Term “Learnability” refers to the “ease of learning for novice users”. It explains how easy
is it for a user to operate basic tasks when they interact with your product for the first time.
Do they struggle with a particular piece? Does the user get frustrated/confused with how
to operate this part? A good “Visibility” always serves better “Learnability”. As our
website has good visibility, any novice users does not have to struggle to accomplish any
task or to get operated through website.

10.4 Memorability
Term “Memorability” refers to the “ease of using system intermittently for casual users.” If
a user have to spend some time away from our website and then return to it, how quickly
can they reestablish proficiency? If the design is intuitive then the relearning time will be
small. Our website is designed in a way that even if users have to stay away for some day
and return to our website, they can easily memorize the task functioning and operation of
our website.

10.5 Error
Term “Error” refers to “error rate for minor and catastrophic errors”. This are all about
tracking how many errors do users make, how common are these errors, and how easily can
they recover from the errors. These all things can helps to determine the pain points within
the design. BRP Consultant yet does not have any error, it is an error free website.

(SIE, 2015)

11 Competitive Analysis
Competitive analysis is all about comparing the strength and weakness of the same service
in the system. As we know to survive on market, every system should be able to beat up
competitors. This analysis will help you to identify how uniquely you can offer the same
service as offered by you competitors and survive in the market place hence making
profit.
So, as per current market, we have done competitive analysis with two competitor
“Kathmandu Infosys” and “Nepal International Education Consultancy”.
Figure 5:Kathmandu Infosys

Figure 6:Nepal International Education Consultancy

Figure 7: BRP Consultant

Above pictures are of BRP Consultant and other two websites with which comparison is done.
And competitive analysis based on various factor are explained below:

Name of BRP Kathmandu Nepal

Consultancy consultant Infosys International
Education
Consultancy
Visibility   

Affordance   

Constraint   
Feedback   
Mapping   
Enough   
information
flow
Learnability   
(Anon., 2017)
12 Prototype and Walkthrough
Prototype is a first or preliminary version of a device or vehicle from which other forms are
developed.

There are two type of prototypes which are:

Low-fidelity prototype: It is a prototype that is sketchy and incomplete, that has some
characteristics of the target product but is otherwise simple, usually in order to quickly produce
the prototype and test broad concepts. Storyboarding is an example of low-fidelity prototype.

High-Fidelity Prototype: It is an interactive prototype that simulates the real system or site's
functionality and design details.

12.1 Storyboarding
A storyboard is the blueprint for a web project. It can be used to display the elements on a single
web page like images, banners, navigation, graphics elements and texts because of this it is a
simple and flexible tool to display all of this things.

There are some purposes of a website storyboard

 It serves as an outline of the design approach

 It defines the elements that need to go on each page
 It shows the overall flow and the navigation structure of how the website is work on
different pages of it. (Anon., n.d.)
Figure 8: Main Page

This is the first page of the website where the 70 percent of the content is covered other 30 percent
comes in 2 pages.
Figure 9: Abroad Studies

This is the page where there will be the information about the countries and inside it there is the
link which will directs us to the universities available in that country.

Figure 10: Training Courses

This is the Training Courses page where there will be the information about the tests and courses
like GMAT, there is also the information about the course, fee and the time schedule.

Why we used Storyboard?

 This has saved the time while designing and researching about the research
 The concept can be added easily
 Helps to understand the navigation of the website

12.2 Screens of website

Figure 11: Main Page

The first page of the website contains most of the contents like it has got the Home, about us,
Contact Us and finally the Faculties so it looks big but using the menu link scrolling method it will
help to scroll to the content that you want to go with just a click. The background of the website
on the home menu is sliding itself, the main purpose of this is not only to show the uniqueness and
the attractiveness of the website but also to share the information of your company’s work that
what you do and where are you connected to. There is also a new trending effect which is called
“Parallex Effect” using which the scrolling of the website is very smooth or you can say that the
user will enjoy to scroll the website when they use it and love it, while other website does have the
good things but with this effect of scrolling the user will be most satisfied and enjoy using this
website. Above is parallex effect we used in our website.

Figure 12: Parallex Effect

Figure 13: Abroad Study

This is the page for the abroad study about the countries information, here we can see there is no
any special effect, it is simple and has informatics things in it, it also have the links with which it
will directs you to the further information about the universities available in that following country.
The main purpose of this page is to provide the information as much as possible for the visitors
who visits this site.

This is the page where the information of the courses and the trainings that are provide in the
consultancy is shown, it has the link that will directs us to the other page which has the more
information regarding the course’s and the training’s schedule, its benefits and also the fees. It
does have the hover effect, if you hover your mouse over any of the image then it will give the
information on the above of that picture, which will help to know about the basic information about
the content you are going to click. If you click the image after that hover then it will show you the
pop-up information of that course or the training. On the bottom of that there is a button using
which you can go for the further information about the courses and the trainings.
Figure 14: Hover

This is how it looks when you hover your mouse cursor over the image. And if you click it then it
will show a pop-up which is shown in the below figure.

Figure 15: Pop-up

This is the contact us section where you can see the mail, phone-no and also the location alongside
with the comment box where you can send your message and feedbacks to the admin. It has also
the map using which it will help us to locate our place easily.

This is the Footer of the website, it has the logo on the top left which has the link that will get you
to the main menu. In the right top there is some icons of the social sites. Then in the center of this
there is another navigation bar which works as same as the main navigation bar on the main menu.
Underneath that on the bottom there is the copyright and on the right bottom there is a up-arrow
icon using which you can go to the top of this webpage with just a click on it.

13 Parallel Design
Parallel design is the type of design technique with which developers create an initial design from
the same set of requirements. The members of the designers do their work and when it is finished
then they share their concepts with the group members. Then after the concepts has been shared
then the design team will choose one best concept and will add more ideas to further improve their
own solution. (Anon., 2017)
Here are some of the benefits of implementing the parallel design method in the project

 The ideas can be generated cost effectively and quickly

 More ideas can be generated with the independence of thinking
 Because of all the concepts and idea is purposed the final solution may get benefited

These are the designs that we our group members have done during the designing of this site.

Figure 16: Rabina's Design

This design consists of the normal website layout, it has the navigation bar on the top alongside
with the logo and in the center there is the main content with the picture and there is also side
contents. In the bottom of the page there is footer with the icons of some social sites.
Figure 17: Prakriti’s Design

In this design there is a change in the design of the page, as you can see there is the full background
of image for only the upper part. Over the background image there is also the same things like in
the top left there is the logo and in the center of that section there is navigation bar, there is also a
button with which it will directs us to the next page. In the center of the page after that background
image section there is another section where there is the pictures of the people or some objects
with the description of it. In the footer she has also the same concept of doing the same design,
there is are some icons of the social sites.
Figure 18: Bijay's Design

This is the last design concept by Bijay, in this concept of designing the site he has the same
concept as the previous one (Prakrity’s), but there is also some changes or we can say that this one
is the modified version of the Prakrity’s concept. In this concept in the background here is an image
slider with which the image will slide and different information is shown. Talking about the
navigation bar and the logo they are both on the top of the website. After the first section there is
a small description of the company or the person where there is the place for the picture and there
is also the place where we can add the information and texts. After that there is the concept of
having the information address of the company with the feedback form on the right side. On the
bottom there is also footer part about the copyrights and the icons of the social sites.
14 Final Design

Figure 19: Final Design

After analyzing all the concepts of the member we finally get to this result. Here we have
implemented the idea of the background image slider and the contents alongside we also add the
new trending design which is the parallex effect. For this final design we went to some research
and we focused on some of the following design principle so that the user can easily use this
website.

These are some design principles that we have used in our website design:

 Visibility
 Feedback
 Consistency

Using the parallel design we also came to have some benefits, those are as follows:

 Helped to generate the idea quickly

 Every member’s concepts were unique
 It has helped to reduce the time for the final design of the site
 Then in the end it helped to think about the new trending effects in the website after the
discussion
15 Participatory Design
Participatory design is the completely new approach to designing products which can successfully
involve the stakeholders, designers, researchers and end-users in the design process to make it sure
that their won’t be any need that the end product’s needs is meet of its proposed user base. It can
be used in different fields like in software and product design, urban architecture, graphic design
and even in the field of medicine. It will also help to better understand how people will think about
a given problem, discipline or a technology. If you ever feel that there should be something or
there could be, any cultural or political disconnect between the end user and you then for the best
technique this will the best way to observe and learn from the user.

Hence the participatory design is the best opportunity for all the researchers and the designers to
interact with the end-user. The end-user are invited to their place and can also enter their creative
ideas processes and also by listening to them. With this type of technique we can avoid the chances
of making the mistakes we often used to make as a result of designing for ourselves instead of
designing for the user. (Anic, 2015)
16 Testing of Design
After the website is developed it is tested against the requirements to make sure that the product is
actually solving the needs addressed or to test whether the system is working properly. Interface
design is tested. Testing includes testing of code, design, system flow, etc. After we perform
testing, system is always ready to implement in real time system.

(Anon., 2017)

16.1 Formative Testing

Formative evaluation is done in order to help designers refine and reform their designs. The focus
of formative evaluation/testing is to identify problems and potential solutions. In this type of
evaluation/testing the desired result is just not an overall (summary) usability score, but pointers
to problems, maybe with indications as to the problem's frequency of occurrence -- to help the
designer aware about which problems to concentrate on. This method of evaluation and testing
covers a wide area of design from the very beginning of the development of a system which leads
to get the perfect and final working solution and to continue maintaining the product.

So, some of the key roles of formative testing are:

16.1.1 Rapid Feedback

During the continuation of project, Rapid feedback involves the feedback on development
of application. It provides continuous feedback on systems efficiency, it’s working on
conflict management and on its resolution. Such that the systems overall working can be
improved resulting better efficiency.

16.1.2 Documentation

A formative testing process can document about the system of how an application is
progressing in its development, the techniques used in system and impact made in
beginning of system and middle sections of whole work. It can be used to review progress
of development of documentation. Such that we can afford better documentation.
16.1.3 Planning

Formative evaluation/testing helps on planning and allow for revision of our recommitment
to plans. When a formative evaluation process identifies that the application has been going
out of scope, the people who are in charge of work will be revising their plans in order to
continue with new addition. Such that better plan can be implemented for better result.
Types of Formative Evaluation
There are many types of evaluation methods such as observations, surveys, interviews,
analysis etc. which are known as formative evaluation. So, some categories of formative
evaluation are shown below:

16.2 Categories of formative evaluation

Clarificative Interactive Proactive Monitoring
When Project Project Pre-project Project
development implementation implementation
Why To make the To improve the To understand or To ensure that the
clear theory of project design clarify the need of project activities are
change that the (continual project being delivered
project is based improvement) as efficiently and
on. it is rolled out. effectively.
Examples:  Log  Semi  Literature  Budget
frame structured review tracking
matrix interview  Stakeholder  Time tracking
 Program  Project Analysis  Questionnaire
logic diary  Observation

Formative evaluation often lends itself to qualitative methods of inquiry. The questions asked
during formative evaluation are generally more open and they leads to exploration of processes,
both from the viewpoint of participants. Thus, implementing the “Formative Evaluation” in our
website has contributed to make our website look and function better. (Anon., 2010)
17 Conclusion
Hence, we have design simple compatible and functional websites that will make users easy
and fast to access the information in the website. It’s about creating an online experience that
treats student as a visitor and visitor as a student. We had done this project as per the users
need and criteria such that the business of consultancy and its standard will be increased. It
will be serving online making the administration of BRP consultancy much more flexible with
the extensive profit with the better concept of user Interface and Human Computer Interaction.
References
Anic, I., 2015. UX Passion. [Online]
Available at: https://www.uxpassion.com/blog/participatory-design-what-makes-it-great/
[Accessed 16 10 2017].
Anic, I., 2015. UX Passion. [Online]
Available at: https://www.uxpassion.com/blog/participatory-design-what-makes-it-great/
[Accessed 09 09 2017].
Anon., 2010. Evaluation Toolbox. [Online]
Available at:
http://evaluationtoolbox.net.au/index.php?option=com_content&view=article&id=24&Itemid=1
25
[Accessed 05 11 2017].
Anon., 2013. [Online]
Available at: https://www.usability.gov/get-involved/blog/2013/09/measurable-usability-
goals.html
[Accessed 09 09 2017].
Anon., 2017. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/parallel-design.html
[Accessed 10 10 2017].
Anon., 2017. Competitor Analysis. [Online]
Available at: http://wps.prenhall.com/bp_turban_introec_3/167/42819/10961833.cw/index.html
[Accessed 26 10 2017].
Anon., 2017. ISTQB exam certification. [Online]
Available at: http://istqbexamcertification.com/what-are-the-software-development-life-cycle-
sdlc-phases/
[Accessed 05 11 2017].
Anon., 2017. usability.gov. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/parallel-design.html
[Accessed 15 10 2017].
Anon., n.d. arxiv. [Online]
Available at: https://arxiv.org/ftp/arxiv/papers/1503/1503.07474.pdf
Anon., n.d. arxiv.org. [Online]
Available at: https://arxiv.org/ftp/arxiv/papers/1503/1503.07474.pdf
Anon., n.d. cyfar.org. [Online]
Available at: https://cyfar.org/data-collection-techniques
Anon., n.d. di-srv.unisa.it. [Online]
Available at: http://www.di-
srv.unisa.it/~delmal/research/usability/VisualHarmony/UsabilityStudy/QUIS_CSQU.pdf
Anon., n.d. di-srv.unista.it. [Online]
Available at: http://www.di-
srv.unisa.it/~delmal/research/usability/VisualHarmony/UsabilityStudy/QUIS_CSQU.pdf
Anon., n.d. libweb.surrey. [Online]
Available at:
http://libweb.surrey.ac.uk/library/skills/Introduction%20to%20Research%20and%20Managing%
20Information%20Leicester/page_51.htm
Anon., n.d. libweb.surrey. [Online]
Available at:
http://libweb.surrey.ac.uk/library/skills/Introduction%20to%20Research%20and%20Managing%
20Information%20Leicester/page_51.htm
Anon., n.d. researchgate. [Online]
Available at: https://www.researchgate.net/figure/4372290_fig2_Fig-2-The-user-profiling-
process
Anon., n.d. sociocops.com. [Online]
Available at: https://blog.socialcops.com/academy/resources/4-data-collection-techniques-ones-
right/
Anon., n.d. usability.gov. [Online]
Available at: https://www.usability.gov/how-to-and-tools/methods/task-analysis.html
Anon., n.d. uxmatters.com. [Online]
Available at: https://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php
Anon., n.d. wsu. [Online]
Available at: https://public.wsu.edu/~ericsson/story_bd.html
[Accessed 2017].
SIE, C. D., 2015. CHRIS DA SIE. [Online]
Available at: http://www.chrisdasie.com/myposts/5-components-of-usability
[Accessed 15 09 2017].
Marking Scheme

Group Marks (30%) Done by All

Testing of Design 20
Formative Testing
Overall achievement of the learning outcome: 10
Understanding of the overall HCI consideration for
the project

User Profiling Marks (70%) Prakriti Neupane

(NP000048)
Research and References: 20
Use of research to support decision making
(appropriate use of citations and references)
Critical Discussion and Application of User 50
Requirements:
To include
 the selection of data gathering methods
 the actual user profiling process performed
 the impact of user profiling results
 task analysis

Usability Goals and Competitive Analysis Marks (70%) Rabina

Bhattarai
(NP000050)
Research and References: 20
Use of research to support decision making
(appropriate use of citations and references)
Critical Discussion and Application: 50
To include
 the selection of design principles
 the selection of usability goals
 competitive analysis
Prototype and Walkthrough Marks (70%) Bijay Kumar
Shrestha
(NP000025)
Research and References: 20
Use of research to support decision making
(appropriate use of citations and references)
Critical Discussion and Application: 50
To include
 storyboarding
 each screen purpose and strategy behind its
design
 peer to peer evaluation (parallel design),
participatory design and their impact on the
design
Workload Matrix
SN Student Name Work percent Signature
1. Bijay Kumar Shrestha 36%
(NP000025)
2. Rabina Bhattarai 32%
(NP000050)
3. Prakriti Neupane 32%
(NP000048)