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.” 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.) Taken from Paper Prototyping by Carolyn Snyder http://www.paperprototyping.com/

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

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 Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios 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 1Content 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. http://hotwired.lycos.com/webmonkey/98/28/index 4a_page2.html?tw=design Layout Grids

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

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

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

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

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

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 layout from mullet & sano

46. Repairing a Haphazard layout from 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?

51. Now how many small ovals?

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

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

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

55. 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 Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive Saul Greenberg U. Calgary

56. Remember Form follows function Visual elements should help convey purpose and meaning Be consistent Just like all design – iterate and get feedback!!