Die Kunst des Website-UI-Button-Designs: 10 Trends und Tipps
Tolles Button-Design ist etwas, woran die meisten Website-Benutzer nie denken… denn wenn es gut funktioniert, ist es fast unsichtbar. Die besten Schaltflächen sind einfach zu klicken oder zu tippen, haben eine offensichtliche Funktion und helfen Benutzern, ohne nachzudenken mit dem Design zu interagieren.
Es ist eine ziemlich einfache Formel, aber es kann schwierig sein, sie zu entwerfen, wenn Sie sie nachträglich belassen.
Heute beschäftigen wir uns mit Trends im Schaltflächendesign sowie einigen Tipps, mit denen Sie eine Schaltfläche für die Benutzeroberfläche entwerfen können, auf die die Benutzer immer wieder klicken. Geben Sie Ihrem Knopfdesign mit diesen Tipps, Trends und Ideen einen Schub, um Inspiration zu wecken.
Entdecken Sie Designressourcen
1. Halten Sie es einfach
Es kommt alles auf diesen klassischen Satz in der Designtheorie zurück: Keep It Simple, Stupid (oder Silly, wenn Sie es vorziehen).
Das Design der Website-Schaltflächen ist nicht anders. Ein Knopfdesign muss nicht zu komplex sein. Es sollte offensichtlich und funktional sein. Manchmal können andere Designtrends dem im Wege stehen, was sich auf die Conversions auf Ihrer Website auswirken kann.
Denken Sie also beim Button-Design so - und überdenken Sie es nicht. Eine Schaltfläche sollte wie eine Schaltfläche aussehen. So einfach ist das.
2. Sorgen Sie für viel Kontrast
Fast so wichtig wie eine identifizierbare Schaltfläche ist es, sicherzustellen, dass sie leicht zu sehen ist.
Der Grund, warum Geister-Schaltflächenstile über Bildern schnell angezeigt und verblasst werden, liegt darin, dass die Schaltflächen nicht genügend Kontrast hatten, um leicht erkennbar zu sein. Benutzer konnten sie nicht sofort finden.
Verstecken Sie keine Tasten mit schlechtem Kontrast. Lassen Sie sie hervorstechen und mit viel Farbe und Raumkontrast schreien, damit sie sich von anderen Elementen auf dem Bildschirm abheben. Lassen Sie viel Polsterung um die Knöpfe, damit sie atmen können.
Dies erleichtert Benutzern das Auffinden und Identifizieren von Schaltflächen als anklickbare Elemente sowie das physische Klicken, ohne versehentlich das falsche Element zu erhalten.
3. Verwenden Sie Farbe
Haben Sie jemals bemerkt, wie viele Tasten rot oder orange sind? Das liegt daran, dass helle Farben das Auge auf diese Elemente lenken und zum Handeln anregen.
Die Verwendung von Farbe ist auch eine ziemlich trendige Designtechnik. Von hellen Farben bis zu Schaltflächen mit einfachen Verläufen ist die Farbe möglicherweise eine der einfacheren Möglichkeiten, um Menschen bei der Interaktion mit dem Design zu unterstützen.
4. Schreiben Sie eine Mikrokopie, die Erwartungen schafft
Machen Sie diesen Fehler nicht: Eine Schaltfläche mit den Worten "Klicken Sie hier". (Wie spammig ist das?)
Die Mikrokopie innerhalb eines Schaltflächendesigns sollte eine klare Erwartung darüber erzeugen, was mit einem Klick passieren wird. Sagen Sie den Benutzern, was sie als Nächstes erhalten. Dies kann so einfach sein wie "Senden", um Daten einzugeben, oder auf einen Link zu "Weitere Informationen" klicken oder ein Video ansehen. Unabhängig davon, um welche Aktion es sich handelt, teilen Sie dies den Benutzern in der Mikrokopie mit.
Diese Informationen können dazu beitragen, Vertrauen bei Benutzern zu schaffen und die Conversions mit Aktionen / Interaktionen zu steigern, die Benutzer für wünschenswert halten.
5. Beschäftige dich mit subtiler Animation
Es gibt einen Trend im Schaltflächendesign, bei dem Websites zwei Schaltflächen nebeneinander verwenden. Einer ist gefüllt, einer ist ein Geisterstil. Beide enthalten eine Hover-Animation, die zwei anklickbare Optionen weiter hervorhebt.
Animationen können helfen, die Aufmerksamkeit auf Schaltflächen zu lenken, und fördern sogar Klicks. Es ist zu einem allgemein akzeptierten Benutzermuster geworden, eine Hover-Animation auf Schaltflächen einzufügen, und bietet Benutzern einen einfachen Hinweis, dass sie sich engagieren sollten.
Geh einfach nicht über Bord. Wirbelnde, sich drehende und blinkende Tasten sind eher ärgerlich als hilfreich.
6. Machen Sie es groß genug, um zu tippen
Schaltflächen sollten einen anklickbaren (tippbaren) Bereich mit einem Durchmesser von mindestens 10 Millimetern enthalten, und ein größerer Bereich ist immer in Ordnung. Dieser Rat stammt aus einer Studie des MIT Touch Lab, in der die Größe eines Fingerpads in Bezug auf Touch-Geräte untersucht wurde.
Lassen Sie uns das relativieren. Die typische Taste auf einer physischen Computertastatur ist 15 x 15 Millimeter. Das ist ein gutes Ziel. (Vergessen Sie nur nicht, unterschiedliche Bildschirmgrößen zu berücksichtigen, damit Ihre Schaltfläche auf kleinen Bildschirmen nicht verloren geht.)
Wenn Sie kleinere Schaltflächen verwenden müssen, sollten Sie einen großen Klickradius hinzufügen. Auf diese Weise ist genügend Platz vorhanden, wenn der Benutzer die Schaltflächen selbst übersieht, sodass die gewünschte Aktion weiterhin ausgeführt wird. (Ihre Website-Besucher werden es Ihnen danken.)
7. Verwenden Sie einen vertrauten Stil
Es gibt einige allgemeine Schaltflächenstile, mit denen jeder vertraut ist. Verwenden Sie einen von ihnen.
- Eine rechteckig gefüllte Schaltfläche mit quadratischen Kanten und Text im Inneren
- Eine rechteckig gefüllte Schaltfläche mit abgerundeten Kanten und Text im Inneren
- Ein rechteckiger gefüllter Knopf mit einem sichtbaren Schlagschatten (oben)
- Ein rechteckiger Geisterknopf
- Einfache Kreistasten, die am häufigsten in der unteren rechten Ecke verwendet werden, um Unterstützung, Hilfe oder Chat zu kennzeichnen
8. Geben Sie einen erwarteten Ort ein
Schaltflächen müssen nicht nur erwartungsgemäß angezeigt werden und funktionieren, sondern auch an einem Ort, an dem Benutzer nach ihnen suchen.
- Bei Homepages umfasst dies die Platzierung von Schaltflächen unter einer Hauptüberschrift oder einem Textblock. Schaltflächen werden im Allgemeinen links am Text oder in der Mitte des Bildschirms ausgerichtet.
- Bei Formularen werden Schaltflächen nach Eingaben angezeigt. Bei einigen einzelnen Eingabeformularen wird die Schaltfläche in derselben Zeile rechts von der Eingabe ausgerichtet.
- Allgemeine CTA-Schaltflächen werden direkt unter dem Inhalt angezeigt, auf den sie verweisen.
- Schaltflächen zum Spielen oder Starten eines Videos oder Spiels befinden sich häufig in der Mitte des Vorschaubildschirms.
- Warenkorb- oder E-Commerce-Schaltflächen befinden sich in der Regel in der oberen rechten Ecke.
9. Feedback nicht vergessen
Reagiert die Schaltfläche auf Interaktion? Stellen Sie sicher, dass das Design der Tastenschnittstelle eine offensichtliche Rückkopplungsschleife enthält.
Geben Sie einen visuellen oder anleitenden Hinweis darauf, dass die Schaltfläche ihre Aufgabe erfüllt hat. Einige Schaltflächen erfordern mehr Arbeit als andere. Schaltflächen, die beispielsweise auf eine andere Seite oder Website verweisen, geben Feedback, dass die Schaltfläche funktioniert hat, wenn die neue Seite geladen wird. Eine Schaltfläche zum Senden von Formularen kann eine Dankesnachricht auf dem Bildschirm anzeigen, wenn die Informationen ordnungsgemäß übermittelt wurden.
10. Verwenden Sie die Tasten absichtlich
Zu viele Tasten sorgen für Chaos.
Verwenden Sie Schaltflächen dort, wo sie sinnvoll sind. Überladen Sie das Design nicht überall mit Knöpfen. Benutzer haben keine klare Vorstellung davon, wo und was am wichtigsten zum Klicken ist.
Speichern Sie Schaltflächen zur Verwendung mit Website-Zielen. Sie sollten die Besucher zu den Elementen führen, die für Ihr Gesamtdesign am wichtigsten sind.
Fazit
Eine Website-Schaltfläche ist ein Element, das Ihre Handlungsaufforderung in ein Ergebnis umwandelt. Nehmen Sie sich Zeit, um über dieses Design nachzudenken, von Farbe über Funktion bis hin zur Mikrokopie. Testen Sie Schaltflächendesigns, um sicherzustellen, dass Sie die funktionalste Version in Ihrer Benutzeroberfläche haben.
Wenn Sie eine funktionierende Schaltfläche haben, geraten Sie nicht in die Falle der Trends und ändern Sie das Design. Wenn es um Tasten geht, sollte die Funktion oberste Priorität haben.
