HCIassignment

See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/337224702
Human Computer Interaction
Thesis · November 2019

DOI: 10.13140/RG.2.2.26611.48161
CITATIONS READS
0 883
1 author:
Alfred Tan Yik Ern

Asia Pacific University of Technology and Innovation
29 PUBLICATIONS 0 CITATIONS
SEE PROFILE
All content following this page was uploaded by Alfred Tan Yik Ern on 13 November 2019.
The user has requested enhancement of the downloaded file.

UC2F1805IT(ISS) Human Computer Interaction CT026-3-2-HCI
TECHNOLOGY PARK MALAYSIA

GROUP ASSIGNMENT
CT026-3-2-HCI
Human Compute Interaction
UC2F1805IT(ISS)
NAME TP NUMBER
TAN YIK ERN TP046566
CHEA YAN SHAW TP045215
GUO JUN HAO TP046636
Abdullahi Idris TP044170
LECTURER: RIZAWATI BINTI ROHIZAN

HAND OUT DATE: 1ST OCTOBER 2018
HAND IN DATE: 31th JANUARY 2019
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.
1
Contents
Introduction ............................................................................................................................................... 5
Objectives ................................................................................................................................................. 5
Problem Statement .................................................................................................................................... 5
Proposed solution ...................................................................................................................................... 5
Workload Matrix ....................................................................................................................................... 6
Stage 1: User Profiling and Task Analysis ........................................................................................... 7
Classifying stakeholders ........................................................................................................................... 7
Questionnaire and Observation technique ................................................................................................ 8
Activities ................................................................................................................................................... 8
Sample Questionnaires.............................................................................................................................. 9
User Profile ............................................................................................................................................. 10
User Requirement ................................................................................................................................... 11
Analysis of Data ...................................................................................................................................... 12
Hierarchical Task Analysis (1) ............................................................................................................... 24
Future Requirement ............................................................................................................................ 25
Hierarchical Task Analysis (2) ............................................................................................................... 26
Future Requirement ............................................................................................................................ 27
Stage 2: Usability Goals and Design Guildelines ............................................................................... 29
Usability Goals........................................................................................................................................ 29
Learnability ......................................................................................................................................... 30
Future-oriented E-Learning ............................................................................................................ 30
Memorability....................................................................................................................................... 31
user interface design ....................................................................................................................... 31
"Guide Me" Tool ............................................................................................................................. 31
Efficiency ............................................................................................................................................ 32
The impact of excellent E-learning interface design ...................................................................... 33
The impact of poor-quality E-learning interface design ................................................................. 34
Error .................................................................................................................................................... 35
Subjective............................................................................................................................................ 36
Visual Design .................................................................................................................................. 36
Product Design .................................................................................................................................... 37
Visual Design – Graphic Design......................................................................................................... 37
User experience design ................................................................................................................... 38
User interface design....................................................................................................................... 39
Information architecture.................................................................................................................. 40
Satisfaction .......................................................................................................................................... 41
2
User Type ................................................................................................................................................ 42
Quickly and easily develop novices into intermediate users. ............................................................. 42
Pay and return proportionality principle. ............................................................................................ 42
Progressive expansion. ........................................................................................................................ 43
Competitive Design ................................................................................................................................ 43
Udemy E- learning website ................................................................................................................. 43
Design Strategies ................................................................................................................................ 44
Analysis................................................................................................................................................... 48
Impact ..................................................................................................................................................... 49
Conclusion .............................................................................................................................................. 50
Stage 3: Parallel Design, Participatory Design & Prototype ............................................................ 51
Parallel design ......................................................................................................................................... 51
GUO JUN HAO .................................................................................................................................. 51
Register Page .................................................................................................................................. 51
Dashboard Page .............................................................................................................................. 53
TAN YIK ERN ................................................................................................................................... 54
Register Page .................................................................................................................................. 54
Dashboard Page .............................................................................................................................. 55
CHEA YAN SHAW ........................................................................................................................... 57
Register Page .................................................................................................................................. 57
Dashboard Page .............................................................................................................................. 58
Peer to peer evaluation ............................................................................................................................ 59
Participatory design ................................................................................................................................ 59
Card Sorting ........................................................................................................................................ 60
Card Listing ........................................................................................................................................ 60
Categories ....................................................................................................................................... 61
Card Sorting Execution ................................................................................................................... 62
Prototype ................................................................................................................................................. 64
Home Page .......................................................................................................................................... 64
Course Details Page ............................................................................................................................ 66
Register Page ...................................................................................................................................... 68
Login Page .......................................................................................................................................... 70
Forgot Password Page ......................................................................................................................... 72
About Us Page .................................................................................................................................... 74
Contact Us Page .................................................................................................................................. 76
Dashboard page ................................................................................................................................... 78
My Courses Page ................................................................................................................................ 80
3
Course Material Page .......................................................................................................................... 82
Lecturer Info Page............................................................................................................................... 84
Setting Page ........................................................................................................................................ 86
Stage 4: Evaluation ............................................................................................................................... 88
References ............................................................................................................................................... 89
4
Introduction
Based on the Human Computer Interaction module, we had learnt the principles of user
interface design. We need to design a high-quality e-learning site for the Cisco Networking Academy
program. Therefore, the topic we choose to focus on is whether e-learning website design is enough to
attract more students to learn. At the same time, it can also propose more optimization functions to
help students learn more about self-learning on the Cisco e-learning website.
Objectives
• Design the website user interface to achieve usability goal.
• User can learn the function and tools on website easily.
• Function of website not hard to function and easy to remember the steps
• Attractive website design to make user feel comfortable and friendly when visit the website.
Problem Statement
Students always complain about going university is wasting time because the topic they can
learn from internet. The mind-set of student goes to university is achieving a certificate from that
university. They go to university are doing the exam and assignment. Most of the student like to learn
knowledge from internet to improve their skills. Besides that, a good user interface design will attract
the student to visit the website. Cisco Networking Academy program’s website is a good choice for
student to learn knowledge, but the user interface can be improved.
Proposed solution
According to problem statement, Improved the interest of student to study and learn
knowledge is design a good user interface’s website. Eliminate the traditional learning method like
learn in classroom, change it became learn from online. Design a good website to achieve usability
goal with used the 6 important design principles. Improved the Cisco e-learning website, meanwhile
the website is efficiency to help user to done their task and easy to learn the function of the website, so
the user can recall the tools and function of the Cisco e-learning website.
5
Workload Matrix
Aspects Tan Yik Ern Guo Jun Hao Chea Yan Shaw Abdullahi Idris
(TP046566) (TP046636) (TP045215) (TP044170)
Group Component
Proposal 25% 25% 25% 25%
Individual Component
Stage 1: User profiling and 100% - - -
Task Analysis
Stage 2: Usability Goals - 100% - -
and Design Guidelines
Stage 3: Parallel Design, - - 100% -
Participatory Design and
Prototype
Stage 4: Formative - - - 100%
Evaluation
6
Stage 1: User Profiling and Task Analysis
Classifying stakeholders
User Categories Users Description
Primary user Student The primary user is student who has a Cisco netacad
account. They are the primary user because they can
perform learn network security by using the website
such as read the assessment, do the test and exam
and do the lab practical.
Secondary user Lecturer, Cisco The secondary user would be the lecturer. The
netacad’s staff lecturer uses it to teach student and inform student
to do the test do exam. The lecturer also uploads the
assessment to Cisco netacad too.
Tertiary user Udemy e-learning The tertiary user would be Udemu e-learning
website website and Cybrary e-learning. These two e-
learning websites also provide the same features
Cybrary e-learning
like Cisco netacad e-learning website. E-learning
website
website’s learning assessment will attract the
people to visit and used the the e-learning website.
7
Questionnaire and Observation technique
Our group will choose questionnaire and observation for this assignment research to collect
data about user requirement and user profiling. We do not conduct interview way because that
interview will take long time to gather data. Survey form also not a good choice for us to do our
research. Data errors due to question non-responses may exist and fake data review. Next, interview
will take time due to interview should be formal, that will make respondents felt not comfortable. In
short, we eliminated interview and survey method to do our research.
Questionnaire is a cost-efficient way to collect data. There is no printing cost, we just have to
ask people the questions. Questionnaire will be a fastest way to collect the results and data. When we
asked the student question, they can straightly tell us their opinion about the e-learning website.
Besides that, through the questionnaire, we could collect data about the user interface idea. After
collected the data, we able to analysis the user profiling about quantities of student and the answer that
they responded for the user requirement for this e-learning website.
Observation is another best solution for data gathering that shall be used alongside
questionnaire. Observe the real-world aspect with different e-learning application system and user
interface. Furthermore, we also scratched the user interface for observation purpose. Conducting
observations student about opinion before design the user interface that match the user requirement.
Compared with other e-learning website’s user interface and how the progress from first step until the
last step on website.
Activities
We have decided to use questionnaire to gather data and feedback for our Cisco e-learning website. We
will conduct the questionnaire section on weekends from noon 1:00PM to 3:00PM. 4 of us disperse
into 2 teams to conduct the activity in APU campus. All the data gathering shall be conducted in APU
campus. For the result to be fair and accurate, we have decided to get 50 respondents from the
questionnaires.
Detail Phase One

Time From Weekend 1:00PM to 3:00PM
Target audience APU student, who currently study in
computer science, software engineering and
information system filed. They are
intermediate website user.
8
Sample Questionnaires
(En.wikipedia.org, 2019)
Below is the question regarding on the user experience towards the current Cisco e-learning
website. Please tick either YES or NO to the question below:
Tick as Correct ✓ YES NO
1. Did you know other e-learning website similar to

Cisco e-learning website?
2. Do you often use Cisco e-learning website?
3. Does Cisco e-learning website provide good

performance for user?
4. Does Cisco e-learning website will decrease the

interested of student to visit the website?
5. If Cisco is able to achieve profitable operations, will

you continue to use Cisco for learning?
6. Have you been using Cisco for more than 5 times a

week?
7. Does Cisco's web design attract you to explore more?
8. If Cisco is willing to provide one-to-one online

teaching methods, would you be interested to
participate?
9
Strongly disagree → Strongly agree 1 2 3 4 5
1) Did Cisco e-learning website easy to interact

with user?
2) Please rate your satisfactions with the overall

performance of Cisco e-learning website.
3) Where do you know about Cisco e-learning websites?
APU --- ( )
Google --- ( )
Friends --- ( )
4) Do you like the dashboard interface in Cisco e-learning website?
1 – 5 times --- ( )
6 and above --- ( )
5) Please explain the experience of using Cisco e-learning website.
Novice --- ( )
Intermediate --- ( )
Expert --- ( )
6) How much time did you spend to visit Cisco e-learning website each time?
15 minutes --- ( )
30 minutes --- ( )
1 hour --- ( )
10
7) What type of e-learning you are interested? (✓ all that apply.)
Read online document --- ( )
Online video teaching --- ( )
8) What are the most important reasons for you to use e-learning? (✓ all that apply.)
Convenience --- ( )
Interesting --- ( )
Easy to learn --- ( )
9) Please select your age range (Tick as Correct (✓)
18 – 20 --- ( )
21 – 23 --- ( )
24 and above --- ( )
11
User Profile
Customer (primary) Characteristic Ranges
Description: User who already has use Cisco e-learning for e-learning.
Age: 18 and above
User type: Intermediate user
Gender: Male and female
Educational Level: Student at degrees level and learn networking and computing security.
Country: Malaysia
Computer Know basic theory of networking and computing security

experience:
10
User Requirement
Requirements Explanation
1. Update the website Cisco e-learning website should update more feature.
assessment and learn For example, website have video learning or more
features. assessment to learn.
2. Provide a user guide for user. Providing a user manual for user, who use the Cisco e-
learning website. Lead them to learn all the function in
the website.
3. Making the GUI more user Compare to other e-learning website, Cisco e-learning
friendly. website is too simple and not attractive.
4. Increase the overall For example, improve the design of the website,
performance of the Cisco e- especially the color and contrast of the website. Make
learning website. user feel comfort and color friendly.
5. Provide feedback and User can send feedback to Cisco e-learning website
review section. about the improvement of the website. The purpose to
make the website enrichment.
11
Analysis of Data
Question (1) Did you know other e-learning website similar to Cisco e-learning
website?
Justification Collect data about APU student know other e-learning website except
Cisco e-learning website.
Analysis
Impact From the result, 80% students know other e-learning platform, the
rest of the student do not know another e-learning platform. When
design user interface, we will compare to other e-learning website as
references to design a usability website.
12
Question (2) Do you often use Cisco e-learning website?
Justification To know APU student spend how much time to visit Cisco e-
learning website.
Analysis
Impact From the result, 80% of students do not often use Cisco e-learning
website, 20% students often use Cisco e-learning website. The
students use this website to self-learning is lower than student do not
user this website. 80% student only visit the website when lecturer
said need to do test or exam then they visit the Cisco e-learning
website. For design the website, we will design an attractive website
to attract the student to visit website.
13
Question (3) Does Cisco e-learning website provided good performance for user?
Justification To understand did Cisco e-learning website provided a well

performance when student visit the website.
Analysis
Impact From the result, 90% students marked Yes, meant the Cisco e-
learning website provided a self-learning platform for student. For
design the website, we will add more features and content in e-
learning website for student. Improve the graphic also able to
provide a well website experience for student.
14
Question (4) Does Cisco e-learning website will decrease the interested of
student to visit the website?
Justification To understand did Cisco e-learning website has declined the

interest of student to stop visit this website.
Analysis
Impact From the result, 85% students agreed that Cisco e-learning website
will not decrease the interest of learning on that website. Because
the Cisco e-learning website teach them the deep knowledge on
networking and computing security. Here we know, the content of e-
learning website is important. The tools in the website also played a
important role to navigate students how to function the website.
15
Question (5) If Cisco is able to achieve profitable operations, will you continue to
use Cisco for learning?
Justification Understand if the website has provided reward for student, will the
continue to visit the website.
Analysis
Impact From the result, 90% students will continue visit Cisco e-
learning website to learn. Because the student agreed with the
benefit achieved from this e-learning will assist them in their
learning. We will design the outlook of website that also able to
help in user interface design and this website design as their
design references.
16
Question (6) Have you been using Cisco for more than 5 times a week?
Justification Understand how often students use Cisco e-learning website in a

week.
Analysis
Impact From the result, only 40% students visit Cisco netacad website more
than 5 times in a week. 60% students are less than 5 times in week.
The students interested on networking and computing security will
visit the e-learning website frequently. We will design a friendly and
nice look user interface, the purpose to increase the quantity of
students visit the website.
17
Question (7) Does Cisco's web design attract you to explore more?
Justification Understanding a pretty user interface design will attract student

to visit website.
Analysis
Impact Form the result, 80% students said Cisco e-learning website’s
web design attracted and will explore more. This impact them
to increase the passion on learning. So, in stage 3, we should
design an attractive e-learning website.
18
Question (8) If Cisco is willing to provide one-to-one online teaching methods,

would you be interested to participate?
Justification Justify student like one-to-one learning live on web or dislike.
Analysis
Impact From the result, 70% students dislike online one-to-one teaching. As
online one-to-one teaching need to follow a time with the lecturer.
30% students will interest to try online one-to-one learning on Cisco e-
learning website. We will design the website without the function of
live video learning for the e-learning website.
19
Question (1) Did Cisco e-learning website easy to interact with user?
Justification To justify Cisco e-learning website had a good interaction with the
user.
Analysis
Impact From the result, over 80% students agreed with Cisco e-learning
website is a good e-learning website to interact. The function in
website is easy to understand and the content of e-learning from the
website is easy to understand. We will design a website that achieve
usability goal and efficiency to ensure students can easy to use and
faster understand all the icon meaning in the website.
20
Question (2) Please rate your satisfactions with the overall performance of Cisco
e-learning website.
Justification To understand the content and function on Cisco e-learning website

reached the user requirement and satisfaction.
Analysis
Impact From the result, 60% percent students expressed that Cisco e-learning
website’s UI design and content are satisfy them. 30% students are
very agreed overall the e-learning website’s performance reached
their requirement. We design an e-learning website that fulfill all the
user interface requirement to ensure the website can satisfy the user.
21
Question (3) Where do you know about Cisco e-learning websites?
Justification To understand students, know the website from where.
Analysis
Impact From the result, 70% students know Cisco e-learning website when
they study in Asia Pacific University (APU). Some student knows this
website form online search and a few students heard Cisco e-learning
website form their friends. From here we know that, Cisco e-learning
website also a well user interface design, so the lecturer in APU
campus also recommend students to visit it. Meanwhile learn the extra
knowledge from the website.
22
Question (4) Do you like the dashboard interface in Cisco e-learning website?
Justification Willing to know currently Cisco e-learning website’s dashboard user

interface design.
Analysis
Impact From the result, 55% students like the Cisco e-learning website, 45%
students do not like it. So, the dashboard design is very important,
because the dashboard is the main page of the website, if the
dashboard with a ugly design, that will receive bad feedback from
user. We will design a consistency and standard website to increase
the quantity of user to like the user interface of the dashboard.
23
Question (5) Please explain the experience of using Cisco e-learning website.
(Novice, Intermediate, Expert)
Justification Gather the data about the skills to use Cisco e-learning website. The
user are categories in novice, intermediate and expert.
Analysis
Impact From the result, most of the students are intermediate user to visit the
Cisco e-learning website. There are only 20% students are novice user
and no one are expert on this e-learning website. We should design a
user interface that can improve the novice user skill, help them learn
easily. For intermediate user, we will design some shortcut function
in the website, help the easy to remember the function. For expert
user, we will design a efficiency website that help them to complete
the task faster.
24
Human Computer Interface Page | 20
Question (6) How much time did you spend to visit Cisco e-learning website each
time? (15 minutes, 30 minutes, 1 hour)
Justification To know how much time to spend on Cisco e-learning website.
Analysis
Impact From the result, there are 50% students visit this website at least 30
minutes and another 50% visit this website spend 1 hour. The user
design is friendly make user feel free and all the icon and layout
design are suitable for e-learning website. For example, if a bad
website design will not attractive the student spends more time to visit
the website. We will design the website efficiency to help student can
speed up to search and reach the web page, and the student can start
learning.
20
Question (7) What type of e-learning you are interested? (✓ all that apply.)
Justification To justify what type of learning method that student like and
interest.
Analysis
Impact From the result, 65% of student prefer the e-learning is read online
document, but 35% student prefer online teaching video. So, we will
put more effort to design the e-learning website, because most of the
students like the read online document. The text in web page should
follow the visibility in the design principle. That will easy the
student to read the text and document in web page.
21
Question (8) What are the most important reasons for you to use e-learning?
Justification To understand why student like to use online study or e-learning.
Analysis
Impact From the result, 20% students said online learning is convenience.
40% students said online learning is interesting and another 40% are
easy to learn. In conclusion, interesting and easy to learn are the idea
of us to design a good website. As the feedback design in website
really essential, that will attract user keep visit the website.
22
Question (9) Please select your age range.
Justification Get the data to know the age of user and use it in the user profiling.
Analysis
Impact From the result, the student age in range 18-20 only have 10 %
students to filled out the survey form, the most amount is age range
21-23 have 60% students filled out the survey form. 30% students age
range 24 and above student filled out the e-learning survey form.
23
`
Hierarchical Task Analysis (1)
Plan 0: 1-2-3-4-5-6-7
Plan 7: Click the button “Upload” will redirect user to user’s computer folder. -7.1
After user confirm the material to upload, click the button “Open”. -7.2
The material is uploading to e-learning system. -7.3
When the material uploaded done will showed in the module page. -7.4
Plan 8: 8-9-10
24
`
Critically Difficult Frequency

1. Register account H L L
2. Login account H L H
3. Go to menu H L H
4. Select an intake of student H L H
5. Select a module H L H
6. Go to menu in the module H L H
7. Click the button “Upload” M M M
▪ 7.1 Choose material in computer’s folder H L H
▪ 7.2 Click the button “Open” H L H
▪ 7.3 The material is uploading M L M
▪ 7.4 The material upload done will showed in L L M
module page
8. Check the material in the module M H L
9. Click the button “Save” H L H
10. Logout the account H L L
Future Requirement
According to the above HTA (1) diagram on Cisco e-learning web application, some
requirement could be implementation and could perform better if these requirements
integrated to e-learning web application.
Requirement Explanation
1. Drag the material to upload Easier to upload the material, user can
upload the material faster than before.
2. Insert the captcha system to Improvement the e-learning’s security issue
authentication. and to authentication not a robot tries to
login the system.
3. Can upload multiple material at a User can speed up the upload material
time. progress to done their work.
4. Implement the firewall in the e- To prevent the attacker uses the open port
learning system. to get access to the e-learning system.
25
`
Hierarchical Task Analysis (2)
Plan 0: 1-2-3-4-5
Plan 5: Select a material folder in e-learning browser. -5.1
Select one or more materials that user needs to download. -5.2
Double click the material in material folder. -5.3
Browser will automate download the material. -5.4
User have to wait the material download finished. -5.5
Browser will notify that if the material downloads successfully. -6
Plan 6: 7-8-9-10-11-12
26
`
Critically Difficult Frequency

1. Register account H L L
2. Login account H L H
3. Go to menu H L H
4. Select module H L H
5. Select a material folder H L H
▪ 5.1 Select one or more material H L M
▪ 5.2 Double click the material H L M
▪ 5.3 Browser will automate download the L L L
material
▪ 5.4 Wait the material download finished M L M
▪ 5.5 Browser will notify if material download L L M
successfully
6. Open “Download” folder in computer M L L
7. Find and Search the material M L L
8. Open the material H L L
9. Confirm the download material M H L
10. Go to e-learning browser again H L L
11. Log out account H L L
Future Requirement
According to the above HTA (2) diagram on Cisco e-learning web application, some
requirement could be implementation and could perform better if these requirements
integrated to e-learning web application.
27
`
Requirement Explanation
1. Upgrade the server for download. Downloading the material on e-learning
web application is faster than before, if user
need to download more material of huge
sized material.
2. Insert the captcha system to Improvement the e-learning’s security issue
authentication. and to authentication not a robot tries to
login the system.
3. Close browser will automate log out For account security issue and protect the
account. user account. User exit the browser, the e-
learning web application will log out the
user account.
4. Search the material to download. User could use the search box to find the
keyword of material. So, use can faster
download the material in e-learning web
application.
28
`
Stage 2: Usability Goals and Design Guildelines
Usability Goals
Based on the analysis of the survey report data, students use e-learning such as Cisco more
frequently, so it can be concluded that usability is one of the main factors to consider in the
development of e-learning websites. E-learning websites have gradually become the main
channel for people to learn information, conduct transactions and communicate. For e-learning,
on the other hand, we help users to effectively find the learning and learning information they
need or to complete his tasks, improve e-learning and use it to learn whether to feel happy and
satisfied. If there is no e-learning website, the user's time will be wasted, and the website's
return visit rate will be greatly reduced, resulting in unnecessary network congestion. Therefore,
in order to give users more knowledge of e-learning systems such as E-learning, we will focus
on:
• Learnability
• Memorability
• Efficiency
• Error
• Subjective
• Satisfaction
(Diagram 1: Cisco website) (Keyboard Banger, 2019)
29
`
Learnability
(Diagram 2: Cisco website) (News.semo.edu, 2019)
Future-oriented E-Learning
The Cisco Networking Academy has adopted a new E-Learning teaching method based on
Web technology, supplemented by technical tools such as Flash, audio, video and other
technical tools. Students can log in to the classroom, dormitory, and home to access textbooks.
Progress learning courses, watching videos or other visual techniques, use the online exam
system to check and understand the knowledge, and achieve personalized learning.
Using the E-Learning-focused Cisco Network Academy's Academy Connection, teachers and
Cisco can evaluate student performance online and make appropriate adjustments at any time
to better meet the practical needs of the teaching.
In addition, the Cisco Networking Academy online system provides a comprehensive
instructor's manual, which includes a detailed blueprint for the course – course schedules, lab
sessions, and excellent teaching cases. Teachers also receive 24-hour online technical support
from the Cisco Networking Academy Support Center.
30
`
Memorability
user interface design

User interface design is a key issue for the survival of e-learning sites, and it is necessary to
provide memory design guidance for web developers. Over the years, we have proposed a
number of website usability design guidelines, and user interface design guidelines have played
a very important role in improving the usability of e-learning sites.
Diagram 3: Cisco website) (Shelley Xia, 2019)
"Guide Me" Tool
In order to achieve an E-learning memorable goal, it is necessary to have a title or description

