BK6 - Interface gestalten

Diesen aiMOOC als Battle spielen: Informatik, Klasse 5-6, M-Niveau

Einleitung

Eine Benutzeroberfläche ist der Teil eines digitalen Systems, den Du siehst und bedienst. Dazu gehören zum Beispiel Buttons, Menüs, Icons, Textfelder, Bilder, Schalter, Suchfelder und Meldungen. Eine grafische Benutzeroberfläche wird oft mit GUI abgekürzt. Gute Oberflächen helfen Dir, schnell zu verstehen: Wo bin ich? Was kann ich tun? Was passiert als Nächstes?

In diesem aiMOOC entwickelst Du eine einfache Oberfläche für eine fiktive Klassen-App. Du lernst dabei, wie Lesbarkeit, visuelle Hierarchie und Ästhetik zusammenwirken. Du beobachtest bestehende Oberflächen, gestaltest eigene Varianten und testest sie mit anderen. Das Niveau ist für Klasse 6 angelegt und wird in drei Stufen differenziert: G = grundlegendes Niveau, M = mittleres Niveau und E = erweitertes Niveau.

Eine echte Oberfläche besteht aus vielen kleinen Entscheidungen. Die Wikipedia-Oberfläche zeigt zum Beispiel Navigation, Suchfeld, Inhaltsbereiche und Bedienelemente. Nicht jedes Element soll gleich auffällig sein: Wichtige Dinge dürfen stärker hervortreten, Nebensachen sollen sich zurücknehmen.

Lernziele

Am Ende kannst Du eine einfache Benutzeroberfläche planen, gestalten, begründen und verbessern. Du erkennst typische UI-Elemente und kannst ihre Funktion erklären. Du untersuchst Lesbarkeit, Hierarchie, Kontrast, Abstände, Ausrichtung, Konsistenz und Ästhetik.

Niveau	Das schaffst Du
G	Du erkennst Buttons, Menüs, Icons und Anzeigen und gestaltest eine übersichtliche Oberfläche mit klaren Beschriftungen.
M	Du ordnest Elemente bewusst, setzt Kontrast und Abstände gezielt ein und kannst Gestaltungsentscheidungen erklären.
E	Du vergleichst Varianten, begründest eine visuelle Hierarchie, beachtest Barrierefreiheit und verbesserst Dein Design nach einem Test.

Was ist ein Interface?

Ein Interface ist eine Schnittstelle zwischen Menschen und Technik. Bei einer grafischen Benutzeroberfläche erfolgt die Bedienung über sichtbare Elemente. Typische Bestandteile sind Fenster, Icons, Menüs, Zeiger, Schaltflächen, Eingabefelder, Listen und Anzeigen. In der Software-Ergonomie geht es darum, Software so zu gestalten, dass Menschen sie verständlich und zweckmäßig benutzen können.

Dieses einfache Beispiel zeigt ein Menü. Menüs bündeln mehrere Möglichkeiten an einem Ort. Dadurch muss nicht jede Funktion gleichzeitig auf dem Bildschirm sichtbar sein.

Vom Element zur Oberfläche

Eine Oberfläche ist wie ein gut geordnetes Schreibtischblatt: Einzelteile müssen zusammenpassen. Ein Button allein ist noch kein Interface. Erst wenn Überschrift, Navigation, Inhalt, Aktionen und Rückmeldungen sinnvoll angeordnet sind, entsteht ein verständliches Ganzes.

1. Button: Eine anklickbare oder antippbare Fläche, die eine Aktion auslöst.
2. Menü: Eine geordnete Auswahl von Befehlen oder Bereichen.
3. Icon: Ein Bildsymbol, das eine Funktion oder Bedeutung schnell erkennbar machen kann.
4. Anzeige: Eine sichtbare Rückmeldung, zum Beispiel „Gespeichert“, „3 Aufgaben offen“ oder ein Fortschrittsbalken.
5. Navigation: Hilft Dir, zwischen Bereichen zu wechseln und Dich zu orientieren.

Buttons gestalten

