BK6 - Interface gestalten
BK6 - Interface gestalten
BK6 - Interface gestalten
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.
_example.PNG)
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.
- Button: Eine anklickbare oder antippbare Fläche, die eine Aktion auslöst.
- Menü: Eine geordnete Auswahl von Befehlen oder Bereichen.
- Icon: Ein Bildsymbol, das eine Funktion oder Bedeutung schnell erkennbar machen kann.
- Anzeige: Eine sichtbare Rückmeldung, zum Beispiel „Gespeichert“, „3 Aufgaben offen“ oder ein Fortschrittsbalken.
- 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.
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:
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
- Ausrichtung: Kanten und Texte sollten sichtbar zueinander passen.
- Abstand: Zusammengehörige Dinge stehen näher beieinander als getrennte Bereiche.
- Konsistenz: Gleiche Funktionen sehen möglichst gleich aus.
- Kontrast: Wichtiges hebt sich erkennbar ab.
- 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
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.
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.
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
- Lesbarkeit: Kann die Testperson Texte, Symbole und Zustände gut erkennen?
- Hierarchie: Erkennt sie schnell, was wichtig ist und wo sie beginnen soll?
- Ä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? |
LearningApps
Lückentext
Offene Aufgaben
Leicht – G
- Interface-Safari: Fotografiere oder skizziere drei unterschiedliche Benutzeroberflächen aus Deinem Alltag und markiere jeweils Button, Menü, Icon und Anzeige.
- Button-Sammlung: Entwirf sechs Buttons für eine Lern-App und formuliere kurze, klare Beschriftungen.
- Menü auf Papier: Zeichne ein einfaches Menü mit vier Bereichen und zeige, welcher Bereich gerade aktiv ist.
- Lesbarkeit verbessern: Überarbeite einen absichtlich schlecht lesbaren Textblock durch Schriftgröße, Kontrast und Abstand.
Standard – M
- Wireframe-Challenge: Zeichne zwei unterschiedliche Wireframes für die Startseite einer Klassen-App und begründe, welches übersichtlicher ist.
- Icon-Test: Erfinde fünf Icons, lasse Mitschülerinnen und Mitschüler ihre Bedeutung erraten und verbessere unklare Symbole.
- Hierarchie-Experiment: Gestalte denselben Inhalt zweimal mit unterschiedlicher Größe, Fettschrift und Anordnung und untersuche, wohin der Blick zuerst geht.
- Mini-Prototyp: Erstelle drei miteinander verbundene Ansichten einer Lern-App mit Navigation, Hauptbutton und Statusanzeige.
Schwer – E
- Nutzertest: Formuliere zwei Testaufgaben, beobachte mindestens drei Personen beim Bedienen Deines Prototyps und dokumentiere typische Schwierigkeiten.
- Barrierearme Oberfläche: Prüfe Textkontraste, Beschriftungen, Icon-Verständlichkeit und die Nutzung von Farbe und entwickle eine verbesserte Version.
- Designsystem im Kleinen: Lege Regeln für Farben, Abstände, Buttonformen, Überschriften und Icons fest und wende sie auf mindestens drei Ansichten an.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Entwurf: Mindestens ein früher Wireframe oder eine Skizze.
- Benutzeroberfläche: Ein fertiger Prototyp mit mehreren Ansichten.
- UI-Elemente: Erkennbarer Einsatz von Buttons, Menü oder Navigation, Icons und Anzeigen.
- Lesbarkeit: Begründete Entscheidungen zu Schrift, Kontrast und Abstand.
- Visuelle Hierarchie: Nachvollziehbare Ordnung von wichtig, zweitwichtig und ergänzend.
- Ästhetik: Konsistente Formen, Farben, Ausrichtungen und Abstände.
- Nutzertest: Dokumentierte Rückmeldungen mindestens einer Testperson.
- Überarbeitung: Sichtbare Verbesserung zwischen erster und späterer Version.
- Reflexion: Kurze Erklärung, welche Entscheidung gut funktioniert hat und was Du noch ändern würdest.
- Differenzierung: G zeigt eine verständliche Grundstruktur, M begründet mehrere Gestaltungsentscheidungen, E verbindet Gestaltung, Barrierefreiheit, Test und gezielte Optimierung.
OERs zum Thema
Verknüpfte Lernbereiche