Upload
duongminh
View
220
Download
4
Embed Size (px)
Citation preview
LECTURE 10 TASK ANALYSIS DIALOGUE ANALYSIS, DATA & TASK ABSTRACTION
October 9th, 2017
1 HCI & InfoViz 2017, fjv
Recapitulation Lecture #9
• Color models • Color schemas and expectation • Using color in design • Text, Legibility • Using text in design • Color coding • Glyphs, Symbols • Visualization
• Cognitive task analysis:
Establishing precise sequences in a task – GOMS, KLM – CCT – (ERMIA)
HCI & InfoViz 2017, fjv 2
Glyph - Color
HCI & InfoViz 2017, fjv 3
Metaphor, Glyphs, Color, Constancy, Known fate ...
Example from HCI 2013
• Project for Augmentation
• Can we make an augmented interactive fish.
• Technical aspects need be solved.
– Shadow casting
– Projection
• Users have to sort out how it works.
• Realized with the vvvv environment
HCI & InfoViz 2017, fjv 4
The Augmented Zebrafish
HCI & InfoViz 2017, fjv 5
ARCHITECTURE FOR INTERACTION
HCI & InfoViz 2017, fjv 6
Model View Controller
• Model = information that application manipulates – represents real world
• View = visual display of the model. – change in the model requires change in the visual
presentation thereof.
• Controller = – receives all input events and decides upon
meaning and process
7 HCI & InfoViz 2017, fjv
Model-View-Controller Architecture
• What is MVC?
• Smalltalk used MVC – model–view–controller – model – internal logical state of component
– view – how it is rendered on screen
– controller – processes user input
• should be conceptually separate – really separate Model and View/Controller
– why?
• Say you change the model: what happens? – damage()
– then for each view: redraw()
8 HCI & InfoViz 2017, fjv
9
MVC: model - view - controller
model
view
controller
MVC issues
• MVC is largely pipeline model:
input control model view output
• but in graphical interface
– input only has meaning in relation to output
e.g. mouse click/interaction
– need to know what was clicked
– controller has to decide what to do with click
– but view knows what is shown and where!
• in practice controller ‘talks’ to view
– separation not complete
10 HCI & InfoViz 2017, fjv
MVC underlies web programming
11 HCI & InfoViz 2017, fjv
TASK ANALYSIS
Interaction is task oriented, therefore Analysis for task orientation ...
12 HCI & InfoViz 2017, fjv
Task Analysis
• Task (definition) – Something a user undertakes to achieve something
– To HCI, extremely meaningful
• Effective (G)UI design dependent on knowledge of: – Frequency of use
– Ordering
– Importance of a task
• Interaction Design focus on Task Analysis – Decomposition
– Ordering
– Assignment (computer – human – interactions) 13 HCI & InfoViz 2017, fjv
Task Analysis
• Logical representation of task sequence
• Introduces domain knowledge
• Grammar based task notation
• Graphical based task notation (structure chart)
• TASK:
– A goal together with some ordered set of actions
– Ordering refers to the logic
• TASK analysis
– Mono-teleological (oriented to one goal)
HCI & InfoViz 2017, fjv 14
Task Analysis
15
‘ Task Analysis is the process of analysing the way people perform their jobs and it is important to the software designer because a major part of the design will focus on supporting the jobs people do.’
[McCauley, 1995]
We can refer to this as the “workflow”
HCI & InfoViz 2017, fjv
Task Analysis
• Organization of user interaction with system into: – Goals
– Methods
– Operators
– GOMS (see lecture 9): Cognitive Task Analysis
• Constructs a model for user/system interaction – Hierarchical decomposition
– Emphasis on sequence of operations
– i.e. the Workflow
16 HCI & InfoViz 2017, fjv
Methods for Task Analysis
• Hierarchical task decomposition – Tasks, Subtasks, Actions, Plans
• Knowledge based analysis – Organization of knowledge – All objects and actions in a task – Building taxonomy of relations – TDH: task descriptive hierarchy – Build rules of formal logic
• Entity-Relationship based analysis – Cataloging objects and actions – Emphasis on relationships – Typical in OO-design, less accounting environment
17 HCI & InfoViz 2017, fjv
Hierarchical Task Analysis (1)
• 0. Borrowing a book from the library
– 1. Go to the library
– 2. Find the book of interest
– 3. Go the correct shelf and retrieve book
– 4. Take book to checkout counter
18 HCI & InfoViz 2017, fjv
Hierarchical Task Analysis (1)
• 0. Borrowing a book from the library
– 1. Go to the library
– 2. Find the book of interest
• 2.1 access the library catalog
• 2.2 access the search system
• 2.3 enter search criteria
• 2.4 identify required book
• 2.5 make a note of location
– 3. Go the correct shelf and retrieve book
– 4. Take book to checkout counter
19 HCI & InfoViz 2017, fjv
Hierarchical Task Analysis (2)
• Decomposition has resulted in plans
• Plans are scenarios of dedicated interaction
• Plan arranged according to subtasks
• Plan: how action sequence is applied in a situation
– Plan 0: do 1-3-4
• If book not there: do 2-3-4
– Plan 2: do 2.1-2.4-2.5
• If book no identified: do 2.2-2.3-2.4-2.5
20 HCI & InfoViz 2017, fjv
Types of plan
Plan = structured path to achieve the goal.
Fixed sequence - e.g. 1.1 then 1.2 then 1.3
Optional tasks - if <condition> then action
Wait for events - when <condition> then 1.4; time involved
Cycles - do <action 1 .. N> while <condition>; loop
Time-sharing - do <action>; at the same time ... (and do)
Discretionary - do any of <action a>,<action b> or <action > in any order
Mixtures - most plans involve several of the above
21 HCI & InfoViz 2017, fjv
Allocation of Function
• What task done by human
– No support from computer system
• What task done by both computer / human
– Really shared task (INTERACTION)
• What is just done by the computer
– Nearly no human intervention /interaction
– What is a computer good at!
22 HCI & InfoViz 2017, fjv
Human ~ Computer Tasks
23 HCI & InfoViz 2017, fjv
Hierarchical Task Analysis (1970)
Hierarchical task decomposition
• often using structure chart
• decompose in tasks, subtasks, and actions
• plan: sequence of subtasks or actions (THD)
• TA should coincide with user’s mental model
• task allocation important
24 HCI & InfoViz 2017, fjv
Task Decomposition
• What questions need to be asked:
25
Task What happens before?
What happens next?
What subtasks?
Why?
HCI & InfoViz 2017, fjv
What Knowledge is required!
Hierarchical Task Analysis - Diagram
• Based on graphical representation of task decomposition
• in task hierarchy diagram (THD) – describes tasks in hierarchy of actions and plans
1. Identify major tasks
2. Breakdown tasks
3. Draw tasks/subtasks as layered diagram
4. Continue decomposition
5. Ask someone to check your analysis
ACTION: simple task, not iterated.
26 HCI & InfoViz 2017, fjv
HCI & InfoViz 2017, fjv 27
Hierarchical task analysis for cash withdrawel from ATM
Hierarchical Task Analysis
HCI & InfoViz 2017, fjv 28
Hierarchical task analysis for Content Management System (use)
Hierarchical Task Analysis
HCI & InfoViz 2017, fjv 29
Gran
ularity
Case Study “Fast Ferries”
• Design a computerized system to support fast and efficient on-line enquiries and bookings at each sales position: reservation system
• Supported activity – Sales to general public by staff in travel agency
• Users – Staff in travel agency
• Level of Support – Detailed enquiry; Information processing; Validation
• Form of solution – On line system
30 HCI & InfoViz 2017, fjv
Task Hierarchy Diagram (THD)
31
Serve customer
Make enquiry
Make booking
Perform other Service
routes sailings Avail-ability
Accomo-dation
Enter detail
Confirm detail
Accept deposit
Record deposit
Check
HCI & InfoViz 2017, fjv
THD with function allocation
32
1 Serve customer
1 Make enquiry
2 Make booking
3 Perform other Service
1 Routes
2 Sailings
3 Avail-ability
4 Acco-modation
1 Enter detail
2 Confirm detail
3 Accept deposit
4 Record deposit
Check
HCI & InfoViz 2017, fjv
User-Centred Design Overview
• Design requires assessment – Establish
• who are users
• what are their goals
• what tasks need to be performed
– Task Analysis • Characterize what steps users need to take
• Create scenarios of actual use
• Decide which users and tasks to support
• Design based on user characteristics and tasks
• Evaluation – Test interface by “walking through” tasks
– Typically before implementation
33 HCI & InfoViz 2017, fjv
Cognitive Work Analysis
• Cognitive Work Analysis (CWA) – From Denmark, Risø National Laboratory – Design of systems concerned in Process Control – Mission Critical systems – Emphasis is on controlling physical system
• CWA, key feature
– understand domain-oriented constraints affecting people’s behaviors
– design the environment so that the system easily reveals its state and
– how that state relates to its purpose. – Structural representations and mapping! – Comprises Task Analysis, Workload Analysis
HCI & InfoViz 2017, fjv 34
Review #10a
• Task analysis
• Achieve allocation of function
• Task decomposition
• Task hierarchy diagram
HCI & InfoViz 2017, fjv 35
DIALOGUE DESIGN
Consistent and Closing Dialogues
36 HCI & InfoViz 2017, fjv
Dialogue
• Conversation between two or more parties
– usually cooperative
• User interfaces:
– refers to the structure of the interaction
– syntactic level of human–computer ‘conversation’
37 HCI & InfoViz 2017, fjv
Dialogue Levels
• Lexical - shape of icons, actual keys pressed
• Syntactic - order of inputs and outputs
• Semantic - effect on internal application/data
HCI & InfoViz 2017, fjv 38
Dialogue Notations and Design
• Dialogue Notations – Diagrammatic:
State Transition Networks (STN),Petri Nets (PN), Flow Charts, Jackson Structured Design diagrams (JSD)
– Textual: Formal grammars, Production rules, Communicating Sequential Processes (CSP)
• Dialogue linked to – the semantics of the system – what it does – the presentation of the system – how it looks
• Formal descriptions can be analyzed for:
– inconsistent actions – difficult to reverse actions – missing actions – potential miss-keying errors
39 HCI & InfoViz 2017, fjv
Confusing Dialogue
40 HCI & InfoViz 2017, fjv
Void Dialogue
41 HCI & InfoViz 2017, fjv
Completely unclear Dialogue
HCI & InfoViz 2017, fjv 42
Notations for Dialogue Design
• Dialogue to much intertwined in the program
• For system maintenance, large systems:
– change platforms (e.g. Windows/Mac)
– dialogue notations helps to • analyse systems
• separate lexical from semantic
– analyse the dialogue: • e.g. can the user always get to see current shopping basket
• In the systems/requirements analysis
– notations help us understand proposed designs
– LoFi prototyping in design phase
43 HCI & InfoViz 2017, fjv
State Transition Networks
• State Transition Networks (STN)
– 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
44 HCI & InfoViz 2017, fjv
State Transition Network
• States, labels in circles a bit uninformative:
– states are hard to name
– but easier to visualise
Star t Men u
Circle 1 Circle 2 Finish
select 'circle'
select 'line'
click on centreclick on
circumference
draw circlerubber band
... ... ...
45 HCI & InfoViz 2017, fjv
State Transition Network
• Events, arc labels a bit cramped because:
– notation is `state heavy‘
– the events require most detail
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
46 HCI & InfoViz 2017, fjv
Hierarchical STNs
• Nested STN organized in a hierarchical manner
• Managing complex dialogues
• Named sub-dialogues
HCI & InfoViz 2017, fjv 47
Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
Escapes
• ‘back’ in Program Structure, escape/cancel keys – similar behavior everywhere
– end up with spaghetti of identical behaviors
• Try to avoid this
e.g. on high level diagram
‘normal’ exit for each submenu
plus separate escape arc active ‘everywhere’ in submenu
HCI & InfoViz 2017, fjv 48
Graphics Submenu
Text Submenu
Paint Submenu
Main
Menu
select ‘graphics’
select ‘paint’
select ‘text’
normal
finish
ESC
normal
finish
ESC
normal
finish
ESC
Concurrent Dialogue
HCI & InfoViz 2017, fjv 49
Text Style
bold
italic
underline
example
Simple dialogue box
Toggle, either one state or the other
This dialogue, states are not mutual exclusive
Concurrent dialogues (2)
HCI & InfoViz 2017, fjv 50
bold
italic
underline
NO bold
bold click on ‘bold’
NO italic
italic click on ‘italic’
NO u’line
u’line click on ‘underline’
three toggles - individual STNs
Concurrent dialogues (3)
HCI & InfoViz 2017, fjv 51
Text Style
bold
italic
underline
example NO style
bold only
click on ‘bold’
click
on
‘italic’
italic only
bold
italic
click on ‘bold’
click
on
‘italic’
bold and italic combined
Concurrent dialogues (4)
HCI & InfoViz 2017, fjv 52
‘italic’
NO style
bold only
‘bold’
italic only
bold
italic
‘bold’
‘italic’
u’line only
bold
u’line
‘bold’
italic
u’line
bold
italic
u’line
‘bold’
‘italic’ ‘italic’
‘underline’ ‘underline’
‘underline’ ‘underline’
Text Style
bold
italic
underline
example
all together - combinatorial explosion
Petri Nets
• Notation for reasoning about concurrent activities, computer science (Petri, 1962)
• Flow graph: – places – cf. STN states – transitions – cf. STN arcs – counters – Current state
• More counters allowed
– concurrent dialogue states
• Used for UI specification – Interactive Cooperative Objects (ICO)
– Tool support: PetShop Univ. Toulouse
HCI & InfoViz 2017, fjv 53
Example: Petri Net
HCI & InfoViz 2017, fjv 54
Bold On Italic On
Bold Off Italic Off
user presses
‘Italic’ user presses
‘Bold’
T1 T2 T3 T4
user actions represented
as a new counter
transition ‘fires’ when all input
places have counters
Inhibition arc: “Italics on” can not be toggled while “Bold on”
Input place Rule Concurrency?
Action properties
• Completeness – System reaction defined for every user action in every state – (missed arcs) – unforeseen circumstances
• Determinism
– Unique mapping of user action/reaction for every state – Several arcs for one action
• Consistency
– Same action, always same effect? – Modes and visibility
HCI & InfoViz 2017, fjv 55
State properties
• Reach-ability
– can you get anywhere from anywhere?
– and how easy
• Reversibility
– can you get to the previous state?
– but NOT undo
• Dangerous states
– states you do not want to get to - accidently
HCI & InfoViz 2017, fjv 56
Checking properties (i)
• completeness – double-click in circle states?
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
double click
?
57 HCI & InfoViz 2017, fjv
Checking properties (ii)
• Reversibility:
– to reverse select `line'
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
58 HCI & InfoViz 2017, fjv
Checking properties (ii)
• Reversibility:
– to reverse select `line'
– click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
59 HCI & InfoViz 2017, fjv
Checking properties (ii)
• Reversibility:
– to reverse select `line'
– click - double click
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
60 HCI & InfoViz 2017, fjv
Checking properties (ii)
• Reversibility:
– to reverse select `line'
– click - double click - select `graphics'
– (3 actions)
• N.B. not undo
• Interaction Model
Start Menu
Line 1 Line 2 Finish
select 'circle'
select 'line'
rubber band draw last line
click on first point double click
click on point
draw a line
... ... ...
select 'graphics'
select 'text'
select 'paint'
... ... ...Main
Menu
Graphics Sub-menu
... ... ...
61 HCI & InfoViz 2017, fjv
Flowcharts
• Familiar to programmers
• Boxes
– process/event
– not state
• Use for dialogue
– not for algorithm
• e.g. choose widgets on www!
HCI & InfoViz 2017, fjv 62
Delete D1
Please enter employee no.: __
Delete D3 Name: Simon Tudent Dept: Computing delete? (Y/N): _ Please enter Y or N
Delete D2
Name: Simon Tudent Dept: Computing delete? (Y/N): _
answer? C2
Finish
Finish
read record C1
delete record C3
other
N Y
Jackson Structured Design diagrams
HCI & InfoViz 2017, fjv 63
• JSD for tree structured dialogues
– Less expressive
– Greater clarity
– Typical in menu driven software
– Iteration
– Optional
delete
employee record
transaction login
add employee
record
change employee
record
display employee
record
logout
Personnel Record System
*
Review Lecture #10b
• Semantics and dialogue – Attaching semantics – Structured representation including concurrency
• Properties of dialogue
– action properties: completeness, determinism, consistency – state properties: reach-ability, reversibility, dangerous states
• Presentation and lexical issues
– visibility, style, layout
64 HCI & InfoViz 2017, fjv
How do we build GUIs? (1)
1. Decide what we want to build (paper design)
2. Determine which events should be sent to which widgets
– input
– internal
– etc.
3. Layout tools – wire-frame models.
HCI & InfoViz 2017, fjv 65
How do we build GUIs? (2)
4. Layout appropriate widgets using GUI tool
5. For each widget add missing event handlers – “event listeners” (Java), “slots” (Qt)
6. Connect event senders to event receivers – Upon necessity
7. Add your code – The “product” functionality
– cf. Rules Schneiderman – Norman
– MVC
66 HCI & InfoViz 2017, fjv
DATA ABSTRACTION
Information visualization requires knowledge on the data
HCI & InfoViz 2017, fjv 67
What is the nature of the data
• Goal: build an information display
• Method: Analyse an instance – e.g. with PACT,
people, activities, context, technology
• Data Abstraction: – What part of the analysis pertains to the data
– What is the nature of the data
– How are these data represented
– Data type influences how we visualize
HCI & InfoViz 2017, fjv 68
Dataset types
• Data Set: collection of information
• 4 basic types of dataset – Tables – Networks – Fields – Geometry
HCI & InfoViz 2017, fjv 69
Tables Networks Trees Fields Geometry Clusters, Sets, Lists
Items Items = nodes
Items = nodes
Grids Items Items
Links Links Positions Positions
Attributes Attributes Attributes Attributes
Data type characterization
• Attribute – Some specific property that is measured
– aka variable, data dimension, dimension
• Item – Individual entity that is discrete
– Row, node ...
• Link – Relationship between items in a network
• Grid – Strategy for sampling continuous data
– geometry, topology
HCI & InfoViz 2017, fjv 70
Dataset types
HCI & InfoViz 2017, fjv 71
Dataset types
• Table – Flat table, row = item; colum = attribute
– Multi dimensional table
• Network – Relationship (link,edge) between items (node, vertex)
– Tree, hierarchical structure – parent ~ child
• Field – Continuous, sampled to Grid
– Geometry and Topology of Grid
• Geometry – Specification of shape with explicit spatial positions
HCI & InfoViz 2017, fjv 72
Example Tree - Hierarchy
HCI & InfoViz 2017, fjv 73
What about data ...
• Data can be – Categorical: represent categories, no ordering
(fruits, names) sometimes hierarchy
– Ordered: • Ordinal: well defined order, without arithmatic
• Quantative: measurement, magnitude supports arithmatic
– Sequential, diverging, cyclic
– Static, Dynamic • Static: status quo
• dynamic: Stream of data, Behaviour, Time-series
HCI & InfoViz 2017, fjv 74
Semantics of the data
• In order to visualize, know the semantics
• Semantics
– Meaning in the real world
– Key Attribute in the data
• Index for value attribute
• aka independent attribute (dimension)
– Value Attribute
• aka dependent attribute (measure)
– Also given by the meta-data
• Data about the data, descriptive in nature
HCI & InfoViz 2017, fjv 75
TASK ABSTRACTION
Consider the information visualization in an abstract form
HCI & InfoViz 2017, fjv 76
Building an Information Display
• User domain ~ Designer domain
• Tasks User intends to perform with data
• Abstract away from user task – Generalize
– Produce tools
– Produce support
• Task Abstraction: – generalize from domain specific to abstract form.
Helps finding similarities in vis-applications
HCI & InfoViz 2017, fjv 77
Task Abstraction
• 3 levels of actions to define user goals
– High level actions: Analyse
– Mid level actions: Search
– Low level actions: Query
• Actions → Verbs
• Targets → Nouns
HCI & InfoViz 2017, fjv 78
Analyze Abstraction, actions
• Consume information – Discover, use InfoVis to find new knowledge
• Hypothesis testing and generation
– Present • Communication, storytelling
– Enjoy • Casual (playfull) encounters with Infovis
• Produce information
– Annotate, augment InfoVis with annotation (domain) – Record, saves/captures InfoVis elements
• e.g. For Dashboards, Infographics
– Derive, produce new data elements • derived attributes
HCI & InfoViz 2017, fjv 79
Example Enjoy, baby-names
HCI & InfoViz 2017, fjv 80
InfoVis Mantra, Focus & Zoom
HCI & InfoViz 2017, fjv 81
Search Abstraction, actions
• Look-Up – Know where to look for
– Using InfoVis as knowledge table
• Locate – Known target, at unknown location
– Helps in understanding relations
• Browse – Unknown target, location is group of attributes
• Explore – Characteristics from parts of InfoVis
– Typically Focus and Zoom, start from Overview
HCI & InfoViz 2017, fjv 82
Example Tree - Hierarchy
HCI & InfoViz 2017, fjv 83
Query Abstraction, actions
• Identify – Query on a single target
– Chararteristics identified from result
• Compare – Query on multiple targets
– Possibillity to identify relations
• Summarize – Query all possible targets
– Produce an overview
– Starting point for exploration or comparison
HCI & InfoViz 2017, fjv 84
HCI & InfoViz 2017, fjv 85
How do we build Information Displays (1)
1. Decide what we want to visualize (paper design)
2. Determine the nature of the data – Data abstraction
– Data type
3. What are the tasks that we need to support – Analyze, Produce
– Search
– Query
4. What kind of interaction is required – How the support Focus and Zoom
HCI & InfoViz 2017, fjv 86
How do we build Information Displays? (2)
5. Layout tools – wire-frame models. 6. Layout appropriate Symbols, Glyphs … 7. Connect interactivity to
– Symbols – Glyphs – Graphical objects
8. Introduce widgets for support of queries – Upon necessity
9. Add your code – The “product” functionality – cf. Rules Schneiderman – Norman – MVC
87 HCI & InfoViz 2017, fjv
Review #10c
• Data Abstraction – Data Set, datatypes
– Attributes, Items and Nodes
– Characterization of the data
– Semantics of the data
• Task Abstraction – Generalize from the domain
– Analyze
– Search
– Query
HCI & InfoViz 2017, fjv 88
Computer Mediated Interaction
HCI & InfoViz 2017, fjv 89