Roland Weigelt UI / UX-Grundlagen für Entwickler....und andere Nicht-Designer. Juli 2012 Wuppertal/Berlin

Transkript

1 Roland Weigelt UI / UX-Grundlagen für Entwickler...und andere Nicht-Designer Juli 2012 Wuppertal/Berlin

2 Roland Weigelt Beruflich: Comma Soft AG 15 Jahre Software-Entwickler Bereich Enterprise-Anwendungen seit Januar User Experience Specialist Privat u.a..net Community (BN2C, DNC12) *.psd, *.wmv, *.pptx

3 Entwickler, kein Designer

4 Wie erstelle ich grandios fantastische User Interfaces?

5 Wie erstelle ich grandios fantastische User Interfaces?

6 Wie erstelle ich brauchbare User Interfaces?

7 Ausblick UI/UX für Entwickler Crash-Kurs Visuelles Design...und was ist User Experience? User Interface Patterns Muster, überall Muster! Daten: Eine Frage des Charakters Umgang mit Komplexität

8

9 Design

10 Gutes Design?

11 Gutes Design?

12

13

14 Crash-Kurs: Visuelles Design

15

16 Visuelle Wahrnehmung

17

18

19 Foveal Peripher

20 Foveale Wahrnehmung Hohe räumliche Auflösung Sehr geringer Winkelbereich Periphere Wahrnehmung Hohe zeitliche Auflösung Unscharf, räumlich verzerrt

21

22

23

24

25

26 Augenbewegung Arbeitsspeicher Erinnerungen Mustererkennung

27 Gestalttheorie

28 Gestalttheorie Frage: Nach welchen Gesetzen verbindet der Mensch einzeln wahrgenommene Elemente zu neuen Gestalten mit eigenen, ganzheitlichen Eigenschaften?

29

30

31

32

33 Gestaltgesetze?

34 Gestaltgesetze? Beobachtungen formuliert Keine Erklärung Phänomene selten isoliert, Konkurrenz untereinander Eher Regeln als Gesetze

35 Gestaltgesetze Gesetz der Prägnanz Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Kontinuität Gesetz der Geschlossenheit Gesetz der gemeinsamen Bewegung Gesetz der fortgesetzt durchgehenden Linie Gesetz der gemeinsamen Region Gesetz der Gleichzeitigkeit Gesetz der verbundenen Elemente Quelle: Wikipedia

36 Gestaltgesetze Gesetz der Prägnanz Gesetz der Nähe Gesetz der Ähnlichkeit Gesetz der Kontinuität Gesetz der Geschlossenheit Gesetz der gemeinsamen Bewegung Gesetz der fortgesetzt durchgehenden Linie Gesetz der gemeinsamen Region Gesetz der Gleichzeitigkeit Gesetz der verbundenen Elemente Quelle: Wikipedia

37 Gesetz der Ähnlichkeit Gleiche oder ähnliche Elemente werden als zusammengehörig wahrgenommen.

38 Ähnlichkeit

39

40 Gesetz der Nähe Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.

41 Nähe

42

43 1 2 3 A B C D E F I 0 J G H

44 Nähe Max Mustermann Frankfurt John Doe New York

45 Sozusagen die Firmware der menschlichen Wahrnehmung

46 In komplexen Situationen nicht immer 100% vorhersehbar...

47 ...aber gute Vorhersage, was nicht funktioniert!

48

49 Gestaltungsprinzipien

50 Anforderungen an brauchbares Visuelles Design

51 Konsistenz Ordnung Ausgewogenheit

52 Oder auch: Aus einem Guss

53 Ausrichtung

54 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung...allerdings nicht auf dieser Folie!

55 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung

56 Ausrichtung schafft starke Kanten Diese wirken auch über größere Entfernung

