User Interface

Ein User Interface ist die Verbindung zwischen Computer und Menschen. Es sind die Tasten, Bilder und Menüs, die man auf dem Bildschirm sieht oder mit den Fingern berührt. Das User Interface ermöglicht, dem Computer zu sagen, was er machen soll, und es zeigt, was der Computer macht.

Arbeitsmittel

Arbeitsblatt

Info für Lehrende

Eingeloggte Lehrer*innen werden hier durch Unterrichtsvorschläge und Zusatzinformationen zur Seite und zu Lernzielen unterstützt.
Mehr zu SchuBu+

Computer für Menschen

Maschinen sind aus unserer Umwelt nicht mehr wegzudenken. Doch niemand liest gerne lange Betriebsanleitungen, um zu verstehen, wie sie zu bedienen sind. Deshalb ist es wichtig, dass die Schnittstelle zwischen Mensch und Maschine möglichst leicht verständlich gestaltet ist. Wenn es sich dabei nur um einen Schalter handelt, ist dies vergleichsweise einfach zu lösen:

Ein dummer Roboter drückt auf einen roten Schalter. Über ihm löst sich dadurch eine schwere Kiste, die auf seinen Kopf fallen wird. — Ein Schalter ist ein sehr einfaches User Interface.

Computerprogramme oder Apps erledigen jedoch oft sehr komplexe Aufgaben für Benutzerinnen oder Benutzer. Hier reicht kein einzelner Schalter. Deshalb braucht es eine Benutzeroberfläche, auch User Interface genannt, welche die Möglichkeiten so darstellt, dass sie von Menschen ohne viele Erklärungen verwendet werden können.

Es ist ein eigener Beruf, diese Verbindung zwischen Menschen und Computer benutzerfreundlich zu gestalten. Dieser Beruf ist der User Interface-Designer.

Die wichtigste Regel für eine gute Schnittstelle zwischen Computer und Mensch ist einfach zu verstehen und besonders wichtig:

Ein User Interface soll von möglichst allen Nutzerinnen und Nutzern verstanden werden. Es reicht also nicht, wenn es von den meisten bedienbar ist, es soll von allen verstanden und genutzt werden können.

Übung: Betrachte die folgenden User Interfaces und untersuche, welche Nutzergruppe diese nicht verwenden kann!

DER REGENBOGEN
Fast genauso wie im Prisma funktioniert es auch beim Regenbogen. Kleine Wassertröpfchen, die in der Luft schweben, wirken hier ähnlich wie viele kleine Prismen. Aber zusätzlich zur Lichtbrechung kommt es auch noch zur Spiegelung (Totalreflexion) des Sonnenlichts an der Rückseite der Tropfen. Im Regenbogen bzw. im Farbspektrum des Sonnenlichts sind nicht alle Farben enthalten, die wir sehen können. Das liegt an der Art, wie unser Farbsinn funktioniert.

FRAGEBOGEN 2/10

Wie alt bist du?

Elf Zwölf Dreizehn

Weiter

SHOP

Verfügbar

Nicht verfügbar

Bleistift

Klebestift

Wasserfarben

Schere

Satz anhören!

Nutzen Sie unser Angebot frei von externen Werbebannern und Tracking. Ablenkungsfreies Arbeiten für 1,99 €/Monat (inkl. MwSt.).

Akzeptieren

Farbenblindheit

Zittern

Kognitive Überlastung

Sehschwäche

Schwerhörigkeit

Simulieren

Weiter

Sprechen: Diskutiert, welche Nutzergruppen besondere Herausforderungen für User Interface-Designer stellen! Überlegt euch Features für ein möglichst barrierefreies Design!

Info für Lehrende

Übung: Klicke unten an, welches User Interface am professionellsten aussieht und welches am leichtesten verstanden wird!

„Was muss ich hier tun?“

Wenn ein User Interface nicht von allen Benutzerinnen und Benutzer verwendet werden kann, dann liegt das meistens daran, dass es missverständlich ist – zum Beispiel:

Dialogfeld mit zwei Buttons und dem Text: Das Formatieren wird alle Daten auf dieser Festplatte löschen. Der OK Button is viel prominenter als der Abbrechen Button. — Hier kann es zu einem gefährlichen Missverständnis kommen.

Sprechen: Besprecht, zu welchen Missverständnissen es hier kommen könnte!

Die Designerin oder der Designer haben hier vergessen zu bedenken, dass ihr Interface auch ganz anders verstanden werden kann. Deshalb ist es wichtig, dieses von möglichst vielen unterschiedlichen Menschen testen zu lassen.

Computer für Aliens

Analysiere dieses Alien-Interface! Bekannt ist, dass es von einem einzelnen Alien verwendet wird, um sein Raumschiff zu steuern.

Welche Eigenschaften hat das Alien? Versuche, alles herauszufinden, was du ablesen kannst!
Wie viele Arme und Finger hat diese unbekannte Art?

0 Versuche

Noch 7 Fehler enthalten

Der Außerirdische, der das Raumschiff über dieses Interface bedient, hat [keinen, *einen, 2, 3, 4, 5] KopfKöpfe mit [keinen Augen, Augen vorne, Augen hinten, *Augen hinten und vorne, Augen rundherum]. Er hat [0,1,2,*3,4,5] Arme mit Händen und jeweils [0,1,2,*3,4,5,6] Fingern. Er hat [einen | *keinen] Daumen an den Händen. Der [linke, rechte, *mittlere] Finger scheint länger zu sein. Er hat [0,1,2,*3,4,5] Beine mit jeweils [0,1,2,3,*4,5,6] Fingern. Der Außerirdische hat [*einen | keinen] Daumen an den Füßen. Der Außerirdische hat [0,1,*2,3,4] Popos, auf demdenen er sitzen kann. Er hat Stoffwechsel und scheidet die Schadstoffe [vorne, oben, hinten, links, rechts, *unten] aus. Die wahrscheinlich [feste | *flüssige] Nahrung nimmt er [vorne, *oben, hinten, links, rechts, unten] beim [*Kopf | Arm | Gesäß] auf.

