Prototyping

1. Prototyping Sketches, storyboards, and other prototypes

2. Project: What’s next? • Brainstorm and explore the design space • Lots of ideas, even crazy ones • Try and explore full design space • Choose subset (3-5) for focus • Poster: March 12 • Overview of project, users, tasks • Perhaps requirements, usability goals • Several design ideas: • Sketches, storyboards, etc. • Report and prototype due April 2

3. Design Artifacts • Expressing design ideas: • Make it fast!!! • Allow lots of flexibility for radically different designs • Make it cheap • Promote valuable feedback • Facilitate iterative design and evaluation

4. Prototype representation • How to represent the prototype? • Mockup • Storyboard • Sketches • Scenarios • Screenshots • Limited functionality • GUI interface

5. Prototype scope • How much to represent? • Vertical - “Deep” prototyping • Show much of the interface, but in a shallow manner • Horizontal - “Broad” prototyping • Show only portion of interface, but large amount of those portions

6. Prototype maturation • Low fidelity vs. High fidelity • Amount of polish should reflect maturity of the prototype • Why?

7. Scenarios • Typically narratives, but can be videos, simulations • Use to explore errors or exceptions • Good for accompanying storyboard or sketches Jane likes to take walks every morning. This morning, as she places her hand on the door, she hears “75% chance of rain, better bring your umbrella.” Thankful for the notice, she grabs her umbrella and heads out for her morning walk.

8. Storyboard • Determine the story • A very iterative process through a lot of initial drafts • Includes a lot of brainstorming • Sketch on pen + paper • Generate more polished art for presentation • Develop

9. Use taglines / captions • Keep it short: represent your key ideas but nothing more

10. Drawing is hard… • It doesn’t have to be drawings..

11. Sketches • Drawings are also good for unique physical aspects of your system Taken from Builder Bobs team project Summer 04

12. Mockups / Wireframes • Good for brainstorming • Focuses people on high-level design notions • Not so good for illustrating flow and the details

13. Paper prototyping • “Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” Taken from Paper Prototyping by Carolyn Snyder http://www.paperprototyping.com/ The "Computer" highlights the item the user has just selected. A member of the development team observes and takes notes. (Photo courtesy of Timo Jokela.)

14. IP Address OK Cancel Draw/Paint programs Draw each screen, good for look Thin, horizontal prototype PhotoShop, Paint,...

15. Simulations • Put storyboard-like views down with (animated) transitions between them • Can give user very specific script to follow • Often called chauffeured prototyping • Examples: PowerPoint, Hypercard, Macromedia Director, HTML

16. Interface Builders • Tools for laying out windows, controls, etc. of interface • Easy to develop & modify screens • Supports type of interface you are developing • Good look and feel • Can add back-end functionality • Examples: Visual Basic, .NET, many apps for various languages

17. Specialized • SILK (Sketching Interfaces Like Krazy) / DENIM • Sketch-based GUI builder • http://dub.washington.edu/denim/ • http://www.open-video.org/details.php?videoid=5018 • by James Landay and his former group at UC Berkeley • Axure • Commercial tool for wireframes • http://www.axure.com/

18. Tutorials & Manuals • Create ahead of time to flesh out functionality • If it’s difficult to describe, it’s probably difficult to use! • Forces designer to be explicit about decisions • Putting it on paper is valuable

19. Prototyping Technique • Wizard of Oz - Person simulates and controls system from “behind the curtain” • Use prototype interface and interact with users • Behavior should be algorithmic • Good for simulating system that would be difficult to build

20. Review Late Early Medium-fidelity High-fidelity Low-fidelity Sketches, mock-ups Slide shows System prototypes Scenarios Simulations Storyboards

21. Visual design The “look” of your interface

22. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

23. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

24. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

25. Graphic Design • A comprehensible mental image • Appropriate organization of data, functions, tasks and roles • High-quality appearances • The “look” • Effective interaction sequencing • The “feel” • Classes at UNCC • http://www.uncc.edu/schedule/subject/artg.html • Classes at CPCC • http://www.cpcc.edu/course%5Fdescriptions/grd/

26. Graphic Design • Involves knowledge of: • Sequencing • Organization • Layout • Imagery • Color • Typography

27. Graphic Design Principles • Metaphor • Clarity • Consistency • Alignment • Proximity • Contrast

28. Clarity • Every element in an interface should have a reason for being there • Make that reason clear too! • White/open space • Leads the eye • Provides symmetry and balance • Strengthens impact of message • Allows eye to rest between elements of activity • Used to promote simplicity, elegance, class, refinement

29. Example Clear, clean appearance Opinion?

30. Example Does this convey different impressions?

31. Clarity via “White” Space • White = Open

32. Consistency • In layout, color, images, icons, typography, text, … • Within screen, across screens • Stay within metaphor everywhere • Platform may have a style guide • Follow it!

33. Example Home page Content page 1 Content page 2 www.santafean.com

34. Alignment • Western world • Start from top left • Novices often center things • No definition, calm, very formal • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically

35. Grids – use them

36. Layout Grids http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design

37. Three Column Layout Grids From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

38. Symmetry vs. Asymmetry Beware of too much symmetry From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

39. Proximity • Items close together appear to have a relationship • Distance implies no relationship Time Time:

40. Example Name Name Name Addr1 Addr1 Addr1 Addr2 Addr2 Addr2 City City City State State State Phone Phone Phone Fax Fax Fax

41. Slide from Saul Greenberg • Two-level Hierarchy • indentation • contrast Logic of organizationalflow Grouping by white space Alignment connects visual elements in a sequence

42. Contrast • Pulls you in – set off most important item • Guides your eyes around the interface • Supports skimming • Add focus

43. Example IBM's Aptiva Communication Center

44. Example Visual noise

45. Haphazard layoutfrom mullet & sano

46. Repairing a Haphazard layoutfrom mullet &sano

47. Economy of visual elements • Minimize number of controls • Include only those that are necessary • eliminate, or relegate others to secondary windows • (but don’t want too many extra windows!) • Minimize clutter • so information is not hidden

48. Example Overuse of 3D effects

49. Color • Use for a purpose and sparingly • Draw attention, communicate organization, to indicate status, to establish relationships, aid search • Use redundant cues • Color-blindness • Enhances performance • Be consistent with color associations from jobs and cultures

50. How many small ovals?