Täglich muss ich im Auftrag mit verschiedenen Stakeholdern eines Projekts interagieren. Je nach Position und Lust auf die Disziplin UX-UI-Design hat jeder ein anderes Wissen über die verwendeten Begriffe.
Im Laufe der Missionen habe ich eine Vielzahl von Konzepten zusammengestellt und es handelt sich um einen Wortschatz, den ich zu Beginn gerne gehabt hätte und den ich daher nach und nach gefestigt habe, um künftigen Studierenden oder Neueinsteigern im digitalen Bereich zu helfen.
Deshalb habe ich eine Reihe von Artikeln für Sie vorbereitet, in denen jedes Konzept erklärt wird, damit Sie es nachschlagen können. Wir schließen diese Serie daher mit den letzten 20 Konzepten ab. Wenn Sie jemals beide Teile (Upstream) konsultieren möchten, finden Sie hier die Links: partie 1, partie 2 et partie 3.
#1 _ Layouts
Karussell
Mit dem Karussell können Sie Inhalte wie Bilder, Karten usw. mithilfe der horizontalen Navigation durchsuchen. Wir finden sie oft auf der Startseite einer Website, um die Neuigkeiten zu präsentieren.
Akkordeons
Mit Akkordeons können Benutzer Inhaltsabschnitte erweitern und reduzieren. Sie sind sehr nützlich, um Inhalte zu organisieren und dem Benutzer eine klar definierte Hierarchie anzuzeigen.
Paginierung
Am Ende einer Seite wird der Inhalt häufig durch Paginierung in Seiten organisiert. Wir ermitteln daher die Nummer jeder Seite. Manchmal sind einige, abhängig von der Anzahl, ausgeblendet. Eine gute Praxis besteht darin, immer das Erste und das Letzte beizubehalten. Eine weitere gute Vorgehensweise zur Vereinfachung der Verwendung besteht darin, die Schaltflächen „Zurück“ und „Weiter“ anzuzeigen.
Artikel
Ein Element ist ein Element einer Liste. Dies ist ein wichtiges Element, da wir es oft mehrmals wiederholen, indem wir die angezeigten Daten anpassen.
Liste
Es besteht aus einer Reihe von Elementen, die in alphabetischer, numerischer oder sogar zufälliger Reihenfolge aufeinander folgen.
Dort können mehrere Komponenten wie Text, Bilder, Status, Schaltfläche usw. verschachtelt werden.
Rasterliste
Rasterlisten zeigen eine Sammlung von Bildern in einem organisierten Raster an. Anders als bei der Liste sind die Elemente vertikal und horizontal angeordnet und nicht mehr wie bei der Liste in einer einzelnen vertikalen Spalte.
Karte
Die Karte ist eine Komponente, die es Ihnen ermöglicht, sich innerhalb derselben Gruppe zusammenzuschließen.
Zum Beispiel ein Titel, Inhalt und ein Bild, um einen Medienartikel zu materialisieren. Oder ein Bild, ein Titel und eine Kaufschaltfläche auf einer E-Commerce-Website.
#2 _ Formulare
Form
Mit Formularen können Sie vom Benutzer ausgefüllte Informationen abrufen. Er wird Elemente in das System eingeben, vervollständigen oder hinzufügen und sie dann einreichen.
Feld (Eingabe in Englisch)
Das Feld ermöglicht dem Benutzer die Eingabe von Informationen. Diese Informationen können in verschiedenen Formen vorliegen, wie in den folgenden Konzepten beschrieben werden kann.
Textfelder
Mit Textfeldern können Benutzer Text eingeben und bearbeiten. Dies kann eine einzelne Zeile oder mehrere Zeilen sein.
Fluch
Mit dem Schieberegler können Benutzer durch eine Reihe von Werten navigieren. Es wird hauptsächlich durch eine interaktive Bar realisiert. Beispielsweise um die Lautstärke anzupassen oder sich innerhalb einer Audio-/Videospur zu bewegen.
Dropdown-Liste (Dropdown oder „select“ auf Englisch)
In der Dropdown-Liste können Sie zwischen zwei und einer unbegrenzten Anzahl von Optionen wählen.
Kontrollkästchen
Mit dem Kontrollkästchen können Benutzer eine oder mehrere Optionen aus einer Liste auswählen. Es handelt sich um eine Komponente, die es dem Benutzer ermöglicht, Auswahlmöglichkeiten aus einer Liste von Vorschlägen anzugeben. Grafisch gesehen wird ein aktiviertes Kästchen im Allgemeinen anders materialisiert (dank eines Symbols oder einer Farbe), während ein nicht aktiviertes Kästchen leer bleibt. Ein Feld kann auch ausgegraut sein, wenn die Auswahl nicht möglich ist.
Radio knopf
Mit dem Optionsfeld kann der Benutzer eine einzelne Option aus einem Satz auswählen. Grafisch wird ein Optionsfeld durch einen Kreis dargestellt. Wie beim Kontrollkästchen wird die Auswahl des Benutzers unterschiedlich materialisiert (durch ein Symbol oder eine Farbe).
Kippschalter
Der Schalter wird für binäre Optionen verwendet. Sie ermöglichen es Ihnen, den Zustand eines einzelnen Elements zu aktivieren oder zu deaktivieren.
Es ist wie ein Schalter, der Knebel kann nur zwei Positionen einnehmen (z. B.: Ein-/Aus-Taste).
Platzhalter
Ein Platzhalter ist ein Attribut, das zur standardmäßigen Anzeige von Text in bestimmten Formularfeldern verwendet wird. Es gibt dem Benutzer Hinweise zum Ausfüllen eines Feldes. Beispielsweise um das erwartete Format eines Datums, einer Adresse oder einer Telefonnummer anzugeben.
#3 _ Aktionen
Taste
Über eine Schaltfläche können Benutzer mit einem einzigen Tippen oder Klicken Aktionen und Entscheidungen treffen.
Der Button ist einer der wichtigsten Bestandteile einer Schnittstelle, denn er führt den Nutzer auf wichtige Wege: zum Beispiel zum Kauf eines Produkts, zum Abschluss eines Abonnements oder zur Registrierung.
Pfandrecht
Ein Link ist eine Möglichkeit, von einer Seite zur anderen zu wechseln. Durch Anklicken eines Links gelangt der Nutzer direkt zu den gesuchten Informationen.
Auf gestalterischer Seite ist es wichtig, sie klar zu identifizieren. Häufig werden sie durch Unterstreichung und Farbe dargestellt.
FAB (Floating Action Button)
Bei der schwebenden Aktionsschaltfläche handelt es sich um eine Schaltfläche, die sich ein wenig von den Schaltflächen unterscheidet, die wir auf Plattformen gewohnt sind. Seine Besonderheit besteht darin, dass es in der Benutzeroberfläche über dem Inhalt schwebt. Schwebende Aktionsschaltflächen befinden sich meist unten rechts auf dem Bildschirm Ihrer Lieblingsanwendungen. Sie werden in Schnittstellen verwendet, um Hauptaktionen für Benutzer zu gruppieren.
Suchleiste
Die Suchleiste ist ein etwas besonderes Eingabefeld, denn sie ermöglicht das Suchen oder Filtern von Elementen. Die Suche kann standortübergreifend oder nach einer bestimmten Funktionalität erfolgen.
Zusammenfassung
Mit diesen Begriffen schließen wir daher unsere Reihe des kleinen UX-UI-Glossars ab. Es besteht kein Zweifel, dass wir eine neue Serie neu starten werden, um Sie über neue Konzepte zu informieren (die es bisher wahrscheinlich noch nicht gab!). Vielen Dank, dass Sie uns folgen und zögern Sie nicht, uns zu kontaktieren, wenn Ihnen ein Konzept immer noch Probleme bereitet!
Um die ersten drei Teile anzusehen, finden Sie hier die Links: partie 1, partie 2 et partie 3.
Wenn Sie jemals Ihr Wissen vertiefen und das Entwerfen einer Weboberfläche üben möchten, bietet das UX-Republic-Schulungszentrum die Schulung „UI-Design, die Grundlagen“ an. Hier ist der Link, um mehr zu erfahren.
Alexa CUELLAR, UX-Designerin @UX-Republic
