UI Best Practices & Trends

Transkript

1 UI Best Practices & Trends und wieso das nicht genug ist.

2

3

4

5 The interface is your product. Getting Real The book

6 Don't make me think!

7

8 Company growth We arepuzzle Puzzle We are The UX team consists of 4 members.

9 Research Ideation Design Code Test Interviews Brainstorming HTML5/CSS3 Usability tests Workshops Sketching Interaction design Expert reviews User & Task analysis Wireframes Development (Java, Ruby on Rails) Personas Storyboards Prototyping Product vision Services We are Puzzle Visual design Icons Styleguides Development support Quantitative analysis

10 14 recommendations

11 #1 Show me where I am.

12

13

14 #2 Use the F-Pattern

15

16

17

18 Trend Responsive Web Design

19

20

21

22

23

24

25

26 Trend Stack Pattern

27

28 Trend Get rid of Pagination

29

30

31 #3 Emphasize what is important

32

33

34

35 #4 Show what's interactive

36

37

38

39 Trend Minimal Design

40

41

42 #5 Make frequent uses accessible

43

44

45 Trend Actions only on hover

46

47 #6 Caution with icons

48

49

50

51

52

53

54 #7 Show primary actions

55

56

57

58 #8 Avoid OK / Cancel

59

60

61 #9 Don't warn if you mean undo

62

63 #10 Avoid left aligned form labels

64 Wroblewski, Luke Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

65 Wroblewski, Luke Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

66 Wroblewski, Luke Web Form Design: Filling In the Blanks. New York: Rosenfeld Media.

67 #11 Be nice to user input.

68

69

70 #12 Prevent errors

71

72

73 #13 Instant Feedback

74

75

76

77

78 Trend Implicit Feedback

79

80

81

82 #14 Help users recove from errors

83

84

85 So far, so well

86 But

87

88 Entwickler!= Anwender Auftraggeber!= Anwender UX Spezialist!= Anwender

89

90

91 Usability Testing

92

93 Was braucht es? Die richtigen Testpersonen Konkrete Testszenarios einen funktionierenden Prototypen Gute Instruktionen Videoaufzeichnung

94 1. Die richtigen Testpersonen Kriterien Ist keine Fachspezialist auf dem Thema. Ist kein IT-Profi. Gehört im weitesten Sinn zur Zielgruppe. Gründe Personen mit unterschiedlichen Zielen handeln anders. Je nach Hintergrund verwenden wir eine andere Sprache. Je nach Hintergrund haben wir andere mentale Modelle.

95 2. Ein konkretes Testszenario Personen brauchen ein klares Ziel. Vergleichbarkeit zwischen Personen wird ermöglicht.

96 Szenario: Beispiel Sie ziehen um und wollen, dass die Post an die neue Adresse weitergeschickt wird. Können Sie das online erledigen?

97

98 Sie ziehen um und wollen, dass die Post an die neue Adresse weitergeschickt wird. Registrieren Sie sich für das «Login Post».

99 Sie ziehen um und wollen, dass die Post an die neue Adresse weitergeschickt wird. Nutzen Sie dazu den virtuellen Postschalter.

100 Szenario: Beispiel Sie ziehen um und wollen, dass die Post an die neue Adresse weitergeschickt wird. Können Sie das online erledigen? fgfgaabbeenn: : u A e r e r h u e A m e it r e e r k InInW Wirirkklilicchhkeit meh Einstiegg Einstie arkeitit Auffindbb Auffind arke nneererellll e g e it S r e e g d e is it n S d Verstänndnis der Verstä bblalauufsfs A s e d is n A d s e Verstänn d Verstä dnis flflicichht)t) p s n o ti a tr p is s g n e o ti (R a (Registr zzeessss ro p s n o ti ro Registraa p s n o Registr ti u.v.m. u.v.m.

101 3. Einen funktionierenden Protoypen Ohne ein Minimum an Interaktivität können sich externe Personen nur schwer etwas vorstellen. Prototypen mit vielen Fehlern frustrieren die User und lassen keine guten Tests zu. Unsorgfältige Texte oder «Lorem Ipsum» führen die User auf den falschen Weg.

102 4. Gute Instruktionen Personen müssen sich wohl fühlen. Das Produkt wird getestet, nicht die Person. Die Testpersonen sollen ihr Handeln laufend kommentieren (lautes Denken).

103 Instruktionen Wir testen das Produkt, nicht Sie! Sie können nichts falsch machen. Bitte kommentieren Sie, was Ihnen auffällt. Denken Sie laut. Machen Sie sich keine Sorgen, um unsere Gefühle, seien Sie ehrlich. Stellen Sie Fragen! Wir werden allerdings nicht helfen, weil wir sehen wollen, wie sich das Produkt ohne Hilfe bedienen lässt. Wir zeichnen den Test auf Video auf. Einverständniserklärung unterzeichnen lassen.

104 5. Eine Videoaufzeichnung Ermöglicht spätere Analyse. Buy-In von Management und Entwicklern. Bei Mobile nicht ganz einfach (teuer oder DIY).

105 Demovideos

106 Roland Studer