Bei der Gestaltung graphischer Benutzungsschnittellen kann jeder mitreden. Wirklich? Zumindest haben die meisten Software-Entwickler irgendwann mal eine gemacht oder machen müssen. Da Entwickler selber aber viel zu gut im Bedienen von Software sind, fehlt meist der Blick aus der Perspektive des normalen Benutzers. Im Vortrag stelle ich einige schlimme und/oder humorvolle Fehlschläge bei der Gestaltung von Benutzungsschnittstellen vor – nicht nur Software, sondern auch Hardware betreffend. Dadurch wird klar, dass die Gestaltung von Benutzungsschnittstellen keine triviale Aufgabe ist. Ich stelle die sieben Grundsätze der Dialoggestaltung vor und wie diese umzusetzen sind. Den Abschluss bilden handfeste Regeln sowie Tipps zur Gestaltung von Dialogboxen, die der Zuhörer gleich am nächsten Tag in seiner eigenen Software verbessern kann.

1. 1
UX Fails
Einige Tipps zur Gestaltung von Benutzungsschnittstellen
Prof. Dr. Herwig Henseler
henseler@phwt.de
http://www.herwig-henseler.de/phwt
Twitter: @herwighenseler
SEROM 4.0 – 25.10.2019 – Vechta

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7👍

8. 8👍👍

9. 9

10. 10
DIN EN ISO 9241-110
Sieben Grundsätze der Dialoggestaltung
 Aufgabenangemessenheit
 Lernförderlichkeit
 Steuerbarkeit
 Selbstbeschreibungsfähigkeit
 Individualisierbarkeitsfähigkeit
 Fehlertoleranz
 Erwartungskonformität

11. 11
Aufgabenangemessenheit
Ein Dialog ist aufgabenangemessen, wenn er den
Benutzer unterstützt, seine Arbeitsaufgabe effektiv und
effizient zu erledigen.
⇒ „Weniger ist mehr“

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17
Selbstbeschreibungsfähigkeit
Dem Benutzer wird deutlich gemacht, wie er sein Ziel
erreicht und was er im jeweiligen Schritt tun kann
⇒ Wo bin ich?
⇒ Was kann ich hier tun?
⇒ Was ist manipulierbar und was nicht?
⇒ Wie komme ich hier wieder weg?

18. 18

19. 19

20. 20👍

21. 21

22. 22

23. 23

24. 24

25. 25
Erwartungskonformität
Vergleichbare Aufgaben sollen immer auf dieselbe Weise
vom Benutzer durchgeführt werden können.
⇒ RY – Repeat Yourself

26. 26

27. 27

28. 28

29. 29
Original Apple HIG (1987)

30. 30

31. 31
Literatur
Human Interface Guidelines
Windows: https://docs.microsoft.com/de-de/windows/uwp/design
macOS: https://developer.apple.com/macos/human-interface-guidelines
Android: https://material.io
iOS: https://developer.apple.com/ios/human-interface-guidelines
Gnome: https://developer.gnome.org/hig
KDE: https://hig.kde.org
...

32. 32
Irgendwas ist passiert und Sie müssen
OK klicken, damit es weitergeht!
Langweilige Beschreibung, die das obige wiederholt und keine neue
Information liefert, sondern stattdessen eher Verwirrung stiftet und bis zum
Ende liest doch sowieso keiner, denn Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
Zeige Technikgefasel ...
Verstehe ich nicht
Das auch nicht
keine Ahnung ...
OKFALSCH
Irgendein Programmname

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39
Merke #1
Kein Benutzer möchte einen Dialog lesen müssen.
Niemand.
⇒ Niemals Buttons mit Ja/Nein beschriften

40. 40

41. 41

42. 42

43. 43

44. 44

45. 45

46. 46
Merke #2
Dialogfenster und Buttons haben eine Mindest- und
Maximalbreite
⇒ OK gleichbreit wie Abbrechen.

47. 47

48. 48
Merke #3
Groß- und Kleinschreibung
⇒ OK heißt OK und nicht Ok
⇒ Abbrechen heißt Abbrechen und nicht abbrechen

49. 49👍

50. 50👍

51. 51

52. 52

53. 53

54. 54
Die korrekte Reihenfolge von Buttons
Windows:
OK | Cancel | Secondary
macOS, iOS, iPadOS,
Android, Linux:
Secondary –– Cancel | OK

55. 55
Windows:
... aber seit Windows 8 auch häufiger
Cancel | OK

56. 56
Merke #4
An die vorgeschriebene Reihenfolge der Buttons halten

57. 57

58. 58

59. 59👍

60. 60
Merke #5
Beschrifte Buttons mit der Aktion, die sie auslösen
⇒ Vermeide OK und Abbrechen
⇒ Sorgfältige Wortwahl

61. 61👍

62. 62
Merke #6
Default-Button = DWIM („Do what I mean“)
⇒ Nur, wenn es nicht destruktiv ist!
⇒ ESC bricht einen Dialog ab.
⇒ Buttons werden beim loslassen ausgelöst

63. 63

64. 64

65. 65
Merke #7
Buttons sind Buttons
⇒ Buttons sind keine Checkboxen
⇒ Buttons sind keine Fortschrittsbalken

66. 66

67. 67

68. 68
Merke #8
Dialoge sind keine Denksportaufgaben
⇒ Niemand interessiert sich für technische Fehlerbeschreibungen
⇒ Inhalte müssen selektierbar sein

69. 69
Illegal An illegal choice has been detected

70. 70

71. 71
Merke #9
Negative Formulierungen vermeiden

72. 72

73. 73
Merke #10
Konsistente Begriffe verwenden

74. 74
Die unsinnigste Dialogbox der Welt

75. 75👎

76. 76
(BONUS)

77. 77

78. 78
Merke (BONUS)
Verzichten sie möglichst auf „Speichern“
Beenden jederzeit ohne Nachfragen möglich
Automatisch zuletzt geöffnete Dokumente an gleicher Stelle
Unbegrenztes undo/redo ist kein Hexenwerk

79. 79
MS Office
 Öffnet nicht das letzte Dokument
 Inkonsistenz beim öffnen in Word/PowerPoint

80. 80
Literatur
Heinecke, A. M. (2011):
Mensch-Computer-Interaktion:
Basiswissen für Entwickler und
Gestalter,
X.media.press
...

81. 81
Literatur
Jacobsen, J. et al. (2017):
Praxisbuch Usability und UX:
Was jeder wissen sollte, der
Websites und Apps entwickelt -
bewährte Usability- und UX-
Methoden praxisnah erklärt,
Rheinwerk Computing
...

82. 82
https://cantunsee.space

83. 83
„Perfektion ist nicht dann erreicht, wenn es
nichts mehr hinzuzufügen gibt, sondern
wenn man nichts mehr weglassen kann.“
– Antoine de Saint-Exupéry

84. 84