WORKBOOK ACTIVITY

3123
HUMAN COMPUTER INTERACTION

Table of Contents
 TOPICS PAGES

ACTIVITY 1: Introduction to Human Computer 3

Interaction
ACTIVITY 2: Introduction to Human Computer 8
Interaction
ACTIVITY 3: The Design Process 13

ACTIVITY 4: The Design Process 14

ACTIVITY 5: The Design Process 15

ACTIVITY 6: The Design Process 16

ACTIVITY 7: Evaluation Techniques 17

ACTIVITY 8: Evaluation Techniques 18

ACTIVITY 9: Evaluation Techniques 21

ACTIVITY 10: Evaluation Techniques 23

ACTIVITY 11: Universal Design 27

ACTIVITY 12: Universal Design 29

2
ACTIVITY 1: Introduction to Human Computer
Interaction
Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activities 1A, 1B, 1C, 1D and 1E.

By the end of this tutorial session, you should be able to:

1. List example of command line interface in real life application.

2. Define advantages and disadvantages of WIMP.

3. List features of Question/answer and query dialog.

4. Define applications of 3D interfaces technology.

5. List the best practices for navigation on the mobile web.

Activity 1A:
Discuss and list three example of software that used command line interface in real life
application.

1. Mac OS X
2.Linux
3.Command line interface

3
Activity 1B:
WIMP interface stands for Window, icon, menu and pointer. In a group discuss the
advantages and disadvantages of WIMP interface.

Advantages and Disadvantages of WIMP

Advantages Disadvantages

This type of user is easy to Consider WIMP to be ill-suited for

use,especially for a beginner multiple applications

You do not have to learn complicated Widget model is not suitable for the
commands implementation of post-WIMP
interactions

They let you exchange data between Can not be used in scene where
different software applications graphics lay on top of each other

There are usually good help facilities Programmers can not use widgets to
provided with WIMP interfaces implement a radar image that contains
flight elements on top sectors

4
Activity 1C:
List features of Question/answer and query dialog.

Features of Question/answer and query dialog

1. A simple mechanism for providing input to an

application in as specific domain

2. User is asked a series of question

3. Mainly with yes/no responses or multiple choice

4. Next question/action depends on test answer

5
Activity 1D:
In a group discuss applications of 3D interfaces technology.

In 3D user interaction the human interacts with a computer or other device

with an aspect of three-dimensional space. This interaction is created thanks
to interfaces, which they will be the intermediaries between human and
machine.

6
Activity 1E:

“Today’s smartphone owners use their phones to perform specific tasks such as checking
locations of destinations, public transit schedules, and bank balances. While internet
browsing on handheld devices does occur when many people prefer to surf the web from
the comfort of their home or office.”

In a group discuss the best practices for navigation on the mobile web.

Because smartphone will save time and costs because they did not have to queue at the
bank or while queuing to buy tickets for public transport

7
ACTIVITY 2: Introduction to Human Computer
Interaction
Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activities 2A and 2B

By the end of this tutorial session, you should be able to:

1. Explain the role of ergonomics in interface design
2. Understand and identify the role of interaction.

Activity 2A

1. Open website as follow http://www.exmouth-view.co.uk/.

8
2. Discuss in a group and identify the problem of using the website.

3. Discuss the use of color using in the website.

9
4. Discuss the arrangement of the text, menu and image in the website.

5. Create re-designs (hand sketches) the better interface of the website. Give a
suggestion on identified problem.

10
Activity 2B

Identify the activities in model of interaction and understand the framework.

Norman’s model of interaction is perhaps the most influential in HCI. The interactive cycle
can be divided into three phases:
• form goal
• execute
• evaluate
These can then be subdivided into further stages, giving seven in all.

Seven Stages of Action

• establishing the goal

• forming the intention
• specifying the action sequence
• executing the action
• perceiving the system state
• interpreting the system state
• evaluation the system state with respect to the goals and intentions

1. In a group, choose ONE everyday devices or computer application. Do a discussion