Buttons sollen deutlich zeigen, dass man sie benutzen kann. Eine gute Beschriftung beschreibt möglichst konkret die Aktion. Speichern ist meist klarer als OK. Ein Hauptbutton darf stärker auffallen als eine Nebenaktion.

Button-Werkstatt

Vergleiche diese selbst gebauten Beispiele:

Rolle	Beispiel	Beobachtung
Hauptaktion	Speichern	Hoher Kontrast und klare Beschriftung lenken den Blick auf die wichtigste Aktion.
Nebenaktion	Zurück	Sichtbar, aber weniger dominant als die Hauptaktion.
Problematisch	Weiter	Geringer Kontrast und kleine Fläche erschweren die Erkennung.

G-Auftrag: Markiere den Button, den Du zuerst wahrnimmst, und begründe mit einem Satz warum.

M-Auftrag: Erfinde je eine klare Beschriftung für einen Hauptbutton und eine Nebenaktion in einer Lern-App.

E-Auftrag: Entwirf drei Zustände für denselben Button: normal, gedrückt und deaktiviert. Erkläre, woran man die Zustände erkennt.

Menüs und Navigation

Menüs helfen, Inhalte zu ordnen. Eine Navigation sollte konsistent sein: Wenn „Start“ links oben steht, sollte es nicht auf jeder Seite an einer anderen Stelle auftauchen. Zu viele gleich wichtige Menüpunkte können überfordern.

Menü-Icon und Such-Icon

Icons sparen Platz, müssen aber verständlich sein. Besonders häufige Symbole können schnell erkannt werden. Wenn ein Symbol unklar sein könnte, hilft eine Textbeschriftung.

G: Ordne die drei Icons den Begriffen Menü, Suche und Startseite zu.

M: Entscheide, welche Icons zusätzlich Text brauchen könnten.

E: Untersuche, wann ein Icon allein genügt und wann Icon plus Text sicherer ist. Begründe mit der Zielgruppe Klasse 6.

Anzeigen, Rückmeldungen und Zustände

Ein Interface soll auf Aktionen reagieren. Diese Rückmeldung heißt oft Feedback. Wenn Du „Speichern“ drückst, sollte erkennbar sein, ob das Speichern funktioniert hat.

Anzeige	Beispiel	Wirkung
Erfolg	✓ Datei gespeichert	Bestätigt eine erfolgreiche Aktion.
Hinweis	ⓘ Noch 2 Aufgaben offen	Informiert, ohne zu alarmieren.
Warnung	⚠ Eingabe prüfen	Lenkt Aufmerksamkeit auf ein Problem.
Fortschritt	60 %	Zeigt, wie weit ein Vorgang oder eine Aufgabe fortgeschritten ist.

Merke: Farbe allein sollte nicht die einzige Information tragen. Ein Symbol oder Text hilft zusätzlich.

Lesbarkeit

Lesbarkeit bedeutet: Inhalte lassen sich ohne unnötige Anstrengung erkennen und verstehen. Wichtige Faktoren sind ausreichende Schriftgröße, gute Kontraste, passende Zeilenlänge, genügend Abstand und eine klare Schrift.

Kontrast

Kontrast ist der sichtbare Unterschied zwischen Vordergrund und Hintergrund. Dunkler Text auf hellem Hintergrund oder heller Text auf dunklem Hintergrund kann gut lesbar sein, wenn der Unterschied deutlich genug ist. Nach den WCAG-Anforderungen gilt für normalen Text als verbreiteter Mindestwert ein Kontrastverhältnis von 4,5 : 1; bei großem Text reichen unter bestimmten Bedingungen 3 : 1. Für Klasse 6 musst Du das Verhältnis nicht berechnen, aber Du sollst Kontrast bewusst prüfen.

Video laden

YouTube

YouTube sammelt möglicherweise persönliche Daten. Datenschutzrichtlinie

Fortfahren Ausblenden

Lesbarkeits-Test

Lies beide Varianten laut:

Variante A	Variante B
Deine Hausaufgabe ist gespeichert.	Deine Hausaufgabe ist gespeichert.

G: Welche Variante ist leichter zu lesen?

M: Nenne mindestens zwei Unterschiede.

E: Verändere Variante A so, dass sie besser lesbar wird, ohne den Textinhalt zu ändern.

