Typen und Faktoren, die beim Entwerfen berücksichtigt werden müssen

Während die Leute sie nicht bemerken, wenn sie unangemessen ausgeführt werden, sind Schaltflächen ein wichtiges Element, das eine produktive und positive Benutzererfahrung schafft. UX-Schaltflächen sind normalerweise gestaltete Links, um Benutzer anzulocken und sie in eine bestimmte Richtung zu lenken. Über Schaltflächen können wir Links zu anderen Seiten erstellen oder Aufgaben wie das Absenden eines Formulars oder den Online-Kauf erledigen.

Manchmal verwenden wir sie als CTA (Calls to Actions), wenn unsere Benutzer ihre Aktionen auf unserer Website beenden müssen. Wenn Sie daran denken, Ihr Schaltflächendesign zu verbessern, um Ihren Benutzern das Durchklicken zu erleichtern, lesen Sie in diesem Handbuch die gängigsten Arten von UX-Schaltflächen und bewährte Methoden für das Schaltflächendesign. Auf diese Weise können Sie Ihre Benutzerreise nahtlos und problemlos auf Ihrer Website gestalten.

Was ist ein Knopf?

Als ansprechendes und interaktives Element ermöglicht eine Schaltfläche das Abrufen des interaktiven Feedbacks, das vom System nach einem bestimmten Befehl erwartet wird. Es ist ein Steuerelement, mit dem Benutzer direkt mit einem digitalen Produkt kommunizieren und wichtige Befehle zur Erreichung eines bestimmten Ziels senden können.

Taste

Moderne UX-Schaltflächen sind aufgrund ihrer effektiven nachgeahmten Interaktion mit den physischen Objekten und ihrer Benutzerfreundlichkeit beliebt. Diese Tasten haben unterschiedliche Funktionen, um unterschiedliche Zwecke zu erfüllen. Sie stellen eine interaktive Zone dar, die im Allgemeinen für eine bestimmte geometrische Form und Sichtbarkeit gekennzeichnet ist. Designer müssen viel Zeit und Mühe aufwenden, um auffällige und effektive Schaltflächen zu entwerfen.

Allgemeine Arten von UX-Schaltflächen

Mit den Schaltflächen können Benutzer mit nur einem Klick Entscheidungen treffen und Maßnahmen ergreifen. Benutzer können die über Schaltflächen übermittelten Aktionen ausführen. Normalerweise befinden sie sich auf der gesamten Benutzeroberfläche der Website. Die Schaltflächen müssen erkennbar und leicht zu finden sein und gleichzeitig die Aktion anzeigen, die ein Benutzer ausführen kann.

Hier sind die wichtigsten und gebräuchlichsten Arten von UX-Schaltflächen:

1. Dropdown-Schaltfläche

Wenn Sie auf die Dropdown-Schaltfläche klicken, wird eine Dropdown-Liste mit eindeutigen Produkten angezeigt. Manchmal können Sie den gleichen Typ in der Einstellungsschaltfläche sehen. Wenn ein Benutzer eine Option in der Liste auswählt, wird diese im Allgemeinen als aktiv gekennzeichnet, beispielsweise nach Farbe.

2. Textschaltfläche

Diese Schaltflächen sind Textbeschriftungen, die außerhalb eines Textblocks auftreten. Der Text muss die Aktion erläutern, die ausgeführt wird, wenn ein Benutzer auf eine Schaltfläche tippt oder darauf klickt.

Diese Schaltflächen weisen eine geringe Belastung auf und werden von Benutzern für weniger wichtige Aktionen verwendet. Da Textschaltflächen keinen Container haben, können sie nicht vom angrenzenden Inhalt ablenken.

3. Hamburger Button

Diese Schaltfläche verbirgt das Hamburger-Menü. Wenn Sie darauf klicken, wird das Menü erweitert. Es ist heutzutage ein häufig verwendetes ansprechendes Element von Mobil- und Weblayouts.

Darüber hinaus geben Hamburger-Menüs Platz frei, wodurch die Benutzeroberfläche luftiger und minimalistischer wird. Es spart viel Platz für andere wichtige Layoutelemente.

