CS 349 / SE 382 Custom Components. Professor Michael Terry February 6, 2009

Transcription

1 CS 349 / SE 382 Custom Components Professor Michael Terry February 6, 2009

2 Today s Agenda Midterm Notes A2 Scroll XOR demo A3 super special sneak preview Clarifications on Fitt s Law Undo Custom components CS 349 / SE 382 / 2

3 Midterm Notes Can comprehend UI code Design patterns, listeners, delegates Basic X calls, like XNextEvent Basics of affine transforms Can write basic UI code Don t need to know specific API calls In-depth understanding of concepts covered in lecture Will be mixture of short answer and code-oriented questions Emphasis is on material covered in lecture and assignments No example midterms provided CS 349 / SE 382 / 3

4 A2 Scroll Demo CS 349 / SE 382 / 4

5 A3 Super Special Sneak Preview

6 Questions? CS 349 / SE 382 / 6

7 Fitt s Law Clarifications CS 349 / SE 382 / 7

8 Finishing Up Undo CS 349 / SE 382 / 8

9 Creating Custom Components What is a custom component? Why do we need to create them? Whose perspectives do we need to consider? CS 349 / SE 382 / 9

10 Component Desiderata Custom component should: Address a very specific need Do one, well-defined task better than existing methods Be usable Be reusable, customizable across applications To meet these goals, we need to consider two perspectives: User s perspective Developer s perspective CS 349 / SE 382 / 10

11 User s Perspective What problem is person trying to solve? How do they conceptualize the problem? How do they currently solve the problem? What tools, information do they make use of in solving the problem? How do we get at this information? CS 349 / SE 382 / 11

12 Example: Cockpit Design As cockpits went digital, analog controls replaced with digital controls But problems crept up Why? From Hutchins How a Cockpit Remembers Its Speeds (1995) CS 349 / SE 382 / 12

13 Example: Cockpit Design Pilots don t just make use of the airspeed number Also use speed bugs to indicate minimum speeds for various flying weights Spatial relation of needle to bugs becomes just as critical as actual airspeed Digital airspeed indicator can lose these essential properties From Hutchins How a Cockpit Remembers Its Speeds (1995) CS 349 / SE 382 / 13

14 Example: Undo/Redo in Photoshop Users sometimes rapidly execute undo/redo But are not fixing a mistake Instead, they are assessing result of last action Need to look beyond what is being done, and ask why it is being done What purpose is activity serving? User may not be able to tell you Why not? CS 349 / SE 382 / 14

15 Designing for Users Users behavior can become automatic over time They forget why they formed their strategies Observations, interviews help us uncover user s real needs and motivations In designing new components and interfaces, we must understand users and the larger context of their work to be successful CS 349 / SE 382 / 15

16 Component Design Rules of Thumb User should be able to: Recognize affordances of component Develop an accurate mental model of component and its usage Component should: Be consistent with rest of interface and its components Be congruent with other metaphors in interface, world Afford experimentation CS 349 / SE 382 / 16

17 Affordances An object s affordances are those properties that suggest its usage A door panel affords pushing A door handle affords pulling CS 349 / SE 382 / 17

18 Affordances CS 349 / SE 382 / 18

19 Affordances Can use metaphors to suggest affordances Metaphor of desktop, files, folders, trash can But remember: affordances may not transfer from physical to digital world Don t blindly mimic real-world controls Pay heed to affordances unique to physical and digital world Example: Rotary knob Why does a digital recreation of rotary knob fail to transfer affordances with current WIMP interfaces? CS 349 / SE 382 / 19

20 Mental Model When interacting with an object, we create an internal model of how it functions We develop hypotheses regarding how it will respond to particular actions Mental model is often incomplete and inaccurate Revised as our understanding increases Also referred to as conceptual model CS 349 / SE 382 / 20

21 Mental Model Example What is mental model of thermostat? What is a (not uncommon) incorrect mental model of a thermostat? CS 349 / SE 382 / 21

22 Affordances and Mental Models What influences our perceptions of affordances and our construction of mental models? A result of individual histories and cultural background Examples of mental models being incorrect when going to a foreign country? Or misinterpreted affordances in a foreign country? CS 349 / SE 382 / 22

23 Consistency Does component conform to rest of interface s conventions? Consider both appearance and interaction Does a component violate consistency? Inconsistency can lead to User frustration Increased learning time Errors Inconsistency should be carefully considered CS 349 / SE 382 / 23

24 Congruence Is component congruent with our understanding of the world? Are metaphors properly used? Can we transfer mental models from real-world or other phenomena to our understanding of component and its usage? CS 349 / SE 382 / 24

25 Component Feedback Does component effectively communicate: That it is enabled/disabled? That it is active/inactive? Its current state? Does it adhere to principles of consistency and congruency across these dimensions? Does feedback communicate affordances? Can user build a suitable mental model? CS 349 / SE 382 / 25

26 Guidelines Principles of direct manipulation can serve as one set of guidelines Enable rapid, incremental feedback Allow reversibility of actions Allow only syntactically correct actions Consider human-computer dialogue Prompt, echoing of input, trigger to start command, acknowledgement, and response Is system providing adequate feedback at all of these stages? If not, proper use of system not apparent CS 349 / SE 382 / 26

27 Developer s Perspective Goal is a self-contained, customizable component Should do one thing, and only one thing, and do it well Concepts of affordances, mental models just as applicable to component design (its architecture) as its interactive counterpart Other developers should be able to construct mental model of how to integrate your component into their application Component s architecture should have affordances suggesting its uses and how it can be extended In other words, the API should be usable CS 349 / SE 382 / 27

28 Developer s Perspective Separate concerns Model-view-controller split Functionality that can change should be factored out, delegated to separate classes Create loose coupling between component and other parts of interface Design patterns help partition responsibilities, separate concerns Observer, command, strategy, composite, factory Also provide a common language to increase understanding between developers Suggests affordances, mental models CS 349 / SE 382 / 28

29 The Model Part of the Component Decide if it is appropriate to have your own data model Reuse existing models if they make sense Example: If you are creating a new rendering of a list of information, use ListModel rather than creating own model If you need to define a new model, make it an interface Allows others to create adapters for their data to conform to your component Model interfaces often only provide accessor methods Why? CS 349 / SE 382 / 29

30 The Model Part of the Component Provide a listener interface to notify others when the model changes Reuse existing listener interfaces where appropriate PropertyChangeListener / PropertyChangeEvent a very flexible mechanism for this Consider granularity of listener updates JSlider as an example Model should be completely independent from any GUI code Should be able to test it by itself CS 349 / SE 382 / 30

31 The View Part of the Component In Java, generally work in realm of javax.swing package, rather than AWT AWT s components are heavyweight : Underlying platform s widgets Swing s components are lightweight : Completely implemented in Java CS 349 / SE 382 / 31

32 The View Part of the Component Typically derive new class from JComponent or JPanel Nearly identical components, but imply different uses JComponent implies a single thing A JPanel implies a collection of things Override paintcomponent() to perform custom painting of component CS 349 / SE 382 / 32

33 The View Part of the Component Implement and attach interaction listeners This is the controller part of MVC Coordinates view and model Hide interaction listeners from public interface CS 349 / SE 382 / 33

34 Integrating Model and View Provide methods to get/set model of the custom component In setmodel() method, you must: Unregister listener in existing model Register listener with new model Update your view (typically by calling repaint()) CS 349 / SE 382 / 34