NP000194-NP000200-NP000203 - (Ct026-3-2-Hci)
NP000194-NP000200-NP000203 - (Ct026-3-2-Hci)
GROUP ASSINMNET
CT026-3-2
HUMAN COMPUTER INTERACTION
NP2F1901IT
2. Students are advised to underpin their answers with the use of references (Cited
using the Harvard Name System of referencing).
3. Late submissions will be awarded zero (0) unless extenuating Circumstances (EC)
are upheld.
6. Where the assignment should be submitted in both hard copy 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.
Approved by:
We are much great full towards Mr. Prem Kumar Vaskar who was our Human Computer
Interaction teacher who taught and provided us all the necessary materials that assist on
finishing this project. Also, thanks to Lord Buddha Education Foundation and Asia
Pacific University of Technology and Innovation for providing us opportunity to extend
our knowledge base on web technology and computing and IT field.
We are immensely thankful to each other of the team members because of the intimacy we
shown to each other, and the co-operation we maintained was remarkable.
Table of Contents
1. Introduction.........................................................................................................................1
1.1 Objective......................................................................................................................1
2. Problem Statement.................................................................................................................2
3. User requirement....................................................................................................................3
3.1 User Profiling/ Stakeholder Analysis...............................................................................3
3.2 Data gathering..................................................................................................................3
3.2.1 Data collection methods.............................................................................................3
3.2.2 Choosing Data Gathering method..............................................................................5
3.2.3 Impacts of user profiling results................................................................................8
3.3 Task Analysis.................................................................................................................23
4. Usability Goals and Competitive Analysis..........................................................................25
4.1. Design principles...........................................................................................................26
4.2. Competitive Analysis....................................................................................................28
5. Prototype and Walkthrough.................................................................................................30
5.1. Storyboarding................................................................................................................30
5.2. Screen purpose and Strategy.........................................................................................35
5.2.1 Screen of website.....................................................................................................36
5.3. Parallel Design...............................................................................................................41
5.4. Participatory Design......................................................................................................43
5.4.1 Impact of Design......................................................................................................43
6. Testing of Design.................................................................................................................44
6.1 Card Sorting....................................................................................................................45
6.1.1 Benefits of card sorting:...........................................................................................45
6.2 Usability Testing............................................................................................................45
6.2.1 Why is usability testing important?.........................................................................46
6.3 Formative Testing...........................................................................................................46
6.3.1 Rapid Feedback........................................................................................................46
6.3.2 Documentation.........................................................................................................47
6.3.3 Planning...................................................................................................................47
6.4 Formative Evaluation.....................................................................................................47
7. Conclusion...........................................................................................................................48
8. References............................................................................................................................51
List of Table
Table 1........................................................................................................................................8
Table 2........................................................................................................................................9
Table 3......................................................................................................................................10
Table 4......................................................................................................................................11
Table 5......................................................................................................................................12
Table 6......................................................................................................................................13
Table 7......................................................................................................................................14
List of Figures
Figure 1 Pie chart for question 1................................................................................................8
Figure 2 Pie chart for question 2................................................................................................9
Figure 3 Pie chart for question 3..............................................................................................10
Figure 4 Pie chart for question 4..............................................................................................11
Figure 5 Pie chart for question 5..............................................................................................12
Figure 6 Pie chart for question 6..............................................................................................13
Figure 7 Pie chart for question 7..............................................................................................14
Figure 8 Hierarchical task analysis – graphical view...............................................................24
Figure 9 Audi Lighting.............................................................................................................28
Figure 10 BUICK.....................................................................................................................28
Figure 11 Competitive Analysis...............................................................................................29
Figure 12 Sign in page.............................................................................................................31
Figure 13 Sign Up page............................................................................................................32
Figure 14 Home Page...............................................................................................................33
Figure 15 About Us..................................................................................................................34
Figure 16 Navigation................................................................................................................35
Figure 17 Main Page................................................................................................................36
Figure 18 Welcome page.........................................................................................................37
Figure 19 Home Page...............................................................................................................38
Figure 20 About Us..................................................................................................................38
Figure 21 Our services.............................................................................................................39
Figure 22 Our stock..................................................................................................................39
Figure 23 Contact Details.........................................................................................................40
Figure 24 Footer.......................................................................................................................40
Figure 25 Design 1Bhumika Design........................................................................................42
Figure 26 Design 2 Nisha Design............................................................................................42
Figure 27 Design 3 Rinku Design............................................................................................43
Figure 28 Testing Design.........................................................................................................44
Figure 29 Gantt Chart of Tasks................................................................................................49
Figure 30 Gantt Chart of Timeline...........................................................................................50
1. Introduction
“Human Computer Interaction (HCI) is a multidisciplinary practice that focuses on both the
interaction between the user (humans) and the computer as well as the design of the computer
interface. Originally, HCI focused primarily on computers, but since then has expanded to
include almost all variations of information technology design after the emergence of
personal computers in the late 1970s”[ CITATION Kim19 \l 1033 ].
At first, Gerald Salven Volkswagen began as a battling plane motor organization, in the long
run progressing into one of the most notable extravagance vehicle makers on the planet.
Since its commencement, Gerald Salven Volkswagen has endured wars that pushed different
producers to the brink of collapse. In 1916 the organization was recognized as a producer of
airplane motors that it delivered since 1917 until 1918 and then again from 1933 to 1945.
Under the brands Gerald Salven Volkswagen autos are encouraged, Mini and Rolls-Royce,
and bikes are showcased under the brand Gerald Salven Volkswagen Motored. In 2015,
Gerald Salven Volkswagen was the world's twelfth-biggest maker of engine vehicles, with
2,279,503 vehicles produced. The headquarter of Gerald Salven Volkswagen is in Mumbai
and produces engine vehicles in China, India, Germany, Brazil, UK, and US. Gerald Salven
Volkswagen is having a huge motorsport history in sports autos, visiting vehicles.
1.1Objective
The main objectives of the project are:
- To create an interactive web portal of Motor vehicle information system.
- To categorize and summarize information of vehicles as per user requirements.
2. Problem Statement
As per the design and human interaction to the older web portals there are lots of issues
related to human health, compatibility, color combination and usability. No small business
should be expected to manage, oversee and keep up their site without progressing support.
Any company site that is normally refreshed stands a lot more possibility of positioning
profoundly in list items and arriving at potential clients than a private venture site that isn't.
And also due to poor designs websites don’t get that much popularity.
Problems related to interaction with users of web portal.
Problem with designs of web portal.
Issues with color combination.
And also, issues with ergonomics and human compatibility.
3. User requirement
3.1 User Profiling/ Stakeholder Analysis
“A user profile is a visual display of personal data associated with a specific user, or a
customized desktop environment. A profile refers therefore to the explicit digital
representation of a person's identity. A user profile can also be considered as the computer
representation of a user model. A user model is a (data) structure that is used to capture
certain characteristics about an individual user, and the process of obtaining the user profile is
called user modeling or profiling.
Stakeholder Analysis is an important technique for stakeholder identification & analyzing
their needs. It is used to identify all key (primary and secondary) stakeholders who have a
vested interest in the issues with which the project is concerned”[ CITATION Jun18 \l
1033 ].
Surveys
“Surveys are one way in which you can directly ask customers for information. You can use
them to collect either quantitative or qualitative data or both. A survey consists of a list of
queries respondents can answer in just one or two words and often gives participants a list of
responses to choose from. You can conduct surveys online, over email, over the phone or in
person. One of the easiest methods is to create an online survey you host on your website or
with a third party. You can then share a link to that survey on social media, over email and in
pop-ups on your site”[ CITATION lot19 \l 1033 ].
3.2.2 Choosing Data Gathering method
Questionnaire
For the Gerald Salven Volkswagen vehicle services, Questionnaire selected to gather data.
The questionnaire towards the web portal of Gerald Salven Volkswagen vehicle services has
been done with following questions.
Personal Information: Name: - Address: -
Age: - Gender: -Female Male
1. Do you like the concept of electric car?
Y Yes No
2. How do you feel about Electric car?
Good
Very Good
Excellent
3. From how many years you are using fuel vehicles?
1-5 years
5- 10 years
more than 10
4. What do you think about pricing of electric cars in comparison to fuel cars?
Low
High
Too high
5. How much do you usually spend on Fuel payment monthly?
Rs. 36000
Rs. 30000
Rs. 40000
6. How will you react about information given by us?
Positive
Negative
7. Will it help to decrease air pollution and environmental harms?
Yes
No
May be
8. Reading characters on the screen
Clear
Not clear
9. Information of the web portal
Confusing
Very Clear
10. Position of messages on screen
Consistent
Inconsistent
11. Error messages
Unhelpful
Helpful
12. Idea about the color combination of web portal.
Suitable and comfortable
Unsuitable and uncomfortable
13. Appearance of the Web portal is appropriate.
Good
Very Good
Bad
14. Which feature do you like the most in this web portal?
Flexibility
Usability
Interaction
15. Designed for all levels of users
Yes
No
Maybe Yes
3.2.3 Impacts of User Profiling results
Y Yes No
Impact Car will be designed electrically so that people like it more than other.
Table 1
Question 1
No
30% Yes
No
Yes
70%
Good
Very Good
Excellent
Result Almost people feel too good about the electric car.
Impact Again, almost everyone feels way too good about electric car so we
will design automatic cars with durability and comfort in mind.
Table 2
Question 2
Good
20%
Good
Very Good
Excellent Excellent
50%
Very Good
30%
1-5 years
5- 10 years
more than 10
Result Most of the people have been using fuel from past 10 or more years.
Impact Majority of the respondents are using fuel from more than 10 years so
the design will be done in order to replace fuel.
Table 3
Question 3
1-5 years
5%
5-10 years
20% 1-5 years
5-10 years
more than 10
more than 10
75%
Question 4 What do you think about pricing of electric cars in comparison to fuel
cars?
Low
High
Too High
Result Most of the people say that electric car may reduce their expenses.
Impact As almost people are thinking that electric cars may reduce their
expenses, we will make our cars electrical in price reasonable manner.
Table 4
Question 4
Too High
10%
Low
High
High Too High
30%
Low
60%
Rs. 36000
Rs. 30000
Rs. 40000
Result Most of them the people are spending around Rs.40000 every month
in fuels.
Impact Majority of the respondents have opinion that they are spending too
much money in fuels so our design will have minimum pricing.
Table 5
Question 5
Rs. 36000
11%
Rs. 36000
Rs. 30000
Rs. 30000 Rs. 40000
28%
Rs. 40000
61%
Positive
Negative
Result Answer of the user were all positive.
Table 6
Question 6
Negative
15%
Positive
Negative
Positive
85%
Yes
May be
No
Result Most of the answers are maybe yes.
Table 7
Question 7
No
30% May be Yes
Yes
May be Yes
45% No
Yes
25%
Clear
Not clear
Result Most of the people said all the reading characters on screen.
Impact Car will be designed electrically so that people like it more than
other.
Table 8
Question 8
Not Clear
9%
Clear
Not Clear
Clear
91%
Impact As all the information provided are clear there will be attraction
towards the web portal.
Table 9
Question 9
Confusing
15%
Confusing
Very Clear
Very Clear
85%
Result Most of the people have been using fuel from past 10 or more years.
Impact Majority of the respondents are using fuel from more than 10 years so
the design will be done in order to replace fuel.
Table 10
Question 10
Inconsistent
25%
Consistent
Inconsistent
Consistent
75%
Result Most of the people say that web provided by us is very useful
Impact As almost people are thinking that information is useful so there will be
no change in all the information.
Table 11
Question 11
Unhelpful
20%
Unhelpful
Helpful
Helpful
80%
Question 12
Unsuitable and
uncomfortable
65%
Good
Very Good
Bad
Result Answer of the user were all positive.
Question 13
Bad Good
8% 12%
Good
Very Good
Bad
Very Good
80%
Flexibility
Usability
Interaction
Result Most of the answers are maybe yes.
Impact As we already know that fuel is harming our environment so our design
will be made accordance to human comfort in mind.
Table 14
Question 14
Interaction
30% Flexibity
Usability
Flexibity
45% Interaction
Usability
25%
Impact As we already know that all user is satisfied there will be no change.
Table 15
Question 15
No
30% May be Yes
May be Yes Yes
45% No
Yes
25%
1. Effectiveness: “Effectiveness is about whether users can complete their goals with a
high degree of accuracy. Much of the effectiveness of a product comes from the
support provided to users when they work with the product; for example, fixing a
credit card field so that it only accepts a valid credit card number entry can
reduce data entry errors and help users perform their tasks correctly. There are many
different ways to provide support the key is to be as informative as possible in
a meaningful way to the user”[ CITATION Aya18 \l 1033 ]
2. Efficiency: “Efficiency must not be mistaken for effectiveness as they are quite
different and our goal is aiming to have both of them. Effectiveness, as we covered
above, is about the accuracy of the user to complete a task, while efficiency is how
fast can the user finish the task. It’s all about speed”[ CITATION Aya18 \l 1033 ].
3. Satisfaction: “Satisfaction with a system means basically how pleasing it is to use. It
affects the user’s motivation and thus the effectiveness of use. This element has
similarities with the emotional aspects of the UX, and it can be related to things like
visual design, trends, brand image and feelings. Subjective satisfaction can be
evaluated, for example, through UX questionnaires”[ CITATION Aya18 \l 1033 ].
4. Engagement: “Engagement refers to the level of engagement a system offers. Indeed,
engagement has become something of a buzzword, but if you cut through the fluff,
you’ll find that engagement occurs when the user finds the product pleasant and
gratifying to use. Aesthetics matter here, and it’s why many companies invest a small
fortune in graphic design elements—but they’re not the only factors involved in how
engaging a design is”[ CITATION Aya18 \l 1033 ].
5. Learnability: “Learnability is a quality of merchandise and interfaces that permits
users to shortly come to be acquainted with them and able to make properly use of all
their features and capabilities. Learnability is one thing of usability and is regularly
heard in the context of person interface or person trip (UX) design, as well as usability
and person acceptance testing”[ CITATION Aya18 \l 1033 ].
6. Memorability: “Memorability applies to users who have already become familiar
with a system, but some breaks occur in using it or they use it very seldom.
Memorability measures how well users can remember different functions after they
have learned the functions. This kind of use is typical e.g. with programs that are used
to run monthly reports”[ CITATION Aya18 \l 1033 ].
3. Feedback:
“The ways in which we relate to others and how we give each other information about our
experiences working together. It’s about offering up insights to celebrate strengths and
identify ways to learn and grow. Teams use many combinations of informal and formal
feedback systems to connect, align, and accomplish their goals. Teams that make feedback a
consistent habit, practice different forms of feedback, and use that feedback to set
development goals, see more positive results”[ CITATION Wol19 \l 1033 ].
4. Mapping:
“In the context of Human-Computer Interaction, mappings join factors of computing artefacts
to the actual world. They are the link between what you choose to do and what is perceived
possible. It is the relationship between moving a control, and the outcomes in the actual
world. Good mappings are herbal and use bodily analogies or cultural standards. As a result,
they are understood immediately, less difficult to remember, and enable higher ease-of-use.
An example of a poor mapping is presented in the picture below, the place at the start a left
swap controlled a lamp to the right, and the right switch managed a lamp to the left. To make
matters worse, the first two solutions was to put a red dot on one of the switches. The picture
indicates the correct answer to the problem”[ CITATION Wol19 \l 1033 ].
5. Constraints:
“Constraints are the opposite of affordances. They restriction the manner in which an item
can be utilized. Imperatives can be utilized to keep a strategic distance from utilization
blunders or restrict the records to be recalled. Consequently, requirements can likewise
increase affordances. Constraints can be physical, semantic, legitimate or social. For
example, consider a little hole versus a big gap. We may nearly without a doubt utilize simply
one finger in the little opening, while we might also most probably make use of quite a
number of fingers in a big gap”[ CITATION Wol19 \l 1033 ].
4.2. Competitive Analysis
“A competitive analysis is the process of categorizing and evaluating your competitors to
understand their strengths and weaknesses in comparison to your own”[ CITATION Kat18 \l
1033 ]. So, as per current market, we have done competitive analysis with two competitor
which are “Audi” and “Buick”.
Figure 10 BUICK
Above pictures are of the Gerald Salven Volkswagen and other two websites with which
comparison is done. And competitive analysis based on various factor are explained below:
Affordance
Constraint
Feedback
Mapping
Enough information
flow
Learnability
5.1. Storyboarding
A web project of blue print is known to as a storyboard which can be used to display the
factors on a single internet page navigation, images, photos elements, banners, and texts due
to its bendy tool and simplicity.
What is a storyboarding in context of UX design?
“Storyboarding in UX is tool which help you visually predict and explore a user’s experience
with a product. It’s a very much as thinking about your product as if it was a movie in term of
how people would use it. It would help you to understand how people would flow through the
interaction with it over time, giving you a clear sense of how to create a strong
narrative”[ CITATION Nic17 \l 1033 ].
Figure 12 Sign in page
This is login page where there is username/email and password field for users and also there
is sign in button for redirecting page to sign page.
Figure 13 Sign Up page
The above picture is sign up page for new users, where there is username, email, password
and retype password.
Figure 14 Home Page
This is the home page where there will be the information about our website and inside it
there is the link which will directs us to the respective pages.
Figure 15 About Us
The above picture is all about the company’s information and its services, where navigation
bar, along with image and contents are express.
Figure 16 Navigation
The above figure is a navigation bar channel where sub-navigation bar along with icons are
execution on the back over.
This welcome page shows the greeting for customers if he/she visit this page. In this page if
client visit here it provide comfortable zone for providing its information in summarize form.
In above diagram there is picture of company in left side and thank you for visiting us on
right side.
Figure 19 Home Page
Gerald Slaven Volkswagen is a foremost car dealership that used to sells quality new car. The
above home page shows the outlook of the website, car model along with price is allocated in
this diagram.
Figure 20 About Us
This about us page is one of the most important pages in our website.
This page our stock records and maintain the different category level
Figure 23 Contact Details
This is the contact us part where you can see the address, E mail, phone-no and additionally
the area alongside with the get direction map and view on map.
Figure 24 Footer
This is the Footer of the website where different types of categories, legal authority and the
social sites, icons are centered in this figure.
5.3. Parallel Design
In parallel graph technique, quite a few people or the members of the mission create an initial
layout from the identical set of requirements. Each member works independently, and when
finished, shares his principles with the group. These designs work due to the fact the clothier
is in a position to get range of options (ideas and concepts) of the problem. It also gives some
extent of assuredly that great design and thought is going to be built-in into our system. It
offers last views in a quick span of time.
“The technique of parallel downloading can be used to decrease file down load instances in a
peer-to-peer (P2P) network. There has been little investigation on parallel down load and
chunk allocation for supply friends with random provider capacities. The fundamental
contribution of this paper is to address the problem of efficient parallel file download in P2P
networks with random service capacities. A precise analysis of the anticipated down load
time is given when the carrier ability of a source peer is a random variable. An accepted
framework is developed for examining the anticipated down load time of a parallel down load
and chunk allocation algorithm, and is applied to the analysis of various algorithms. Two
chunk allocation algorithms for parallel download are proposed. It is located that the
performance of parallel down load can be notably expanded through using the method of
probing high-capacity peers. One such algorithm is proposed and its anticipated parallel
down load time is analyzed. The overall performance of these parallel file down load
algorithms in P2P networks with random service capacities are compared. The above parallel
download algorithms are extended to a couple of file download by using dividing source
friends into clusters. It is seen that there is an essential problem of most excellent parallelism
which minimizes the blended effect of intracluster and intercluster overhead of parallel down
load and load imbalance”[ CITATION LiK16 \l 1033 ].
“There are some activities that routinely take place when the test is implemented. These
activities may also be incorporated into the design process when the tests are created in an
iterative manner. An example of such a case is creation of test data. Test data will definitely
be created during the test implementation. So, it is better to incorporate it in the test design
itself. This approach enables optimization of test condition scope by creating low- or high-
level test cases automatically”[ CITATION try191 \l 1033 ].
“Easy & Cheap: Card sorting studies are simple and cheap to set up for all the
people involved.
Involves users: Studies provide insight into users’ psyche for website material and
intuitive content grouping.
Provides a good foundation: Card sorting provides a robust foundation to the
structure of a site or product, and as a method when investigating label quality.
Provides a good insight: Provides a good understanding of the users’ subconscious
and how they would expect the information to be organized”[ CITATION hot19 \l
1033 ].
Usability testing is all about getting real people to interact with a website, app, or other
product you've built and observing their behavior and reactions to it. Whether you start small
by watching session recordings or go all out and rent a lab with eye-tracking equipment,
usability testing is a necessary step to make sure you build an effective, efficient, and
enjoyable experience for your users”[ CITATION hot19 \l 1033 ].
6.2.1 Why is usability testing important?
“Usability testing is done by real-life users, who are likely to reveal issues that people
familiar with a website can no longer identify—very often, in-depth knowledge can blind
designers, marketers, and product owners to a website's usability issues. Bringing in
new users to test your site and/or observing how real people are already using it are effective
ways” [ CITATION hot19 \l 1033 ] to determine whether your visitors:
Not losing connection and understanding the working of the site.
Can do the major actions.
As much as possible not facing usability bugs or issues.
Have efficient and functional experience.
If possible, notice other usability issues.