Visuelle Hierarchie

Visuelle Hierarchie bedeutet: Das Design zeigt, was wichtig, was zweitwichtig und was ergänzend ist. Größe, Schriftstärke, Kontrast, Position und Abstand helfen dabei.

Beispiel einer klaren Reihenfolge:

Dein Lernplan

Heute: Mathematik und Deutsch

Mathematik – Brüche üben

Deutsch – Lesetext bearbeiten

Aufgabe starten

Letzte Aktualisierung: heute

Der Blick soll zuerst zur Überschrift, dann zu den heutigen Aufgaben und schließlich zur Hauptaktion geführt werden. Kleine Zusatzinformationen dürfen weniger auffällig sein.

Hierarchie untersuchen

G: Zeige mit Pfeilen auf einem Screenshot, was Du zuerst, zweitens und drittens ansiehst.

M: Ändere in einer Kopie nur Größe, Fettschrift und Abstände, um die Reihenfolge des Blicks zu verändern.

E: Erstelle zwei Varianten mit unterschiedlicher Hierarchie und teste mit drei Personen, welche schneller verstanden wird.

Ästhetik: schön und passend

Ästhetik meint nicht einfach „viel Farbe“ oder „viele Effekte“. Eine Oberfläche wirkt oft angenehm, wenn sie geordnet, konsistent, ausgewogen und passend zur Aufgabe ist. Wiederkehrende Formen, wenige gut abgestimmte Farben, gleiche Abstände und eine klare Ausrichtung schaffen Ruhe.

Ein dunkler oder heller Modus kann ästhetisch unterschiedlich wirken. Entscheidend ist, dass Inhalte weiterhin gut erkennbar bleiben.

Fünf Gestaltungsregeln für Klasse 6

1. Ausrichtung: Kanten und Texte sollten sichtbar zueinander passen.
2. Abstand: Zusammengehörige Dinge stehen näher beieinander als getrennte Bereiche.
3. Konsistenz: Gleiche Funktionen sehen möglichst gleich aus.
4. Kontrast: Wichtiges hebt sich erkennbar ab.
5. Reduktion: Zeige nur so viele Elemente gleichzeitig, wie für die Aufgabe nötig sind.

Von der Idee zum Wireframe

Ein Wireframe ist eine grobe Layoutskizze. Zuerst planst Du die Anordnung, erst später kommen Details wie Farben, Icons und Feinschliff. So kannst Du schneller Varianten ausprobieren.

Wireframe für unsere Klassen-App

☰ Klassen-App ⌕

Hallo!

Was möchtest Du heute tun?

📚 Aufgaben

✓ Erledigt

Anzeige: 2 Aufgaben offen

Aufgaben öffnen

G-Version: Baue Überschrift, zwei Bereiche, eine Anzeige und einen Hauptbutton nach.

M-Version: Ergänze ein Menü, passende Icons und ein zweites Bildschirmbild für „Aufgaben“.

E-Version: Ergänze Zustände für leer, geladen und Fehler. Plane außerdem, wie die Oberfläche auf einem schmalen Smartphone aussehen könnte.

Video laden

YouTube

YouTube sammelt möglicherweise persönliche Daten. Datenschutzrichtlinie

Fortfahren Ausblenden

Prototyp erstellen

Ein Prototyp ist eine testbare Vorstufe. Er muss noch keine echte App sein. Du kannst ihn auf Papier, in einer Präsentationssoftware oder in einem Interface-Werkzeug bauen. Wichtig ist, dass andere nachvollziehen können, wie man von einer Ansicht zur nächsten gelangt.

Video laden

YouTube

YouTube sammelt möglicherweise persönliche Daten. Datenschutzrichtlinie

Fortfahren Ausblenden

Mini-Projekt: Lernplaner

Entwickle einen einfachen Lernplaner mit drei Ansichten: Start, Aufgaben und Erfolg. Verwende dieselbe Navigationslogik und denselben Stil auf allen Ansichten.