and answer each of the question :

 Determine the function of the device?

 Tell what actions are possible?

 Does the system perform the action and meet the goal?

 Tell what state the system is in?

 Is the system frustrating to use or easy to use?

11
2. Fill in the blank with appropriates process according to the framework.

Performance Articulation
Presentation Observation
O
output

S U
core
task

I
input

3. Present your result of discussion.

12
 ACTIVITY 3: The Design Process
Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 3A

By the end of this tutorial session, you should be able to:

1. Explain the principles to support usability in interactive systems design.

Activity 3A

Complete the table given with correct definition for the principles and give an example for
each principle.

NO. PRINCIPLES DEFINITION EXAMPLE

1 LEARNABILITY : Support for user to Operation visability can see
The ease with which new determine the effect avail actions(e.g menu vs
users can begin effective Predictability of future action command shell grayed menu
interaction and achieve based on past items)
maximal performance. interaction history
-assessing the effect -In a Windows system, to move a
of past actions file from one directory to another
directory, the user drags the visual
Synthesizability icon of the file from the original
directory to the destination
directory where it remains visible
-immediate vs. eventual honesty
-how prior In the design of GUI, the regions
knowledge applies on the screen which denote buttons
Familiarity to new system should be shaded to give a
threedimensional appearance
-guessability; affordance
extending specific – drawing circles ! drawing
interaction ellipses. – applications should
Generalizability
knowledge to new offer the Cut/Copy/Paste
situations
Consistency likeness in -Always place the Quit command
input/output as the last item in the leftmost

13
 behaviour arising menu.
from similar -QWERTY and DVORAK
situations or task
keyboards
objectives
-freedom from For safety reasons, it may be
system imposed necessary to prohibit the user from
constraints on input the “freedom” to do potentially
Dialog Initiative dialogue serious damages
- direct manipulation is user pre-
emptive
-system vs. user pre-emptiveness
-ability of system to -windowing system with an
support user audible bell. You are editing a
interaction for more program when a beep indicates
than one task at a that a new electronic mail message
time has arrived.
- a windowing system support a
multi-threaded that is interleaved
amongst a number of overlapping
Multithreading task. Each window can represent a
different task, for example text
editing in one window, file
management in another and
electronic mail in yet another
FLEXIBILITY : windows.
Multiplicity of ways in -concurrent vs. interleaving;
2 which the users and
system exchange multimodality
information. passing -user can perfectly able to check
responsibility for his spelling.
task execution – this task also is perfectly suited
Task between user and to automation.
migratability system – It is not desirable to leave this
task completely to computer...
-spell checking is best Performed
in such cooperative way.
-allowing -Allow users to input margin for a
equivalent values of letter in inches or centimetres
input and output to -Representation multiplicity
Substitutivity be substituted for illustrate flexibility for state
each other rendering
-representation multiplicity; equal
opportunity
modifiability of the -users ability to adjust the form of
user interface by input and output
Customizability user (adaptability) - automatic customization of the
or system user interface by the system
(adaptivity)
3 Observability -ability of user to brows ability; defaults;

14
 evaluate the reachability; persistence; operation
internal state of the visibility
system from its
perceivable
representation
-ability of user to reachability; forward/backward
ROBUSTNESS : take corrective recovery; commensurate effort
The level of support Recoverability action once an error
provided to the user in has been
determining successful recognized
achievement and -how the user Stability
assessment of goals Responsivenes perceives the rate
s of communication
with the system
-degree to which -task completeness; task adequacy
Task system services
Conformance support all of the
user's tasks

ACTIVITY 4: The Design Process

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 4A

By the end of this tutorial session, you should be able to:

15
 1. Identify design rationale technique using design space analysis

Activity 4A
Semester break is just around the corner. You and six other friends are planning to have a
vacation to the interesting travel destination. Referring to the situation, produce a graphic
solution using design space analysis (QOC notation) to indicate transportation method to
your selected destination.

i) State the problem

 Transportation
ii) Identify the options
 Bas
 Car
