WORKBOOK ACTIVITY
3123 HUMAN COMPUTER INTERACTION
Table of Contents
TOPICS
PAGES
2
ACTIVITY 1:
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
3
Computer
8 13
ACTIVITY 1: Introduction to Human Computer Interaction Duration: 2 Hours 3
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
Activity 1B: WIMP interface stands for Window, icon, menu and pointer. In a group discuss the advantages and disadvantages of WIMP interface.
4
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: List features of Question/answer and query dialog.
5
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
Activity 1D:
6
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.
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
7
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
ACTIVITY 2: Introduction to Human Computer Interaction 8
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.
9
3. Discuss the use of color using in the website.
4. Discuss the arrangement of the text, menu and image in the website.
10
5. Create re-designs (hand sketches) the better interface of the website. Give a suggestion on identified problem.
Activity 2B Identify the activities in model of interaction and understand the framework.
11
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?
2. Fill in the blank with appropriates process according to the framework.
12
Presentation
O output
S
Observation
U
core
task
I input
Performance
Articulation
3. Present your result of discussion.
ACTIVITY 3: The Design Process 13
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. 1
PRINCIPLES LEARNABILITY : The ease with which new users can begin effective interaction and achieve maximal performance.
Predictability
DEFINITION
EXAMPLE
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) -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 ellipses. – applications should interaction offer the Cut/Copy/Paste Generalizability knowledge to new Consistency
situations likeness in behaviour arising
-Always place the Quit command as the last item in the leftmost menu. -QWERTY and DVORAK
from similar
keyboards
input/output
situations or task 14
objectives
Dialog Initiative
Multithreading
FLEXIBILITY : Multiplicity of ways in 2
which the users and system exchange information. Task migratability
Substitutivity
-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 preemptive -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 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; passing responsibility for task execution between user and system
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 be substituted for illustrate flexibility for state each other rendering -representation multiplicity; equal modifiability of the user interface by
Customizability
multimodality -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
user (adaptability)
opportunity -users ability to adjust the form of input and output - automatic customization of the user interface by the system
or system 3
Observability
(adaptivity) -ability of user to evaluate the
brows ability; defaults; 15
ROBUSTNESS : The level of support
Recoverability
internal state of the system from its perceivable representation -ability of user to
reachability; persistence; operation
take corrective
recovery; commensurate effort
has been
determining successful
recognized -how the user perceives the rate of communication with the system -degree to which system services support all of the user's tasks
assessment of goals
Responsivenes s Task Conformance
reachability; forward/backward
action once an error
provided to the user in achievement and
visibility
Stability
-task completeness; task adequacy
ACTIVITY 4: The Design Process Duration: 2 Hours Learning Outcomes This Tutorial encompasses activity 4A
16
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 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
ACTIVITY 5: The Design Process
Cheap Limited Spaces
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.
17
Activity 5A Select a suitable example for each of the following environments. i)
ii)
Web Application Systems HTML JAVASCRIPT HTTP 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.
18
Activity 6A In a group, you are required to select a suitable example for each of the following environments. i)
ii)
iii)
Auto Teller Machine (ATM) Wizards Receipt Repair Manuals Getting cash from an ATM Voice answering systems Alert dialogs Ringing Telephone Alarm of all sorts 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
19
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 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
20
Types of questions in questionnaire design are:
3.
1.
Open format questions (multiple choices)
2.
Likert questions
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 )
21
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 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
22
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
23
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 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
24
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)
25
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
26
iii.
PLACE IN THIS DOCUMENT
iv.
select the slide number
27
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
28
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. Step 1: Launch the website browser.
29
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
ACTIVITY 12: Universal Design 30
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.
31
