KATHMANDU UNIVERSITY

SCHOOL OF ENGINEERING
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

ASSESSMENT-02
Course: COMP 341

Submitted by: Submitted To:

Nabin Gyawali Mr. SUSHIL SHRESTHA
C.E. DoCSE
III Year
Roll No.: 16
TASK 1 - Interpret Kathmandu University website on the basis of Four pillars of Design.
Also suggest suitable evaluation methods for the evaluation of these sites (you can conduct
some evaluation techniques and explain your findings too in this part).
The four pillars of design are:
❖ User-Interface Requirement
❖ Guidelines Documents and Process
❖ User-Interface Software Tools
❖ Expert Reviews and Usability Testing

Figure 1: Four pillars of Design

Now interpreting Kathmandu University website on the basis of four pillars of design:
1. User-Interface Requirement:
User-Interface requirement is the process of specifying user requirements, functionality
requirements and improving the experience of the user. Clearly specifying user
requirement is very necessary for design. The user interface requirement generally
describes the system behavior in response to the user.
The Kathmandu University website provides information about the university, the courses
and facilities it offers to the new users who are not attended to the university. Likewise, for
the students and staffs, the website gives all the information on ongoing activities, notices
and announcements. Similarly, students can check their grades through the exam section
of the university website. So the websites performs all the task as required but the
experience in performing these task can be very troublesome and annoying. For example,
 the old website of Kathmandu University is dull and flooded with overwhelming amount
of information. Although the website does its task but the experience is not good. The
website contains all the notices and information but these notices are congested in one
single column which is not appealing to users. Likewise, the navigation of the website is
very confusing. One cannot distinguish between the link and text within the website
without hovering the mouse. The old website doesn’t even have a search field.
But the new website solves all the problems that exist on old website.

2. Guidelines documents and process:

This pillar mainly focuses on the visual interface. The considered guidelines documents
and process are:
❖ Word, icons and graphics:
This emphasizes the aspects such as terminologies, fonts, icons, graphics, color
combinations, and so on. Comparing both the old and new websites of Kathmandu
university, it seems obvious that the new website is well designed in terms of
terminologies, icons and graphics. The icons and graphics of the new website are
much more aesthetically pleasing and engaging. The font size of the old website is
very little which can be hard to read and understand for older demographics,
likewise the use of inconsistent fonts, colors, font layouts and icons are much more
existent in the old website than the new one.

Figure 2: The use of dull colors and fonts in old website

❖ Screen Layout issues:

The old website has screen layout issues while visiting certain webpages of the
website and also while visiting the site in mobile devices with changed screen
layout. Both the websites have some kind of screen layout issues.

❖ Input and output devices:

 Both the website provides good feedbacks and changes in pointing cursors and
or any other pointing devices. Similarly, the response time for both the websites is
very fast.

❖ Action Sequence:
This includes semantic and sequence, error handling, programmed keys, etc.
Both the websites seem clearly implementing the predefined action sequences,
error handling, and recovery methods.

❖ Training
This includes online tutorials and help materials on how to use the system. On
both websites, no such material can be found. An example of such materials can
be the admission application section of Kathmandu university which consists of
required procedures and methods of applying with video tutorials as well also the
next example can be the MOOC system where we can get the user manual
before using the system.

3. User Interface Software Tools:

The use of the user interface software tools provides an overview of how the final website
might look like. The main goal of the software tools is to design a prototype that helps in
proper planning and designing of the user interface. When a prototype is created at first,
user feedback can be obtained and error can be detected at earlier stages and changes to the
design can be made to save time and money. Some of the user interface software tools are
Atmel Qtouch, Altia design, GrabCAD etc.

4. Expert Review and Usability Testing:

An expert review is where a usability expert uses his/her knowledge and experience of
testing websites with users to walk through a website in the shoes of a typical user.
Usability testing is the practice of testing how easy a design is to use with a group of
representative users. It usually involves observing users as they attempt to complete tasks
and can be done for different types of designs. It is often conducted repeatedly, from
early development until a product's release. Through usability testing, we can find design
flaws we might otherwise overlook. When we watch how test users behave while they try
to execute tasks, we’ll get vital insights into how well the design/product works. Then,
we can leverage these insights to make improvements.
In case of the university website, I don’t think expert review and usability testing was
properly carried out before starting the development.
So, this is the interpretation I did of Kathmandu University website using the four pillars of design.
Use of these four pillars of design are very important for a system. Likewise, for the proper
evaluation methods for the university website, various in and out university HCI experts can be
consulted for proper design of the website. One evaluation method that I suggest is heuristic
evaluation. Heuristic evaluation is a usability inspection method that helps to identify usability
problems in the user interface (UI) design. It specifically involves evaluators examining the
interface and judging its compliance with recognized usability principles. Similarly, cognitive
walkthrough can also be carried out for the website evaluation. With the use of cognitive
walkthrough evaluators can work through a series of tasks and ask a set of questions from the
perspective of the user.