Super! Hast du eine genaue Vorstellung vom Alien?

Papierprototyp

Um das geplante User Interface von einer App auszuprobieren, wird oft auf Papierprototypen zurückgegriffen. Dabei handelt es sich um einfache Entwürfe der Benutzeroberfläche auf Papier, mit deren Hilfe ausprobiert werden kann, ob ein Interface so verwendet wird, wie es die Designerin oder der Designer wollte.

iPad, auf dem ein Papier in der Größe des Displays liegt. Auf dem Papier sind Buttons und ein Platzhalter für ein Video gezeichnet. — Papierprototyp auf einem iPad

Klicke an, welche der genannten Vorteile im Design von User Interfaces auf Papierprototyopen zutreffen!

Schnelle Erstellung: Papierprototypen können sehr schnell erstellt werden.
Papierprototypen kann man schnell an neue Ideen anpassen.
Papierprototypen kann man leicht ändern, indem man Papierkomponenten hinzufügt, entfernt oder bearbeitet.
Papierprototypen kosten besonders wenig (Papier, Stifte, Schere usw.).
Da Papierprototypen schnell und einfach erstellt werden können, ermutigen sie zu kreativem Denken und dem Ausprobieren verschiedener Ansätze.
Benutzerinnen oder Benutzer können einen Papierprototypen früh ausprobieren, wodurch man gut Bedürfnisse und Erwartungen erkennen kann.
Papierprototypen sind ein gutes Mittel, um Ideen zu erklären. Zum Beispiel Teammitgliedern oder Geldgebern.
Papierprototypen unterscheiden sich immer in ihrem Aussehen von digitalen Interfaces. Das ist dann ein Vorteil, wenn man sich nicht auf das Aussehen, sondern auf die Funktion konzentrieren möchte.
Papierprototypen helfen, Missverständnisse zwischen Designer*innen, Entwickler*innen und Tester*innen zu reduzieren und sicherzustellen, dass alle Beteiligten die gleichen Vorstellungen vom User-Interface haben.
Mit Papierprototypen kann man besonders gut testen, wie Benutzerinnen oder Benutzer mit unterschiedlichen Endgeräten umgehen.
Papierprototypen haben den Vorteil, dass sie auch genau so aussehen, wie die fertigen User-Interfaces.
Papierprototypen kann man leicht einer großen Menge an Testerinnen und Tester über das Internet zur Verfügung stellen.

Interaktion (für Dreiergruppen): Einen Papierprototypen erstellen

In den Arbeitsblättern für diese Seite gibt es Ausschneidevorlagen für User Interface-Elemente:

Konstruiere einen Papierprototypen für ein Handyspiel mit diesen Regeln:
1. Zwei Spieler*innen (A und B) spielen jeweils auf ihren Handys auf einem Raster von 5 x 5. Das heißt, beide haben ein Papier mit einem Handy vor sich.
2. Auf diesem Raster sind als Mauern zufällig drei Tetris-Steine angeordnet.
3. Zuerst klickt A 3 Kästchen an, um dort Kreise zu platzieren. Diese sind für B nicht zu sehen. Sie dürfen nicht auf Mauern liegen.
4. Dann klickt B 3 Kästchen rund um das Raster an, um dort Pfeile zu platzieren, die ins Feld zeigen. Falls sich dort ein oder mehrere Punkte vor einer Mauer befinden, hat B diese Punkte gefunden.
5. Jetzt kann man auf einen Button „weiter“ klicken.
6. Danach versteckt B 3 Punkte und A versucht sie zu erraten.
7. Wer mehr Punkte gefunden hat, hat gewonnen.
8. Nach dem Spiel kann man auf „noch einmal spielen“ klicken.
Spielt den Prototypen zu zweit! Die dritte Person spielt den „Computer“. Nur er oder sie verändert die Ansichten auf den Handys und erstellt zum Beispiel auf beiden Papier-Handys die zufälligen Level. Der „Computer“ platziert auch Interface-Elemente, die während des Spielens auftauchen. Das ist zum Beispiel der Button „noch einmal spielen“.
Besprecht kurz zu dritt und verbessert dann eine Regel! Verändert den Prototyp so, dass ihr die verbesserte Regel spielen könnt!
Spielt den verbesserten Prototypen!

Beantwortet gemeinsam folgende Klassenfrage:

Hacks und Tricks

Je mehr Auswahlmöglichkeiten Nutzerinnen und Nutzer haben, desto länger brauchen sie, um eine Entscheidung zu treffen – deshalb gilt: weniger ist oft mehr.
Buttons sollten groß und leicht erreichbar sein – besonders auf mobilen Geräten.
Keine Scheu vor Leerraum. Bewusst eingesetzt, hilft er, Inhalte klar voneinander zu trennen. Das sorgt für ein elegantes, übersichtliches und gut lesbares Design.
Fortschrittsanzeigen, Checklisten oder „Du hast noch nicht fertig...“ halten Nutzerinnen und Nutzer engagiert.