Für jeden Handwerker ist die Beherrschung seiner Werkzeuge unerlässlich.
Ein Maler muss die verschiedenen Arten von Farben kennen und wissen, was sie bewirken.
Ein Zimmermann muss den Unterschied zwischen einem Hammer und einem Schlägel kennen und wissen, wann er beide einsetzen muss.
Und ein Komponist kann unmöglich ein Lied schreiben, wenn er die Noten nicht kennt.
So ist es auch bei den Designern von mobilen Anwendungen.
Die Werkzeuge ihrer Wahl sind die verschiedenen UI-Komponenten, die es ihnen ermöglichen, außergewöhnliche mobile Anwendungen zu erstellen, wenn sie sorgfältig zusammengesetzt werden.
Hier sind 17 dieser Elemente, die Sie verwenden werden.
Table of Contents
Mit Eingabesteuerungskomponenten können Sie Informationen eingeben oder Ihre App anweisen, etwas zu tun.
Ohne sie haben Sie meist eine statische App, die nichts tut! Hier sind einige der wichtigsten Elemente, die Sie verwenden werden.
Schaltflächen sind Elemente, die beim Antippen eine Aktion ausführen, z. B. das Absenden eines Formulars oder das Schließen eines Fensters.
Sie sind oft rechteckig mit abgerundeten Ecken. Die Beschriftung kann entweder ein Bild oder ein Text sein, der gut lesbar und klar formuliert sein sollte.
Quelle: Linda Wilson | Medium
Schaltflächen haben in der Regel helle Farben, die das Auge anziehen, z. B. Rot und Gelb. Der Grund dafür ist, dass die meisten Schaltflächen sehr wichtige Elemente sind und daher jederzeit auffallen sollten.
Sie können auch dafür sorgen, dass Schaltflächen auf Benutzereingaben reagieren, indem sie zum Beispiel die Farbe ändern, wenn Sie auf sie tippen. Dies ist eine gute Praxis für die Benutzerfreundlichkeit, da Ihre App dadurch reaktionsfähiger wird.
Textfelder sind UI-Elemente, in die man Wörter eingeben kann. Sie sind oft Teil eines Formulars.
Quelle: Sketch App Sources
Eine gute Praxis für Textfelder ist es, Indikatoren zu haben, die ihren Status mitteilen. Meistens geschieht dies mit farbigen Umrandungen oder kleinen Symbolen.
Ein rotes Textfeld kann z. B. anzeigen, dass Sie etwas Falsches eingegeben haben, während ein ausgegrauter Rahmen bedeutet, dass das Textfeld inaktiv ist.
Es ist auch wichtig, die Größe des Textfelds an die geschätzte Eingabelänge anzupassen. Dies verhindert ein unangenehmes Beschneiden.
Eine Dropdown-Liste ist ein Element, das eine Liste von Optionen anzeigt, wenn Sie es antippen. Sie können nur ein Element aus dieser Liste auswählen, das dann als Standard angezeigt wird.
Quelle: Sketch App Sources
Dropdown-Listen sind oft Teil eines Formulars (auf das wir später in diesem Artikel eingehen werden). Sie sind nützlich, um lange und variable Listen von Elementen zu präsentieren, ohne zu viel Platz zu beanspruchen.
Nehmen wir zum Beispiel an, Sie möchten, dass die Benutzer zwischen den Mitarbeitern Ihres Unternehmens wählen können. Ein Dropdown ist die beste Lösung, da sich die Auswahlmöglichkeiten (Mitarbeiter) im Laufe der Zeit ändern können.
Wie Textfelder und Schaltflächen können auch Dropdown-Listen reaktionsfähig sein, d. h., sie können die Farbe des Rahmens ändern, wenn Sie darauf tippen.
Wie bei einer Dropdown-Liste können Sie auch bei einer Optionsschaltfläche eine Option aus mehreren Möglichkeiten auswählen. In diesem Fall sind jedoch alle Elemente bereits vorgegeben. Ungültige Auswahlmöglichkeiten werden ausgegraut.
Quelle: Material.io
Mit Optionsfeldern können Sie eine lange, aber feste Liste von Elementen präsentieren, von denen Sie sicher sind, dass sie sich in Zukunft nicht ändern werden.
Wochentage oder Monate eines Jahres sind ein gutes Beispiel. Sie sind auch beliebte Elemente bei der Konfiguration von Einstellungen in Ihrer App.
Ein Kontrollkästchen ist einem Optionsfeld insofern ähnlich, als es eine Liste fester Optionen enthält, aus denen Sie wählen können. Der große Unterschied besteht jedoch darin, dass Sie mehr als ein Element auf einmal auswählen können.
Quelle: Material.io
Kontrollkästchen sind nützlich für Fragen, die mehr als eine Eingabe zulassen. In einer Gesundheits-App können die Nutzer zum Beispiel aufgefordert werden, alle auf sie zutreffenden Symptome anzukreuzen.
Dieses Element wird häufig in Form einer vertikalen Liste dargestellt, kann aber auch in mehreren Spalten angeordnet werden. Dies ist besonders nützlich, wenn Sie Listen miteinander vergleichen wollen.
Ein Kippschalter ist im Grunde ein Ein-/Aus-Schalter, der es dem Benutzer ermöglicht, eine Variable zu setzen, indem er zwischen zwei Zuständen wählt.
Quelle: UX-Bewegung
Ein Kippschalter ist immer dann ideal, wenn der Benutzer etwas in Ihrer Anwendung aktivieren oder deaktivieren soll. Es ist daher nicht verwunderlich, dass dieses Element meist in den Einstellungen Ihrer App verwendet wird.
Bei Kippschaltern empfiehlt es sich, den eingeschalteten Zustand visuell vom ausgeschalteten Zustand zu unterscheiden, damit der Benutzer auf einen Blick zwischen beiden unterscheiden kann.
Ein gängiger Ansatz ist die Verwendung von Grau, um den inaktiven Zustand darzustellen.
Navigationskomponenten helfen den Benutzern, sich durch die Anwendung zu bewegen. Sie sind von entscheidender Bedeutung, da der Fluss der App ohne sie gestört würde. Das kann zu Reibungen führen.
Die besten Navigationsschemata sind intuitiv und vorhersehbar. Hier sind einige Komponenten, die Ihnen dabei helfen können.
Das Hamburger-Menü heißt so, weil das dreizeilige Symbol wie eine abstrakte Darstellung eines Burgers aussieht. Wenn es angeklickt wird, erscheint ein verstecktes Menü.
Quelle: Just in Mind
Das Hamburger-Menü ist ein beliebtes Navigationsschema in Anwendungen, weil es allgemein bekannt ist. Die Menschen wissen instinktiv, was passiert, wenn sie darauf tippen.
Außerdem können Sie mit versteckten Menüs umfangreiche Menüs einfügen, ohne den Bildschirm zu überladen.
Es ist auch gut für die Benutzerfreundlichkeit, da die Benutzer das Seitenmenü nur bei Bedarf aufrufen können, was die Überforderung reduziert.
Eine Seitenleiste ist ein verstecktes Menüelement, das auf der linken oder rechten Seite des Bildschirms eingeblendet wird, wenn der Benutzer auf eine Schaltfläche tippt oder eine Wischgeste ausführt.
Quelle: Epic Pxls
Der größte Vorteil von Seitenleisten ist, dass sie hervorragend Platz sparen. Das macht sie unverzichtbar für die Gestaltung minimalistischer Benutzeroberflächen.
Tab-Leisten sind ein gängiges Navigationsschema in iOS. Es handelt sich dabei um eine Reihe von Menüsymbolen, die am unteren Bildschirmrand angeordnet sind und jeweils einen wichtigen Bereich der App darstellen.
Quelle: Design Your Way
Tab-Leisten machen es einfach, schnell von einem Teil der App zu einem anderen zu navigieren, ähnlich wie Browser-Tabs den Wechsel von einer Website zu einer anderen erleichtern.
Ein weiterer Grund für ihre weite Verbreitung ist, dass sie sich an der Unterseite des Geräts befinden.
So können Personen, die ihr Handy mit einer Hand halten, die Tasten bequem mit dem Daumen antippen.
Karussells ermöglichen es den Nutzern, horizontal zu streichen, um schnell durch eine Reihe von UI-Elementen, meist Bilder, zu blättern.
Die Punkte unter dem Karussell zeigen an, wie viele Elemente man gerade durchblättert und bei welchem Element man sich gerade befindet.
Ein Karussell vermittelt das Gefühl, durch die Seiten eines Buches zu blättern, was für die meisten Nutzer ein vertrautes Gefühl ist.
Quelle: Freepik
Der Hauptvorteil von Karussells besteht darin, dass sie Zeit und Mühe sparen, da es schneller geht, durch die Bilder zu streichen, als sie einzeln anzutippen.
Sie sind auch ideal, wenn Nutzer mehrere Artikel oder Fotos miteinander vergleichen müssen.
Informative Komponenten sind für die Kommunikation mit dem Nutzer von entscheidender Bedeutung. Die App kann sie verwenden, um Feedback zu geben, den Benutzer auf wichtige Updates hinzuweisen und hilfreiche In-App-Hinweise zu geben.
Hier sind einige der üblichen Informationskomponenten, die Sie wahrscheinlich verwenden werden.
Benachrichtigungen sind Off-App-Elemente (sie werden angezeigt, wenn sich der Benutzer außerhalb der App befindet), die den Benutzer auf etwas Wichtiges aufmerksam machen.
Dabei kann es sich um eine neue Aktualisierung, einen Fehler oder ein kritisches Ereignis handeln, das seine Aufmerksamkeit erfordert.
Quelle: Mo Engage
Benachrichtigungen sind hervorragend geeignet, um die Kundenbindung zu verbessern. Das liegt daran, dass sie den Benutzer auf subtile Weise dazu ermutigen, zur App zurückzukehren, vor allem, wenn er sie eine Zeit lang nicht benutzt hat.
Es ist jedoch sehr wichtig, das Senden von Benachrichtigungen nicht zu übertreiben . Zu viele Benachrichtigungen können den Nutzer verärgern und ihn dazu bringen, die App zu deinstallieren.
Der Inhalt der Benachrichtigungen sollte außerdem relevant, personalisiert und nützlich sein. Vergessen Sie auch nicht, angemessen um Erlaubnis zu bitten, um die Nutzer zum Durchklicken zu ermutigen.
Fortschrittsbalken zeigen den Nutzern an, wie weit sie in einer Reihe von Schritten fortgeschritten sind. Sie können so einfach sein wie ein Balken mit einer Prozentanzeige darunter.
Sie können aber auch eine Aufschlüsselung der Schritte enthalten, wie in der folgenden Abbildung dargestellt.
Quelle: Dribbble
Fortschrittsbalken können dazu beitragen, dass eine lange Aufgabe überschaubar wird, indem sie sie in kleine Abschnitte untergliedern. Außerdem wird die Erwartung des Benutzers hinsichtlich des Zeitaufwands, der für die Erledigung der Aufgabe erforderlich ist, festgelegt.
Aus psychologischer Sicht vermittelt ein Fortschrittsbalken ein Gefühl der Erfüllung, sobald man die Aufgabe abgeschlossen hat. Dies kann sich sehr positiv auf die UX Ihrer Anwendung auswirken.
Tooltips sind Textblasen, die im Kontext auftauchen. Ihr Zweck ist es, den Benutzer über ein bestimmtes UI-Element oder eine Funktion zu informieren, während er es benutzt.
Quelle: Dribbble
Tooltips werden in der Regel automatisch aktiviert, wenn ein Benutzer zum ersten Mal auf einen App-Bildschirm stößt.
Alternativ können Sie Tooltips auch so einstellen, dass sie nur erscheinen, wenn der Benutzer auf ein Symbol (z. B. ein Fragezeichen) tippt.
Tooltips sind wichtig für das progressive Onboarding und die Einführung in ein Produkt, bei dem die Benutzer eine App während der Benutzung kennenlernen.
Lader sind Elemente, die anzeigen, dass die App im Hintergrund arbeitet . Es ist eine subtile Art, den Benutzern mitzuteilen, dass sie warten sollen.
In Apps ist der häufigste Loader der Spinner, der zunächst grau ist und mit dem Fortschreiten der Aufgabe allmählich an Farbe gewinnt. Der Spinner hat den Vorteil, dass er nur wenig Platz einnimmt.
Wenn es der Platz zulässt, können Sie alternativ auch eine klassische Ladeleiste verwenden.
Quelle: Dribbble
Ladebalken sind wichtig für die UX, da sie kommunizieren, dass die App gut funktioniert und nicht eingefroren ist.
Sie können auch Latenz- und Geschwindigkeitsprobleme der App verbergen, vor allem wenn Sie einen ansprechenden Ladebildschirm haben.
Containerkomponenten halten zusammengehörige Elemente in Ihrer Anwendung zusammen. Ihr Hauptzweck ist es, die Benutzeroberfläche so zu organisieren, dass sie weniger unübersichtlich aussieht.
Einige Container blenden auch UI-Elemente aus, wenn sie nicht benötigt werden, um den Benutzer nicht zu überfordern.
Hier sind einige gängige Container-Komponenten.
Akkordeons sind Komponenten mit zusammenklappbaren und erweiterbaren Abschnitten, die es dem Benutzer ermöglichen, Elemente ein- und auszublenden, wenn er auf sie tippt.
Quelle: Dribbble
Der Hauptzweck eines Akkordeons besteht darin, eine lange Liste von Elementen in überschaubare Abschnitte zu gliedern, damit die Nutzer leichter durch sie blättern können.
Sie sind für mobile Apps unverzichtbar, da sie es ermöglichen, mehr Informationen auf einem kleineren Bildschirm anzuzeigen.
Wenn Sie beispielsweise eine E-Commerce-App mit Dutzenden von Produkten haben, können Sie jede Kategorie als einen Eintrag in einem Akkordeon anzeigen.
Auf diese Weise können die Nutzer nur auf die Produktkategorien tippen, die sie interessieren, und alles andere ausblenden, um die Übersichtlichkeit zu erhöhen.
Karten sind kleine Elemente, die relevante Informationsgruppen in der Benutzeroberfläche Ihrer App enthalten. Sie werden so genannt, weil sie echten Telefon- oder Kreditkarten ähneln.
Quelle: UX Planet
Karten werden häufig verwendet, um Informationen zusammenzufassen oder zu rekapitulieren, und zwar mit einer Schaltfläche oder einem Link, über den die Benutzer weitere Details anzeigen können.
Sie werden auch zunehmend als Navigationstool verwendet, wie bei der Headspace-App.
Quelle: Bootcamp
Daran können Sie erkennen, dass Karten sehr flexibel sein können. Wann immer Sie Informationen in einer visuellen Hierarchie in Ihrer Benutzeroberfläche organisieren müssen, können Karten Ihre bevorzugte Komponente sein.
Formulare sind Komponenten, die Anwendungen dabei helfen, zusammenhängende Daten zu sammeln und zu verarbeiten, wie z. B. Kontaktdaten oder Bestellinformationen.
Es ist vergleichbar mit dem Ausfüllen von Formularen bei der Eröffnung eines Bankkontos oder der Steuererklärung.
Quelle: Just in Mind
Ein Formular besteht aus einzelnen Eingabekomponenten und einer Schaltfläche zum Absenden am Ende. Wenn der Benutzer auf diese Schaltfläche tippt, werden alle Daten in diesen Eingabekomponenten verarbeitet oder an einen Server gesendet.
Eine Gefahr bei Formularen ist jedoch, dass sie sehr lang und unhandlich werden können.
Eine gute Lösung ist die Aufteilung des Formulars in mehrere Bildschirme, die jeweils nur etwa drei bis vier Eingabekomponenten enthalten. Dies kann helfen, die Unübersichtlichkeit zu verringern.
Die Kenntnis der verschiedenen UI-Komponenten, die Ihnen zur Verfügung stehen, ist entscheidend, aber sie sind nur der erste Schritt.
Denn um außergewöhnliche App-Designs zu erstellen, müssen Sie herausfinden , wie man sie zusammensetzt.
Dazu müssen Sie die Prinzipien des App-Designs beherrschen, z. B. Formmuster und vorhersehbare Navigation.
Zum Glück haben wir genau die richtige Ressource für Sie.
Lesen Sie unseren Artikel über die fünf grundlegenden App-Designprinzipien, die Sie beachten müssen.
Petar führt Shake (DECODEs Schwesterunternehmen) als CEO und liefert das Produkt an eine wachsende Zahl zufriedener, innovativer Kunden. Im Alltag sorgt er dafür, dass die Teams in den Bereichen Engineering, Design, Produkt, Marketing und Vertrieb harmonisch zusammenarbeiten. Bevor er zu Shake wechselte, leitete Petar DECODE. Obwohl er als Ingenieur ausgebildet wurde, zeigte ihm sein natürliches Talent bald, dass er auch im Bereich Marketing, Vertrieb und Branding einen großen Einfluss hatte. Petars Leidenschaften umfassen Architektur, Skifahren, Segeln und ein gutes Glas Rotwein.
Hier erhalten Sie einen ausführlichen Leitfaden zu MVP-Entwicklungsteams, einschließlich Informationen zur Einstellung eines Teams, zu den wichtigsten Rollen und zur Teamstruktur.
Die Verwendung von KI zum Erstellen Ihres App-MVP ist der beste Weg, um Ihre App schneller zu entwickeln – hier sind 6 Möglichkeiten, wie Sie dies erreichen können.
