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 mouse drag. Draw filled rectagles or ovals, specified by a mouse drag (do't worry about dyamically drawig the shape durig the drag - just draw the fial shape idicated). Shape selectio (lie, rectagle or oval) selected by a combo box OR meu. Color selectio usig radio buttos OR meu. Lie thickess usig a combo box OR meu. A CLEAR butto. 4 1
P3 Coceptual Desig Covert task scearios ad hierarchical task aalyses ito a coceptual desig. Metaphors. Make a list of possible iteractio metaphors for your iterface (per the examples i class). For each of your task scearios list at least two optios for iteractio metaphors ad some of the implicatios of your choice. Activity Desig Scearios Trasform each of your problem scearios ito a activity desig sceario, followig the examples i Rosso & Carroll Ch 3, Figures 3.4 ad 3.5. 5 P4 Movig to scree desig 6 2
Sceario-Based Desig 9 3
Iteractio Sceario 11 P4: Iterface desig 12 4
P4: Storyboard for each of your 3 tasks 13 Scree Layout What do we kow so far? 14 5
Scree Layout What do we kow so far? How do we implemet these? Huma memory & attetio Gestalt laws of huma perceptio Desig Priciples Nielse s Heuristics Norma s Heuristics 15 Gestalt priciples of groupig 16 6
Proximity 17 Cotiuity 18 7
STM/WM Chukig 19 STM/WM is Short-lived 20 8
Nielse s Heuristics How do we implemet them? 1. Simple ad Natural Dialogue 2. Speak the User s Laguage 3. Miimize User Memory Load 4. Cosistecy 5. Feedback 6. Clearly Marked Exits 7. Shortcuts 8. Good Error Messages 9. Prevet Errors 10. Help ad Documetatio Guidelies for Graphic Desig Desigig Visual Iterfaces, Mullet 95 Simplicity Cotrast White space Aligmet 25 9
Simplicity Remove uecessary widgets Use regularity i desig (fots, lies, colors) 26 Iterface Layout Simplicity is the key 10
Dix 5.7 Usig whitespace Use to group cotrols istead of lies Do t crowd cotrols together 28 Cotrast The irregularity i a desig that commuicates iformatio Dimesios that afford low effort cotrast Use the squit test 29 11
Example: Word 97 prit 30 How to create atural groupigs? Card sort! 31 12
Desigig Meus WIMP compoets 33 13
Direct maipulatio Graphical objects o the scree are directly maipulated with a poitig device. Physical actios or labeled butto presses istead of complex sytax. Rapid, icremetal, reversible operatios with immediately visible impact. Direct maipulatio requires bitmapped screes so that each picture elemet or pixel ca be used for iput ad output, ad a poitig device. Icos Icos represet features ad fuctios. Help people recogize which feature they eed to access. Icos make use of three priciple types of represetatio Metaphor relies o people trasferrig kowledge from oe domai ad applyig to aother. Direct mappig - creatig a more or less direct image of what the ico is iteded to represet. Covetio - arbitrary desig, which has become accepted as stadig for what is iteded over time. 14
Horto s checklist for ico desigers Uderstadable. Spotaeously suggest the iteded cocept to the viewer? Familiar. Objects i the ico oes familiar to the user? Uambiguous. Are additioal cues (label, other icos documetatio) available to resolve ay ambiguity? Memorable. Feature cocrete objects i actio? Iformative. Why is the cocept importat? Few. Is the umber of arbitrary symbols less tha 20? Distict. Is every ico distict from all others? Attractive. Does the image use smooth edges ad lies? Legible. Test all combiatios of color ad size? Compact. Is every object, every lie, every pixel ecessary? Coheret. Is it clear where oe ico eds ad aother begis? Extesible. Ca I draw the image smaller? Will users still recogize it? Modal (vs. Modeless) Dialog 15
Meus Drop-dow Cascadig Roll-up Pop-up Tool Bars Good for efficiecy of expert users 16
Commad Buttos Labels are importat Most importat at left ad top Same size, but adjusted for label legth OK Text Some heuristics Lie legth ~60 chars / 8-12 words Left-justified Lies with distict thoughts, or that ed o grammatical boudaries are best 41 17
Dix 5.7 Layig out colums Hard to sca across cols 42 Color Use sparigly. Do t rely o it exclusively: Remember 5-8% of users are likely to be color blid. Keep cotrast i mid. 18
Desigig with color Marcus 92 Use a maximum of 5 +/- 2 colors. Use foveal (cetral) ad peripheral colors appropriately. Use a color area that exhibits a miimum shift i color ad/or size if the color area chages i size. Rule 5. Use familiar, cosistet color codigs with appropriate refereces. Color cootatios ca vary dramatically eve withi a culture. E.g., blue i the US is iterpreted differet by differet groups for healthcare professioals it is take to idicate death; for movie-goers it is associated with porography; for accoutats it meas reliability or corporateess (thik of the Big Blue IBM). Images: Graphs UIDE Chapter 13 19
Soud kids? whe to use? Differet Types of Soud music, speech, earcos Makig Good Use of Soud Effects Reiforcemet, completio of a operatio, attract attetio. Usig Music Effectively evocative, atmosphere Usig Speech Effectively Toe, pace, accet Geerated Speech demo 47 20
Compoet Heuristics Stoe, et al, User Iterface Desig ad Evaluatio Primary widows Drive by mai tasks & task objects Tabs Iformatio o differet tabs should be idepedet. Should ot be used for sequetial steps. Meus Names should idicate purpose 48 Compoet Heuristics Stoe, et al, User Iterface Desig ad Evaluatio Toolbars ToolTips ca help users lear the meaigs of icos. Icos Desig icos that are visually simple but iformative, represet cocrete objects. Buttos Label idicates the actio the butto does Place alog bottom of dialog boxes Should be same size ad shape. Differet widths OK for row of buttos. 49 21
Compoet Heuristics Stoe, et al, User Iterface Desig ad Evaluatio List (combo) boxes Use whe there are a large umber of optios, OR if the list is likely to chage Text box If you caot aticipate user iput Size of the box should idicate amout of ifo required 50 Critique? 51 22
Critique? Exercise Project teams Sketch three versios of the mai scree/widow/dialogue for your most complex task Assume you are implemetig i Java Swig 53 23
Research: SUPPLE Krzysztof Gajos (ow Harvard) 55 56 24
Desig guidace Sources of Desig Guidace Stadards Iteratioally agreed upo desig priciples Style Guide Collectio of desig rules, usually for a particular compay or product lie 25
User Iterface Stadards Official, publicly available documets that defie stadards for user iterface desig Iteratioal ISO 9241 Ergoomic requiremets for office work with visual display termials ISO 14914 Software ergoomics ISO 13407 Huma-cetered desig process (ow ISO 9241-210) ISO 20282 Operatio of everyday products US federal, e.g., Sectio 508 of Rehabilitatio Act of 1973 - Stadards for Electroic ad Iformatio Techology (accessibility) Style Guides A typical guide icludes: Descriptio of required iteractio styles ad user iterface cotrols Guidace o whe ad how to use the various styles or cotrols Illustratios of styles ad cotrols Scree templates 26
Commercial Style Guides Apple Iterface Guidelies Microsoft Widows UI Guidelies IBM s Commo User Access Motif Style Guide Java Look ad Feel 1999! Fudametals The Java look ad feel is the default iterface for applicatios built with Java. The Java look ad feel is desiged for cross-platform use ad ca provide: Cosistecy i the appearace ad behavior of commo desig elemets Compatibility with idustry-stadard compoets ad iteractio styles Aesthetic appeal that does ot distract from applicatio cotet 62 27
Java Look ad Feel Accessibility Iteratioalizatio Colors, Fots, Capitalizatio Layout ad Spacig of Widgets Ico desig etc 63 Mouse Poiters 64 28
Customized Style Guides Create your ow! For your specific project or product lie Helps focus o desig issues early Eables use of priciples ad guidelies Steer decisio makig ad serve as record Esures iteral cosistecy Style Guides Bottom Lie If you are buildig iteral tools or oe-off projects, usig a GUI-builder will esure most relevat desig rules are followed. If you are buildig commercial UIs, your compay will provide you with the style guidelies to use. You should ot be worryig too much about this ow i your team project, but may provide guidace for desig decisios. 66 29
P4 Desig Sketches Due i 1 week (10/19) You will explore possible desig optios, ad sketch what your iterface will look like. 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. 67 P4 Desig Sketches Due i 1 week 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. 68 30
P4: Iterface desig 69 P4: Storyboard for each of your 3 tasks 70 31
To Do Read Evaluatio (Beya Ch 10). Swig layout maagers. Fiish by Next class I5 Paitig applet Start P4 Desig Sketches 71 32