57 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet varius sapien. Quisque ut convallis orci. Pellentesque id urna id nisi ultrices volutpat. Aenean in sapien odio, a tristique velit. Quisque semper mollis ante at porta. Curabitur in ligula eget est gravida ultrices. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a eros ac ligula pretium venenatis ut sit amet turpis. Fusce mollis augue sit amet lacus pulvinar sit amet tincidunt nunc pellentesque. Fusce vitae tellus libero. Nullam tempor condimentum urna vel imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lectus dolor, dapibus mattis erat. Suspendisse rhoncus vehicula enim ut malesuada. Ut venenatis cursus est vitae interdum. Sed sollicitudin lobortis nisi sollicitudin pellentesque. Donec ac massa nunc, sed auctor orci. Donec facilisis ullamcorper leo, eget cursus lectus pretium eu. Suspendisse venenatis orci vel mauris mattis ultrices. Pellentesque suscipit, urna quis bibendum mattis, tellus neque porttitor dolor, bibendum gravida nisl justo eleifend nibh. Integer nec augue in nunc pretium facilisis. Donec tincidunt rutrum tellus, vitae convallis nulla tincidunt in. Aenean luctus porta enim, vitae feugiat nisl rutrum ut.

58 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet varius sapien. Quisque ut convallis orci. Pellentesque id urna id nisi ultrices volutpat. Aenean in sapien odio, a tristique velit. Quisque semper mollis ante at porta. Curabitur in ligula eget est gravida ultrices. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam a eros ac ligula pretium venenatis ut sit amet turpis. Fusce mollis augue sit amet lacus pulvinar sit amet tincidunt nunc pellentesque. Fusce vitae tellus libero. Nullam tempor condimentum urna vel imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lectus dolor, dapibus mattis erat. Suspendisse rhoncus vehicula enim ut malesuada. Ut venenatis cursus est vitae interdum. Sed sollicitudin lobortis nisi sollicitudin pellentesque. Donec ac massa nunc, sed auctor orci. Donec facilisis ullamcorper leo, eget cursus lectus pretium eu. Suspendisse venenatis orci vel mauris mattis ultrices. Pellentesque suscipit, urna quis bibendum mattis, tellus neque porttitor dolor, bibendum gravida nisl justo eleifend nibh. Integer nec augue in nunc pretium facilisis. Donec tincidunt rutrum tellus, vitae convallis nulla tincidunt in. Aenean luctus porta enim, vitae feugiat nisl rutrum ut.

59 Wichtigstes Hilfmittel für eine einheitliche Ausrichtung: Gitter (Grid)

60

61

62

63

64

65 Konstruktion nach dem goldenen Schnitt

66 Kein Gitter, aber einheitliche Abstände

67 Kein Gitter, aber einheitliche Abstände

68 Dominanz

69 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

70 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

71 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

72 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

73 Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig Wichtig

74 Dominanz ergibt sich, wenn einem oder mehreren Elementen durch Farbe,, Form, oder Größe Ausrichtung besonderes Gewicht gegeben wird

75 ... besonderes Gewicht...

76 ... besonderes Gewicht...

77 Wettrüsten vermeiden! Whitespace

78

79 ... besonderes Gewicht...

80 Visuelles Gewicht

81

82

83

84 Intensität Farbe Größe Detailgrad

85 Visuelle Hierarchie

86 Fakt: Die reale Welt ist komplex

87 Ideal Lies mich

88 Real Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

89 Es kann nicht alles gleich wichtig sein

90 Also: Priorisieren

91 Alles gleich wichtig Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

92 Priorisiert Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Lies Bla mich Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

93 Konkretes Beispiel Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden

94 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Auffälligkeit/Dominanz durch Intensität...

95 Visuelle Hierarchie DIESER TEXT IST ECHT SUPERWICHTIG Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Form...

96 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...durch Unterschiede in der Größe...

97 Visuelle Hierarchie Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden...oder durch Kombination.

98 Whitespace Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Whitespace verstärkt die Wirkung

99 Nähe Dieser Text ist echt superwichtig Dieser Text ist auch sehr wichtig Und dieser Text ist nicht so wichtig wie die anderen, aber das müssen die Leser erst einmal herausfinden Nähe drückt Zugehörigkeit aus