that can be recognized in the real world as a reference to make it easier for the user to recall
what it can do. For example, the user interface design of the "Guide Me" Tool page will be the
first time that people using this site have many boot options to choose from and do not require
complex searches.
The first page of the Cisco eLearning user interface is the Design Solutions Guide login page
- which lists Cisco "solutions" (usually hardware or software products) based on the user's
choice of step-by-step wizards. The filter on the left side of the page allows the user to browse
other solutions.
31
`
Usability testing of the design to see what works and what needs improvement. The main test
goal is to find out the discoverability and effectiveness of the content. The working prototype
of the design was tested.
Since Memorability is broken down into goals, these key points must be targeted at the usability
goals of e-learning sites and based on the results of the first impressions, the needs of the target
audience are basically related to the employees of the other sites. It’s two main audiences,
depending on time, so depending on the user community.
(Diagram 4: Cisco website) (Shelley Xia, 2019)
Efficiency
Through the classification of different requirements of interface design and the influence of
interface design elements on user behavior, the importance of users in interface design is
studied. Interactivity has become the goal of design in network interface design. In order for
the design to meet the usability requirements, a comprehensive understanding of user
characteristics and diversity requirements is essential. This requires finding the right way to
document and implement diverse user requirements.
32
`
(Diagram 5: Efficiency website design) (Shelley Xia, 2019)
The impact of excellent E-learning interface design
1. Interface design based on function implementation. The most basic performance of the
interactive design interface is functionality and usability. Through the interface design,
the user can understand the function operation and pass the information of the work
itself to the user more smoothly, that is, the user is the basis and value of the function
interface. However, because the user's knowledge level and cultural background are
different, the interface should reflect the information of the work itself in a more
international and objective way.
2. Interface design focusing on emotional expression. Giving the user an emotional

