Interface design

1. Interface design Multimedia and Web

2. Today’s Objectives • Defining User Interface Design • Interface Design Guidelines • Project web page (HTML, CSS, jQuery)

3. UPA 2009 Survey Positions and salaries

4. UPA 2009 Survey usabilityprofessionals.org/usability_resources/surveys/2009salarysurvey_PUBLIC.pdf

6. UPA 2009 Survey

7. UPA 2009 Survey

8. UPA 2009 Survey

9. Interface Design Resources & Jobs http://usabilityprofessionals.org/usability_resources/jobs/ http://jobs.usernomics.com/a/jbb/find-jobs http://www.usabilityfirst.com/jobs/ http://uxjobs.org/ http://uxmag.com/uxjobs/

10. Krug’s Thoughts Review

11. Review : Krug’s Thoughts Don’t make me think. If something is hard to use, we just don’t use it as much. People don’t read they scan pages. We satisfice – we do what works – may not use site as intended. Use Conventions.

12. Review : Krug’s Thoughts Page should be self-evident, its purpose must be obvious. Users should know what it is and how to use it without thinking. Pages have to work at a glance.

13. Review : Krug’s Thoughts When creating sites, our job is to eliminate as many questions as possible

14. Use Conventions: All web navigation must answer these questions: • Where am I? • What’s here? • Where have I been? • Where can I go next? • Where's the Home Page? • What’s most important?

15. Where users expect to find standard page components Shaikh & Lenz, 2006 Source: http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

16. Website examples Let’s look at a few websites.

17. Let’s look at a few sites http://www.sonicdrivein.com

18. Let’s look at a few sites http://www.laeyeworks.com/ (eye glasses) Enter site confusing, navigation

19. Let’s look at a few sites http://www.cafeintl.net/ Identity

20. Let’s look at a few sites http://lesailes.hermes.com/us/en/ Navigation

21. Let’s look at a few sites • http://www.staples.com (text size) • http://www.juliegarwood.com/ (Go to virtual Office)

22. Design interfaces: Examples • http://www.zincbistroaz.com/ • Information hierarchy.

23. Design interfaces: Examples http://www.marshill.org/ Can you tell what it’s about?

24. Design interfaces: Examples • http://www.3cgraphics.com/ • What is it about? • What’s good/bad?

25. Design interfaces: Examples • http://www.3cgraphics.com/ • Lack of focal point on the page • Too many pictures • CMC: http://www.cook-mfg.com/ • BROEK HARDWOOD FLOORS http://www.broekhardwoodfloors.com/Broek_Hardwood_Floors/Home.html When people arrive at your site it's because they've made a commitment. They've clicked a link or an ad and now they are at your site so you don't have to try to seduce them. Let them in your site.

26. Other examples Breaks up flow

27. Design interfaces: Examples • http://www.montblanc.com/

28. Design interfaces: Examples • Is there a boutique in Chicago (what is the phone number, address and hours)? • This is a timed exercise.

29. Design interfaces: Examples • Find a Starwalker Metal & Rubber, Fountain Pen. • Find EYEWEAR: Montblanc Ladies Collection Ipanema Graded black, gray pattern laminated into white acetate frame.

30. Introduction to interface design Fundamental precepts - Perception Attention

31. Perception • Perception – get users to understand and intrepret the interface • “Whenever new technology is introduced into society, there must be a counterbalancinghuman response - high touch- or the technology is rejected.” —John Naisbit - Megatrends - 1982

32. Human Perception • Perception depends on the amount, kind and availability of past experiences.... • We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley

33. Human Perception Visual • We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley • Also applies to processes. Process – digital process analogous to physical world

34. We make digital books look and function in ways that resemble printed books - because of our familiarity with them. We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley

35. Human Perception • Perception depends on the amount, kind and availability of past experiences.... • We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley Unfamiliar???

36. We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley Animals – what do you see?

37. We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley People - – what do you see?

38. Experience and context influence our perception Source : http://www.aber.ac.uk/media/Modules/MC10220/visper06.html

39. Hot water bottles.

40. http://www.bagigia.com/

41. At first I thought this site was about hot water bottles I wondered how the zipper fit with a hot water bottle? http://www.bagigia.com/

42. Perception & accessibility • Accessibility - designs should be usable by everyone, without special modification. • Four characteristics of accessible designs: • Perceptibility • Operability • Simplicity • Forgiveness Universal Principle of Design (Lidwell, W., Holden, K., Butler, J. 2010)

43. Perception & accessibility • Perceptibility - achieved when everyone can perceive the design, regardless of sensory ability. • using redundant coding (e.g., textual, iconic, and tactile); • be compatible with assistive technologies (e.g., ALT tags for images); and • position controls and information so users can perceive them.

44. Operability Achieved when everyone can use the design, regardless of physical abilities.

45. Simplicity Achieved when everyone can easily understand and use the design, regardless of experience, literacy, or concentration level.

46. Forgiveness Achieved when designs minimize the occurrence and consequences of errors.

47. Interface design principles Related to Perceptibility, Operability, Simplicity, Forgiveness ; Chapter 9 in Mathis text, refers to “Mental Models and Usability,” by Davidson, Dove, & Weltz. Describe seven user interface design principles that help users form valid mental models.

48. Interface design principles (Mathis book) to help users form valid mental models. Principle 1: Simplicity – product should follow a small number of simple rules.

49. Simplicity: Download Firefox page is an example No so simple: http://www.montblanc.com/

50. Interface design principles (Mathis book) to help users form valid mental models. Principle 2: Familiarity - users bring prior knowledge to your product. Be consistent across similar products and with how things work in the real world, and people will be more likely to form correct mental models.