100 Beispiel: Team-Aufstellung

101 Telekom Baskets Bonn Team 2009/2010 Team 2010/2011 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann

102 Telekom Baskets Bonn Team 2008/2009 Team 2009/2010 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann

103 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Ausrichtung

104 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Ausrichtung

105 Telekom Baskets Bonn Team 2009/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann Team 2010/ Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale Team 2011/ Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Dominanz

106 Telekom Baskets Bonn Team 2009/2010 Team 2010/2011 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Hierarchie

107 Telekom Baskets Bonn 2009/ / / Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann Hierarchie

108 Telekom Baskets Bonn 2009/ / / Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann

109 Telekom Baskets Bonn Team 2009/2010 Team 2010/2011 Team 2011/ Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann

110 Telekom Baskets Bonn 2009/ / / Bryce Taylor 5 Chris Ensminger 6 Johannes Strasser 7 Alex King 8 Moussa Diagne 9 John Bowler 10 Jared Jordan 11 Artur Kolodziejski 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Ronald Dupree 16 Fabian Thülig 17 Jonas Wohlf.-Bottermann 4 Sajmen Hauer 5 Chris Ensminger 6 Jeremy Hunt 7 Alex King 8 Folarin Campbell 9 Fabian Thülig 10 Nic Wise 11 Jacob Jaacks 12 Vincent Yarbrough 13 Patrick Flomo 14 Tim Ohlbrecht 15 Jonas Wohlf.-Bottermann 25 Mark Tyndale 4 Simonas Serapinas 5 Chris Ensminger 6 Benas Veikalas 7 Zvonko Buljan 8 Andrej Mangold 9 Fabian Thülig 10 Jared Jordan 11 Daniel Hain 12 Florian Koch 13 Tony Gaffney 14 Talor Battle 15 Jonas Wohlf.-Bottermann

111

112 Zusammenfassung Ausrichtung um Kanten zu schaffen (ohne sie zu zeichnen) Dominanz um wichtige Einstiegspunkte zu markieren Hierarchien für verständliche Wichtigkeitsabstufung

113 Zusammenfassung (Forts.) Whitespace für Übersicht, Lesbarkeit (und Wertigkeit) Visuelles Gewicht beachten und in Balance halten

114 Also: Alles ganz einfach...

115 Regeln beachten Gefälliges Design Positive Emotionen YOU ROCK!!!

116 ! $ $ $!!

117 DANGER! USER DETECTED Critical Situation, Threat Level ALPHA 46 4a d6 dd b5 c a 05 c a1 fc 92 a6 4b b3 0a e d7 4a af 7e 10 4b b c1 53 5e 80 f6 a7 7d 22 4a b1 83 c1 4f b c3 ef aa e7 eb fb 4d b2 13 8e f3 87 f6 93 f4 b7 4b 8e a d7 76 d6 4a 5c bb 51 7b b3 11 ec d2 6c b4 2b a4 e7 a a 7a 83 c9 c c9 f7 f1 92 6d 8e 1d bf 9f ac ce

118 Unser Problem: Anwender sind Menschen...

119 ...keine mobilen Bildverarbeitungs- systeme

120 ängstlich überheblich ungeduldig unlogisch unvernünftig ungerecht

121 Klick, Klick, Klick, Dreckstool!

122 Ganzheitlicher Ansatz

123 User Experience

124 User Experience Nicht einfach die coole neue Art User Interface zu sagen Das Gesamterlebnis eines Nutzers bei Verwendung eines Produktes oder Systems

125 UX Design: Berührungspunkte GUI Design Visual/Graphic Design Usability Information Architecture Information Design Psychologie

126 UX Design: Berührungspunkte GUI Design Visual/Graphic Design Usability Information Architecture Information Design Psychologie

127 Empathie

128 Mitgefühl

129 Wird der Anwender das verstehen?

130 Wer ist eigentlich der / die AnwenderIn?

131 Einsteiger vs. Profis

132 Gelegenheits-User vs. Power-User