Es gibt Argumente gegen das Hamburger-Menü, abhängig von der Tatsache, dass es Menschen verwirren kann, wenn sie Websites nicht häufig verwenden. Dies kann sich negativ auf die Navigation auswirken und zu einer schlechten Benutzererfahrung führen. Führen Sie daher eine ordnungsgemäße Benutzerrecherche durch, bevor Sie den Hamburger-Knopf betätigen.

4. Umschalttaste

Mit den Umschalttasten können Benutzer die Einstellungen zwischen zwei oder mehr Status ändern. Diese Tasten können als Ein / Aus-Taste verwendet werden. Darüber hinaus können Sie sie verwenden, um zugeordnete Optionen zu gruppieren. Stellen Sie jedoch sicher, dass Sie Ihr Layout so anordnen, dass bestimmte Schaltflächen Teil einer Gruppe sind.

Umschaltknopf

Quelle: Umschalten

In einer Gruppe müssen mindestens 3 Umschalttasten vorhanden sein. Darüber hinaus benötigen Umschalttasten Beschriftungsschaltflächen mit Symbolen, Text oder beidem. Symbole sind erforderlich, um Schaltflächen umzuschalten, mit denen eine Option ausgewählt oder nicht ausgewählt werden kann, z. B. das Hinzufügen oder Entfernen eines Sterns zu einem Produkt. Symbole befinden sich normalerweise in Symbolleisten, App-Leisten, Umschaltern oder Aktionsschaltflächen.

5. Floating Action Button

Diese Schaltfläche ist ein Teil von Google Material Design. Dies ist ein kreisförmiger Materialknopf, der eine Tintenreaktion anzeigt und anhebt, wenn Sie darauf drücken. Sie können diese Schaltfläche für eine gesponserte Aktion verwenden.

Ein eingekreistes Symbol über der Benutzeroberfläche macht diese Schaltfläche bemerkenswert. Diese Schaltfläche weist ein Bewegungsverhalten auf, das das Übertragen eines Ankerpunkts, das Starten und das Verwandeln umfasst.

6. CTA-Taste

Eine CTA-Schaltfläche (Call to Action) ist ein weiteres ansprechendes Element der Benutzeroberfläche, dessen Hauptziel darin besteht, Benutzer zum Ausführen einer bestimmten Aktion zu ermutigen. Und diese spezielle Aktion präsentiert eine Konversation für einen bestimmten Bildschirm oder eine bestimmte Seite. Kurz gesagt, es wandelt einen passiven Benutzer in einen aktiven um.

CTA-Taste

Quelle: Landing Page Hero Section

Technisch gesehen kann diese Schaltfläche ein beliebiger Typ sein, der mithilfe eines Handlungsaufforderungstextes unterstützt wird. Seine interaktive Natur ist der Hauptunterschied zu allen anderen Schaltflächen auf dem Bildschirm oder der Seite. Es erregt Aufmerksamkeit und ermutigt Benutzer, die erforderlichen Maßnahmen zu ergreifen.

7. Ghost Button

Ghost-Schaltflächen, auch als umrissene Schaltflächen bezeichnet, erhöhen die Betonung und Komplexität der Textschaltflächen im Schaltflächendesign.

Grundsätzlich bezeichnen sie wichtige Aktionen, die nicht die Hauptaktion auf einer Seite sind. Diese Schaltflächen müssen genau eine Gliederung sein, ohne den umgebenden Text auszufüllen, der eine Aktion kennzeichnet.

8. Erhöhter Knopf

Enthaltene oder erhöhte Tasten haben im Grunde genommen eine rechteckige Form und werden mithilfe eines Schlagschattens von der Bildschirmoberfläche abgehoben. Dieser Schatten zeigt an, dass Sie drücken oder auf die Schaltfläche klicken können. Diese Schaltflächen verleihen flachen Layouts meistens eine Dimension und bieten hauptsächlich Funktionen in weiten, geschäftigen oder überfüllten Räumen.

9. Schaltfläche “Teilen”

Aufgrund der immensen Beliebtheit von sozialen Plattformen, E-Mails und Chats erleichtern Freigabeschaltflächen das Verbinden einer Website oder eines App-Inhalts mit den sozialen Profilen der Benutzer.

Diese Art von Schaltfläche ermöglicht es Benutzern, ihre Inhalte oder Leistungen direkt in sozialen Hubs zu teilen. Diese Schaltflächen sind mit Symbolen versehen, um die Verbindung zu verdeutlichen. Diese Symbole markieren ein Markenzeichen bestimmter sozialer Kanäle, das leicht zu identifizieren ist.

