Human-Computer Interaction IS4300

Size: px

Start display at page:

Download "Human-Computer Interaction IS4300"

Duane Austin
5 years ago
Views:

1 Huma-Computer Iteractio IS P4 Desig Sketches Due Iteractio Scearios Expad each of your activity desig scearios (3+) ito full iteractio scearios, thikig about what the user perceives ad the actios he/she performs at each major step i the sceario. Desig Optios Three optios for your most importat widow or dialog box, ad brief ratioale for why you selected oe over the other two. Prelimiary iterface desig. Oe or more sketched widows or dialog boxes, alog with the meus ad cotrols that the user maipulates. Storyboards. For each of your tasks/scearios, describe how your prelimiary iterface would be used to perform the task. Use rough sketches to illustrate how the iterface would look at importat poits i the task. 2 1

2 Homework I6 due i oe week Your objective i this assigmet is to get some experiece with Frames, Dialogs ad layout maagers i Swig. Your missio is to create your ow (ideally project-related) applicatio with the followig miimum requiremets: A JFrame ad a (o-modal) JDialog. A JTabbedPae ad JScrollPae. Nested JPaels icludig the followig layout maagers: GridLayout, FlowLayout, BorderLayout Some iteractio widgets (JButto, etc.) o every JPael ad tab. Reasoable behavior whe the JFrame is resized. NOTE: You may ot use GridBagLayout, Free Desig, Box, Overlay, Null or Absolute Layout aywhere i the project. 3 Evisioig Makig ideas visible; exteralizig thoughts. Represets desig work to ourselves ad to others. May forms: Examples? Differet forms will useful at differet stages i desig: Examples? Occurs throughout developmet as the desiger geerates multiple desig solutios ad whittles them dow to a fial product. 4 2

Prototypes suppress uecessary details 5 Example 1. A car desiger has bee commissioed to produce a ew luxury sports car. 2. Doodles a few desigs o paper ad shows them to other desigers o the team. 3.

3 Prototypes suppress uecessary details 5 Example 1. A car desiger has bee commissioed to produce a ew luxury sports car. 2. Doodles a few desigs o paper ad shows them to other desigers o the team. 3. Desiger is satisfied with oe of the desigs ad draws up detailed blueprits that are give to the firm s model maker. 4. Scale models are produced ad set to Marketig ad Sales for customer reactio. 5. The models are subjected to wid tuel experimets to ivestigate the aerodyamics of the desig ad the results are used i a computer program that will calculate the car s speed ad fuel efficiecy. 6 3

4 Prototypes for UI Desig already discussed? Scearios (activity, iteractio) Sketches Storyboards Paper prototype Software prototype 7 Iterface Sketches 8 4

5 Iterface Storyboards 9 Mood Boards provide desig ispiratio 10 5

6 Navigatio Maps 11 Wireframes 12 6

fuctioality (e.g., Netbeas!) May custom UI prototypig tools 10screes.

7 Video Prototypig 14 More Prototypig tools Paper PowerPoit ad drawig packages Sketchig ad simple scree avigatio iteractio Flash, Director, Visual Basic, hypermedia tools, Web tools such as Dreamweaver IDEs for more complex fuctioality (e.g., Netbeas!) May custom UI prototypig tools 10screes.com Crak Software Storyboard suite Adobe fireworks (for web); Adobe Flash Catalyst Atetype.com Etc etc etc (Google user iterface prototypig tool ) 15 7

8 Prototypig o Paper 16 Paper Prototypig! 17 8

9 Paper Prototypig What is it? Perform user testig with a paper mock up of your iterface Oe perso plays computer updatig the iterface wheever the user iteracts with it Example: leave submissio system 9

10 Why? Syder, Paper Prototypig Substative user feedback early i developmet process Promotes rapid iterative developmet Facilitates commuicatio withi dev team ad betwee dev team ad customers Does ot require ay techical skills, so a multidiscipliary team ca work together Ecourages creativity i the product developmet process Less itimidatig tha a computer No itpicky feedback Why? Prevet iertia that ca be caused by buildig heavy prototypes Try out goofy ideas without havig to worry about how may hours it will take to implemet 10

Paper Prototypig How Parts list White poster board Blak 5x8, 4x6 idex cards Removable tape For text fields (users write o it) For grayed out (disabled) widgets To stick widgets o the backgroud

11 Paper Prototypig How Parts list White poster board Blak 5x8, 4x6 idex cards Removable tape For text fields (users write o it) For grayed out (disabled) widgets To stick widgets o the backgroud Markers, pes & highlither Scissors Optioal Trasparecy & markers Restickable glue Correctio fluid/tape (for o-the-fly chages) Widget-by-widget suggestios Radio buttos & check boxes Removable tape for selectio Tabbed dialog box Oe idex card/tab Text field User writes o removable tape Drop-dow list List o card/paper Whe item selected, computer writes o tape 11

12 Buildig the Prototype Had sketched, moochrome Elarged UI (e.g. 11x17) easier to work with ad will allow almost all testig Ca use greekig for large blocks of irrelevat text Ca use photos or pritouts where especially importat (e.g., photo of product o a shoppig page) Demo! Pet-O-Matic 25 12

13 P5a Paper Prototypig Before the ext class, prepare your prototype ad test cases, ad practice "playig computer". Write your 3 test tasks o separate idex cards. We will practice with all teams i class. 26 Research Articles 27 13

32 Paper Prototypig Practice Sessio ext class Each Project Set up Pick your most represetative task I ll recruit someoe from aother team Go through etire script as if this was a

16 32 Paper Prototypig Practice Sessio ext class Each Project Set up Pick your most represetative task I ll recruit someoe from aother team Go through etire script as if this was a real test user Briefly explai what your system does Read ad give Task to test user Observers (the rest of you) Note problems with protocol / method Note problems with iterface 33 16

17 To Do Read Nielse Ch 6 (usability studies) Fiish by ext class Paper prototype for project Fiish ext Weds (10/26) I6 Swig Layout Maagers 34 17

Human-Computer Interaction IS4300

Human-Computer Interaction IS4300 Huma-Computer Iteractio IS4300 1 I5 due ext class Your missio i this exercise is to implemet a very simple Java paitig applicatio. The app must support the followig fuctios: Draw curves, specified by a