TASK 2 - Evaluate the Moodle system (mooc.ku.edu.np), which you are using for the course
called Human Computer Interaction, using Shneiderman's "Eight Golden Rules of Interface
Design".
Shneiderman’s “Eight Golden Rules of Interface Design” are a guide to good interaction design. In
HCI, good interaction and interface design are an upmost priority in designing a good interactive
website. In 1986, Shneiderman published the first edition of his book “Designing the User Interface:
Strategies for Effective Human-Computer Interaction (Shneiderman, 1986)."Included in this
published book is his most popular work “Eight Golden Rules of Interface Design” which is still
used in todays modern and advanced websites which read:
1. Strive for consistency:
The website should act or perform tasks in the same way over time with the use of identical
terminology used in menus, navigation, help screens with the use of consistent colors,
layout, capitalization, fonts and so on. Consistency helps user learn to use the website faster
with higher efficiency.
In the case of the MOOC system, it satisfies the first rule of consistency. The use of menus,
navigation, fonts and color scheme are consistent throughout the system. The UI design is
almost similar with all the webpages of the MOOC system which ensures the users are able
to learn faster.

2. Enable frequent users to use shortcuts:

As the frequency of the users into the system increases, so does the users desire to reduce
the number of interactions on the system to perform a certain task. The use of abbreviations,
function keys, commands, keyboard shortcuts and the use of macros are some of the
examples for the use of shortcuts within the system which reduces the time a user has to
do to perform a certain task.
The MOOC system utilizes these uses of shortcuts. The one shortcut that I find very useful
in the system is the use of path for navigation on the top of the page. This enables users to
quickly switch between the course contents.
 Figure 3: Shortcut example in MOOC system

In the above snapshot, we can see the path of every contents we surfed into. So, while we
are in Week 5, we can easily switch to Computer Science page without the need of going
back to home screen which can save a lot of time. Similarly the system also used the
keyboard shortcuts like CTRL+C to copy, CTLR+V to paste, CTRL+X to cut.

3. Offer Informative feedback:

For every action a user performs, there should be a interface feedback so that the user
knows the action has been successful. For continuous and minor activities, the reaction can
be unassuming, though for infrequent and significant activities, the reaction ought to be
more generous.
The MOOC system uses this golden rule beautifully. The system lets the user know that
they have completed a certain task by making them aware through the use of tick marks
beside every task. Similarly, the system also lets the user know if they have left some
responses within the system unattended like in surveys, quizzes and questionnaires.
 Figure 4: Feedback on MOOC system

Likewise, it also lets the user know if they’ve already filled out the questionnaire

Figure 5: Feedback on MOOC system

4. Design dialogs to yield closure:
A good website tells the user what their actions has led them to. A website shouldn’t keep
the user guessing. Informative feedback at the completion of a group of actions gives users
the satisfaction of accomplishment, a sense of relief, and an indicator to prepare for the
next group of actions.
A good example of this golden rule in MOOC system is the use of point based system. The
MOOC system awards the user a certain amount of points and badges for the completion
of each task. This point system gives the user a sense of accomplishment which can
encourage the user to use the system more. The use of these kinds of points and badges is
known as gamification in learning which can be very encouraging and motivating to
students.

5. Offer Error Handling:

Error Handling is very important rule of design. The interface must be designed with
minimal serious errors. In case the user makes an error, the interface should offer simple
and effective instruction for handling those errors.
The MOOC system handles error very beautifully. For example, in case of surveys, if the
user submits the survey without filling one or two questions, the users don’t have to
perform the whole survey again but instead they are guided to fill out the unanswered
questionaries only. Likewise, in case of invalid login, the system prompts the user to retype
the username or password again.

6. Permit easy reversal of actions:

