1. Visual design The “look” of your interface

2. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space – Vary what you can – hardware, forms of input, forms of output, features, requirement priorities, usability priorities Be off the wall, crazy – This will lead to less crazy but original ideas Project poster – March 4 Project report + prototype: April 1

3. Midterm review How to study: – Look at slides for topics, bullets, vocabulary, etc. – Find details and examples in the book Test format – 25-50% true/false, multiple choice, fill-in-blank – Rest short answer, with one longer answer

4. Review What is usability? What is design? Why is it hard? The user centered design process – General steps – various models – high level understanding – What is waterfall model?

5. Requirements Review Functional vs. non functional What pieces are part of this? – User characteristics, task analysis, environment, etc.etc. – Persona – what is it and what makes a good one? – Scenario – what is it and what makes a good one? – Stakeholders (primary, secondary, tertiary, facilitating) How do you gather data? Tradeoffs? – Interview, questionnaire, observation, etc. etc. Task models – Hierarchical task analysis - how to do it? – Use cases – what are they good for?

6. Humans review What are issues concerning our senses? Model Human Processor model of memory – What are pieces of memory (STM, LTM, etc.) – What’s a chunk? Why do we care? – What are implications? (recognition over recall, externalizing, etc.) Other processes – what are they? (attention, learning) – What are the implications?

7. Interaction Review Command line WIMP Direction manipulation Pen & mobile Speech & natural language Issues, advantages, disadvantages, etc.

8. Prototyping – What’s vertical vs. horizontal? – What’s low vs. high fidelity? – What are various methods? Scenarios, mockups/sketches, etc. Issues and tradeoffs?

9. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content

10. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content

11. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content

12. 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 http://www.uncc.edu/schedule/subject/artg.html

13. Graphic Design Involves knowledge of: – Sequencing – Organization – Layout – Imagery – Color – Typography

14. Graphic Design Principles Metaphor Clarity Consistency Contrast Alignment Proximity

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

16. Clarity via “White” Space White = Open

17. Example Clear, clean appearance Opinion?

18. Example Does this convey different impressions?

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

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

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

22. Grids – use them

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

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

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

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

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

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

29. Example Overuse of 3D effects

30. Haphazard layout from mullet & sano

31. Repairing a Haphazard layout from mullet & sano

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

34. Example Visual noise

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

36. How many small ovals?

37. Now how many small ovals?

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

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

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

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

42. Remember Form follows function – Visual elements should help convey purpose and meaning Be consistent Just like all design – iterate and get feedback!! Let’s analyze: – http://www.cnn.com/ http://www.cnn.com/ – http://www.microsoft.com/