133 Profis als Gelegenheits-User vs. Einsteiger als Power-User

134 ?

135 Rollen

136 Rollen helfen festzulegen, wer was in der GUI braucht

137 Leser Autor Administrator

138 Rollen sagen aber nichts über das Verhalten aus

139 Zielgruppen

140 Zielgruppen werden durch Clusterung von Eigenschaften definiert

141 Zielgruppen wecken aber nur schwer Emotionen beim Entwickler

142 85,9% der weiblichen Waisenkinder unter 12 Jahren wünschen sich ein Pony* * Diese Aussage ist wie 38,3% aller Statistiken frei erfunden

143 Lisa (11 Jahre) hat ihre Eltern verloren und wünscht sich ein Pony

144 Personas

145 Persona Virtuelle Person als Stellvertreter einer Zielgruppe Sehr genaue Beschreibung vermittelt anschauliches Bild

146 Wird der Anwender das verstehen?

147 Wird die Zielgruppe der Führungskräfte mit begrenzten IT-Kenntnissen das verstehen?

148 Wird Heinrich das verstehen?

149 Heinrich Abteilungsleiter (56) 2 Kinder, Haus am Stadtrand Wenig Erfahrung mit Office Im Zweifelsfall eher vorsichtig Wichtiger Multiplikator

150 Sabine Sachbearbeiterin (26) Single, Wohnung in der Stadt Office + Business Apps im Intranet, privat Social Apps Wurschtelt sich in Neues rein

151 Beispiel

152 Was Entwickler entworfen haben

153 Was Anwender davon sehen

154 Heinrich Hmm... klingt kompliziert... (Telefon klingelt) Klickt Abbrechen

155 Sabine Muss ich das alles lesen... (Telefon klingelt) Sieht nicht soo gefährlich aus, Gespräch könnte dauern Klickt OK

156 Besser:

157 Personas Erleichtern die Kommunikation Prüfstein bei Design- Entscheidungen

158 Personas Nicht immer einfach Spezielle Personas: Echte Zielgruppendaten notwendig Einblick in spezielle Abläufe / Philosophie einer Firma

159 Ein Hilfsmittel, nicht das Hilfsmittel

160 Aktivitäten

161 Fakt: Menschen passen sich an

162 Gute UI auch ohne genaue Kenntnis der Zielgruppe möglich

163 Alles eine Frage der Perspektive

164 Anwender wollen keine Software bedienen

165 Anwender wollen ihre Aufgaben erledigen

166 Problem:

167 Alles was man als Entwickler dem Anwendern zeigt, ist ein potentielles Hindernis!

168 Dialoge Popups Eingaben...einfach alles

169 Hindernisse beseitigen Nicht: UI Wrapper auf die API Reale Szenarien betrachten Abläufe rundlutschen Weniger Entscheidungen Gute Defaults für Eingaben

170 Mentales Modell

171 Mentales Modell Entsteht im Kopf der Anwender Versuch, Verhalten (der GUI) erklärbar nachvollziehbar vorhersagbar zu machen

172

173

174

175

176 Mentale Modelle sind...

177 persönlich

178 wechselnd

179 unvollständig

180 häufig falsch

181 Anwender machen sich ein Modell - ob es uns passt oder nicht

182 Deshalb: Modellbildung in die richtigen Bahnen lenken!

183 Beispiel Windows Phone 7

184 Windows Phone 7 Sample

185 Windows Phone 7

186

187 User Interface Patterns

188

189 Entwurfsmuster (engl. Design Patterns) Bewährte generische Lösungsansätze für immer wiederkehrende Entwurfsprobleme

190 Raumschiff Enterprise

191 Raumschiff Enterprise steckt voller Design Patterns!

192 Pattern Red Shirt Disease Problem: Der Tod eines Team- Mitglieds soll zeigen, dass der Alien-Planet gefährlich ist Problem: Wöchentliche Serie Lösung: Das Opfer ist beliebig austauschbar ( Rothemd )

193 UI Patterns

194 MVC MVP MVVM