Falls die Freigabe nicht die Hauptaktivität des Benutzers auf einer Seite ist, wird diese ohnehin nicht als Schaltfläche markiert (keine Farbmarkierung, zusätzliche Formen, Unterstreichung usw.). Sie finden nur die Symbole, aber sie sind ansprechend. Dieser Ansatz fördert den Minimalismus und die effiziente Nutzung des negativen Raums.

10. Verbrauchbare Schaltfläche

Nach dem Tippen oder Klicken durch Benutzer öffnet eine Verbrauchsschaltfläche verschiedene Optionen. Dies ist eine weitere Möglichkeit, den entsprechenden Interaktionsfluss zu arrangieren, ohne den Bildschirm zu überlasten. Dies ist äußerst wichtig für die mobile Benutzeroberfläche, deren Bildschirmbereich eingeschränkt ist.

11. Plus-Taste

Durch Tippen oder Klicken auf die Plus-Schaltfläche können Benutzer dem System eindeutige Inhalte hinzufügen. Basierend auf einem App-Typ kann es sich um einen neuen Kontakt, einen neuen Beitrag, eine neue Notiz, einen neuen Standort und ein neues Produkt in der Liste handeln – alles, was eine grundlegende Aktion für das Online-Produkt darstellt.

Wenn Benutzer häufig auf eine Plus-Schaltfläche klicken, werden sie direkt in das modale Fenster zum Erstellen von Inhalten verschoben. In anderen Fällen gibt es eine andere mittlere Phase, in der Benutzer zusätzliche Auswahlmöglichkeiten haben, um Inhalte hinzuzufügen und fokussierter zu gestalten.

12. Schaltfläche Löschen

Wenn Sie ‘Button + Animation’ verwenden, werden die Funktionen der Buttons deutlicher angezeigt. Wenn Benutzer zum Löschen auf eine Schaltfläche tippen, zeigt eine Animation die Aktion und zeigt, wie die Datei entfernt wird.

Dies ist eine einfallsreiche und übersichtliche Möglichkeit, die Schaltfläche Löschen anzuzeigen. Dies ist eine effiziente Methode, mit der Benutzer beim Löschen vieler Dateien angesprochen werden.

13. Wiedergabetaste

Der Play Button nutzt einen attraktiven Hover-Effekt. Sobald sich Benutzer über oder über diese Framer-Schaltfläche bewegen, wird die gesamte Schaltfläche mit einem erstaunlichen 3D-Verlaufsdesign angezeigt. Wenn Benutzer den Mauszeiger wegbewegen, wird der Effekt vollständig angehängt. Diese Designs sind interessant und verführerisch.

Sie können verschiedene Hover- und Interaktionseffekte hinzufügen, um Schaltflächendesigns in Ihrem Web- oder App-Design zu optimieren. Sie können Benutzer davon überzeugen, auf die weiteren Phasen zu klicken und zu diesen zu navigieren, z. B. ein Produkt zu kaufen, einen Podcast abzuspielen, weitere Informationen zu lesen oder Kontaktdaten einzugeben.

Darüber hinaus können Sie einige Änderungen an Animationen, Rahmen, Deckkraft, Texten, Formen, Schatten und Farben einer Schaltfläche gemäß Ihren Aktionsanforderungen hinzufügen, um sie für Benutzer attraktiver zu gestalten.

14. Flacher Knopf

Diese Taste wird nicht angehoben, sondern füllt sich mit vielen Farben, wenn Sie sie drücken. Der Hauptvorteil dieser Schaltfläche besteht darin, dass sie die Ablenkung vom Inhalt verringert.

Diese Schaltflächen werden im Einklang mit dem Paddeln verwendet, sodass die Benutzer sie leicht finden können, in Symbolleisten und in Dialogen, um die Schaltflächenaktion mit dem Dialoginhalt zu vereinheitlichen.

Faktoren, die beim Entwerfen von UX-Schaltflächen berücksichtigt werden müssen

UI / UX-Designer müssen sich auf Schaltflächendesigns konzentrieren, um eindeutige Schaltflächen zu erstellen. Sie sollten Wege, Prinzipien und Geheimnisse bewerten und teilen, indem sie viele Artikel lesen und Größe, Position, Form, Farbe und weitere Faktoren festlegen.

