Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-09-15T12:13:30Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}
{{BR}}
= BK6 - Interface gestalten =

{{BR}}
= Einleitung =
Eine '''Benutzeroberfläche''' ist der Teil eines digitalen Systems, den Du siehst und bedienst. Dazu gehören zum Beispiel [[Button|Buttons]], [[Menü (Computer)|Menüs]], [[Icon|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'''.

[[Datei:Screenshot of WIkipedia Main Page for navigation Vector 2022.PNG|500px|rahmenlos|center]]

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.

{{BR}}
== 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'''.

{| class="wikitable"
! 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.
|}

{{BR}}
= 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.

[[Datei:Menu (computing) example.PNG|350px|rahmenlos|center]]

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.

{{BR}}
== 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ü (Computer)|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.

{{BR}}
= 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.

[[Datei:ButtonsAndSwitchesButtons12.png|500px|rahmenlos|center]]

{{BR}}
== Button-Werkstatt ==
Vergleiche diese selbst gebauten Beispiele:

{| class="wikitable" style="text-align:center; width:100%;"
! Rolle
! Beispiel
! Beobachtung
|-
| Hauptaktion
| <span style="display:inline-block;padding:10px 18px;background:#3366cc;color:white;border-radius:8px;font-weight:bold;">Speichern</span>
| Hoher Kontrast und klare Beschriftung lenken den Blick auf die wichtigste Aktion.
|-
| Nebenaktion
| <span style="display:inline-block;padding:10px 18px;border:2px solid #3366cc;border-radius:8px;">Zurück</span>
| Sichtbar, aber weniger dominant als die Hauptaktion.
|-
| Problematisch
| <span style="display:inline-block;padding:5px 8px;background:#eeeeee;color:#dddddd;border-radius:2px;">Weiter</span>
| 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.

{{BR}}
= 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.

[[Datei:Example of a basic interface menu.jpg|350px|rahmenlos|center]]

[[Datei:Vector 2022 Main menu hide screenshot 2023-02-23.png|500px|rahmenlos|center]]

{{BR}}
== 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.

[[Datei:Codex icon menu.svg|120px|rahmenlos|center]]
[[Datei:Codex icon search.svg|120px|rahmenlos|center]]
[[Datei:Codex icon home.svg|120px|rahmenlos|center]]

'''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.

{{BR}}
= 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.

{| class="wikitable" style="width:100%;"
! Anzeige
! Beispiel
! Wirkung
|-
| Erfolg
| <div style="padding:10px;border:2px solid #14866d;border-radius:8px;">✓ Datei gespeichert</div>
| Bestätigt eine erfolgreiche Aktion.
|-
| Hinweis
| <div style="padding:10px;border:2px solid #3366cc;border-radius:8px;">ⓘ Noch 2 Aufgaben offen</div>
| Informiert, ohne zu alarmieren.
|-
| Warnung
| <div style="padding:10px;border:2px solid #b35c00;border-radius:8px;">⚠ Eingabe prüfen</div>
| Lenkt Aufmerksamkeit auf ein Problem.
|-
| Fortschritt
| <div style="border:1px solid #555;padding:3px;"><div style="width:60%;background:#777;color:white;text-align:center;">60 %</div></div>
| 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.

{{BR}}
= 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.

[[Datei:Screenshot of Vector 2022 search bar.png|450px|rahmenlos|center]]

{{BR}}
== 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.

{{#ev:youtube| https://www.youtube.com/watch?v=2wDngtKN0mQ |500|center}}

{{BR}}
== Lesbarkeits-Test ==
Lies beide Varianten laut:

{| class="wikitable" style="width:100%;"
! Variante A
! Variante B
|-
| <div style="padding:14px;background:#ffffff;color:#e2e2e2;font-size:12px;">Deine Hausaufgabe ist gespeichert.</div>
| <div style="padding:14px;background:#ffffff;color:#222222;font-size:18px;line-height:1.5;">Deine Hausaufgabe ist gespeichert.</div>
|}

'''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.

{{BR}}
= 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:

<div style="border:1px solid #999;padding:16px;max-width:560px;margin:auto;">
<div style="font-size:28px;font-weight:bold;">Dein Lernplan</div>
<div style="font-size:18px;margin-top:8px;">Heute: Mathematik und Deutsch</div>
<div style="margin-top:16px;padding:12px;border:1px solid #bbb;border-radius:8px;">Mathematik – Brüche üben</div>
<div style="margin-top:10px;padding:12px;border:1px solid #bbb;border-radius:8px;">Deutsch – Lesetext bearbeiten</div>
<div style="margin-top:18px;"><span style="display:inline-block;padding:10px 18px;background:#3366cc;color:white;border-radius:8px;font-weight:bold;">Aufgabe starten</span></div>
<div style="margin-top:10px;font-size:13px;">Letzte Aktualisierung: heute</div>
</div>

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.

{{BR}}
== 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.

{{BR}}
= Ä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.

[[Datei:Screenshot of Vector 2022 appearance menu with dark mode enabled.png|350px|rahmenlos|center]]

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

{{BR}}
== 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.

{{BR}}
= 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.

{{BR}}
== Wireframe für unsere Klassen-App ==
<div style="border:3px solid #555;padding:12px;max-width:560px;margin:auto;background:#fafafa;">
<div style="border-bottom:2px solid #aaa;padding:8px;font-weight:bold;">☰ Klassen-App <span style="float:right;">⌕</span></div>
<div style="padding:14px 8px;">
<div style="font-size:24px;font-weight:bold;">Hallo!</div>
<div style="margin-top:8px;">Was möchtest Du heute tun?</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;">
<div style="border:1px solid #aaa;padding:16px;text-align:center;">📚 Aufgaben</div>
<div style="border:1px solid #aaa;padding:16px;text-align:center;">✓ Erledigt</div>
</div>
<div style="margin-top:16px;padding:10px;border:1px dashed #777;">Anzeige: 2 Aufgaben offen</div>
<div style="margin-top:16px;text-align:center;"><span style="display:inline-block;padding:10px 18px;background:#3366cc;color:white;border-radius:8px;font-weight:bold;">Aufgaben öffnen</span></div>
</div>
</div>

'''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.

{{#ev:youtube| https://www.youtube.com/watch?v=FTFaQWZBqQ8 |500|center}}

{{BR}}
= 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.

{{#ev:youtube| https://www.youtube.com/watch?v=ezldKx-jPag |500|center}}

{{BR}}
== Mini-Projekt: Lernplaner ==
Entwickle einen einfachen Lernplaner mit drei Ansichten: '''Start''', '''Aufgaben''' und '''Erfolg'''. Verwende dieselbe Navigationslogik und denselben Stil auf allen Ansichten.

{| class="wikitable"
! 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.
|}

{{BR}}
= 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.

{{BR}}
== 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?

{{BR}}
== 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'''.

{{BR}}
= Interaktive Layoutaufgaben =

{{BR}}
== Layout-Labor G ==
Ordne jedem Gestaltungsmittel die passende Wirkung zu.

<div class="lueckentext-quiz">

{| class="wikitable"
! Gestaltungsmittel
! Wirkung
|-
| '''große Überschrift'''
| wichtigste Information zuerst
|-
| '''großer Abstand'''
| Bereiche voneinander trennen
|-
| '''gleiche Buttonform'''
| Konsistenz herstellen
|-
| '''starker Kontrast'''
| Aufmerksamkeit lenken
|}
{{E}}
</div>

{{BR}}
== Layout-Labor M ==
Ordne jedem Element den sinnvollsten Platz in einer einfachen Lern-App zu.

<div class="lueckentext-quiz">

{| class="wikitable"
! 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
|}
{{E}}
</div>

{{BR}}
== Layout-Labor E ==
Ordne dem Problem die passende Verbesserung zu.

<div class="lueckentext-quiz">

{| class="wikitable"
! 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
|}
{{E}}
</div>

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==
{{MC}}

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

{{E}}
<br>

{{MC}}

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

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

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

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{MC}}

'''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)

{{E}}
<br>

{{BR}}
== Memory ==
<div class="memo-quiz">
{|
|-
| Button || Aktion auslösen
|-
| Menü || Auswahl bündeln
|-
| Icon || Bildsymbol
|-
| Kontrast || Helligkeitsunterschied
|-
| Hierarchie || Rangordnung
|-
| Feedback || Rückmeldung
|-
| Weißraum || Freiraum
|-
| Wireframe || Layoutskizze
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==
<div class="lueckentext-quiz">

{| class="wikitable"
! 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

|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==
<div class="kreuzwort-quiz">
{|
|-
| 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?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==
<iframe> https://learningapps.org/index.php?s=BK6+-+Interface+gestalten </iframe>

{{BR}}
== Lückentext ==
<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Eine grafische Benutzeroberfläche wird häufig mit { GUI } abgekürzt. Ein anklickbares Bedienelement für eine Aktion heißt { Button }. Eine gebündelte Auswahl von Funktionen nennt man { Menü }. Ein Bildsymbol in einer Oberfläche heißt { Icon }. Eine gut erkennbare Rangordnung von Informationen nennt man visuelle { Hierarchie }. Der Unterschied zwischen Text und Hintergrund wird als { Kontrast } wahrgenommen. Eine Rückmeldung des Systems nach einer Aktion heißt { Feedback }. Eine grobe Skizze für den Aufbau einer Oberfläche nennt man { Wireframe }. Wiederkehrende gleichartige Gestaltung sorgt für { Konsistenz }. Nach einem Nutzertest sollte ein Entwurf gezielt { verbessert } werden.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== 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.

{{BR}}
=== 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.

{{BR}}
=== 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.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= 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.

<br>
<br>

{{BR}}
= 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.

<br>
<br>

{{BR}}
= OERs zum Thema =
<iframe> https://de.m.wikipedia.org/wiki/Grafische_Benutzeroberfläche </iframe>

<br>

{{BR}}
= Verknüpfte Lernbereiche =
{| align=center
{{:D-Tab}}
'''[[BK6 - Interface gestalten]]'''
# [[Grafische Benutzeroberfläche]]
# [[Benutzerschnittstelle]]
# [[Interfacedesign]]
# [[Software-Ergonomie]]
# [[Usability]]
# [[Barrierefreiheit]]
# [[Typografie]]
# [[Farbkontrast]]
# [[Navigation]]
# [[Prototyp]]
|}

[[Kategorie:Informatik]]
[[Kategorie:Medienbildung]]
[[Kategorie:Klasse 6]]
[[Kategorie:Benutzeroberfläche]]
[[Kategorie:Interfacedesign]]
[[Kategorie:UI Design]]
[[Kategorie:Usability]]
[[Kategorie:Barrierefreiheit]]
[[Kategorie:BK6]]

{{BR}}
= aiMOOC-Projekte =
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]
{{MT}}

BK6 - Interface gestalten - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt