Künste Design – UI Design Patterns
Karteikarten zum Thema „Künste & Design“ · 15 Karten · von atrio. Beispiele: Was ist ein UI Design Pattern? · Wann nutzt man das Hamburger-Menü?
Karten
15 KartenWas ist ein UI Design Pattern?
Rückseite
Eine wiederverwendbare Lösung für ein häufig auftretendes Designproblem in Benutzeroberflächen, die Usability und Konsistenz verbessert.
Wann nutzt man das Hamburger-Menü?
Rückseite
Bei vielen Navigationspunkten auf kleinen Viewports – es blendet Secondary-Navigation hinter einem Icon aus, spart Platz, verringert aber Entdeckbarkeit.
Was unterscheidet Tab Bar von Hamburger-Menü?
Rückseite
Tab Bar zeigt 3–5 Hauptbereiche dauerhaft sichtbar an (hohe Entdeckbarkeit), Hamburger-Menü versteckt Navigation hinter Icon (platzsparend, niedrigere Entdeckbarkeit).
Welche Funktion erfüllen Breadcrumbs?
Rückseite
Sie zeigen die hierarchische Position der aktuellen Seite und ermöglichen schnellen Sprung zu übergeordneten Ebenen – essenziell bei tiefen Informationsarchitekturen.
Was kennzeichnet das Card-Pattern?
Rückseite
Ein Container für zusammengehörige Inhalte (Bild, Text, Aktion) mit klarer visueller Abgrenzung – ideal für responsive Grid-Layouts und scannbare Listen.
Wann setzt man ein Modal (Dialog) ein?
Rückseite
Für fokussierte Aufgaben, die Nutzer-Aufmerksamkeit erfordern (Bestätigungen, Formulare, Warnhinweise) – blockiert Interaktion mit Hintergrund bis Abschluss.
Unterschied zwischen Toast und Modal?
Rückseite
Toast ist nicht-modaler, kurzzeitiger Hinweis (Erfolg, Info), verschwindet automatisch; Modal erzwingt Interaktion und blockiert UI bis Nutzerentscheidung.
Was bedeutet Progressive Disclosure?
Rückseite
Komplexe Informationen werden schrittweise offengelegt – erst Überblick, dann Details auf Anfrage – reduziert kognitive Last und verhindert Überforderung.
Wofür eignet sich ein Wizard (Stepper)?
Rückseite
Mehrschrittige Prozesse (Checkout, Onboarding) in logische Etappen gegliedert – zeigt Fortschritt, erlaubt Navigation zurück/vorwärts, validiert pro Schritt.
Wie funktioniert Pull-to-Refresh?
Rückseite
Nutzer zieht Listeninhalt nach unten über Kante hinaus – löst Datenaktualisierung aus, visueller Spinner signalisiert Ladevorgang, Standard bei mobilen Feeds.
Was ist ein Skeleton Screen?
Rückseite
Platzhalter-Layout (Graubereiche) während Daten laden – vermittelt Struktur, wirkt schneller als Spinner, reduziert wahrgenommene Wartezeit.
Welchen Zweck hat ein Empty State?
Rückseite
Zeigt bei leeren Listen/Suchergebnissen kontextuelle Anleitung (Illustration, Text, Call-to-Action) statt leerer Fläche – motiviert zur Erstinteraktion.
Was charakterisiert einen Floating Action Button (FAB)?
Rückseite
Kreisförmiger, hervorgehobener Button für primäre Aktion (z. B. Neuerstellung) – schwebt über Content, Material Design Standard, nur eine pro Screen.
Wann ist ein Accordion sinnvoll?
Rückseite
Bei langen Inhalten (FAQs, Einstellungen), die Nutzer nur teilweise benötigen – Bereiche lassen sich einzeln auf-/zuklappen, spart vertikalen Raum.
Welches Problem löst ein Carousel?
Rückseite
Präsentiert mehrere Inhalte (Bilder, Karten) auf begrenztem Raum durch horizontales Wischen – aber oft niedrige Interaktion jenseits der ersten Slide.