transmission through the interface is the true artistic charm of the design. The user's
feelings when they touch the work make people feel emotional resonance, use
emotional expression, and actually reflect the emotional relationship between the work
and the user. Of course, emotional information transmission has a unity of certainty and
uncertainty. Therefore, we are more emphatic about the emotional experience of users
when they come into contact with works.
33
`
3. Interface design based on environmental factors. Any interactive design work cannot
exist without the environment, and the surrounding environment has a special influence
on the information transmission of the design work. Including the history, culture,
technology and other aspects of the work itself, so creating an interface environment is
a design work that cannot be ignored.
(Diagram 6: Bad website design) (Blogs.ua.es, 2019)
The impact of poor-quality E-learning interface design
The interface operation steps are cumbersome:

1. The layout of the interface is confusing, lacking logic, blindly stacking interface
elements, so that users do not know how to start. The wording of the interface is
unprofessional and ambiguous, such as the message box that appears to be illegitimate.
2. There is no error-proof processing, there is no verification of the information input by

the user; before performing the destructive operation, the user is not reminded to
confirm, etc.
34
`
3. No progress bar is provided, the animation reflects the ongoing process, and the result
is not returned for important operations. The interface lacks aesthetics and personality,
and even the interface style is inconsistent.
Error
The error message is a good opportunity to improve the user experience, share the brand and
highlight the personality. Pay attention to all aspects of a good error message: language,
location and visual design, making it a perfect error.
For example, when we are doing cisco lab operations:

This is an important part. The e-learning course includes many pre-wired labs.
Here are the topologies used in the experiment，
When I want to click on Initialize to prepare a device:
(Diagram 7: Cisco packet tracer) (Netacad.com, 2019)
However, the activity I am working on will tell me through a reminder whether the operation
was successful.
35
`
(Diagram 8: Cisco packet tracer) (Netacad.com, 2019)
Subjective
Visual Design
Visual design is the means and result of the subjective form of eye function. So we want to
express similarity to visual communication design. Visual communication design is part of
visual design. It is mainly to convey the audience. The lack of attractive visual needs of the
designer's own visual communication is conveyed to both the visual audience and the designer.
Visual communication research focuses on all aspects of vision and calls it a more appropriate
visual design.
(Diagram 9: Cisco website) (Web and Team, 2019)
36
`
Product Design
Product design is the process of transforming a purpose or requirement into a specific physical
form or tool. This is a creative process of activity, so we need to address how to express plans,
plan and solve problems through specific carriers. In this process, the shape of the product is
displayed in a planar or three-dimensional form by a combination of various elements such as
lines, symbols, numbers, colors, and the like.
(Diagram 10: Cisco router website) (Shelley Xia, 2019)
Visual Design – Graphic Design
Graphic design is the art of communication, stylization and problem solving through words
and images. Our graphic design creates and combines text, symbols and images to create visual
thoughts and information using a variety of different methods. Use font layout and layout
technology to achieve the desired product design.
37
`
(Diagram 11: Graphic design) (Gallery.wacom.com, 2019)
User experience design
User experience design is a user-centric design approach that is designed with the user in mind.
At the design process side, we focus on the user-centricity, and the concept of user experience
begins in the initial stages of development and continues throughout the process. Its purpose is
to ensure that:
• Properly estimate the user experience

• Understand the user’s true expectations and objectives
• Correct the design when the functional core can be modified at low cost.
• Ensure coordination between the functional core and the human-machine
interface, reducing BUG Guaranteed to help users learn easily
38
`
(Diagram 12: Mobile phone application design) (Shelley Xia, 2019)
User interface design
We use a simple design approach to ensure that the user interface is the overall design of
human-computer interaction, and simple operational logic ensures that users can quickly find
the options they are looking for, as well as the beautiful interface of the software. Good UI
design not only makes the software personalized and taste, but also makes the operation of the
software comfortable, simple and free, fully reflecting the positioning and characteristics of the
software.
39
`
(Diagram 13: Mobile phone application design) (Shelley Xia, 2019)
Information architecture
The information architecture document is the basis for the overall information arrangement.
The overall focus is on building an information architecture for a specific product, product
group, or individual product. In addition to information architecture and information planning,
there is also information design, so we mainly use it to support the actual operation activities
of information architecture and planning. The main object of IA is information, which is
designed and structured by information architects, determines the organization and
classification. An art and science that is easy for users and users to find and manage. So, this
E-learning IA is not classified by page, but it is reflected in different usage processes.
Information is the subject, so studying the connection between information is a very important
job. At the same time, our main task for information architecture is to build a smooth bridge
between information and user perception. It is a carrier for the intuitive expression of
information. Expressing information architecture to users is to study the expression and
delivery of information. Information architecture is more than just the organizational structure
of design information.
40
`
(Diagram 14: Moble phone application design) (Shelley Xia, 2019)
Satisfaction
First of all, we first think about how to improve user satisfaction, we may need to do a lot of
things, from the global to the details, need to be everywhere for the user's experience and
feelings. Since we have verified that the user's task completion has a significant impact on user
satisfaction, we can start by improving the user's task completion. For example, optimize the
website information architecture, optimize the internal search of the website, optimize the
website navigation design, and optimize relevant content recommendations.
These optimizations can improve the user's task completion from a general level, but obviously
these are not enough, because the user's knowledge structure is different, and the problems
encountered by the users will be different, so the users in the analysis questionnaire need the
demand indicates that the different problems encountered provide effective solutions, so we
feel that we can set up frequently asked questions and even online customer service. When
users again have doubts about this page or feedback loopholes, we will fix and optimize in time.
In order to ensure the satisfaction of the user.
41
`
User Type
In the survey, this project finds out about the experience of a user with a specific website, how
can I classify the users into different types -novices/beginners, intermediate, experts.
According to Usability's important point of view, the biggest challenge for this product is how
to design a simple and consistent interface to meet the needs of various users. Developers
typically create products that are suitable for expert users from a functional implementation
perspective and tend to treat each function in the interface as identical. The marketing
department usually wants to adapt the design to the main users, which makes it easier to
promote the product. The truth is that most users are neither primary users nor experts, they
just use the product for some purpose.
Most users belong to intermediate users.
According to the definition of "the nature of interaction design", the design goal should include
three levels:
Quickly and easily develop novices into intermediate users.
Do not set limits on the process of cultivating intermediate users into expert users.
Make sure you have a pleasant experience for mid-level users.
Before implementing the design goals, we must first define the characteristics of the three users.
Identify the basic characteristics of users at different levels. To this end, we can have a
subjective feeling, the middle user gives the product vitality and has a high viscosity. Therefore,
a good user interface design should balance the needs of the three-tiered users, not to cater to
the novice, nor to please the experts, but to satisfy most of the work of the intermediate users.
To achieve this goal, the book proposes a principle and method, the principle of “payment
payback” and “progressive” design patterns.
Pay and return proportionality principle.
The principle is that people are willing to pay for what is worthwhile, depending on the user's
goals. Therefore, the user should pay attention to the pay-to-reward ratio in the design process,
42
`
and do not have too complicated operations when achieving simple goals.
Progressive expansion.
Using advanced or infrequently used components in the product process behind the extended
pane, intermediate users can satisfy most of their operational needs without opening them,
while expert users can expand to accomplish more complex tasks.
After we learned the chapters in the human-computer interaction course, we had a rough idea
for the design of intermediate users, so I tried to select several commonly used applications for
comparative analysis to verify whether they followed this design concept.
Competitive Design
Udemy E- learning website
(Diagram 15: Udemy e-learning website) (Anon, 2019)
Udemy is an open online education site called Udemy. This name has its special meaning.
“Udemy” is a combination of “you” plus “academy” meaning “your university”. Unlike other
online education platforms, Udemy not only opens up a variety of courses, but also opens up
opportunities for teaching. In other words, you can become a teacher as long as you like. Users
can learn any course on the platform at any time, or they can build their own courses and
introduce their expertise and knowledge to the world. The cost of the course is determined by
the teacher, usually ranging from $20 to $100. In addition to the web version, Udemy also has
iOS and Android apps, allowing users to learn at their own pace, regardless of time, location
and device.
43
`
Design Strategies
(Diagram 16: Visibility in Udemy e-learning website) (Anon, 2019)
(Diagram 17: Constraint in Udemy e-learning website) (Anon, 2019)
(Diagram 18: Affordance in Udemy e-learning website) (Anon, 2019)
44
`
(Diagram 19: Feedback in Udemy e-learning website) (Anon, 2019)
(Diagram 20: Consistency in Udemy e-learning website) (Anon, 2019)
(Diagram 21: Mapping in Udemy e-learning website) (Anon, 2019)
45
`
(Diagram 22: Cybrary e-learning website) (Cybrary, 2019)
(Diagram 23: Visibility in cybrary e-learning website) (Cybrary, 2019)
(Diagram 24: Constraint in cybrary e-learning website) (Cybrary, 2019)
(Diagram 25: Affordance in cybrary e-learning website) (Cybrary, 2019)
46
`
(Diagram 26: Feedback in cybrary e-learning website) (Cybrary, 2019)
(Diagram 27: Consistency in cybrary e-learning website) (Cybrary, 2019)
(Diagram 28: Mapping in cybrary e-learning website) (Cybrary, 2019)
47
`
Analysis
Design guild lines Udemy e-learning website Cybrary e-learning website

/ Website
Visibility 1. To show the 1. All he menu is in top, click one

hamburger menu by of the menus to view the
clicking the menu bar. hamburger menu.
2. When the mouse point 2. When the mouse point to the
to one of the choices in menu, the selection has high
hamburger menu, the color contrast.
selection has high
color contrast.
Constraint 1. User must fill in all the details in 1. Information form has
textbox before register to the constraint at the name, email,
website. company.
2. * meant the detail must fill in
before the user submit.
Affordance 1. Know the icon can be clicked 1. The icon is a home,

and what the function of the icon meant the home page of
in the website. the web.
Feedback 1. When user forget to fill in 1. When user mouse point to

the detail of the credit card the selection, the image
detail, the textbox will selection will become
become red and inform user bigger.
to fill in the details. 2. If at register website, user
’ forget to fill in detail, the
textbox will feedback user
to fill in details.
Consistency 1. All the selection and choice in 1. All the words are consistency
under the category’s menu bar. start from left to right and
arrangement neatly.
Mapping 1. The side arrow is the mapping, 1. The small arrow beside the
the function is to navigate user selection is the mapping.
to view product. Allow user to view more
selection.
48
`
Impact
Based on a detailed analysis of the project's usability goals and design principles, it is important
that the proposed web page meets the following requirements:
1. Must have components and controls or plug-ins for applications such as main menus
and hyperlinks. It can be easily positioned in the easy-to-see position (such as the top
and middle) of the main page, making it easy for users to use it quickly and easily.
2. Focus on the overall layout, font design, font size, font type, color and language, all
pages are consistent and color and artistic, so that users can clearly understand the
function of each option during use, and also ensure the use Maintain a certain level of
satisfaction with the user interface design.
3. The design proposal application requirement is that it must be a simple and fast
application method to ensure that the proposed application option is not too
complicated. The structure of the information should be based on the main type of
information to be displayed on the main page. It is not allowed to fill all pages with a
large amount of information or a single piece of content.
4. The options used in the web page should provide appropriate feedback based on the
user's actions, view the feedback from the users, modify the vulnerabilities in the
website in time, and perform functional optimizations, such as the hamburger menu
when hovering, providing users with Multiple choices and icons matching the content
are easy for the user to understand.
49
`
Conclusion
In the end, Level 2 is a key stage in building a perfect UI design principle. It involves many
different usability stages, and every detail and function optimization need to be done so that E-
learning can be appreciated and accepted by the target audience.
Prior to the detailed analysis, several important principles of design were determined based on
the results of user analysis and task analysis. Then, after mentioning the advantages and
disadvantages of similar web pages, the problems that occur in principle are reduced. By doing
this, it ensures that it provides excellent usability for E-Learning.
50
`
Stage 3: Parallel Design, Participatory Design & Prototype
Parallel design
After the completion of stage 2, the four developers individually designed and generated
alternative designs based on the same requirements. Therefore, the following sections detail
the design of the dashboard and registration page, which are based on the usability goals of
learnability, efficiency, and memorability that can be finalized in stage 2.
GUO JUN HAO