195 Architektonischer Umgang mit UI-Elementen

196 Beispiele für UI Patterns

197 Master - Detail

198 Master - Detail

199 Master - Detail

200 Master - Detail Master Detail

201 Master - Detail

202 Master - Detail

203 Master - Detail

204 Master - Detail Master Detail

205 Ribbon

206 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Erste Ebene - Gruppierung nach Benutzungskontexten

207 Ribbon was ist das eigentlich? Geschachtelte Gruppierung Zweite Ebene - Gruppierung von Funktionen

208 Ribbon was ist das eigentlich? Geschachtelte Gruppierung...aber keine tiefe Hierarchie!

209 Ribbon und was bietet es? Viele Funktionen gleichzeitig hohe Entdeckbarkeit Die richtigen Funktionen für den aktuellen Kontext Empfehlung: Windows UX Guidelines lesen!

210 Große Patterns

211 Kleine Patterns

212 CheckBox

213 CheckBox ein Pattern? Ausführlich protokollieren Ausführlich protokollieren Ausführlich protokollieren

214 CheckBox Auswahl zwischen zwei klar gegensätzlichen Alternativen So klar, dass die zweite nicht erwähnt werden braucht Richtig: Das will ich haben! Falsch: Querformat

215 GUIs sind voll mit Patterns (Keine große Überraschung)

216 Gut: Andere GUIs mit wachem Auge betrachten

217 Schlecht: Andere GUIs einfach blind kopieren

218 Verwendung von Abbildungen aus den Windows User Experience Guidelines mit freundlicher Genehmigung der Microsoft Corporation

219 Wichtig: Tieferes Verständnis Falsch: Verwendung weil cool Was ist der Kern des Patterns? Wofür ist es geeignet? Wofür nicht?

220 Quellen für Patterns

221 Pattern Libraries (Links siehe Anhang)

222 Ziele dieses Vortrags Grundlagen schaffen Analytische Denke auch für GUIs Blick schärfen Details entscheiden über den Erfolg

223 Abstrakte Betrachtung Erkenntnisse für die Praxis

224

225 UI Design Patterns

226 UI Design Patterns Darstellung Interaktion

227 I. Darstellung

228 Darstellung: Was?

229 Informationen (Nutz-)Daten Aus der Welt der Anwender z.b. Daten aus der Datenbank Sonstige Inhalte, u.a. Beschriftungen Hinweis-/Fehler-/Hilfstexte

230 Daten

231 1. Einzelnes Objekt 2. Mehrere Objekte

232

233

234 {D5520D83-FFD0-46D1-85E DCEADBE}

235 Foo.Bar.Thingy.Item

236 Anzeigename

237 Anzeigename Für Menschen verständlich Hinreichend unterscheidbar

238 (Bild)

239 Bilder in GUIs: Varianten a) Bilder sind die Daten b) Bilder repräsentieren Objekte Statisch: z.b. Autos in Online Shop Dynamisch: z.b. Thumbnails c) Bilder stehen für Kategorien z.b. Dateityp, Projektstatus

240 Nicht in diesem Vortrag: Visualisierung, Diagramme

241 Zusätzlicher Text

242 Anzeigename

243 Anzeigename und/oder Bild

244

245 Anzeigename und/oder Bild plus weitere Eigenschaften

246 Beispiel: Buch

247

248 Entwicklersicht Alle Informationen vorhanden Hey, sogar mit Bild! Anwendersicht Schwer zu lesen Und bei einfarbigem Cover?

249

250

251 Demo Einzelnes Objekt

252 Dominanz Hierarchie Whitespace Semantische Gruppierung Domänenspezifische Darstellung

253 Es lohnt sich, den Charakter von Objekteigenschaften zu kennen

254 Charakterisierung Identifizierend? Falls ja: Lokal / Global? Selbstbeschreibend? Falls ja: Wirklich? Für wen? Zusammenhang mit anderen? Gruppierung Layout

