1Fall 2003 6.893 UI Design and Implementation 1Lecture 8: Computer PrototypingFall 2003 6.893 UI Design and Implementation 4Today’s Topics• Course evaluation results• Quiz preview• Paper prototype post-mortem• Computer prototypingFall 2003 6.893 UI Design and Implementation 5Midterm Course Evaluation Results• Overhead problems• Hall of Fame & Shame• Slides (but not notes) in advanceFall 2003 6.893 UI Design and Implementation 6Quiz on Wednesday• Topics– Usability– Iterative design– User & task analysis– Model human processor– Color– Conceptual models & metaphor– Affordance, constraint, visibility, feedback– Errors– Nielsen’s heuristics– Heuristic evaluation– Prototyping– Graphic design principles• Everything is fair game– Class discussion, lecture notes, readings, assignments• Closed book exam, 80 minutes2Fall 2003 6.893 UI Design and Implementation 7Paper Prototyping Post-Mortem• Time to make prototype• Materials that worked well or badly• Useful implementation tricks• Parts of UI that are hard to prototype• How it feels to be a user• How it feels to watch a user• Surprises learned from watching usersFall 2003 6.893 UI Design and Implementation 12Paper Prototyping is Not Enough• Low fidelity in:–Look–Feel– Dynamics– Response time–Context• Users can’t try it without a human to simulate computerFall 2003 6.893 UI Design and Implementation 13Computer Prototype• Interactive software simulation• High-fidelity in appearance & interaction• Low-fidelity in depth– Paper prototype had a human simulating the backend; computer prototype doesn’t– Computer prototype is typically horizontal: covers most features, but no backendFall 2003 6.893 UI Design and Implementation 14What You Can Learn From Computer Prototypes• Everything you learn from a paper prototype, plus:• Screen layout– Is it clear, overwhelming, distracting, complicated?– Can users find important elements?• Colors, fonts, icons, other elements– Well-chosen?• Interactive feedback– Do users notice & respond to status bar messages, cursor changes, other feedback• Fitts’s Law issues– Controls big enough? Too close together? Scrolling list is too long?3Fall 2003 6.893 UI Design and Implementation 15Prototyping Techniques• Storyboard– Sequence of painted screenshots connected by hyperlinks (“hotspots”)• Form builder– Real windows assembled from a palette of widgets (buttons, text fields, labels, etc.)Fall 2003 6.893 UI Design and Implementation 16Why Use Prototyping Tools?• Faster than coding• No debugging• Easier to change or throw away• Don’t let Java do your graphic designFall 2003 6.893 UI Design and Implementation 17Storyboarding Tools•PowerPoint– drawings + hyperlinks• Flash/Director– animation + actions•HTML– image maps• All these tools have scripting languages, too– Help orchestrate the transitions• For high fidelity look, take screenshots of widgets from a form builderFall 2003 6.893 UI Design and Implementation 18Pros & Cons of Storyboarding•Pros– You can draw anything• Cons– “Hunt for the hotspot”– No text entry– Widgets aren’t active4Fall 2003 6.893 UI Design and Implementation 19Form Builders• HTML/Dreamweaver– Natural if you’re building a web application– May have low-fidelity look otherwise• Visual Basic• Java GUI builders– Sun NetBeans– IBM Visual Age/WebSphere– Borland JBuilder•Tips– Use absolute positioning for nowFall 2003 6.893 UI Design and Implementation 20Pros & Cons of Form Builder•Pros– Direct manipulation editing, not coding– Actual controls, not just pictures of them– Can hook in some backend if you need it• But then you won’t want to throw it away• Cons– Limits thinking to standard widgets– Useless for rich graphical interfacesFall 2003 6.893 UI Design and Implementation 21Technical Challenges to Graphic Design• Window resizing• Platform differences•
View Full Document
Unlocking...