COMPSCI 345 / SOFTENG 350Course Review

Prof Jim Warren

The Exam

• Read over every lecture slide, and review the text where it’s covered in better depth– That way nothing makes you go WTF?! (“What’s

the, father?”)• Note the key aspects from lecture, tutorials

and assignments– These are the sources for high point questions

• Slow down, take deep breaths and READ the exam questions CAREFULLY

1-3

Model Human Processor (MHP)

Guest lecture byDr Hokyoung Ryu from Massey emphasized the impact of this model for design

1-4

KLM - Operators• Operators

– K Press a key or button• Varies with task and typing skill, typically 0.28s

– P Point with mouse• Can apply Fitts’ Law – on average, 1.10s

– B Mouse button• Down or up – 0.10s Click – 0.20s

– H Home hands to keyboard or peripheral device• 0.4s

– D Draw line segments• 0.9 x # of segments + 0.16 total length in cm

– M Mental preparation• 1.35s

– R System response• Depends on the system

5

CNM-GOMS example GOAL: CLOSE-WINDOW . [select GOAL: USE-MENU-METHOD . . MOVE-MOUSE-TO-FILE-MENU . . PULL-DOWN-FILE-MENU . . CLICK-OVER-CLOSE-OPTION GOAL: USE-CTRL-W-METHOD . . PRESS-CONTROL-W-KEYS]

For a particular user, U1:

Rule 1: Select USE-MENU-METHOD unless another rule applies Rule 2: If the application is GAME, select CTRL-W-METHOD

So here we have one Goal with either of two Methods, one of which requires a sequence of three Operators, the other requires just one Operator; for U1 we have 2 Selection rules

6

State transition networks (STN) – example

• circles - states

• arcs - actions/events

Start Menu

Circle 1 Circle 2 Finish

Line 1 Line 2 Finish

select 'circle'

select 'line'

click on centreclick on

circumference

draw circlerubber band

rubber band draw last line

click on first point double click

click on point

draw a line

The “Laws”

• Hick’s Law: T = a + b log2(n + 1)

• Fitts’ Law: MT = a + b log2(A/W + 1)

Formchart for theSeminar Registration System

Formcharts are state transition diagrams that are…• Bipartite: client states (pages [denoted by ovals]) and server states (actions

[denoted by rectangles])• Typed: a message type for each page and each action

Register

ConfirmRemoveRemove

NewReg

RemovePage

RegPage

Seminar

server/page transition

page/server transition

Screen diagram• Close to a set of screen

sketches, but adding formalism

• Screens are nodes• Transitions (arcs) are actions

that take us between screens

• Alternatives are annotated– one default action, unlabeled– Other actions (notably error

handling) labeled with condition in curly braces

10

Refined HTA for making tea

Also a variant in Heim pp 122-124

Exam will be clear on which variant to use, or accept either

11

example – objects and actions

Object Sam human actorActions:

S1: drive tractorS2: dig the carrots

Object Vera human actor– the proprietor

Actions: as workerV1: plant marrow seedV2: program irrigation controller

Actions: as managerV3: tell Sam to dig the carrots

Object the men compositeComprises: Sam, Tony

Object glasshouse simpleAttribute:

humidity: 0-100%

Object Irrigation Controllernon-human actor

Actions:IC1: turn on Pump1IC2: turn on Pump2IC3: turn on Pump3

Object Marrow simpleActions:

M1: germinateM2: grow

12

Partial AWT and SwingClass Hierarchy

java.lang.Object

Component MenuComponentCheckboxGroup

Button CheckboxCanvas Choice Container Label List Scrollbar TextComponent

JComponent Window

Frame

JFrame

Dialog

JDialog

PanelScrollpane

Applet

JApplet

java.awt.* javax.swing.*

JLabel JListAbstractButton

JButton

JPanel JScrollpane

13

CirclePaint Part 3Paint Method