Register Page
The image above shows the first design of the User interface of the Registration page.
This page allows users to search for events for Cisco Networking Academy and registered
accounts. The following is a design guide that has been implemented in this prototype.
1. Visibility
Visibility is reflected in the logo and the title of "Create an Account". The Logo
allows users to clearly understand the brand of the website, and the title of
"Create an Account" allows the user to directly know that the page is used to
create an account.
51
`
2. Constraint
Constraint is reflected in the word "required". "required" word mean the detail must
fill in before the user submit.
3. Affordance
Affordances can be reflected on the "Search" button and "Complete Sign Up", and
the user can recognize that the buttons are clickable.
4. Mapping
The mapping can be reflected on the hyperlink "Clear", and the user can click
"Clear" to clear all input boxes.
Although the proposed user interface design has met the various design criteria listed
above, there are still some significant limitations. First, the page layout error "New User
Registration" title position is on the right, and the picture on the left is not relevant to
registration. The design of the background uses white too monotonous and has no
professionalism.
52
`
Dashboard Page
The image above shows the first design of the Dashboard page user interface. This
page allows you to log out and search for events at Cisco Networking Academy. The
following is a design guide that has been implemented in this prototype.
1. Visibility
Visibility can be reflected in the avatar and name, which lets the user know that
they have logged into the site.
2. Affordance
Affordance can be reflected in the "Log out" button and the "Shop now"
button, its shape and design let the user know if it is clickable.
above, there are still some significant limitations. First of all, the layout of the page is
seriously wrong. The icon loaded is in the upper left corner, and the logo should be on the left
instead of the right. Finally, the content of the page is incorrect and should be related to the
course.
53
`
TAN YIK ERN

Register Page
The image above shows the second design of the User interface of the Registration
page. This page allows the user to register an event for the account. The following is a design
guide that has been implemented in this prototype.
1. Visibility
Visibility can be reflected in the "Register an account" word, which lets users know
that the page can create an account.
2. Constraint
Constraint can be reflected in the "*" symbol, which lets the user know that all
inputs must be filled in to be submitted.
3. Affordance
Affordance can be reflected in the "Submit" button, its shape and design let the user
know if it is clickable.
above, there are still some significant limitations. First, the page layout error does not use the
logo, and there is no menu function for the user to select the page. Finally, there is also
content at the bottom of the page that is not related to Cisco Networking Academy.
54
`
Dashboard Page
The image above shows the second design of the Dashboard page user interface. This
page allows you to search for courses, log out of accounts, view ratings, view progress, and
menu bars. The following is a design guide that has been implemented in this prototype.
1. Visibility
Visibility can be reflected on the menu at the top of the page. It allows the user to
immediately click on an option on the menu.
2. Affordance
Affordance can be reflected in the hyperlink "Logout" and the search box. The font
colour and underline of "Logout" let the user know if it is clickable, and the
shape and design of the search box let the search know that it can be searched.
3. Familiarity and iconic metaphor
Familiarity and iconic metaphor can be reflected on the icon of the star. The
number of stars allows the user to know the level of the course.
above, there are still some significant limitations. First of all, the page does not use the logo,
the background is too monotonous and has no professional sense. The hyperlink font for
55
`
"Log out" is in red and red is the error. The font colors of the menus are inconsistent, and the
design and shape are not like buttons.
56
`
CHEA YAN SHAW

Register Page
The figure above shows the third design of the User interface of the Registration page.
This page allows users to register for an account. The following is a design guide that has
been implemented in this prototype.
1. Visibility
Visibility can be reflected on the "Register" button. Its blue background lets users
know that they are currently on the registration page.
2. Constraint
Constraint can be reflected on the "*" symbol. It lets the user know that all fill in all
inputs must be made before submit.
3. Affordance
Affordance can be reflected on the "Register" button. Its design and shape let the
user know if it is clickable.
4. Consistency
Consistency can be reflected in the header, footer, button, and font. All pages
maintain consistent button colour, font colour, and font design.
5. Feedback & Errors
57
`
Feedback & Errors can be reflected in the red border input box and the "* please
fill in all the input" word. It reminds the user that all information must be
filled in before submitting.
6. Learnability
Learnability can be reflected on input boxes and buttons. The simple design lets the
user know that only the email and password need to be entered, and then click
the "Register" button to complete the registration.
7. Match between system and the real world
This guide is to apply login by using the "Already have an account? Sign in"
reality.
Dashboard Page
The image above shows the third design of the Dashboard page user interface. This
page allows the user to view the course, course ratings, course progress, course status, and
filtering capabilities. The following is a design guide that has been implemented in this
prototype.
58
`
1. Visibility
Visibility can be reflected on the menu bar on the left. The background blue of the
"Dashboard" option lets the user know about the dashboard page.
2. Familiarity and iconic metaphor
Familiarity and iconic metaphor can be reflected on the star symbol. Let the user
know the number of star icons is the level of the course rating.
3. Affordance
Affordance can be reflected on the option box. Its design and shape let the user
know if it is optional.
4. Consistency
5. Consistency can be reflected in the header, footer, button, and font. All pages
maintain consistent button colour, font colour, and font design.
Peer to peer evaluation

