Ein Tooltip gibt einen kurzen Hinweis. Ein Popover kann mehr Text, Optionen oder Buttons enthalten.
Verwenden Sie ein Tooltip, wenn wenige Wörter ausreichen. Verwenden Sie ein Popover, wenn eine Person mehr lesen oder tun muss, ohne die Seite zu verlassen. Leitfaden öffnenVergleiche UI-Muster, die man leicht verwechselt
Zwei Muster können ähnlich aussehen, aber unterschiedliche Aufgaben erfüllen. Verwenden Sie diese kurzen Regeln, um das richtige auszuwählen.
Ein modaler Dialog stoppt die Seite, bis die Aufgabe erledigt ist. Ein Popover bleibt neben seinem Button und lässt die Seite weiterlaufen.
Verwenden Sie ein Modal für eine Aufgabe, die zuerst abgeschlossen werden muss. Verwenden Sie ein Popover für zusätzliche Details oder eine kleine Aktion. Leitfaden öffnen Dropdown & Kontextmenü — LernpaketDropdown & Context Menu — Learning Bundle vs. AuswählenSelect vs. Bearbeitbare KombinationsboxEditable Combobox
Ein Dropdown-Menü führt Aktionen aus. Ein Select wählt aus einer festen Liste. Eine Combobox erlaubt dir auch, zu tippen oder zu suchen.
Verwenden Sie ein Menü für Aktionen. Verwenden Sie ein Auswahlfeld für eine kurze feste Liste. Verwenden Sie ein Kombinationsfeld für eine lange oder durchsuchbare Liste. Leitfaden öffnenRegisterkarten wechseln zwischen Inhaltsbereichen. Eine segmentierte Steuerung ändert einen kleinen Modus, Filter oder Wert in derselben Ansicht.
Verwenden Sie Registerkarten für separate Inhaltsabschnitte. Verwenden Sie eine segmentierte Steuerung für einige kurze Auswahlmöglichkeiten, die denselben Inhalt ändern. Leitfaden öffnenEin Akkordeon öffnet Bereiche auf einer Seite und lässt oft mehrere offen. Tabs zeigen immer nur einen Bereich im selben Fenster.
Verwenden Sie ein Akkordeon für Fragen oder Abschnitte, die die Leute gemeinsam lesen könnten. Verwenden Sie Tabs für wenige separate Ansichten, wenn nur eine zu einem Zeitpunkt relevant ist. Leitfaden öffnenEin Toast ist eine kurze Nachricht, die die Aufgabe nicht stoppt. Ein Alert bleibt oder unterbricht, weil er wichtig ist.
Verwenden Sie einen Toast, um eine abgeschlossene Aktion zu bestätigen. Verwenden Sie einen Alarm für einen Fehler, eine Gefahr oder eine Entscheidung, die sofort Aufmerksamkeit erfordert. Leitfaden öffnenEin Tooltip gibt ein kurzes Label oder einen Hinweis. Eine Hover-Card zeigt eine reichhaltigere Vorschau einer Person, eines Elements oder Links.
Verwenden Sie ein Tooltip, wenn wenige Wörter ausreichen. Verwenden Sie eine Hover-Karte, wenn eine Vorschau ersparen kann, eine andere Seite zu besuchen. Es muss auch über Tastatur und Touch funktionieren. Leitfaden öffnen macOS Context MenumacOS Context Menu vs. Dropdown & Kontextmenü — LernpaketDropdown & Context Menu — Learning Bundle
Ein Kontextmenü zeigt Aktionen für das Element, das du anklickst oder drückst. Ein Dropdown öffnet sich von einem sichtbaren Button mit einem klaren Zweck.
Verwenden Sie ein Kontextmenü als zusätzlichen Shortcut, nicht als einzigen Weg. Verwenden Sie ein Dropdown, wenn die Benutzer sehen müssen, wo das Menü geöffnet wird. Leitfaden öffnenEin Carousel zeigt einzelne Slides mit Bedienelementen. Ein Marquee hält eine Reihe von Inhalten in Bewegung.
Verwenden Sie ein Karussell, wenn jedes Element Zeit und Steuerung benötigt. Verwenden Sie ein Laufband nur für unwichtige Dekoration, die anhalten oder stoppen kann, wenn es verlangt wird. Leitfaden öffnenEine Lightbox ist ein Modal, das für Bilder oder Video gemacht ist. Ein normales Modal enthält eine Auswahl, ein Formular oder eine kurze Aufgabe.
Verwenden Sie eine Lightbox, um Bilder oder Videos zu vergrößern. Verwenden Sie ein Modal, wenn die Hauptaufgabe das Handeln oder Entscheiden ist. Leitfaden öffnenMauerwerk packt Karten unterschiedlicher Höhe in Spalten. Ein Bento-Raster verwendet geplante Kartengrößen, um das Wichtigste zu zeigen.
Verwenden Sie Masonry für viele separate Elemente mit unterschiedlichen Höhen. Verwenden Sie ein Bento-Grid für ein kleines Set, dessen Größe Wichtigkeit zeigt. Leitfaden öffnenEine Sidebar bleibt im Seitenlayout. Ein Drawer gleitet für kurze Zeit ein und kann die Seite verdecken oder verdrängen.
Verwenden Sie eine Seitenleiste für Werkzeuge oder Links, die oft genutzt werden, wenn Platz vorhanden ist. Verwenden Sie eine Schublade für weniger häufige Aufgaben oder kleine Bildschirme und machen Sie sie leicht schließend. Leitfaden öffnenEin Drei-Zeilen-Button öffnet die Navigation. Ein Drei-Punkte-Button öffnet weitere Aktionen für ein Element in der Nähe.
Verwenden Sie drei Linien für versteckte Navigation, hauptsächlich auf kleinen Bildschirmen. Verwenden Sie drei Punkte, wenn zusätzliche Elementaktionen nicht passen, und benennen Sie die Schaltfläche „Weitere Aktionen“. Leitfaden öffnenDie Vereinfachung folgt einer festgelegten Zeitkurve. Eine Feder bewegt sich wie eine echte Feder und stoppt von selbst.
Verwenden Sie Easing für Überblendungen, Farbänderungen und zeitlich gesteuerte Schritte. Verwenden Sie eine Feder für Objekte, die sich bewegen oder einer Ziehung folgen. Leitfaden öffnenEin Stepper ändert eine Zahl in festen Schritten. Ein Slider wählt einen Ort entlang eines Bereichs.
Verwenden Sie einen Stepper für kleine, genaue Änderungen. Verwenden Sie einen Schieberegler, wenn ungefähre Position wichtiger ist als das Eingeben einer genauen Zahl. Zeigen Sie immer den Wert an und unterstützen Sie die Tastatur. Leitfaden öffnenEin Sheet gehört zu einem Fenster und beinhaltet eine kurze Aufgabe. Ein Alert zeigt eine kurze Nachricht oder Auswahl, die sofort Aufmerksamkeit braucht.
Verwenden Sie ein Blatt für Einstellungen, das Speichern oder ein kurzes Formular, das an ein Dokument gebunden ist. Verwenden Sie einen Alarm für eine Warnung, einen Fehler oder eine einmalige Prüfung. Leitfaden öffnen Leer-, Fehler- & Erfolgszustand — LernpaketEmpty, Error & Success State — Learning Bundle vs. SkelettSkeleton
Ein Leerzustand bedeutet: Hier ist nichts. Ein Skeleton bedeutet: Der Inhalt lädt noch, aber seine Form ist schon bekannt.
Verwenden Sie einen leeren Zustand, um zu erklären, warum nichts vorhanden ist und was als Nächstes zu tun ist. Verwenden Sie ein Skelett für eine kurze Ladezeit, wenn Sie das Layout kennen. Leitfaden öffnenEine Toolbar legt gängige Aktionen in ein Fenster. Die Menüleiste behält die gesamten Befehle der App am oberen Bildschirmrand.
Legen Sie gängige Dokument- oder Auswahlaktionen in der Symbolleiste ab. Behalten Sie alle Befehle, Tastenkombinationen und weniger gängige Aktionen in der Menüleiste. Leitfaden öffnen