LKAT DFT3123 Human Computer Interaction 1

(1)

WORKBOOK ACTIVITY

3123

HUMAN COMPUTER INTERACTION

(2)

(3)

ACTIVITY 1:

Introduction to Human Computer

Interaction

3 ACTIVITY 2:

Introduction to Human Computer

Interaction

8 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 ACTIVITY 1: Introduction to Human Computer

Interaction

(4)

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

1. Mac OS X

2.Linux

(5)

Advantages and Disadvantages of WIMP

Advantages Disadvantages

This type of user is easy to

use,especially for a beginner

Consider WIMP to be ill-suited for

multiple applications

You do not have to learn complicated

commands

Widget model is not suitable for the

implementation of post-WIMP

interactions

They let you exchange data between

different software applications

Can not be used in scene where

graphics lay on top of each other

There are usually good help facilities

provided with WIMP interfaces

Programmers can not use widgets to

implement a radar image that contains

flight elements on top sectors

Activity 1C:

(6)

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.

(7)

In a group discuss applications of 3D interfaces technology.

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

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.

(8)

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

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

(9)

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

(10)

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

(11)

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

Activity 2B

(12)

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?

(13)

Performance

O

I

U

S

output input task core

Articulation

3. Present your result of discussion.

ACTIVITY 3: The Design Process

(14)

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 :

The ease with which new users can begin effective interaction and achieve maximal performance.

Predictability

Support for user to

determine the effect

of future action

based on past

interaction history

Operation visability can see

avail actions(e.g menu vs

command shell grayed menu

items)

Synthesizability

-assessing the effect

of past actions

-In a Windows system, to move a

file from one directory to another

directory, the user drags the visual

icon of the file from the original

directory to the destination

directory where it remains visible

-immediate vs. eventual honesty

Familiarity

-how prior

knowledge applies

to new system

In the design of GUI, the regions

on the screen which denote buttons

should be shaded to give a

threedimensional appearance

-guessability; affordance

Generalizability

extending specific

interaction

knowledge to new

situations

– drawing circles ! drawing

ellipses. – applications should

offer the Cut/Copy/Paste

Consistency

likeness in

input/output

behaviour arising

from similar

-Always place the Quit command

as the last item in the leftmost

menu.

-QWERTY and DVORAK

keyboards

(15)

objectives

2

FLEXIBILITY :

Multiplicity of ways in which the users and system exchange information. Dialog Initiative

-freedom from

system imposed

constraints on input

dialogue

For safety reasons, it may be

necessary to prohibit the user from

the “freedom” to do potentially

serious damages

- direct manipulation is user

pre-emptive

-system vs. user pre-emptiveness

Multithreading

-ability of system to

support user

interaction for more

than one task at a

time

-windowing system with an

audible bell. You are editing a

program when a beep indicates

that a new electronic mail message

has arrived.

- a windowing system support a

multi-threaded that is interleaved

amongst a number of overlapping

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

windows.

-concurrent vs. interleaving;

multimodality

Task migratability

passing

responsibility for

task execution

between user and

system

-user can perfectly able to check

his spelling.

– this task also is perfectly suited

to automation.

– It is not desirable to leave this

task completely to computer...

-spell checking is best Performed

in such cooperative way.

Substitutivity

-allowing

equivalent values of

input and output to

be substituted for

each other

-Allow users to input margin for a

letter in inches or centimetres

-Representation multiplicity

illustrate flexibility for state

rendering

-representation multiplicity; equal

opportunity

Customizability

modifiability of the

user interface by

user (adaptability)

or system

(adaptivity)

-users ability to adjust the form of

input and output

- automatic customization of the

user interface by the system

3 Observability

-ability of user to

evaluate the

(16)

ROBUSTNESS :

The level of support provided to the user in determining successful achievement and assessment of goals

internal state of the

system from its

perceivable

representation

reachability; persistence; operation

visibility

Recoverability

-ability of user to

take corrective

action once an error

has been

recognized

reachability; forward/backward

recovery; commensurate effort

Responsivenes s

-how the user

perceives the rate

of communication

with the system

Stability

Task

Conformance

-degree to which

system services

support all of the

user's tasks

-task completeness; task adequacy

ACTIVITY 4: The Design Process

Duration: 2 Hours

Learning Outcomes

(17)

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

(18)

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

(19)

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

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

(20)

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

 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

1. Understand how to develop a questionnaire for query techniques

(21)

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

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 )

(22)

c) System Design (5 questions )

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

(23)

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:

2.

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

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

(24)

Based on the given scenario state the following: i) Participants

ii) Hypothesis

iii) Independent variable

iv) Dependent variable

ACTIVITY 10: Evaluation Techniques

Duration: 2 Hours

Learning Outcomes

By the end of this tutorial session, you should be able to: 1. Understand how to evaluate an interactive system

(25)

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

(26)

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

(27)

iii. PLACE IN THIS DOCUMENT

(28)

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

(29)

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.

Activity 11B

Follow the procedure.

(30)

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

(31)

Duration: 2 Hours

Learning Outcomes

This Tutorial encompasses activity 12A and 12B.

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