After evaluation and consideration, the developer decided to apply Design 3 as the end user
interface of Cisco Networking Academy. As mentioned earlier, Design 1 and Design 2
contain inappropriate layouts to display information, inconsistent designs and layouts.
Therefore, it leads to a poor user experience with high error rates, low availability and low
content accessibility. In addition, setting 13 contains a design layout that is not familiar to the
user, which may result in a longer user operation time. Therefore, it leads to low performance
and memory overload of the user. In addition, Design 3 meets the most design criteria
compared to Designs 1 and 2, making the user's use as simple and effective as possible.
Finally, Design 3 is the relatively best design because it includes an intuitive and consistent
design with a clear, concise and consistent user interface that enhances the overall user
experience.
Participatory design
Participatory design is the way all stakeholders are involved in the design process.
Traditional design projects are typically designed by paying customers and professionals in
similar and related industries, while members of the wider community are considered to be
able to influence from users directly affected by the design to local business owners who may
be external to them. The legal stakeholders of the project. They can passively understand the
development of the project and actively share the roles and responsibilities in decision
making. Therefore, participatory design requires the active participation of end users, using a
specific prototyping tool to collect in a specific way how they design a perfect user interface.
(Participate in Design, 2018)
59
`
Card Sorting
In order to gain insight into the user's perception of the Cisco Networking Academy's
website, a participatory design was conducted using the card classification method. Provide
users with a series of tagged cards and ask them to organize and categorize them into groups
they deem appropriate. Card sorting can help you design your information architecture,
workflow, menu structure, or website navigation path. Therefore, the developer decided to
use the best workshop as a card sorting tool to gather information about the classification of
navigation systems in the Cisco Networking Academy. Use closed card sorting techniques to
provide users with content cards and category cards and to place cards in these given
categories. Participants are given cards and are required to place the cards in a pre-established
category in the way they think is most appropriate.
Card Listing
The first step in card sorting is the card list. The developer has listed 13 lecturer information,
course information, course materials, course ratings, course progress, course status, our work,
ou concepts, upcoming events, visit times, contact information, locations and menus. As
shown below.
60
`
Categories
After the listing of the cards, the developer has listed 5 categories of home, dashboard,
course, about us and contact us to outline the structure of Cisco Networking Academy
website.
61
`
Card Sorting Execution

After categories listing, the Cisco Networking Academy website study has been launched and
distributed to 10 participants. Figure below shows the user interface of card sorting for Cisco
Networking Academy website.
62
`
Results
The results of the card sorting have been generated by Optimal Workshop and the
results matrix is as shown in the figure below.
Based on the result matrix shown above, all 10 participants gave a consistent view of
the layout of the navigation system. Therefore, as described in the result matrix. The Cisco
Networking Academy website is shown in the mind map below.
63
`
Prototype
The Cisco E-Learning prototype has been designed by using an online ux prototyping
tool, Marvel app via link https://marvelapp.com/4dahh5h
Home Page
Page Description:
The home page is an introductory page that is visible to users when they visit the website. Its
logo is displayed in the upper left corner, allowing the user to clearly know the name of the
brand. The horizontal menu bar allows the user to select different pages and set the selected
ones to a blue background, and there are sub-menu bars that directly select the specified page.
The input button in the upper right corner directs the user to the "Login" and "Registration"
pages. Banner uses scrolling to show different events that are coming or going on. The
middle of the page uses icons to show the user all the courses of the Cisco Networking
Academy, making it easy for users to remember the logo of each course. The bottom of the
page shows that the ownership of the site content belongs to the Cisco Networking Academy.
64
`
Strategies:
1. Visibility
The menus are at the top and click on one of the options to view the burger
menu. When the mouse points to an option in a submenu, the text color of the
option has a high color contrast.
2. Affordance
The design and shape of the login and registration buttons help the user
identify if the button is clickable.
3. Mapping
The scroll bar is a mapping, and its function is to navigate the user through the
topmost page to the bottom of the page. The dot button is also a mapping, and
its function is to let the user choose to view different banners.
4. Familiarity and Iconic Metaphor
Use the icon as a button and add an explanation, and use a unique icon to
represent each course.
5. Consistency
Consistent headers, footers, backgrounds, layouts, fonts, and colour schemes have
been applied to this page.
6. Memorability
Memorability can be reflected on the icon of the course. Using icons and course
collocations makes it easier for users to remember the type of course.
65
`
Course Details Page
Page Description:
The course information page provides all the information about the user's relevant course. It
also uses video to explain, so that users can more vividly understand the content of the
course.
Strategies:
1. Visibility
The menu is at the top and click on one of the options to view the burger menu.
When the mouse points to an option in a submenu, the text color of the option
has a high color contrast. The selected selection is displayed with a blue
background.
2. Affordance
The design and shape of the "Watch Video" button helps the user identify if the
button is clickable. Use the play icon as a button on the video to let the user
know that the click can play the video.
This guide is to apply a play video by using the "Watch Video" reality.
66
`
4. Consistency
Consistent headers, footers, backgrounds, layouts, fonts, and colour
schemes have been applied to this page.
The familiar and iconic metaphors applied to this page can be reflected in the
play icon by using the relevant symbols.
67
`
Register Page
Page Description:
The registration page allows the user to register for an account by entering an email address
and password. Two password entries are required to ensure that the user has entered the
password correctly. You must read the terms and tick them before submitting your
registration. If you already have an account, you can click "Already have an account? Sign
in" to log in directly.
Strategies:
1. Visibility
The menu is at the top and click on one of the options to view the burger
option has a high color contrast. The blue background description for the
"Register" button has been selected.
2. Affordance
The design and shape of the "Register" button helps the user identify if the button is
clickable.
3. Feedback & Error
68
`
If the user forgets to fill in the email and password, the text box will turn red and
notify the user to fill in the details.
This guide is to apply login by using the "Already have an account? Sign in"
reality.
5. Constraint
This page indicates "*" to complete the details before the user submits.
6. Consistency
The familiar and iconic metaphors applied in this page can be reflected in the
username icon and password icon by using the relevant symbols. These input
boxes also have textual explanations to ensure that the user enters the
information accurately.
8. Learnability
Learnability can be reflected on input boxes and buttons. The simple design lets the
user know that only the email and password need to be entered, and then click
the "Register" button to complete the registration.
69
`
Login Page
Page Description:
The login page allows users to log in using their email address and password. You must enter
the verification code displayed in the picture before logging in. It is not clear that you can
click the refresh button. You can also tick "Remember Me" to keep your account login status,
if you use it frequently. Forgot your password, you can click the hyperlink "Forgot
Password?" to reset your password. If you don't have an account yet, you can click on the
hyperlink "Don't have an account? Register" to register your account.
Strategies:
1. Visibility
has a high color contrast. The "Login" button blue background indicates that it
has been selected.
2. Affordance
The design and shape of the "Login" button helps the user to identify if the button
is clickable.
70
`

This guide is to apply registration by using the "Forgot password?" and "Don have
an account? Register" realistic practices.
The familiar and iconic metaphors applied in this page can be reflected in the
username icon, password icon and refresh icon by using the relevant symbols.
The input box also has a textual explanation to ensure that the user enters the
information accurately.
5. Constraint
9. Consistency
6. Flexibility and Efficiency of Use
The "Remember Me" option meets the needs of both novice and expert users.
Users can manually enter a username and password to let the app remember
the login information. Log in automatically on the next request.
7. Feedback & Error
If the user forgets to fill in the email, password and Captcha, the text box will
turn red and inform the user to fill in the details.
71
`
Forgot Password Page
Page Description:
The Forgot Password page allows users to reset their passwords using email. But you must
enter verification before submitting, if you can't see it, you can click refresh.
Strategies:
1. Visibility
option has a high color contrast.
2. Affordance
The "Send New Password" button is designed and shaped to help the user identify
if the button is clickable. The "Send New Password" button is designed and
shaped to help the user identify if the button is clickable. And the refreshed
icon can refresh captcha when clicked.
email icon and password icon by using the relevant symbols.
72
`
4. Constraint
5. Consistency
73
`
About Us Page
Page Description:
The About Us page shows pictures of the history, purpose, and services of the Cisco
Networking Academy. Especially in the historical part, scrolling pictures are used to show
things in different years in order.
Strategies:
1. Visibility
has a high color contrast. The blue background of the "About Us" button
74
`
indicates that this has been selected.