public void paintComponent(Graphics g) {g.clearRect(0, 0, this.getWidth(), this.getHeight());for(Circle c : circles) {

g.setColor(c.col);((Graphics2D)g).fill((Shape)new

java.awt.geom.Ellipse2D.Float( c.x-c.r, c.y-c.r, 2*c.r, 2*c.r));

}if(current!=null) {

g.setColor(current.col);((Graphics2D)g).fill((Shape)new

java.awt.geom.Ellipse2D.Float( current.x-current.r, current.y-current.r, 2*current.r, 2*current.r));

}}

GridBayLayout code

Set the layout of a container with a new layout manager – in this case ‘pane’ is the result of frame.getContentPane()

Attributes of the GridBagConstraints object determine position/behaviour of objects once added to the pane

.fill indicates button fills available space; .weightx determines how space is allocated among columns

JButton button;pane.setLayout(new GridBagLayout());GridBagConstraints c = new GridBagConstraints();

button = new JButton("Button 1");c.weightx = 0.5;c.fill = GridBagConstraints.HORIZONTAL;c.gridx = 0;c.gridy = 0;pane.add(button, c);

button = new JButton("Button 2");c.fill = GridBagConstraints.HORIZONTAL;c.weightx = 0.5;c.gridx = 1;c.gridy = 0;pane.add(button, c);

button = new JButton("Button 3");c.fill = GridBagConstraints.HORIZONTAL;c.weightx = 0.5;c.gridx = 2;c.gridy = 0;pane.add(button, c);

15

Assistants

Among the various forms of User Support

1-16

What is Usability?• Ease of learning—How fast can a user learn to

accomplish basic tasks?• Efficiency of use—How fast can an experienced user

accomplish tasks?• Memorability—Can a user remember enough to use

it effectively the next time?• Error frequency and severity—How often do users

make errors, how serious are these errors, and how do users recover from these errors?

• Subjective satisfaction—How much does the user like using the system?

1-17

Design the Test

• Where: Determine the Location of the Tests

18

Heuristic Evaluation• Rank by severity

– 0=no usability problem– 1=cosmetic – fix if have extra time– 2=minor – fixing is low priority– 3=major – important to fix– 4=usability catastrophe – imperative to fix

• Heuristics such as 10 from Nielsen– Visibility of system status– Match between system and real world– User control and freedom, etc.

• Heuristic evaluation `debugs' design

19

Within v. Between

• Consider a test on the difference of beer v. vodka martinis on reaction time– Null hypothesis – no difference in increase in reaction time

between the two beverages

• Design 1:– 30 people try beer; 30 other people try vodka – D.V. is change in

reaction time pre- v. post drinking• Not bad – be sure to randomize who goes into beer group v. vodka

group• But ‘power’ of the experiment will be reduced due to the great

variability of individuals in reaction to alcohol

Nuremberg Code• In 1947, the judgment

by the war crimestribunal at Nuremberglaid down 10 standardsto which physiciansmust conform whencarrying outexperiments on humansubjects

• See http://www.cirp.org/library/ethics/nuremberg/– This Code now underlies all university and medical human research ethics approval procedures

1-21

Technical Issues Concerning Icons - Deconstructing Icons

• Aggregate symbols– Overlap

– Addition

– Antithesis

– Specification

1-22

Using Sound in Interaction Design

• Hierarchical Earcons– Each node in a hierarchy inherits the attributes of

the previous level

Hierarchical structure Hierarchical earcons

Speech Synthesis Markup Language

• Designed by W3C to provide a rich, XML-based markup language for assisting the generation of synthetic speech in Web and other applications

<?xml version="1.0"?><speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2001/10/synthesis http://www.w3.org/TR/speech-synthesis/synthesis.xsd" xml:lang="en-US">

Take a deep breath <break/> then continue.Press 1 or wait for the tone. <break time="3s"/>I didn't hear you! <break strength="weak"/> Please repeat.

</speak>

• Tags for controlling pitch, pace, emphasis, etc.– See http://www.w3.org/TR/speech-synthesis/

1-23

Bon Voyage

• Hope this course helps you make better systems in the future

And...

• Don’t forget to go on studying until you get a Masters, at least

• Enrol in HLTHINFO 730 Healthcare Decision Support Systems in semester 1, 2010