Floating Action Button

Aktualisiert: 11. Oktober 2023

Einführung

Definition des Floating Action Buttons

Ein Floating Action Button (FAB) ist ein typisches Element im Material Design von Google. Es handelt sich dabei um einen runden Button, der stets im Vordergrund einer Nutzeroberfläche schwebt und dazu dient, eine primäre Aktion anzubieten, die der Nutzer auf der Seite oder in der App durchführen kann.

Verwendungszweck und Bedeutung

Die Positionierung und die auffällige Gestaltung des FABs machen es für den Nutzer sofort erkennbar. Aufgrund dessen wird der FAB oft für die wichtigste Aktion auf der Seite verwendet, wie z.B. das Schreiben einer neuen E-Mail in einer Mail-App oder das Hinzufügen eines Eintrags in einer ToDo-Liste.

Hauptbestandteile und Anwendung

Design und Positionierung

Der FAB ist typischerweise rund und mit einem Symbol versehen, das die auszuführende Aktion repräsentiert. Er „schwebt“ über der Oberfläche der Benutzeroberfläche, meist in der unteren rechten Ecke des Bildschirms. Dadurch ist er immer erreichbar und stört nicht den normalen Informationsfluss auf der Seite.

Integration in verschiedene Plattformen

Obwohl der FAB ursprünglich ein Teil des Material Designs von Google war und immer noch ein zentrales Element des Designs von Android-Apps ist, hat er sich auch in anderen Kontexten etabliert. So findet man FABs z.B. auch in Web-Apps genau wie in nativen Apps für iOS.

Beispiele für die Anwendung

Ein klassisches Beispiel für die Nutzung eines FAB ist die Gmail-App: Der Button zum Verfassen einer neuen E-Mail ist als FAB in der unteren rechten Ecke des Bildschirms platziert. Andere Beispiele sind Google Maps, wo der FAB für das Zentrieren der Karte auf den aktuellen Standort genutzt wird, und viele Projektmanagement-Tools, in denen der FAB genutzt wird, um neue Aufgaben oder Projekte anzulegen.

Abschlussgedanken

Wichtige Aspekte bei der Verwendung eines FABs

Ein FAB sollte immer für die wichtigste Aktion auf der Seite oder in der App genutzt werden. Daher sollte man sich genau überlegen, welche Aktion diese Position verdient und sollte den FAB nicht mit Sekundärfunktionen überfrachten. Darüber hinaus sollte man darauf achten, dass das Symbol im FAB klar verständlich ist und die beabsichtigten Aktion klar repräsentiert.

FAQ

Was ist ein Floating Action Button?

Ein Floating Action Button (FAB) ist ein kreisförmiger Button, der auf einer Benutzeroberfläche “schwebt” und immer im Vordergrund sichtbar ist. Normalerweise repräsentiert es die Hauptaktion, die Benutzer auf einer Seite oder in einer Anwendung durchführen können.

Wo wird ein Floating Action Button platziert?

Ein FAB wird in der Regel in der unteren rechten Ecke des Bildschirms platziert, da er dort für Benutzer am leichtesten zugänglich ist.

Sollte jeder Bildschirm einer App einen FAB haben?

Nein, nicht unbedingt. Ein FAB sollte nur verwendet werden, wenn es eine klare Hauptaktion gibt, die der Benutzer auf einem bestimmten Bildschirm ausführen kann oder sollte.

Ist der FAB nur für Android-Apps?

Ursprünglich wurde der FAB als Teil des Material Design-Systems von Google eingeführt, das hauptsächlich bei Android verwendet wird. Heute wird das FAB-Konzept jedoch auch in anderen Kontexten eingesetzt, darunter Web-Apps und iOS-Apps.

Was sollten die Farben und Symbole eines FAB darstellen?

Die Farben und Symbole auf einem FAB sollten auffällig und leicht erkennbar sein. Das Symbol sollte die Aktion repräsentieren, die durch das Drücken des FAB ausgeführt wird.

Was passiert, wenn ein Benutzer auf den FAB klickt?

Das hängt vom spezifischen Kontext ab, in der Regel öffnet sich jedoch ein neuer Bildschirm oder ein Dialogfenster, in dem die Aktion ausgeführt werden kann, die der FAB repräsentiert.

Kann ein FAB mehrere Aktionen beinhalten?

Ein FAB sollte in der Regel nur eine einzige primäre Aktion repräsentieren. In einigen Fällen kann ein FAB jedoch eine Auswahl verschiedener Aktionen enthüllen, wenn er gedrückt wird.

Wie viele FABs sollte eine Benutzeroberfläche haben?

Normalerweise nutzt man pro Bildschirm nur einen FAB, um die Benutzer nicht zu verwirren und die Aufmerksamkeit auf die wichtigste Aktion zu lenken.

Kann ein FAB auch andere Formen als rund haben?

Ein FAB ist typischerweise rund, das heißt aber nicht, dass er nicht auch andere Formen haben kann. Das Wichtigste ist, dass er auffällig und leicht erkennbar ist und eindeutig eine bestimmte Aktion repräsentiert.

Ähnliche Artikel

Autor