UI KursGrundlagen · User Interface

User Interface

von Severin Brettmeister11:48 Min.
EinleitungEinheit 2 von 21Abschluss

Die Essenz

  • Definition: „Die Art, wie du Aufgaben mit einem Produkt erledigst – was du tust und wie es reagiert – das ist das Interface.“ (Jef Raskin, The Humane Interface, 2000, S. 2) Kurz: Das User Interface ist das, was Spieler:innen tun können und wie das Spiel darauf reagiert.
  • Was Spieler:innen nicht wahrnehmen, können sie nicht nutzen. Darum zählt zum User Interface auch, wie sie das Spiel und seine Reaktionen wahrnehmen. Darauf baut Lektion 4 auf.
  • Das User Interface ist mehr als das GUI (Graphical User Interface, der grafische Teil) und mehr als das HUD (der Teil des GUI, der beim Spielen über der Spielwelt liegt). Auch Level, Licht, Animation, Ton, Haptik und die Eingabegeräte gehören dazu.
  • „Aus Sicht des Nutzenden ist das Interface das Produkt.“ (Jef Raskin, S. 5) Für uns heißt das: Aus Sicht der Spieler:innen ist das Interface das Spiel.

Begriffslandkarte: User Interface umfasst Spielwelt, GUI mit HUD und Menüs sowie Eingabe

Wo lebt ein Interface-Element?

  • Nicht-diegetisch: weder im 3D-Raum noch Teil der Fiktion, nur für Spieler:innen sichtbar, z. B. der Lebensbalken oben links.
  • Diegetisch: im 3D-Raum und Teil der Fiktion, z. B. die Munitionsanzeige auf der Waffe in Dead Space.
  • Räumlich: im 3D-Raum, aber nicht Teil der Fiktion, z. B. der Umriss um Mitspieler:innen.
  • Meta: Teil der Fiktion, aber nicht im 3D-Raum, z. B. Blut am Bildschirmrand bei Schaden.
  • Entscheidend ist nicht, wo ein Element lebt, sondern ob es für die Spieler:innen seinen Zweck erfüllt.

Matrix: diegetisch, nicht-diegetisch, räumlich und meta

Gebrauchstauglichkeit (Usability)

  • Definition: Gebrauchstauglichkeit ist das Ausmaß, in dem ein System, ein Produkt oder eine Dienstleistung durch bestimmte Benutzer:innen in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. (Nach ISO 9241-11:2018)
  • Effektiv: Das Ziel wird genau und vollständig erreicht.
  • Effizient: mit möglichst wenig Aufwand im Verhältnis zum Ergebnis, also Zeit und Mühe.
  • Zufriedenstellend: Die körperlichen, kognitiven und emotionalen Reaktionen entsprechen den Erfordernissen und Erwartungen der Nutzer:innen.
  • Für Games gilt: Das Interface soll gebrauchstauglich sein, die Herausforderung liegt im Spiel. Reibung gehört in die Herausforderung, nie ins Interface.
