Visual design

1. Visual design The “look” of your interface

2. Your Screen?

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

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

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

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

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

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

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

10. Example Clear, clean appearance Opinion?

11. Example Does this convey different impressions?

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

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

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

15. Alignment • Western world • Start from top left • Allows eye to parse display more easily • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically

16. Alignment • Left, center, or right • Choose one, use it everywhere • Novices often center things • No definition, calm, very formal Here is somenew text Here is somenew text Here is somenew text

17. Grids – use them

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

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

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

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

22. How many small ovals?

23. Now how many small ovals?

24. Color Meanings: Contextually Specific • Red • aggression, love • hot, warning, stop • 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

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

26. Color Palettes • Color palette – set of colors used on one screen • Choose color palette from HSV space by varying and two of H, S, and V. • Don’t vary hue, saturation and brightness at the same time. • Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screen

27. Color Palettes/Suites • Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

28. Effect of Colored Text on Colored Background Black text on red Gray text on red Yellow text on red Light yellow text on red Green text on red Light green text on red Blue text on red Pale blue text on red Dark red text on red Red text on red Rose text on red

29. Effect of Colored Text on Colored Background Black text on dark blue Gray text on dark blue Yellow text on dark blue Light yellow text on dark blue Green text on dark blue Light green text on dark blue Blue text on dark blue Pale blue text on dark blue Dark red text on dark blue Red text on dark blue Rose text on dark blue

30. Color Guidelines • Display color images on a black, white, or gray background • Be sure foreground colors contrast (in both brightness and hue) with background colors • Avoid using color in non-task related ways

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

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

33. Example Disorganized

34. Example Visual noise

35. Example Overuse of 3D effects

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

37. Review • Introduction • What were the major interaction paradigms? • Requirements • Functional vs. Non-Functional • Formative vs. Summative evaluation • Gathering methods • Advantages, disadvantages, why use

38. Review • Requirements • Representation & Communication • Personas • Scenarios • Task analysis & HTA • Flow chart, Workflow, Entity Relationship • Ethics • What is involved? • why does it matter?

39. Review • Human Abilities • Senses • Memory – model human processor • Other cognitive abilities • Problem solving • Learning • Attention • Predictive Models • Fitt’s Law • KSLM • Hick’s

40. Review • Design • General process • Norman’s principles • Norman’s Execution-Evaluation model • Learnability, Flexibility, Robustness principles • Error prevention • Prototyping • Fidelity, horizontal vs. vertical • Methods: storyboards, scenarios, mockups, wizard of oz, etc.