2. Mapping
The left and right arrows are maps, and the function is the previous or next picture.
The function of the dot symbol is to select the specified picture.
3. Consistency
75
`
Contact Us Page
Page Description:
The Contact Us page contains information about Cisco Networking Academy contact
information and location and Google Maps, and a button with "Get Direction via Google
Maps" allows users to get the correct location directly as a guide.
Strategies:
1. Visibility
has a high color contrast. The blue background of the "Contact Us" button
indicates that it has been selected.
2. Mapping
The icons for "+" and "-" are maps, and the function is to zoom in or out on the
map.
3. Consistency
76
`
4. Affordance
The design and shape of the "Get Direction via Google Maps" button helps the user
identify whether the button is clickable.
77
`
Dashboard page
Page description:
The Dashboard page is the first page that appears after a user logs into the site. In the upper
right corner, the picture of the avatar is used as the button, and the menu bar appears when
the button is pressed. The left side of the menu displays the contents of the user panel and
shows the current page with a blue background. The page selected by the menu is displayed
on the right. Option input is used to allow users to filter courses in different states. And in the
most concise way, show the grade, grade, status, duration and organization of the course.
Strategies:
1. Visibility
has a high color contrast. The blue font for the Dashboard button represents
the mouse on it. And the blue background representation of the menu bar on
the left has been selected.
2. Affordance
78
`
The design and shape of the option box helps the user identify if it is
selectable.
3. Mapping
topmost page to the bottom of the page.
The familiar and iconic metaphors applied to this page can be reflected in the stars
icon by using related symbols. The star icon represents the course rating and
the number of icons represents the score.
5. Consistency
79
`
My Courses Page
Page description:
The My Courses page shows all of the user's courses. List all courses for the user using a list,
listing the course name, module code, and the name of the lecturer. The lecturer allows the
user to click through the hyperlink and jump to the web page to display the information of the
lecturer. The list also has a paging function, which will go to the specified number of pages.
Strategies:
1. Visibility
has a high color contrast. The menu background on the left is blue to indicate
that it has been selected.
2. Affordance
The design and shape of the option box helps the user identify if it is selectable.
The input box is designed with a search icon to let the user know that a search
can be made. The blue font and underlined design let the user know that it is a
clickable hyperlink.
80
`
3. Mapping
topmost page to the bottom of the page. The number represents the number of
pages and assists the user in selecting the specified page.
search icon by using the relevant symbols.
5. Consistency
81
`
Course Material Page
Page description:
The Course Materials page is the page after the user selects a course on the course page and
will display all the materials for the specified course. The navigation bar will display the
current course content, and you can return to the course list by clicking the hyperlink "My
Courses" in the navigation bar. Expanded in the form of arrows, the classification of course
materials. Course materials are displayed as hyperlinks and click to automatically download
the document.
ma
Strategies:
1. Visibility
option has a high color contrast. The menu blue background on the left
represents the selection.
2. Affordance
The design and shape of the blue font helps the user identify whether it is clickable.
3. Mapping
82
`
topmost page to the bottom of the page. The down arrow is a map and the
function is to expand other options.
4. Consistency
83
`
Lecturer Info Page
Page description:
The lecturer information page is the page after the user clicks on the course leaderer on the
course page. The page will display the profile of the specified lecturer, including the avatar,
name, email, contact number, and functional area. In the lower right corner, there is a button
for "Back" to click back to the course list.
a
Strategies:
1. Visibility
has a high color contrast. The menu blue background on the left represents the
selection.
2. Affordance
The blue font and the "Back" button are designed and shaped to help the user
identify whether they are clickable.
3. Consistency
84
`

4. Mapping
topmost page to the bottom of the page.
85
`
Setting Page
Page description:
The settings page displays the user's profile, including email and name. The email is a
material that cannot be modified. Enter the new password directly, and then click the
“Update” button to update the data. The result will be displayed in the lower left corner like
“Record Updated”.
Strategies:
1. Visibility
has a high color contrast. The menu blue background on the left represents the
selection. The background of the input box is gray to indicate that it cannot be
edited.
2. Affordance
The design and shape of the Update button helps the user identify if the button is
clickable.
86
`
The familiar and iconic metaphors applied in this page can be reflected in the email
icon, name icon and password icon by using the relevant symbols.
4. Constraint
5. Consistency
6. Feedback & Error
If the user forgets to fill in the name, the text box will turn red and inform the user to fill in
the details. After clicking the "Update" button, there will be a "Record Updated" prompt.
87
`
Stage 4: Evaluation
88
`
References
Webflow.com. (2019). The pros and cons of icons in web design | Webflow Blog. [online]
Available at: https://webflow.com/blog/the-pros-and-cons-of-icons-in-web-design [Accessed
29 Jan. 2019].
Anon, (2019). [online] Available at: https://www.udemy.com/ [Accessed 29 Jan. 2019].
Netacad.com. (2019). Download The Packet Tracer Simulator Tool & Find Courses |
Networking Academy. [online] Available at: https://www.netacad.com/courses/packet-tracer
[Accessed 29 Jan. 2019].
Cybrary. (2019). Free Cyber Security Training and Career Development | Cybrary. [online]
Available at: https://www.cybrary.it/ [Accessed 29 Jan. 2019].
Creative Market. (2019). Graphics ~ Creative Market. [online] Available at:

https://creativemarket.com/graphics [Accessed 29 Jan. 2019].
Creative Market. (2019). Graphics ~ Creative Market. [online] Available at:

https://creativemarket.com/graphics [Accessed 29 Jan. 2019].
Participate in Design. (2018). What is Participatory Design? Retrieved 1 20, 2019, from
http://participateindesign.org/approach/what
89
View publication stats

HCIassignment

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCIassignment

Uploaded by

Copyright:

Available Formats

See discussions, stats, and author profiles for this publication at: https://www.researchgate.

Human Computer Interaction

Thesis · November 2019

Alfred Tan Yik Ern

The user has requested enhancement of the downloaded file.

TECHNOLOGY PARK MALAYSIA

LECTURER: RIZAWATI BINTI ROHIZAN

User Categories Users Description

Detail Phase One

Tick as Correct ✓ YES NO

1. Did you know other e-learning website similar to

2. Do you often use Cisco e-learning website?

3. Does Cisco e-learning website provide good

4. Does Cisco e-learning website will decrease the

5. If Cisco is able to achieve profitable operations, will

6. Have you been using Cisco for more than 5 times a

7. Does Cisco's web design attract you to explore more?

8. If Cisco is willing to provide one-to-one online

Strongly disagree → Strongly agree 1 2 3 4 5

1) Did Cisco e-learning website easy to interact

2) Please rate your satisfactions with the overall

3) Where do you know about Cisco e-learning websites?

4) Do you like the dashboard interface in Cisco e-learning website?

6 and above --- ( )

5) Please explain the experience of using Cisco e-learning website.

7) What type of e-learning you are interested? (✓ all that apply.)

Read online document --- ( )

Online video teaching --- ( )

Easy to learn --- ( )

9) Please select your age range (Tick as Correct (✓)

24 and above --- ( )

Customer (primary) Characteristic Ranges

Age: 18 and above

User type: Intermediate user

Gender: Male and female

Computer Know basic theory of networking and computing security

Question (2) Do you often use Cisco e-learning website?

Justification To understand did Cisco e-learning website provided a well

Justification To understand did Cisco e-learning website has declined the

Justification Understand how often students use Cisco e-learning website in a

Justification Understanding a pretty user interface design will attract student

Question (8) If Cisco is willing to provide one-to-one online teaching methods,

Justification Justify student like one-to-one learning live on web or dislike.

Justification To understand the content and function on Cisco e-learning website

Question (3) Where do you know about Cisco e-learning websites?

Justification To understand students, know the website from where.

Justification Willing to know currently Cisco e-learning website’s dashboard user

Justification To know how much time to spend on Cisco e-learning website.

Justification To understand why student like to use online study or e-learning.

Question (9) Please select your age range.

Hierarchical Task Analysis (1)

Critically Difficult Frequency

Hierarchical Task Analysis (2)

Critically Difficult Frequency

Stage 2: Usability Goals and Design Guildelines

(Diagram 1: Cisco website) (Keyboard Banger, 2019)

(Diagram 2: Cisco website) (News.semo.edu, 2019)

user interface design

Diagram 3: Cisco website) (Shelley Xia, 2019)

"Guide Me" Tool

In order to achieve an E-learning memorable goal, it is necessary to have a title or description

(Diagram 4: Cisco website) (Shelley Xia, 2019)

(Diagram 5: Efficiency website design) (Shelley Xia, 2019)