hci lecture 11 david aspinall · hci lecture 11 david aspinall informatics, university of edinburgh...
TRANSCRIPT
Interface ImplementationHCI Lecture 11
David Aspinall
Informatics, University of Edinburgh
26th October 2007
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
Focus on Implementation
É HCI in the software process:Usability Engineering and Design Rationale
É Programming interfaces:Implementation Support
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
HCI in Software Engineering
waterfall model with feedback
É traditional processmodels requiremodification. . .
É user participationÉ during designÉ during evaluation
É usability evaluationÉ should designinterface early, notas a bolt-on!
É −→ UI in process
HCI in Software Engineering
waterfall model with feedback
É traditional processmodels requiremodification. . .
É user participationÉ during designÉ during evaluation
É usability evaluationÉ should designinterface early, notas a bolt-on!
É −→ UI in process
HCI in Software Engineering
waterfall model with feedback
É traditional processmodels requiremodification. . .
É user participationÉ during designÉ during evaluation
É usability evaluationÉ should designinterface early, notas a bolt-on!
É −→ UI in process
HCI in Software Engineering
waterfall model with feedback
É traditional processmodels requiremodification. . .
É user participationÉ during designÉ during evaluation
É usability evaluation
É should designinterface early, notas a bolt-on!
É −→ UI in process
HCI in Software Engineering
waterfall model with feedback
É traditional processmodels requiremodification. . .
É user participationÉ during designÉ during evaluation
É usability evaluationÉ should designinterface early, notas a bolt-on!
É −→ UI in process
HCI-oriented processes
É Lauesen and Harning (2001) describe a processcalled Virtual Windows which connects tasks, datamodels and UI design.
HCI-oriented processes
É Lauesen and Harning (2001) describe a processcalled Virtual Windows which connects tasks, datamodels and UI design.
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
Usability Engineering
É Ultimate usability test: measure user experience
É Usability measures made explicit as requirementsÉ Usability specification:
É usability attribute/principleÉ measuring conceptÉ measuring methodÉ now level/ worst case/ planned level/ best case
É Cf. ISO 9241 metrics in Lecture 10É Problems:
É usability spec requires level of detail that may notbe possible early in design
É satisfying a usability specification does notnecessarily satisfy usability
Usability Engineering
É Ultimate usability test: measure user experienceÉ Usability measures made explicit as requirementsÉ Usability specification:
É usability attribute/principleÉ measuring conceptÉ measuring methodÉ now level/ worst case/ planned level/ best case
É Cf. ISO 9241 metrics in Lecture 10
É Problems:É usability spec requires level of detail that may notbe possible early in design
É satisfying a usability specification does notnecessarily satisfy usability
Usability Engineering
É Ultimate usability test: measure user experienceÉ Usability measures made explicit as requirementsÉ Usability specification:
É usability attribute/principleÉ measuring conceptÉ measuring methodÉ now level/ worst case/ planned level/ best case
É Cf. ISO 9241 metrics in Lecture 10É Problems:
É usability spec requires level of detail that may notbe possible early in design
É satisfying a usability specification does notnecessarily satisfy usability
Usability specification for a VCR
Attribute: Backward recoverability
Measuring concept: Undo an erroneousprogramming sequence
Measuring method: Number of explicit useractions to undo currentprogram
Now level: No current product allowssuch an undo
Worst case: As many actions as ittakes to program-inmistake
Planned level: A maximum of twoexplicit user actions
Best case: One explicit cancel action
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
Design Rationale
É Design rationale is information that explains whya computer system is the way it is.
É Benefits of design rationaleÉ communication throughout life cycleÉ reuse of design knowledge across productsÉ enforces design disciplineÉ presents arguments for design trade-offsÉ organizes potentially large design spaceÉ capturing contextual information
É Types of DR:É Process-oriented preserves order of deliberationand decision-making
É Structure-oriented emphasizes post hocstructuring of considered design alternatives
É Examples:É Issue-based information system (IBIS)É Design space analysisÉ Psychological design rationale
Issue-based Information SystemÉ Process-oriented; main elements are:
É issues: hierarchical structure with rootÉ positions: potential resolutionsÉ arguments: modify relationship between above
Design Space Analysis
É Structure-oriented: QOC hierarchyÉ questions: major issues of a designÉ options: alternative answersÉ criteria: means to assess options
Psychological Design Rationale
É Supports the task-artefact cycle in which usertasks are affected by the systems they use
É Consequences of design for users made explicitÉ Method:
É designers identify tasks system will supportÉ scenarios are suggested to test taskÉ users are observed on system
É Psychological claims of system made explicitÉ Negative aspects used to improve next iteration
Psychological Design Rationale
É Supports the task-artefact cycle in which usertasks are affected by the systems they use
É Consequences of design for users made explicitÉ Method:
É designers identify tasks system will supportÉ scenarios are suggested to test taskÉ users are observed on system
É Psychological claims of system made explicitÉ Negative aspects used to improve next iteration
Psychological Design Rationale
É Supports the task-artefact cycle in which usertasks are affected by the systems they use
É Consequences of design for users made explicitÉ Method:
É designers identify tasks system will supportÉ scenarios are suggested to test taskÉ users are observed on system
É Psychological claims of system made explicitÉ Negative aspects used to improve next iteration
Outline
Overview
Software Engineering
Usability Engineering
Explaining Design
Implementation SupportWindowing systemsApplication architecturesMulti-threading
Programming the Interface
É How does HCI affect the programmer?É Advances in coding have elevated programming
É hardware specific =⇒ interaction-technique specific
É Layers of development toolsÉ windowing systemsÉ interaction toolkitsÉ user interface management systems (UIMS)
É Application architecturesÉ Model-View-Controller (MVC)É Presentation-Abstraction-Control (PAC)
É Body of programming techniquesÉ concurrency management
Programming the Interface
É How does HCI affect the programmer?É Advances in coding have elevated programming
É hardware specific =⇒ interaction-technique specificÉ Layers of development tools
É windowing systemsÉ interaction toolkitsÉ user interface management systems (UIMS)
É Application architecturesÉ Model-View-Controller (MVC)É Presentation-Abstraction-Control (PAC)
É Body of programming techniquesÉ concurrency management
Programming the Interface
É How does HCI affect the programmer?É Advances in coding have elevated programming
É hardware specific =⇒ interaction-technique specificÉ Layers of development tools
É windowing systemsÉ interaction toolkitsÉ user interface management systems (UIMS)
É Application architecturesÉ Model-View-Controller (MVC)É Presentation-Abstraction-Control (PAC)
É Body of programming techniquesÉ concurrency management
Programming the Interface
É How does HCI affect the programmer?É Advances in coding have elevated programming
É hardware specific =⇒ interaction-technique specificÉ Layers of development tools
É windowing systemsÉ interaction toolkitsÉ user interface management systems (UIMS)
É Application architecturesÉ Model-View-Controller (MVC)É Presentation-Abstraction-Control (PAC)
É Body of programming techniquesÉ concurrency management
Windowing systems
É Role: mediate between devices and applicationsÉ “multiplex” I/O devices to allow multipleapplications
É device indepedence on top of imaging model
É Three possible software architectures:É each application manages all processes
É everyone worries about synchronizationÉ reduces portability of applications
É management role within kernel of operating systemÉ applications tied to operating system
É management role as separate applicationÉ maximum portabilityÉ client-server, e.g. X Windows
Windowing systems
É Role: mediate between devices and applicationsÉ “multiplex” I/O devices to allow multipleapplications
É device indepedence on top of imaging modelÉ Three possible software architectures:
É each application manages all processesÉ everyone worries about synchronizationÉ reduces portability of applications
É management role within kernel of operating systemÉ applications tied to operating system
É management role as separate applicationÉ maximum portabilityÉ client-server, e.g. X Windows
Application architecture: read-eval
Application architecture: notification based
MVC: Model-View-Controller
É MVC highly influential design pattern used inSmalltalk (1980)
PAC: Presentation-Abstraction-Control
É Coutaz (1987) introduced PAC, a generalisation ofMVC:
Graphical specificationÉ Trend in dialogue control:
É internal control (e.g. read-eval loop)É external control (e.g. UIMS)É presentation control (e.g. graphical specification)
É coder drawscomponents
É sets actions withscript or links toprogram
É Issues: focus on onewindow, hard to “see”paths through system
É Examples: VisualBasic, Flash,DreamWeaver,NetBeans InterfaceBuilder
Graphical specificationÉ Trend in dialogue control:
É internal control (e.g. read-eval loop)É external control (e.g. UIMS)É presentation control (e.g. graphical specification)
É coder drawscomponents
É sets actions withscript or links toprogram
É Issues: focus on onewindow, hard to “see”paths through system
É Examples: VisualBasic, Flash,DreamWeaver,NetBeans InterfaceBuilder
Multi-threading in practice
Multithreaded GUI toolkits seem to be one of the FailedDreams [of Computer Science].
Graham Hamilton, Sun VPhttp://weblogs.java.net/blog/kgh/archive/2004/10/
É Multi-threading desirable; yet nearly all GUI toolkitsuse single-threaded subsystem, e.g. an eventdispatch thread as in Swing. Why?
É GUI components (visual, e.g. JTable and data, e.g.TreeModel) accessed only from event thread.
É A few exceptions, e.g:É adding and removing listenersÉ SwingUtilities.isEventDispatchThread to checkif current thread is event thread
Multi-threading in practice
Multithreaded GUI toolkits seem to be one of the FailedDreams [of Computer Science].
Graham Hamilton, Sun VPhttp://weblogs.java.net/blog/kgh/archive/2004/10/
É Multi-threading desirable; yet nearly all GUI toolkitsuse single-threaded subsystem, e.g. an eventdispatch thread as in Swing. Why?
É GUI components (visual, e.g. JTable and data, e.g.TreeModel) accessed only from event thread.
É A few exceptions, e.g:É adding and removing listenersÉ SwingUtilities.isEventDispatchThread to checkif current thread is event thread
Example Event Listener
import javax.swing.*; import java.awt.event.*;import java.awt.Color; import java.util.Random;
public class ColorButton extends JFrame {// A button with a listener to change its colorpublic static void main(String[] args) {
new ColorButton();}final Random random = new Random();final JButton button = new JButton("Change Color");ColorButton() {
button.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent e) {
button.setBackground(new Color(random.nextInt()));
}});add(button); pack(); setVisible(true);setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}}
Flow of Events
É Simple event listener processes events like this:
mouseclick
// actionevent
// actionlistener
// setcolor
É To use a view and data model (MVC), this:
mouseclick
// actionevent
// actionlistener
//updatetablemodel
updatetableview
tablelistener
ootablechangedevent
oo
É fireXxx methods used to indicate model changeÉ control stays in event thread
Advanced GUI architecturesÉ Update presentation from GUI thread:
É SwingUtilities.invokeLater, schedules a task forexecution in the event thread (callable anywhere)
É SwingUtilities.invokeAndWait, schedules task inevent thread and blocks (call from non-GUI thread)
É To keep GUI responsive, handle long-running tasks:É dispatch separate non-GUI threads to do work (e.g.using thread pool Executor)
É Need “thread-hopping”:É non-GUI thread queues GUI events to signalprogress, completion
É GUI thread handles cancellation event to killnon-GUI thread
É Managing data models:É shared data model: synchronisation neededÉ thread-safe data models: fine-grained concurrency;versioning
É split data model: presentation-domain andapplication-domain models
References
Joëlle Coutaz.PAC, on object oriented model for dialog design.In Interact’87, 1987.
Soren Lauesen and Morten Borup Harning.Virtual windows: Linking user tasks, datamodels, andinterface design.IEEE Software, pages 67–75, July/August 2001.
See also:É Dix et al, Chapters 6 and 8.É Jakob Nielsen’s website for more on UsabilityEngineering: http://www.useit.com.
É Java Swing programming resources at http://java.sun.com/docs/books/tutorial/uiswing/