Tipps zum Button-Design: Einfach, klein und von entscheidender Bedeutung
Wir reden viel über Details im Design. Das hat gute Gründe. Wenn Sie auf kleinste Details achten, kann dies zu einem Design führen oder dieses beschädigen.
Heute werden wir uns eingehender mit einem dieser Details befassen und Möglichkeiten zum Entwerfen von Schaltflächen untersuchen, auf die Benutzer klicken (oder tippen) möchten. Auch wenn Schaltflächen eines der kleinsten Elemente in Ihrem Design sind, sind sie eines der wichtigsten. Wie würden Sie einem Benutzer sonst Aktionen mitteilen? Wie sonst würden sie Informationen in dieser Rückkopplungsschleife bereitstellen?
Denken Sie einen Moment an eine der großen Beschwerden über flaches Design in der Anfangsphase zurück: Die Benutzer wussten nicht, was im Design interaktiv war und was nicht. Daher die Bedeutung eines großartigen Knopfdesigns.
Entdecken Sie Designressourcen
Es sollte berührbar aussehen
Benutzer sollten eine Schaltfläche im Design sehen und denken, dass sie sie erreichen und berühren müssen. Während auf einem Bildschirm fast jede Größenschaltfläche angeklickt werden kann, ist die Größe und das Auffüllen einer Schaltfläche auf einem Touch-Gerät von entscheidender Bedeutung.
Der durchschnittliche Benutzer hat eine Fingerspitzengröße zwischen 8 und 10 Millimetern Durchmesser. Vor diesem Hintergrund ist ein Ziel von 10 x 10 Millimetern eine hervorragende Startzielgröße für Tasten auf Touch-Geräten. (Das ist etwas kleiner als die Standardtasten auf Ihrer Tastatur.)
Es gibt einige Design-Dinge, die Sie tun können, um ein Element auch berührbar aussehen zu lassen.
- Ein subtiler Schatten kann das Element vom Hintergrund „abheben“, damit es sich dem Benutzer etwas näher anfühlt.
- Durch das verstärkte Auffüllen der Schaltflächen werden sie leichter anklickbar und der Benutzer wird zum Element geführt.
- Farbige Hover- oder Toggle-Aktionen können Benutzern in Echtzeit zeigen, was sie tun, und Aktionen anzeigen.
Farbangelegenheiten
Die Farbe der Schaltflächen muss im gesamten Website-Design besonders sein. Dies ist ein guter Ort, um eine bestimmte Akzentfarbe zu verwenden und sie nur für Schaltflächenaktionen zu verwenden.
Die Tastenfarbe sollte hell und ansprechend sein. Es gibt einen Grund, warum so viele Designs gelbe, blaue oder grüne Knöpfe enthalten. Sie sind leicht zu erkennen und heben sich vom Rest des Designs ab. Wählen Sie für eine Schaltfläche, die wirklich auffällt, eine Farbe aus, die ein komplementäres Paar zur Hauptfarbe im Design darstellt (Gegensätze im Farbkreis).
Das andere Farbproblem ist die Marke. Sie möchten eine Schaltflächenfarbe auswählen, die mit Ihrer Farbpalette und Markenidentität übereinstimmt. Unabhängig davon, wie sehr eine Tastenfarbe im Design hervorgehoben werden soll, sollte sie mit Ihrem primären Farbschema funktionieren und nicht dagegen.
Größe ist noch wichtiger
Mach es gross!
Schaltflächen benötigen etwas Kraft, damit Benutzer sofort auf dem Bildschirm zu ihnen gezogen werden. Der Ghost-Button-Trend - Konturen ohne eindeutige Tastenfarbe - konzentrierte sich auf große Tasten in Bezug auf die Pixelanzahl, hatte jedoch kein visuelles Gewicht. In Bezug auf die Größe muss eine Schaltfläche in beiden Punkten groß sein. (Dies ist ein Grund, warum der Trend aus der Mode gekommen ist.)
Es gibt jedoch eine schwierige Stelle, wenn ein Knopf von perfekt dimensioniert zu peinlich übergroß wechselt. Wann genau dies geschieht, hängt von der Größe anderer Designelemente ab, aber Sie werden sicher wissen, wann dies geschieht. Wenn der Knopf alles ist, was Sie im Design sehen, ist er wahrscheinlich zu groß.
Platzierung ist der Schlüssel
Wohin im Design sollte der Knopf gehen? Gibt es einen Ort, an dem mehr Klicks generiert werden als an anderen?
In den meisten Fällen sollten Schaltflächen dem Inhalt folgen, den sie ergänzen sollen.
- Am Ende eines Formulars
- Rechts von einer Handlungsaufforderung
- Am unteren Rand der Seite oder des Bildschirms
- Zentriert unter einer Nachricht
Warum diese Praktika? Weil es dem natürlichen Handlungsweg und der Art und Weise folgt, wie Benutzer Websites lesen und mit ihnen interagieren.
Kontrast im Fokus
Bei allen Designelementen spielt der Kontrast eine wichtige Rolle. Dies gilt für die im Element selbst verwendeten Techniken, aber auch für die Beziehung zwischen dem Element und seiner Platzierung im Design und in dieser Umgebung.
Denken Sie daran, in dieser dualen Umgebung über die folgenden Techniken nachzudenken:
- Farbe
- Geben Sie Gewicht und Größe ein
- Größe der Elemente
- Form in Bezug auf den Hintergrund
- Transparenz oder Animation
- Schatten oder Graidoren
- Leerzeichen und Polsterung
Verwenden Sie Standardformen
Wenn es um Schaltflächen geht, sollten Sie nur zwei Formen berücksichtigen:
- Kreise. Der kreisförmige Knopf ist dank der Konzepte Material Design und Material Lite populär geworden. Bei jeder ähnlichen Ästhetik passt ein runder Knopf zum Design und passt zum Benutzermuster.
- Rechtecke. Diese Standardform sollte für alle Schaltflächen verwendet werden, es sei denn, Sie verwenden in der obigen Instanz einen Kreis. Es ist das, was Benutzer wissen und gewohnt sind. Die meisten Schaltflächenrechtecke sind in der Regel mindestens doppelt so breit (manchmal drei- oder viermal so breit). Benutzer sehen diese Form und wissen sofort, was zu tun ist. Während einige die Vorzüge von abgerundeten Ecken gegenüber 90-Grad-Winkeln argumentieren mögen, ist beides basierend auf Ihrem Designstil gleichermaßen angemessen.
Sagen Sie den Benutzern, was zu tun ist
Jede Schaltfläche sollte eine Textanweisung enthalten, die den Benutzern genau sagt, was mit der Schaltfläche geschehen soll. Sie möchten die Sprache kurz und einfach halten und sie sollte dem Ton des restlichen Website-Designs entsprechen.
Dann halten Sie dieses Versprechen ein. Als nächstes sollte dem Benutzer mitgeteilt werden, dass er am erwarteten Ziel angekommen ist. Unabhängig davon, ob ein Formular gesendet, ein Kauf getätigt oder nur zu einem anderen Link gewechselt wird, sollte der Benutzer durch die Interaktion mit der Schaltfläche das gewünschte Ergebnis erzielen. (Wenn nicht, stellen Sie sicher, dass in der Rückkopplungsschleife ein Fehler für Sie angezeigt wird, damit Sie wissen, welche Korrekturen im Website-Design erforderlich sind.)
Beispiele für Schaltflächenmeldungen sind:
- Klick hier
- Erstellen Sie jetzt ein Konto
- Probieren Sie es kostenlos aus
- In den Warenkorb legen
- Weiterlesen
Geben Sie den Schaltflächen eine hohe visuelle Bedeutung
Die meisten Designs sind mit kleinen UI-Elementen gefüllt. Eine Falle, die passiert, ist, dass das Design für diese Elemente verschoben wird, bis das Projekt fast abgeschlossen ist. Und dann wählen Sie ein Design für alle UI-Elemente mit ein paar kleinen Unterschieden.
Bleib nicht in dieser gefährlichen Situation stecken.
Im Design sollten Schaltflächen nur wie Schaltflächen aussehen ! Nichts anderes im Design sollte die gleiche Form, Farbe und das gleiche visuelle Gewicht haben wie ein Knopf. Sie müssen anders sein. Überlegen Sie, ob Sie einen Stil für Schaltflächen erstellen möchten, der größer ist als jedes andere ähnliche Element im Design, oder verwenden Sie eine Akzentfarbe, die nur für Schaltflächen gilt. Diese Techniken können dazu beitragen, dass eine Schaltfläche besonders aussieht und ihre Verwendung betont.
Fazit
Beginnen Sie, einige Ihrer Auswahlmöglichkeiten für das Button-Design zu überdenken? Denken Sie, Sie können etwas erstellen, das Klicks besser fördert?
Probieren Sie einige dieser Tipps aus, während Sie die Analyse Ihrer Website im Auge behalten, um genau zu sehen, auf welche Designänderungen Ihre Benutzerbasis reagiert. Verwenden Sie diese Informationen, um noch mehr anklickbare Schaltflächen für zukünftige Projekte zu erstellen.
