WORKBOOK ACTIVITY

DFT3123
HUMAN COMPUTER INTERACTION

Table of Contents
TOPICS
ACTIVITY 1:

PAGES

ACTIVITY 3:

Introduction
to
Human
Interaction
Introduction
to
Human
Interaction
The Design Process

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

ACTIVITY 2:

Computer

Computer

8
13

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.

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

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

Features of Question/answer and query dialog

1. _______________________________________________
_______________________________________________
_______________________________________________
____________
2. _______________________________________________
_______________________________________________
_______________________________________________
____________

3. _______________________________________________
_______________________________________________
_______________________________________________
____________
4. _______________________________________________
____
_______________________________________________
_______________________________________________
________

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

Activity 1E:
Todays 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.

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/.

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

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

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.
Normans 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.

O
output

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
LEARNABILITY :

EXAMPLE

Predictability

The ease with which new

Synthesizability

users can begin effective

Familiarity

interaction and achieve

Generalizability

maximal performance.

DEFINITION

Consistency
Dialog Initiative

FLEXIBILITY :

Multithreading

Multiplicity of ways in which

Task

the users and system

migratability

exchange information.

Substitutivity
Customizability
Observability

ROBUSTNESS :
The level of support
3

provided to the user in

Recoverability
Responsiveness

determining successful

Task

achievement and

Conformance

assessment of goals

13

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:
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

ii) Identify the options

iii) Describe the criteria
iv) Sketch the QOC diagrams and choose your favorite option

14

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.

Activity 5A
Select a suitable example for each of the following environments.
i)

Web Application Systems

ii)

Programming environments

a. Snap shot the interface design selected and find where the interfaces does meets the
Schneidermans Eight Golden Rules that you had learned.
b. Suggest potential interface design improvements and recommendations.

15

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.

Activity 6A
In a group, you are required to select a suitable example for each of the following
environments.
i)

Auto Teller Machine (ATM)

ii)

Voice answering systems

iii)

Multimedia Environments

a. Snap shot the interface design selected and find where the interfaces does meets the
Schneidermans Eight Golden Rules that you had learned.
b. Suggest potential interface design improvements and recommendations.

16

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.
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

ii.

Offer informative feedback

iii.

Enable frequent users to use shortcuts

17

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)

2.

Likert questions

18

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 )

19

Example: Likert questions

Step 4: Properly arrange the questions.
Notes: the practical exploration is based on website chosen.

20

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

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:

Example:

Variables:

Example:

Hypotheses:

Example:

21

Experimental design (Analysis of data):

Example:

2.

You are required to design an experiment to test whether the learning style of
Soft skill will improve students assessment in university

Based on the given scenario state the following:

i)

Participants

ii) Hypothesis

iii) Independent variable

iv) Dependent variable

22

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

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)

23

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

24

ii.

right click > choose HYPERLINK

iii.

PLACE IN THIS DOCUMENT

25

iv.

select the slide number

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

26

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
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.

27

Activity 11B

Follow the procedure.

Step 1: Launch the website browser.
Step 2: Go to http://www.w3.org/standards/webdesign/accessibility
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

28

ACTIVITY 12: Universal Design

Duration: 2 Hours
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.

29