G	M	E
Drei übersichtliche Ansichten, klare Texte, mindestens zwei Buttons.	Zusätzlich Menü oder Navigation, Icons, Statusanzeige und bewusste Hierarchie.	Zusätzlich begründete Kontrastentscheidung, mehrere Zustände, Nutzertest und gezielte Überarbeitung.

Testen statt raten

Ein Interface wird besser, wenn echte Personen es ausprobieren. Gib einer Testperson eine konkrete Aufgabe, zum Beispiel: „Finde Deine Deutsch-Hausaufgabe und markiere sie als erledigt.“ Beobachte, ohne sofort zu helfen. Notiere, wo die Person stockt oder etwas falsch versteht.

Drei Prüffragen

1. Lesbarkeit: Kann die Testperson Texte, Symbole und Zustände gut erkennen?
2. Hierarchie: Erkennt sie schnell, was wichtig ist und wo sie beginnen soll?
3. Ästhetik: Wirkt die Oberfläche geordnet und zusammengehörig, ohne vom Ziel abzulenken?

Verbesserungsrunde

Nach dem Test veränderst Du nicht alles gleichzeitig. Wähle zuerst die Stelle, die die Bedienung am stärksten behindert. Dann testest Du erneut. So entsteht ein einfacher Gestaltungszyklus: Planen → Gestalten → Testen → Verbessern.

Interaktive Layoutaufgaben

Layout-Labor G

Ordne jedem Gestaltungsmittel die passende Wirkung zu.

Gestaltungsmittel	Wirkung
große Überschrift	wichtigste Information zuerst
großer Abstand	Bereiche voneinander trennen
gleiche Buttonform	Konsistenz herstellen
starker Kontrast	Aufmerksamkeit lenken

Layout-Labor M

Ordne jedem Element den sinnvollsten Platz in einer einfachen Lern-App zu.

Element	Platz im Layout
Seitentitel	oben im Inhaltsbereich
Hauptnavigation	an einer konstanten gut erreichbaren Stelle
Hauptbutton	nahe bei der Aufgabe, die er abschließt
Statusanzeige	nahe bei dem Inhalt, zu dem sie gehört
Hilfetext	in der Nähe eines erklärungsbedürftigen Elements

Layout-Labor E

Ordne dem Problem die passende Verbesserung zu.

Problem	Verbesserung
alle Elemente gleich auffällig	Hierarchie mit Größe und Kontrast erzeugen
hellgrauer Text auf weiß	Textkontrast erhöhen
wechselnde Buttonformen	Komponenten vereinheitlichen
Icon unverständlich	klare Textbeschriftung ergänzen
zu viele Inhalte gleichzeitig	Inhalte gruppieren oder schrittweise zeigen

Interaktive Aufgaben

Quiz: Teste Dein Wissen

Wozu dient ein Button in einer Benutzeroberfläche? (Eine Aktion auslösen) (!Nur Dekoration zeigen) (!Den Bildschirm ausschalten) (!Eine Datei automatisch drucken)

Was beschreibt visuelle Hierarchie? (Die erkennbare Rangordnung von Informationen) (!Die Reihenfolge der Computerkabel) (!Die Anzahl der installierten Apps) (!Die Geschwindigkeit eines Prozessors)

Welche Gestaltung verbessert meistens die Lesbarkeit? (Deutlicher Kontrast zwischen Text und Hintergrund) (!Sehr heller Text auf weißem Hintergrund) (!Möglichst viele Schriftarten gleichzeitig) (!Sehr kleine Schrift ohne Abstand)

Wozu dient ein Menü? (Es bündelt mehrere Auswahlmöglichkeiten) (!Es ersetzt jede Überschrift) (!Es macht jeden Text automatisch größer) (!Es speichert Passwörter sichtbar ab)

Was ist ein Icon? (Ein Bildsymbol für eine Funktion oder Bedeutung) (!Eine besonders lange Textzeile) (!Ein unsichtbarer Bereich) (!Eine Tonaufnahme ohne Bild)

Warum ist Feedback nach einer Aktion wichtig? (Es zeigt, was nach der Aktion passiert ist) (!Es versteckt alle Buttons) (!Es ersetzt die Navigation) (!Es macht Farben zufällig)

