10/16/2008. CSG 170 Round 5. Prof. Timothy Bickmore. User Analysis Task Analysis (6) Problem Scenarios (3)

Transcription

1 Human-Computer Interaction CSG 170 Round 5 Prof. Timothy Bickmore T2: Requirements Analysis Review User Analysis Task Analysis (6) Problem Scenarios (3) 1

2 T2 Review Requirements Analysis Who is the user? What does the user need to do? User Analysis Practically speaking (for the homework) Age, gender, ethnicity Education Physical abilities General computer experience Skills (typing? Reading?) Domain experience Application experience Work environment and other social context Relationships and communication patterns Identify major kinds/classes of users By interview, observation & questionnaire 2

3 Example HTA Example Problem Scenario Sally Harris is a high h school sophmore who has been researching black holes for the past 3 months She is a bit worried about the space and materials provided to everyone This year she has explored some new methods-for example, an Authorware simulation that illustrates her theory of black hole formation. As she studies her simulation, Sally thinks of a way to turn the lack of computer support into a feature : She will create a sequence of visualizations that can be flipped like a deck of cards to show the animation. 3

4 T2: Requirements Analysis User Analysis Task Analysis (6) Problem Scenarios (3) Activity Design Rosson & Carroll Ch 3 4

5 Activity Design Design of system functionality aka Conceptual Design, Task-Level Design Focus on what a system will do Delay design details Interaction metaphors Making the interaction seem like something the user is already familiar with Desktop, Trash can, etc. Shopping Mall Direct Manipulation 5

6 Overall Metaphors Constructing an exhibit is like writing a Lab journal Documentary Visiting the fair is like going to a Study room Public lecture Cocktail party 6

7 Develop Activity Scenarios For each Problem Scenario Think how your interaction metaphors & technology can be introduced to address the problem Think through how the actor(s) will use them Document the new story as an Activity Scenario Document key features/issues and pros/cons of each in a claims analysis Don t discuss interface design yet! 7

8 Team Project task #3 Start thinking about high-level design Interaction Metaphors Make a list of possible interaction metaphors for your interface, following the examples in Rosson & Carroll Ch 3, Tables 3.1 and 3.2. For each of your scenarios list at least two options for interaction metaphors and some of their implications. Activity Design Scenarios Transform each of your problem scenarios into an activity design scenario, documenting analyses of design features, following the examples in Rosson & Carroll Ch 3, Figures 3.4 and 3.5, and Table

9 Implementation Support Windowing System Provides Independence from devices Management of multiple apps Imaging model Input mechanisms Processes 9

10 Application Programming Paradigms Read-evaluation evaluation loop repeat forever Read an event Handle the event Notification based registerevents( ) on Event1 do { } on Event2 do { } //callback functions Swing is Notification based class MyActionHandler implements ActionListener { public void actionperformed(actionevent event) { System.out.println( Somebody pushed me! ); } } Button button1=new Button( Push Me ); button1.addactionlistener(new MyActionHandler()); 10

11 Model-View-Controller Architecture View Display Model Controller Inputs What are the advantages to separating these? Swing s Modified MVC Architecture ( Model-Delegate ) Collapse View & Controller Hard to write these independently Allows pluggable look and feel Delegate 11

12 Swing Events & Graphics Stuff JApplet A kind of Panel 12

13 Useful stuff Graphics getgraphics() called within JApplet Returns a Graphics object Device-independent interface to graphics Basics (plus fillx for most of these): drawline(x1,y1,x2,y2); drawrect(x,y,w,h); drawoval(x,y,w,h) w drawpolygon(int[] xpts,int[] ypts,numpts) drawstring( a string,x,y) drawarc(x,y,w,h,startangle,endangle) setcolor(color) Notes: java.awt pkg, coordinate system Colors java.awt.color Constructors Color(int R,int G,ing B) // ea Color(float R,float G,float B) //0..1 Pre-defined as constants black,blue,cyan,darkgray,gray,green, black,blue,cyan,darkgray,gray,green, lightgray,magenta,orange,pink,red,white, yellow 13

14 Event Model Swing Events are a subclass of java.awt.awtevent (subclass of java.util.eventobject) getsource() -> who produced it Swing is Notification based class MyActionHandler implements ActionListener { public void actionperformed(actionevent event) { System.out.println( Somebody pushed me! ); } } Button button1=new Button( Push Me ); button1.addactionlistener(new MyActionHandler()); 14

15 Event Types Event Action Adjustment Component Container Focus Item Key Mouse Text Listener Methods actionperformed() adjustmentvaluechanged() componenthidden(), componentmoved(), componentresized(), componentshown() componentadded(), componentremoved() focusgained(), focuslost() itemstatechanged() keypressed(), keyreleased(), keytyped() yp MouseListener/MouseAdapter: mouseclicked(), mouseentered(), mouseexited(), mousepressed(), mousereleased() MouseMotionListener/MouseMotionAdapter: mousedragged(), mousemoved() textvaluechanged() Events by Component Component ComponentEvent, FocusEvent, KeyEvent, MouseEvent Container ContainerEvent JButton JMenuItem JRadioButton ActionEvent JCheckbox ItemEvent JTextComponent TextEvent JTextField ActionEvent JScrollbar AdjustmentEvent Window WindowEvent JList ActionEvent, ItemEvent 15

16 Some Event Methods ItemEvent KeyEvent MouseEvent getstatechange() //SELECTED DESELECTED getkeychar(), getkeycode() getx(), gety(), getclickcount() NetBeans Example 16

17 Homework I5 Your mission in this exercise is to implement a very simple Java painting applet. The applet must support the following functions: Drag to draw on the background panel. Color selection using a combo box. Line thickness using a group of radio buttons. A CLEAR button. To do Read Rosson & Carroll Ch 4 & 5 3 Tangible Interface papers Java Tutorial on Layout Managers Do Homework I5 Swing Events Do Homework T3 Activity Design 17

18 GUI Tools Topiary: a tool for prototyping location-enhanced applications - UIST'04 [Rushabh] Sketching Interfaces: Toward More Human Interface Design Computer 01 [Priyanka] 18