Presentation is loading. Please wait.

Presentation is loading. Please wait.

How to Give Good UI!? Wayne Weibel Interface/Web/Drupal Developer LII / Legal Information Institute.

Similar presentations


Presentation on theme: "How to Give Good UI!? Wayne Weibel Interface/Web/Drupal Developer LII / Legal Information Institute."— Presentation transcript:

1 How to Give Good UI!? Wayne Weibel Interface/Web/Drupal Developer LII / Legal Information Institute

2 Why Another Usability Talk? Debunk the Buzz Words “This is not good enough: we need the USP for the UX not the UI” “The user experience of the site is increasing the usability of users to interact through our interface”

3 Why Another Usability Talk? Debunk the Buzz Words UI vs. UX vs. Usability

4 Why Another Usability Talk? Debunk the Buzz Words UI vs. UX vs. Usability Interface [ UI ]

5

6

7 Why Another Usability Talk? Debunk the Buzz Words UI vs. UX vs. Usability Interface [ UI ] Experience [ UX ]

8 theoatmeal.com

9 Jim Crow Museum theoatmeal.com

10 Why Another Usability Talk? Debunk the Buzz Words UI vs. UX vs. Usability Interface [ UI ] Experience [ UX ] Usability

11 Usability is NOT... Design

12 Usability is NOT... Design Programming

13 Usability is NOT... Design Programming Accessibility } affects Usability

14 Usability is NOT... Design Programming Accessibility Marketing } affects Usability

15 Usability is NOT... Design Programming Accessibility Marketing } affects Usability

16 Usability is NOT... Design Programming Accessibility Marketing did I mention... Marketing } affects Usability

17 Usability IS... “Make everything as simple as possible, but not simpler” - Einstein “Whenever possible, substitute constructions out of known entities for inferences to unknown entities.” - Bertrand Russel, Occam’s razor K.I.S.S

18 Usability IS... “Make everything as simple as possible, but not simpler” - Einstein “Whenever possible, substitute constructions out of known entities for inferences to unknown entities.” - Bertrand Russel, Occam’s razor K.I.S.S = Keep It Simple Stupid... optimizing a user’s ability to complete a task

19 How about some examples: University of Chicago - Flu Vaccination Malcolm Gladwell’s Tipping Point NASA Space Pen 10 years and $12 Billion dollars

20 How about some examples: University of Chicago - Flu Vaccination Malcolm Gladwell’s Tipping Point NASA Space Pen 10 years and $12 Billion dollars The MOST usable interface:

21 theoatmeal.com

22 Rules of Thumb Jakob Nielsen - useit.comuseit.com Don Norman => Nielsen/Norman Group - nngroup.com nngroup.com 10 Heuristics for Usability with Rolf Molich

23 Rules of Thumb Jakob Nielsen - useit.com Don Norman => Nielsen/Norman Group - nngroup.com 10 Heuristics for Usability with Rolf Molich... boil down to 3 varieties: Familiarity Feedback Flexibility

24

25

26

27

28

29 On The Internet Section 508 Workforce Investment Act of 1998 21st Century Communications and Video Accessibility Act of 2010

30

31

32

33

34

35 On The Internet Section 508... Guides (not rules) W3C Accessibility Web Content Accessibility Guidelines 2.0 Web Content Accessibility Guidelines 2.0 WebAIM (Accessibility In Mind) WebAIM

36 On The Internet Section 508... Guides... Tools Visicheck (color blindness check) Visicheck

37 Color Blindness Protanopia/Deuteran opia = red/green Tritanopia = blue/yellow (rare) ~ 10% Males < 0.5% Females how about some numbers

38 Color Blindness Protanopia/Deuteran opia = red/green Tritanopia = blue/yellow (rare) ~ 10% Males < 0.5% Females ~ 5% of population or 1 in 20 1000 ~= 50 people how about some numbers

39 On The Internet Section 508... Guides... Tools Visicheck (color blindness check) Visicheck UI Patterns (examples and forum) UI Patterns Dead Link Checker (lots of em)

40 Usability Artifacts Personas == Stakeholders / User Groups - primary, secondary, tertiary

41 Usability Artifacts Personas == Stakeholders / User Groups - primary, secondary, tertiary use proper names give personal traits what reason to use interface scenario/schema of use

42 Usability Artifacts Personas == Stakeholders / User Groups - primary, secondary, tertiary Wireframes - fancy word for sketches

43 Usability Artifacts Personas == Stakeholders / User Groups - primary, secondary, tertiary Wireframes - fancy word for sketches Prototypes - even just glue and paper, stub out functions

44 Usability Artifacts Personas Wireframes Prototypes Conceptual / Mental Models how the developer thinks it works how the system actually works how the user thinks it works

45

46 User Testing ANYone can do it (yes, even you!)

47 User Testing ANYone can do it (yes, even you!) You set the cost (depending on data) *

48 User Testing ANYone can do it (yes, even you!) You set the cost (depending on data) * 30 - 60 min; more often == less time needed

49 User Testing ANYone can do it (yes, even you!) You set the cost (depending on data) * 30 - 60 min; more often == less time needed One Catch - must have specific tasks/features

50 User Testing ANYone can do it (yes, even you!) You set the cost (depending on data) * 30 - 60 min; more often == less time needed One Catch - must have specific tasks/features During Testing: Have designers and programmers watch

51 User Testing ANYone can do it (yes, even you!) You set the cost (depending on data) * 30 - 60 min; more often == less time needed One Catch - must have specific tasks/features During Testing: Have designers and programmers watch Encourage user to think out loud * for you researchers...

52

53

54

55

56 There Is No Spoon Usability is Highly Subjective

57 There Is No Spoon Usability is Highly Subjective Decide who is your audience, then build to them

58 There Is No Spoon Usability is Highly Subjective Decide who is your audience, then build to them Keep things familiar, but not identical

59 There Is No Spoon Usability is Highly Subjective Decide who is your audience, then build to them Keep things familiar, but not identical Know when to break the design

60 There Is No Spoon Usability is Highly Subjective Decide who is your audience, then build to them Keep things familiar, but not identical Know when to break the design Test Often

61 There Is No Spoon Usability is Highly Subjective Decide who is your audience, then build to them Keep things familiar, but not identical Know when to break the design Test Often “If you meet a Usability Expert, kill him.”

62


Download ppt "How to Give Good UI!? Wayne Weibel Interface/Web/Drupal Developer LII / Legal Information Institute."

Similar presentations


Ads by Google