In a well-designed system, the actions should be reversible. Even if the user does a certain
error, the user must be able to undo the error and offer a simple and complete walkthrough
on how to solve the error. The MOOC system permits the easy reversal of action. The
 MOOC system allows the user to edit or delete the post in a forum. Likewise, the system
also allows the user to review their quiz answers and make correction to the answers.
Similarly, the system also allows the users to retake their quiz. Likewise the MOOC system
also supports the UNDO and REDO command into the embedded text editor of the system.

7. Keep Users in Control:

A well-designed system makes the users feel like they are in control for their part of the
system. An experienced user doesn’t want any changes in familiar behavior of the system
and are annoyed by tedious data-entry sequences, difficulty in obtaining necessary
information and inability to produce desired result. The MOOC system makes the use of
this rule by giving the full control of the course materials to the students. The course
contents of the system can be viewed anytime the student feels like to. Similarly, the
discussion forum was open all the time and students could post course materials anytime
and how many times they like.

8. Reduce short term memory load:

The limitation of human information processing in short-term memory requires that
displays be kept simple, multiple page displays be consolidated, window-motion frequency
be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences
of actions. The MOOC system has the function of giving tick mark to the completed course
contents so that user don’t have to memorize what course contents they have completed
and what are remaining. Likewise the week activities, topics and subtopics were properly
managed and synchronized so that it becomes easy for the students to navigate into the
system.

Figure 6: Week activities for MOOC system

TASK 3 - In terms of Visibility, Affordance, Constraints, Mapping, Consistency and
Feedback, compare the course in MOOC (Human Computer Interaction) and elf or LMS
(any other courses you are taking in other types of system of KU).

1. Visibility:
Visibility means the user needs to know what all the options are and know right away
how to access them. Visibility generally means how the system conveys the
information to the user .I have used the MOOC system and the Kathmandu University
ELF system. In terms of the visibility they are quite similar with some noticeable
differences. While visiting both the websites for the first time, both the website prompts
the user to sign in with both of them following the visibility design principles. After
loging in into both the websites, the ELF system directly jumps into our courses and
contents while the MOOC system login page is similar to the guest page which can be
confusing to first time users.

Figure 7: Home page of MOOC system after signing in

 Figure 8: Home screen of ELF after signing in

Likewise, after the course contents is selected, the ELF system contains overwhelming
number of information which reduces visibility and can divert the mind of the students,
while the MOOC system contains the information that is only necessary.

2. Affordance:
Affordance refers to providing a user with some clues so that the user can predict what
will be the result of his/her actions. The use of mouse hovering effects, mouse pointers
and dropdowns menus implement affordance in websites. Comparing both the
websites, I find the MOOC system has better affordance than the elf system.

3. Constraints:
The constraint that the MOOC system has are that the certain course contents can only
be viewed after the completion of previous contents. Similarly, in MOOC system, the
quiz can be taken twice within 24 hours. Likewise, most of the contents of both the
MOOC system and the ELF system can only be accessed after creating an account into
the system. Likewise in ELF the students can search for the past questions through
course code, year of examination etc. Likewise, forms, surveys and discussion forums
cant be submitted in MOOC system with empty fields with similar implementation in
university ELF system.
 Figure 9: Constraint in MOOC system

4. Mapping:
Mapping means controlling navigation within the system. The mapping present in the
MOOC and ELF system are the standard browser’s scrolling and going back and forth
between the webpages. Apart from these standard browser’s mapping, MOOC system
lets users navigate between webpages through the specified hierarchical path which is
missing in ELF system.

Figure 10: Mapping in MOOC system

5. Consistency:
Both the system are pretty consistent in their own way with some inconsistencies here
and there. The both MOOC and the ELF system feel the same in most of the way. The
page layout, grid, menus, icons , placement of headers and footers in most of the
 webpages of the system are consistent and similar. The icons for similar actions are
identical in both the system. But the font sizes are inconsistent within both the MOOC
and ELF system with some webpages having larger font sizes and some having smaller
font sizes. Likewise, ELF has layout inconsistencies in some parts. Both the MOOC
and the ELF system are consistently designed in all the webpages with familiarity.

6. Feedback:
The feedback system of both the MOOC and ELF system quite good as explained in
task 2. Tick mark is shown on the side of every course contents after the content is
completed. Similarly, the use of point and badges system is used in MOOC system
which is absent in ELF system. Likewise, both the system use the hovering and color
effects on different buttons and icons to indicate feedback.