Prototyping

1. Prototyping Sketches, storyboards, and other prototypes

2. Part 1 Comments • You don’t have to create a large system that does everything • Focus • make clear your users goal(s) • Specific problem(s) • Let that tell you what your requirements should be

3. Part 2 Poster • Component of Part 2 grade • Overview of project, users, tasks • Perhaps requirements, usability goals • Perhaps scenarios, storyboards • Design ideas, sketches, etc. http://swiki.cc.gatech.edu:8080/cs4750/1383

4. 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

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

6. 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

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

8. 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.

9. 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

10. Use taglines / captions • Keep it short: 4-6 frames ideal

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

12. Sketches • Don’t forget to depict unique physical aspects of your system Taken from Builder Bobs team project Summer 04

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

14. 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.)

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

16. 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

17. 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

18. Specialized • SILK (Sketching Interfaces Like Krazy) / DENIM • Sketch-based GUI builder • http://www.open-video.org/details.php?videoid=5018 • by James Landay and his former group at UC Berkeley

19. 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

20. 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

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

22. Visual design The “look” of your interface

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. Role of Graphic Design • What someone initially encounters • Sets a framework for understanding content

26. 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

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

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

29. 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

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

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

32. 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

33. Grids – use them

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

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

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

37. Example Disorganized

38. Example Visual noise

39. Example Overuse of 3D effects

40. 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

41. How many small ovals?

42. Now how many small ovals?

43. Color Meanings: Contextually Specific • Red • aggression, love • hot, warning, stop, radiation • Pink • female, cute, cotton candy • Orange • warm, autumn, Halloween • Blue • cold, off • Yellow • happy, caution, joy • Brown • warm, fall, dirt, earth • Green • go, on, safe, envy, lush, pastoral • Purple • royal, sophisticated, Barney

44. Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htm

45. Legibility and readability • Characters, symbols, graphical elements should be easily noticable and distinguishable Text set in Helvetica TEXT SET INCAPITOLS Text set in Braggadocio Text set in Times Roman Saul Greenberg U. Calgary

46. Readable Unreadable Design components to be inviting and attractive Design components to be inviting and attractive Design components to be inviting and attractive Design components to be inviting and attractive Legibility and readability • Proper use of typography • 1-2 typefaces (3 max) • normal, italics, bold • 1-3 sizes max Large Medium Small Large Medium Small Saul Greenberg U. Calgary

47. Web Design Creating Effective Sites and Pages

48. The Useful Web

49. Why Web Site Design Matters • Tests of time to complete shopping tasks at several major on-line stores - number of clicks varied from 8 to 50; high abandonment rate on poor sites • Jakob Nielsen review of comparative tests on web sites - average 68% difference in task completion times • Nielsen finds 135% improvement from redesign effort • see http://www.useit.com/alertbox/20040119.html

50. Page/Site Goals • Convey image or impression • Meet people • Raise money/donations • Entertain an audience • Promote myself • Teach people about a topic • Get famous • Tell a story • Convey information/access employees, shareholders, customers colleagues, public • Sell products • Advertise/market service • Recruit • Announce, survey • Nurture communities • Search: promote ease and speed • Browse: without a goal, attractiveness trumps efficiency