Was bedeutet Konsistenz im Interface? (Gleiche Funktionen werden ähnlich gestaltet) (!Jede Seite sieht völlig anders aus) (!Alle Elemente blinken gleichzeitig) (!Alle Texte stehen an zufälligen Stellen)

Was ist ein Wireframe? (Eine grobe Skizze für Aufbau und Anordnung) (!Ein fertiger Programmcode) (!Eine Liste mit Passwörtern) (!Ein besonders großes Icon)

Welche Aussage zu Ästhetik passt am besten? (Eine Oberfläche soll geordnet und zur Aufgabe passend wirken) (!Eine Oberfläche braucht möglichst viele Effekte) (!Schönheit ist wichtiger als Bedienbarkeit) (!Jede Fläche muss eine andere Farbe haben)

Was ist beim Nutzertest besonders sinnvoll? (Eine konkrete Aufgabe geben und die Bedienung beobachten) (!Jede Handlung sofort vorsagen) (!Nur die Lieblingsfarbe abfragen) (!Das Interface während des Tests ständig erklären)

Memory

Button	Aktion auslösen
Menü	Auswahl bündeln
Icon	Bildsymbol
Kontrast	Helligkeitsunterschied
Hierarchie	Rangordnung
Feedback	Rückmeldung
Weißraum	Freiraum
Wireframe	Layoutskizze

Drag and Drop

Ordne die richtigen Begriffe zu.	Thema
Hauptbutton	wichtigste Aktion
Navigationsmenü	Wechsel zwischen Bereichen
Statusanzeige	Rückmeldung über einen Zustand
Überschrift	Orientierung im Inhalt
Icon	visuelles Symbol
Abstand	Trennung von Gruppen

Kreuzworträtsel

Button	Welches Bedienelement löst durch Anklicken oder Antippen eine Aktion aus?
Menue	Wie heißt eine gebündelte Auswahl von Befehlen oder Bereichen?
Kontrast	Wie heißt der sichtbare Unterschied zwischen Vordergrund und Hintergrund?
Hierarchie	Wie nennt man die erkennbare Rangordnung von Informationen?
Feedback	Wie heißt die Rückmeldung eines Systems nach einer Aktion?
Wireframe	Wie heißt eine grobe Skizze für Aufbau und Anordnung einer Oberfläche?

Lückentext

Vervollständige den Text.

Eine grafische Benutzeroberfläche wird häufig mit abgekürzt. Ein anklickbares Bedienelement für eine Aktion heißt . Eine gebündelte Auswahl von Funktionen nennt man . Ein Bildsymbol in einer Oberfläche heißt . Eine gut erkennbare Rangordnung von Informationen nennt man visuelle . Der Unterschied zwischen Text und Hintergrund wird als wahrgenommen. Eine Rückmeldung des Systems nach einer Aktion heißt . Eine grobe Skizze für den Aufbau einer Oberfläche nennt man . Wiederkehrende gleichartige Gestaltung sorgt für . Nach einem Nutzertest sollte ein Entwurf gezielt werden.

Offene Aufgaben

Leicht – G

1. Interface-Safari: Fotografiere oder skizziere drei unterschiedliche Benutzeroberflächen aus Deinem Alltag und markiere jeweils Button, Menü, Icon und Anzeige.
2. Button-Sammlung: Entwirf sechs Buttons für eine Lern-App und formuliere kurze, klare Beschriftungen.
3. Menü auf Papier: Zeichne ein einfaches Menü mit vier Bereichen und zeige, welcher Bereich gerade aktiv ist.
4. Lesbarkeit verbessern: Überarbeite einen absichtlich schlecht lesbaren Textblock durch Schriftgröße, Kontrast und Abstand.

Standard – M

1. Wireframe-Challenge: Zeichne zwei unterschiedliche Wireframes für die Startseite einer Klassen-App und begründe, welches übersichtlicher ist.
2. Icon-Test: Erfinde fünf Icons, lasse Mitschülerinnen und Mitschüler ihre Bedeutung erraten und verbessere unklare Symbole.
3. Hierarchie-Experiment: Gestalte denselben Inhalt zweimal mit unterschiedlicher Größe, Fettschrift und Anordnung und untersuche, wohin der Blick zuerst geht.
4. Mini-Prototyp: Erstelle drei miteinander verbundene Ansichten einer Lern-App mit Navigation, Hauptbutton und Statusanzeige.