iii) Describe the criteria
 Bas :Widely Spaces
:Expensives
 Car :Limited Space
:Cheap
iv) Sketch the QOC diagrams and choose your favorite option

BAS Expensives

Widely Spaces

TRANSPORTATION

CAR Cheap

Limited Spaces
ACTIVITY 5: The Design Process
Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 5A

By the end of this tutorial session, you should be able to:

1. Identify the design rules to improve interface design based on the given scenario.

16
Activity 5A

Select a suitable example for each of the following environments.

i) Web Application Systems
 HTML
 JAVASCRIPT
 HTTP
ii) Programming environments
 UNIX or DOS command-line interfaces
 SQL
 Programming and scripting languages

a. Snap shot the interface design selected and find where the interfaces does meets the
Schneiderman’s Eight Golden Rules that you had learned.

 Enable Frequent Users To Use Shortcuts

 Design dialogs to yield closure

b. Suggest potential interface design improvements and recommendations.

ACTIVITY 6: The Design Process

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 6A

By the end of this tutorial session, you should be able to:

1. Identify the design rules to improve interface design based on the given scenario.

17
Activity 6A

In a group, you are required to select a suitable example for each of the following
environments.
i) Auto Teller Machine (ATM)
 Wizards
 Receipt
 Repair Manuals
 Getting cash from an ATM
ii) Voice answering systems
 Alert dialogs
 Ringing Telephone
 Alarm of all sorts
iii) Multimedia Environments
 Text
 Audio
 Animation

a. Snap shot the interface design selected and find where the interfaces does meets the
Schneiderman’s Eight Golden Rules that you had learned.

 Offer Informative Feedback

 Permit Easy Reversal Of Actions

b. Suggest potential interface design improvements and recommendations.

ACTIVITY 7: Evaluation Techniques

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 7A

By the end of this tutorial session, you should be able to:

1. Understand to evaluate the design by expert techniques using review-based
evaluation

Activity 7A

Step 1: Open two existing Interactive system from website.

18
 i. www.psmza.edu.my
ii. www.psis.edu.my
Step 2: Explore each website chosen using its navigation provided within 15 minutes.

Step 3: Make some comparison between the systems. Explain the PRINCIPLES OF
LEARNABILITY

Step 4: Describe how interfaces influence the user on element below:

i. Strive for consistency

 Consistent sequences of actions should be required in similar situations;
identical terminolgy should be used in prompts, menus and help screens;
and consistent command should be employed throughout.

ii. Offer informative feedback

 For every operator action, there should be some system feedback. For
frequent and minor actions, the response can be modest, while for
infrequent and major actions, the response should be more substantial.

iii. Enable frequent users to use shortcuts

 As the frequency of use increases, so do the user’s desires to reduce the
number of interactions and to increase the pace of interaction.
Abbreviations, function keys, hidden commands, aand macro facilities are
very helpful to an expert user.

ACTIVITY 8: Evaluation Techniques

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 8A

By the end of this tutorial session, you should be able to:

1. Understand how to develop a questionnaire for query techniques

Activity 8A
Types of questions in questionnaire design are:
1. Open format questions (multiple choices)

19
 2. Likert questions

3. Dichotomous questions

Step 1: Open www.nst.com.my as a reference for your research. All the questions should
be referring to the website.

Step 2: Use Microsoft Word to create the questionnaire.

Step 3: The title of research is “THE USABILITY AND FUCTIONALITY OF A WEBSITE”.

Insert the question wording for category below:
a) Demographic information ( 5 questions )
b) Usability of the system ( 10 questions )
c) System Design (5 questions )

20
 Example: Likert questions

Step 4: Properly arrange the questions.

Notes: the practical exploration is based on website chosen

ACTIVITY 9: Evaluation Techniques

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 9A

By the end of this tutorial session, you should be able to:

1. Understand how to evaluate a web system based on Experimental Evaluation

21
Activity 9A

Complete the experimental evaluation below:

1. There are many factors considered in experimental design. Give the simple explanation &
example for all the factors below:

Participants:
Participant should be chosen to match the expected user population as closely as
possible

Example:
Sample size must be large enough to be considered to be representative of the
population

Variables:
characteristic changed to produce different conditions

Example:
interface style, number of menu items

Hypotheses:
prediction of outcome of an experiment
- framed in terms of independent variables (IV) and dependent variables (DV)

Example:
error rate will increase as font size decreases

Experimental design (Analysis of data):

each subject performs under only one condition

Example:
> Experimental condition - Variables has been manipulated
> Control - ensure that the manipulation is responsible for any differences that are
measured

2. You are required to design an experiment to test whether the learning style of
Soft skill will improve student’s assessment in university

Based on the given scenario state the following:

22
 i) Participants

ii) Hypothesis

iii) Independent variable

iv) Dependent variable

ACTIVITY 10: Evaluation Techniques

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 10A

By the end of this tutorial session, you should be able to:

1. Understand how to evaluate an interactive system

23
Activity 10A

Step 1: You are required to develop a simple web design prototype by using Microsoft
PowerPoint. The title of web page is Dynamic Tuition Centre.

Step 2: Your prototype must include the items below:

- Texts
- Graphics
- Company Logo
- Menu Buttons
- Hyperlink (navigation for each button)

24
 Example of Interactive System

Step 3: Create hyperlink for each button

Highlight the button > right click > choose HYPERLINK >PLACE IN THIS DOCUMENT >
select the slide number

i. Highlight the button

ii. right click > choose HYPERLINK

25
iii. PLACE IN THIS DOCUMENT

iv. select the slide number

26
Step 3: The lecturer will evaluate the prototype after finish (Evaluation Method : Think
Aloud)

ACTIVITY 11: Universal Design

Duration: 2 Hours

Learning Outcomes
This Tutorial encompasses activity 11A, 11B and 11C

By the end of this tutorial session, you should be able to:

1. Define alternative mode of human computer interaction:
o Sound in the interface
o Touch in the interface
o Handwriting recognition
o Gesture recognition
2. Design an appropriate interface design by using the alternative mode
3. Describes the accessibility guidelines and standards

27
4. Demonstrate the accessibility features in user interfaces : biometric access control,
narrator

Activity 11A
1. In a group, design an interface of the email application. The interface would only
cater for the main page of the email and compose page. The application needs to
include the entire following alternative mode:

a. Sound in the interface

b. Touch in the interface

c. Handwriting recognition

d. Gesture recognition

2. Prepare and present a presentation which consists:

a. Visual image(s) of the interface

b. Explanation of how the usage of the alternative mode would improve the
design of the email application.

c. Demonstration for each of the alternative mode being used in the application.

Activity 11B

Follow the procedure.

Step 1: Launch the website browser.

Step 2: Go to http://www.w3.org/standards/webdesign/accessibility

28
 Step 3: Understand the article to help for design website accessibility.

Step 4: Search another website and list the rules for website accessibility.

Activity 11C

1. In a group, demonstrate the accessibility features in user interfaces:

a. Biometric access control

b. Narrator

2. Prepare and present a presentation which consists:

a. Introduction

b. Example of software

c. Show how it work

ACTIVITY 12: Universal Design

Duration: 2 Hours

29
Learning Outcomes
This Tutorial encompasses activity 12A and 12B.

By the end of this tutorial session, you should be able to:

1. Describe the differences between mobile computing and wearable computing.

2. Understand the important of both computing to Human to complete their task.

3. Understand the important of emerging technologies towards user in the society.

Activity 12A

In a group discuss the following issues:

a. How wearable computing differs from mobile computing?

b. What is the difference between wearable computing and mobile computing?

c. Why do we need sensors for wearable computing?

Activity 12B

1. In a group discuss the following issue:

a. The impacts of emerging technologies towards user interface in the society.

2. Prepare and present a presentation which consists:

a. Introduction

b. Example of emerging technologies

c. Impacts of emerging technologies towards user interface in the society.

30