Designer sollten solche Designs verwenden, die den Grundregeln des UI / UX-Designs entsprechen. Insbesondere solche, die Benutzer nicht nur effizient durch eine mobile App oder Website führen, sondern sie auch davon überzeugen können, für bessere Verkäufe zu klicken.

Designer benötigen immer einzigartige Konzepte, Hinweise oder Inspirationen, um nützliche und einzigartige Schaltflächen für Ihre Mobil- oder Web-Apps zu erstellen. Werfen wir einen Blick auf die Faktoren, die Sie beim Entwerfen von UX-Schaltflächen nicht verpassen dürfen:

1. Form

Wenn Sie sich Gedanken über Schaltflächenformen machen, erstellen Sie Quadrate mit abgerundeten Ecken oder quadratischen Schaltflächenentwürfen, basierend auf dem App- oder Website-Stil. Studien haben empfohlen, dass abgerundete Ecken die Datenverarbeitung verbessern und die Mitte des Elements Ihre Aufmerksamkeit erregt.

Wenn Sie etwas anderes als herkömmliche Schaltflächenformen ausführen möchten, versuchen Sie, Usability-Tests für Ihre Designs durchzuführen, um sicherzustellen, dass die Benutzer die Schaltflächen einfach erkennen können.

Unabhängig von der Form, die Sie auswählen, stellen Sie sicher, dass die Konsistenz in allen UI-Steuerelementen erhalten bleibt, damit die Benutzer die genauen UX-Elemente wie Schaltflächen erkennen können.

2. Größe

Dies ist eine der besten Methoden, um Benutzer über die Notwendigkeit eines Layoutelements zu informieren und eine Hierarchie von Elementen zu erstellen.

Ein effektiver und attraktiver Button sollte groß genug sein, um sofort gefunden zu werden, aber nicht sehr groß, damit die Layoutstruktur nicht ruiniert wird. Manchmal geben Marktführer in ihren Anweisungen Vorschläge zu den genauen Tastengrößen.

3. Platzierung

Versuchen Sie beim Platzieren einer UX-Schaltfläche, möglichst viele Standard-UI-Muster und traditionelle Layouts zu verwenden, da die herkömmliche Platzierung von Schaltflächen die Erkennbarkeit verbessert.

Die Verwendung eines Standardlayouts hilft Benutzern, den Zweck jedes Elements zu erkennen, selbst wenn es sich um eine Schaltfläche ohne andere leistungsstarke visuelle Anzeigen handelt. Das Mischen eines Standardlayouts mit genügend Leerzeichen und einem sauberen visuellen Design macht das Layout klarer.

4. Farbe

Sie müssen eine geeignete Farbe auswählen, damit einige Schaltflächen leicht erkennbar sind. Menschliches Verhalten und Stimmung sind stark mit der visuellen Umgebung verbunden und Farbe ist ein starkes Werkzeug in diesem Aspekt.

Beachten Sie bei der Auswahl der Farben für Schaltflächen, dass Hintergrund- und Schaltflächenfarben einen angemessenen Kontrast aufweisen, damit sich die Schaltflächen von anderen Elementen der Benutzeroberfläche unterscheiden.

5. Mikrokopie

Die Mikrokopie mit starken Tasten ist im Allgemeinen konsistent, aber kurz, sodass die Aufmerksamkeit der Benutzer schnell auf sich gezogen werden kann. Manchmal wird es in Großbuchstaben ausgeführt, um die Kopie im Layout verführerischer zu gestalten.

Dies ist jedoch nicht erforderlich, da die Entscheidung gemäß der Typografie, dem grundlegenden Designkonzept und der Stimmung der Textnachricht getroffen wird.

Abschließende Gedanken

Schaltflächen sind die beste Möglichkeit, Benutzer dazu zu bringen, die Aktionen auszuführen, die sie ausführen sollen. Diese Schaltflächen werden in Zukunft auftauchen und ansprechender werden. Planen Sie sie also unter Berücksichtigung der oben diskutierten Faktoren. Machen Sie sie intuitiver, auffälliger und nützlicher, damit die Benutzer problemlos mit Ihrer Anwendung interagieren können.

Similar Posts

Leave a Reply