255 Charakterisierung Endliche Anzahl von Werten? Transformation möglich: Text Bilder, Farben (Vorsicht!) Texte: Länge bekannt? Minimal/Typisch/Maximal Auswirkungen auf Layout

256 Charakterisierung Texte: Was ist wichtig? Anfang/Ende/Mitte/Alles? Evtl. gekürzte Anzeige sinnvoll? Das Geheimnis erfolgreicher GUI-Designer [...] mehr D:\Talks\... \ User Interface Patterns.pptx Bestellnummer: A

257 Typische Muster

258 Bild/Icon + Text Anzeigename Anzeigename Bild/Icon + Text + Zusatzinfo Anzeigename Beschreibung des Objekts

259 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb)

260 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Titel Format Dateigröße

261 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Urlaub vom bis

262 Zusammengesetzter Anzeigetext Benutzer-Handbuch (PDF, 210Kb) Urlaub vom bis Max Mustermann

263 1. Einzelnes Objekt 2. Mehrere Objekte

264

265

266 Listen von Objekten a) Auflistung von Einzelobjekten Eine der Stärken von Silverlight b) Spezialfall: DataGrid Mehr als die Summe seiner Teile Gut bei wechselnden Prioritäten

267 Demo: Vertikales Layout

268 Vertikales Layout Klassisch Langweilig? Aber: Effektiv Geeignet für breite, aber nicht allzu hohe Objekte

269 Vertikales Layout A B C C Danach habe ich nicht gesucht Danach habe ich auch nicht gesucht Danach habe ich gesucht, endlich gefunden!

270 Demo: Horizontales Layout

271 Horizontales Layout Mal was anderes Problem: Mausrad Für wenige, schmale Objekte Interessant: Zeitachse

272 Horizontales Layout

273 Horizontales Layout Interessanter Spezialfall: Listen in Satzform Wenige, nicht zu lange Texte Eis: Vanille, Erdbeer, Schoko

274 Demo: Wrap/Matrix-Layout

275 Wrap/Matrix-Layout Attraktive Darstellung Will gut überlegt sein! Eher Ich suche X oder IKIWISI? I Know It When I See It

276 Wrap/Matrix-Layout: Suche

277 Wrap/Matrix-Layout: Suche

278 Wrap/Matrix-Layout: Suche

279 Wrap/Matrix-Layout: Stöbern

280 Demo: Verschiedene Layouts

281 Fragen zur Auswahl von Listen-Layouts

282 Was ist der Anwendungsfall? Überblick gewinnen? Daten analysieren? Nach etwas Konkretem suchen? Einfach mal stöbern?

283 Wahrscheinliche Betrachtung? Schnelles Scannen nach etwas Bestimmtem? Ausschau nach (irgend)etwas Interessantem?

284 Kochrezept Charakteristik der Daten herausarbeiten Konkrete Anwendungsfälle identifizieren Augenbewegungen minimieren Geeignetes Layout

285 Zusammenfassung: Varianten Eindimensional Als Liste von Einzelobjekten Tabellarisch Als Aufzählung in Satzform Mehrdimensional Matrix (Wrap)

286

287 II. Interaktion

288 1. Befehl erteilen / Aktion starten

289 and Buttons, Command Bu Command Buttons, links, Icons, Hyperlinks, Ic Hyperlinks, Icons, and Links Command L Command Links s, Toolbars Menüs, Tool Menüs, Toolbars pdowns, Dropdown Dropdowns,, Ribbons, Popups,... Ribbo Popups, Ribbons,...

290 Klickbare Schaltfläche

291 Button Eines der Ur -Controls Metapher aus der realen Welt dadurch hohe Affordance

292 Hyperlink Von der Notlösung zur UI-Idee Erlernte Metapher Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, neque nec luctus rutrum, est tortor venenatis quam, et imperdiet lectus nisl nec massa. Suspendisse in leo in justo facilisis sodales ac ut urna. Vestibulum sed porta odio. Duis venenatis euismod eros, quis bibendum lorem fermentum eget. Bearbeiten Weiterleiten Kommentieren