Transkript lesen aus den Untertiteln des Videos
  1. 00:00Was ist das User Interface?
  2. 00:02Damit wir dasselbe meinen, wenn wir von User-Interface sprechen, schauen wir uns doch mal ein paar Beispiele an.
  3. 00:08Was ist hier das Interface?
  4. 00:10Offensichtlich, oder?
  5. 00:11Das macOS Betriebssystem hat eine Menübar oben, ein Dock oder Quickbar unten sowie geöffnete Programmfenster mit Buttons, Icons, Texten und anderen interaktiven Elementen.
  6. 00:22Wenn wir ein Betriebssystem und Programme als Beispiel nehmen, ist es meist leicht, das User-Interface zu sehen.
  7. 00:27Oder genauer gesagt, gerade wenn es sich um einen Screenshot handelt, sehen wir das Graphical User Interface, die grafische Benutzeroberfläche.
  8. 00:36Was wir hier nicht sehen, aber trotzdem Teil des Interfaces ist, sind Soundeffekte, Transitionen und Animationen.
  9. 00:42Was wir in diesem Screenshot auch nicht sehen, aber essentieller Teil des Interfaces ist, sind die Eingabegeräte, mit denen NutzerInnen das Betriebssystem steuern können.
  10. 00:51Also in jedem Fall Maus und Tastatur und vielleicht auch ein Touchpad.
  11. 00:55Als Interface-DesignerInnen haben wir keinen Einfluss auf die Maus und Tastatur unserer NutzerInnen.
  12. 01:00Aber wir kennen die gängigen Standards und orientieren unseren Teil des Interfaces, das Betriebssystem, an diesen Eingabemöglichkeiten.
  13. 01:09Wie sieht das Interface in einem Game aus?
  14. 01:11Hier am Beispiel Hearthstone.
  15. 01:13Hier haben wir offensichtliche Interface-Elemente wie die Spielerinnen oder Spielernamen unten und oben in der linken Bildschirmecke.
  16. 01:21Wir haben ein offensichtliches Spielfeld in der Mitte des Bildschirms und unsere Spielkarten am unteren Bildschirmrand.
  17. 01:27Die Karten erinnern uns an echte, physische Spielkarten und damit nutzt dieses Interface eine Metapher.
  18. 01:33Dank dieser Metapher haben wir gleich eine Ahnung, was wir mit diesen Karten tun können, nämlich sie in die Hand nehmen, sie ausspielen und während wir unsere Karten einsehen können, sind die Karten des Gegenspielers verdeckt.
  19. 01:45Wir sehen auch Tooltips, Lebenspunkte und Energie und beschriftete Buttons wie End Turn.
  20. 01:51Viele recht offensichtliche Interface-Elemente.
  21. 01:54Wie sieht das Interface in anderen Genres aus?
  22. 01:56Zum Beispiel in einem Shooter wie Doom Eternal.
  23. 01:59Auch hier haben wir offensichtliche Interface-Elemente wie die Munitionsanzeige unten rechts, ein GUI Element, das uns die aktuelle Mission zeigt, oben links und Untertitel zu einem Dialog, der scheinbar gerade stattfindet, unten in der Mitte des Bildschirms.
  24. 02:13Aber auch in der Spielwelt selbst befinden sich wichtige Interface-Elemente, wenn auch nicht so offensichtlich wie die schwebenden Graphical User Interface Elemente oder auch Heads Up Display genannt, kurz HUD.
  25. 02:24In der Spielwelt bzw.
  26. 02:26dem Level können wir den Boden sehen, auf dem wir laufen können.
  27. 02:29Wir können eindeutige Begrenzungen in Form von Steilwänden sehen, auf denen wir sicher nicht laufen können.
  28. 02:34Wir sehen ein Geländer oder eine kleine Wand direkt vor uns, die uns als Deckung dienen könnte.
  29. 02:40Wir sehen weiter hinten eine erleuchtete Tür, die vermutlich unser nächstes Ziel darstellt.
  30. 02:44Alles Teile des Interfaces, die von verschiedenen Gewerken beigesteuert werden.
  31. 02:49Level Design, Lighting und Shader Artists etc.
  32. 02:52Wir sehen noch ein weiteres, wichtiges Interface-Element, das groß und prägnant in der Spielwelt schwebt und typisch für Shooter ist.
  33. 02:59Die ausgewählte Waffe, die fast ein Viertel des Bildschirms einnimmt.
  34. 03:03Dieses animierte 3D-Modell der Waffe dient als Interface-Element, um den Spielerinnen klar zu zeigen, welche Waffe gerade ausgewählt ist und gibt Feedback, wenn die Waffe abgefeuert wird.
  35. 03:14Natürlich geht das Interface auch subtiler oder immersiver.
  36. 03:18Wie sieht das Interface in Dead Space aus?
  37. 03:20Einem Pionier in Sachen diegetische Interfaces.
  38. 03:23Ein diegetisches Interface ist ein Interface, in dem die UI-Elemente in der eigentlichen Spielwelt existieren.
  39. 03:30also nicht in Form eines Heads-up-Displays über oder auf der Spielwelt liegen, sondern in der Welt selbst.
  40. 03:36Damit ein Interface diegetisch ist, muss es aber nicht nur in dieser Welt existieren, es muss auch Sinn machen.
  41. 03:43Es muss in unserer Welt tatsächlich existieren können und für unseren Avatar, den Player-Character, ebenfalls existieren.
  42. 03:50In Dead Space befindet sich die Munitionsanzeige als holographische Projektion auf unserer Waffe in der Welt und ist auch für den Avatar sichtbar.
  43. 03:58Damit ist dieses Interface-Element, die Munitionsanzeige, ein diegetisches Interface-Element.
  44. 04:04Auch die Lebensenergie auf dem Rücken unseres Characters befindet sich in der Spielwelt und hat eine in dieser Spielwelt realistische Erklärung.
  45. 04:11Nämlich, unser Charakter ist ein Sci-Fi-Bergarbeiter und bevor er sich allein durch Monsterhorden metzeln musste, gab es viele weitere Sci-Fi-BergarbeiterInnen, Kollegen und Kolleginnen, die alle so einen Balken auf dem Rücken hatten.
  46. 04:24Denn wenn die alle zusammen in einem Schacht arbeiten und bergarbeiten, sollen sie gegenseitig schnell sehen können, ob jemand verletzt ist.
  47. 04:30Macht also voll Sinn der Lebensbalken auf dem Rücken in der Spielwelt.
  48. 04:34Und für mich als Spieler macht er auch Sinn, denn ich kann sehen, wie es um die Lebensenergie meines Charakters steht.
  49. 04:41Und das ist der entscheidende Punkt.
  50. 04:43Es geht mir und in diesem Kurs nicht um diegetische oder nicht-diegetische Interfaces, sondern um Interface-Elemente, die für unsere Spieler und Spielerinnen einen Zweck erfüllen.
  51. 04:52Dabei ist mir erstmal egal, ob es sich um einen grafischen Lebensbalken oben links am Bildschirmrand handelt.
  52. 04:57oder um einen Lebensbalken IN der Spielwelt, auf dem Rücken meines Charakters.
  53. 05:02Am Ende erfüllen beide Lebensbalken den gleichen Zweck, den oder die Spielerin über den Zustand ihres Avatars zu informieren.
  54. 05:09Damit ein Interface einen Spieler oder eine Spielerin in Flow versetzen kann, also in einen Zustand, in dem er oder sie völlig in einer Tätigkeit aufgeht, ist es nicht entscheidend, ob das User Interface diegetisch oder non-diegetisch ist.
  55. 05:21Lass mich dafür ein einfaches aber anschauliches Beispiel bringen.
  56. 05:24Ich und viele weitere Spielerinnen sind auch bei Spielen wie Tetris in einem tiefen und langen Flowzustand, obwohl das Game eigentlich nur aus Graphical User Interface Elementen besteht.
  57. 05:34Tetris würden wir weniger als immersives Spiel beschreiben, aber ganz sicher als ein Spiel, bei dem man in Flow kommen kann, also völlig in der Tätigkeit des Tetris-Spielens aufgehen kann.
  58. 05:44Und dafür ist ein gutes Interface entscheidend.
  59. 05:50In diesem Kurs verstehen wir das User-Interface als etwas allgegenwärtiges, etwas umfassendes.
  60. 05:55Das User Interface ist nicht nur das Graphical User Interface, das GUI.
  61. 06:00Damit wir dieselben Begriffe verwenden, hier eine kleine Landkarte.
  62. 06:10Das HUD, das Heads-up-Display ist der Teil des GUI, der beim Spielen über der Spielwelt liegt.
  63. 06:15Den Begriff kennen wir aus dem Kampfjet.
  64. 06:17Der Pilot oder die Pilotin muss nicht erst nach unten auf ihre Instrumente schauen, die Informationen liegen direkt in ihrem Blickfeld.
  65. 06:25Zum User-Interface gehört aber noch viel mehr.
  66. 06:28Die Spielwelt selbst mit Licht, Level, Animation und Ton.
  67. 06:33Die Haptik, also das Rumble im Controller und natürlich die Eingabegeräte, mit denen wir spielen.
  68. 06:39Und wo ein Interface-Element lebt, kannst du mit zwei Fragen klären.
  69. 06:44Ist es im 3D-Raum des Spiels dargestellt und ist es Teil der fiktiven Spielwelt?
  70. 06:50Der Lebensbalken zum Beispiel, oben links, weder noch.
  71. 06:54Also nicht diegetisch.
  72. 06:56Der Umriss um andere Mitspieler und Mitspielerinnen im Raum, der ist im Raum, aber nicht Teil von der Fiktion, also räumlich.
  73. 07:06Blut am Bildschirmrand, wenn du getroffen wirst, ist Teil der Fiktion, aber nicht im Raum.
  74. 07:12Also Meta.
  75. 07:13Und die Munitionsanzeige auf der Waffe in Dead Space, die ist beides.
  76. 07:18In der Spielwelt und Teil der Fiktion, also diegetisch.
  77. 07:24Jef Raskin hat es so formuliert.
  78. 07:26Die Art, wie du Aufgaben mit einem Produkt erledigst, was du tust und wie es reagiert, das ist das Interface.
  79. 07:33Wenn man das User-Interface so versteht, dann erklärt das auch folgende Aussage von Jef Raskin.
  80. 07:38Aus Sicht des Nutzenden ist das Interface das Produkt.
  81. 07:42In unseren Worten, aus Sicht der Spielerinnen, ist das Interface das Spiel.
  82. 07:47Wenn das Interface nicht funktioniert, funktioniert das Spiel nicht.
  83. 07:50Egal wie toll eine Game-Mechanik oder ein Level ist, wenn das Interface für den Spieler oder die Spielerin nicht funktioniert, funktioniert auch die Game-Mechanik oder das Level nicht. Können die Spielerinnen das tolle Feature nicht wahrnehmen oder bedienen?
  84. 08:02Sind sie eher irritiert oder genervt?
  85. 08:04Dann funktioniert das Interface nicht.
  86. 08:06Jede gute Idee braucht ein gutes Interface.
  87. 08:10Wie sollte nun unser Interface sein, damit es gut funktioniert?
  88. 08:14Dafür gibt es den Begriff der Gebrauchstauglichkeit.
  89. 08:17Gebrauchstauglichkeit ist die Übersetzung des englischen Begriffs Usability.
  90. 08:21Ein User-Interface soll möglichst gebrauchstauglich, soll möglichst usable sein.
  91. 08:25Wenn wir also ein Interface mit möglichst guter Usability haben möchten, dann ist das im Deutschen gleichbedeutend mit, unser Interface soll eine gute Gebrauchstauglichkeit haben.
  92. 08:34Was ist Gebrauchstauglichkeit?
  93. 08:38Laut DIN-Norm ist die Gebrauchstauglichkeit das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann.
  94. 08:46Also, wie gut kann ein bestimmter Benutzer oder eine Benutzerin das Produkt in einem bestimmten Nutzungskontext nutzen?
  95. 08:53Wichtig ist hier hervorzuheben, dass es um bestimmte BenutzerInnen geht, nicht um alle möglichen BenutzerInnen.
  96. 08:59Wir versuchen, unser UI für eine bestimmte Zielgruppe gebrauchstauglich zu machen.
  97. 09:03Nicht für alle Menschen.
  98. 09:05Darüber hinaus müssen wir beachten, in welchem Nutzungskontext oder Kontexten unser Produkt gebraucht wird.
  99. 09:11Spiele ich das Game unterwegs in Bus und Bahn oder gemütlich zu Hause auf der Couch?
  100. 09:15Kann ich mehrere Stunden am Stück spielen oder habe ich Kinder und muss mein Spiel möglichst jederzeit unterbrechen können?
  101. 09:21Scheint die Sonne in mein Zimmer und ich muss den Kontrast verbessern können.
  102. 09:24Spiel ich ohne Ton, weil ich nebenbei Musik höre.
  103. 09:27All das sind Beispiele für Nutzungskontexte, in denen ich ein Spiel und sein Interface nutzen kann, die wir als Interface-Designerinnen beachten sollten.
  104. 09:36Welche Maßgaben gilt es nun zu erfüllen, damit ein Interface für bestimmte BenutzerInnen in bestimmten Nutzungskontexten gebrauchstauglich ist?
  105. 09:44Zuerst muss unser Interface bzw.
  106. 09:46das Produkt überhaupt bei der Lösung einer Aufgabe hilfreich sein.
  107. 09:49Es muss effektiv bei der Lösung einer Aufgabe sein, es muss in unserem Fall für unsere Spielerinnen ermöglichen, dass sie in den Flow-Zustand gelangen können, also Ziele kommunizieren, angemessenes Feedback geben, Kontrolle ermöglichen etc.
  108. 10:03Wenn es das tut, dann sollte unser Interface darüber hinaus auch möglichst effizient bei der Aufgabenbearbeitung sein.
  109. 10:09Also nicht nur zielführend effektiv, sondern auch schnell dabei sein, also effizient.
  110. 10:14Schnell im Zeitsinne, aber auch im wenig Aufwand dafür aufbringen müssen Sinne.
  111. 10:20Und das letzte Maß, das unser Interface erfüllen soll, um möglichst gebrauchstauglich zu sein, ist die Zufriedenstellung der Nutzerinnen.
  112. 10:27Zufriedenstellung als sehr schwammiger Begriff, der aber in kurzen Worten so genau beschrieben werden kann.
  113. 10:32Die Zufriedenstellung ist die Übereinstimmung der Nutzungserfahrung mit den Erfordernissen und Erwartungen der Nutzenden.
  114. 10:39Also, inwieweit verhält sich das Interface so, wie ich es als Nutzer brauche, Erfordernisse und wie ich es als Nutzer erwarte.
  115. 10:48Nimmt das Interface Rücksicht auf meine Fähigkeiten und Einschränkungen und verhält es sich so, wie ich das erwarte, dann hat das Interface ein hohes Maß an Zufriedenstellung.
  116. 10:58Nochmal in der Zusammenfassung.
  117. 10:59Das User-Interface ist das, was Benutzerinnen tun können und wie das Produkt darauf reagiert.
  118. 11:05Die Gebrauchstauglichkeit eines Interfaces sagt aus, wie effektiv, effizient und zufriedenstellend es von bestimmten BenutzerInnen in einem bestimmten Nutzungskontext genutzt werden kann.
  119. 11:15Nichts einfacher als das, oder?
  120. 11:17Wie du dein Interface so entwickelst, dass deine Spieler und Spielerinnen an ihr Ziel gelangen und das möglichst ohne Umwege und das Interface ihren Erfordernissen und Erwartungen entspricht, dabei wird dir dieser Kurs helfen.
  121. 11:28Um den Begriff Zufriedenheit der NutzerInnen etwas genauer zu beleuchten, stellen wir im nächsten Video die User Experience in einen Zusammenhang mit unserem gebrauchstauglichen User Interface.
  122. 11:39Unten auf der Seite habe ich ein paar Links eingefügt, die dich noch weiter auf verschiedene Arten von Game Interfaces einstimmen können und sich mit diegetischen und non-diegetischen UIs beschäftigen.

Bleib auf dem Laufenden

Ab und zu schicke ich dir Neuigkeiten zum UI Kurs, neue Lektionen und Tipps für gutes Interface-Design. Kein Spam, jederzeit abbestellbar.