Schwer – E

1. Nutzertest: Formuliere zwei Testaufgaben, beobachte mindestens drei Personen beim Bedienen Deines Prototyps und dokumentiere typische Schwierigkeiten.
2. Barrierearme Oberfläche: Prüfe Textkontraste, Beschriftungen, Icon-Verständlichkeit und die Nutzung von Farbe und entwickle eine verbesserte Version.
3. Designsystem im Kleinen: Lege Regeln für Farben, Abstände, Buttonformen, Überschriften und Icons fest und wende sie auf mindestens drei Ansichten an.
4. Vorher-Nachher-Analyse: Dokumentiere die erste und die überarbeitete Version Deines Interfaces und erkläre anhand von Lesbarkeit, Hierarchie und Ästhetik, warum die zweite Version besser funktioniert.

Lernkontrolle

1. Transfer: Fahrkartenautomat: Du sollst ein Interface für einen Fahrkartenautomaten für Kinder gestalten. Beschreibe, welche Elemente besonders groß, deutlich oder erklärt sein müssen und warum.
2. Fehleranalyse: Eine App zeigt zehn gleich große Buttons, kleine graue Schrift und keine Rückmeldung nach dem Speichern. Erkläre die drei größten Probleme und schlage konkrete Verbesserungen vor.
3. Variantenvergleich: Vergleiche zwei gedachte Startseiten: eine mit vielen Farben und gleich großen Elementen, eine mit klarer Überschrift, wenigen Farben und einer auffälligen Hauptaktion. Begründe, welche leichter bedienbar ist.
4. Nutzerperspektive: Erkläre, warum ein Icon, das für Dich verständlich ist, für eine andere Person unklar sein kann. Entwickle zwei Möglichkeiten, dieses Problem zu lösen.
5. Gestaltungsentscheidung: Du darfst nur drei Mittel verändern: Schriftgröße, Abstand und Kontrast. Zeige, wie Du damit eine visuelle Hierarchie für Überschrift, Inhalt und Hauptbutton erzeugst.
6. Prototyp verbessern: Nach einem Test finden zwei Personen den Button „Weiter“ nicht. Eine Person versteht das Menüsymbol nicht. Beschreibe eine sinnvolle Überarbeitung und wie Du prüfen würdest, ob sie erfolgreich war.

Lernnachweis

Für einen Lernnachweis zu diesem Thema ist wichtig, dass Du nicht nur eine hübsche Oberfläche zeigst, sondern Deinen Gestaltungsprozess nachvollziehbar machst.

1. Entwurf: Mindestens ein früher Wireframe oder eine Skizze.
2. Benutzeroberfläche: Ein fertiger Prototyp mit mehreren Ansichten.
3. UI-Elemente: Erkennbarer Einsatz von Buttons, Menü oder Navigation, Icons und Anzeigen.
4. Lesbarkeit: Begründete Entscheidungen zu Schrift, Kontrast und Abstand.
5. Visuelle Hierarchie: Nachvollziehbare Ordnung von wichtig, zweitwichtig und ergänzend.
6. Ästhetik: Konsistente Formen, Farben, Ausrichtungen und Abstände.
7. Nutzertest: Dokumentierte Rückmeldungen mindestens einer Testperson.
8. Überarbeitung: Sichtbare Verbesserung zwischen erster und späterer Version.
9. Reflexion: Kurze Erklärung, welche Entscheidung gut funktioniert hat und was Du noch ändern würdest.
10. Differenzierung: G zeigt eine verständliche Grundstruktur, M begründet mehrere Gestaltungsentscheidungen, E verbindet Gestaltung, Barrierefreiheit, Test und gezielte Optimierung.

Verknüpfte Lernbereiche

BK6 - Interface gestalten Grafische Benutzeroberfläche Benutzerschnittstelle Interfacedesign Software-Ergonomie Usability Barrierefreiheit Typografie Farbkontrast Navigation Prototyp