293 Demo: Button & Hyperlinks

294 Button Primäre Aktionen In 80% der Fälle klickt man X Hyperlink Sekundäre Aktionen GUIs schlank halten

295 Demo: Schlanke GUI

296

297 2. Daten eingeben

298 heck Box, Combo Check Box, C Check Box, Combo Box, Box, Drop-d Box, Drop-down List, rop-down List, List Bu List Builder, Radio t Builder, Radio Radio Button Button, Text Box, on, Text Box, Box, Up/D Up/Down Control,... wn Control,... Control,

299 Technik ist klar - Unser täglich Brot

300 Was ist zu tun, damit Anwender fundierte Entscheidungen treffen können?

301 Demo: Einstellungen

302

303 Wie geht man mit Komplexität um?

304 Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

305 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

306 Entfernen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

307 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

308 Organisieren Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

309 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

310 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Mehr...

311 Verbergen Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

312 Verschieben Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich!

313 Verschieben A Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! Klick mich! B C Die Funktionen sind nur in einem bestimmten Kontext zugänglich

314 Elemente... Entfernen Organisieren Verbergen Verschieben

315 Patterns

316 Progressive Disclosure Schrittweise Offenlegung

317 Progressive Disclosure Verbergen von UI-Elementen, die nicht für alle Use Cases notwendig sind UI-Elemente erscheinen bei Bedarf (interaktiv/automatisch) (siehe auch Microsoft UX Guidelines)

318 Demo: Progressive Disclosure

319 Responsive Disclosure Reagierende Offenlegung

320 Responsive Disclosure Einblenden von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers Spezialfall von Progressive D. Eher fachlich als technisch

321 Demo: Responsive Disclosure

322 Responsive Enabling Reagierende Freigabe

323 Responsive Enabling Freigeben von UI-Elementen in Abhängigkeit von Eingaben bzw. Aktionen des Benutzers

324 Demo Responsive Enabling

325 Responsive Disclosure Anwender wird beim ersten Blick nicht erschlagen Aufklappen u.u. überraschend Dynamik möglich Layout ändert sich Responsive Enabling Anwender sieht sofort, welche Möglichkeiten es gibt Evtl. nicht klar, was die Elemente aktiviert Viele deaktivierte Bereiche schnell verwirrend Layout bleibt gleich

326

327 Kaum eine Lösung ist für alle Fälle gleich gut...

328 Chance: Spezialfälle erkennen

329 Demo: Spezialfall

330

331 Sammlung wichtiger Fragen

332 Auswahl von Patterns Welche Informationen sollen Anwender warum sehen? Was sollen Anwender warum machen können? Wie hilft dies den Anwendern, ihre Aufgabe zu erfüllen?

333 Darstellung von Daten Was ist der Charakter einer darzustellenden Information?...welche Darstellungen sind dadurch denkbar? Gibt es Wege, die Komplexität der GUI (lokal) zu verringern?

334

335 Anhang Lesematerial

336 UX Interaction Guidelines Online und als PDF-Download -us/library/aa aspx

337 Bücher The Non-Designer's Design Book Design-Grundkonzepte wie Nähe, Ausrichtung, Kontrast, etc.

338 Bücher Design & Typographie für Dich Deutsche Ausgabe von T.N.D.D.B Qualität:?

339 Bücher Don t Make Me Think Oft zitierte, gut lesbare Einführung in grundlegende Usability-Themen

340 Bücher Designing Interfaces 2nd Edition Interaction Patterns, gute Mischung aus Beispielen + Theorie

341 Bücher Designing the Obvious Anwender, Use Cases, mentale Modelle, schrittweise Verfeinerung

342 Bücher Simple and Usable Vereinfachung am Beispiel einer DVD-Fernbedienung: So einfach wie möglich, aber nicht einfacher

343 Fragen?

344 Vielen Dank!

345 Material / Infos / Kontakt UX/UX Website ux4devs.de Mail: mail@roland-weigelt.de Blog: weblogs.asp.net/rweigelt