Wir sprechen viel über Details im Design. Aus gutem Grund. Wenn man auf die kleinsten Details achtet, kann man einen Entwurf machen oder brechen.
Heute werden wir tiefer in eines dieser Details eintauchen und nach Wegen suchen, Schaltflächen zu entwerfen, auf die Benutzer klicken (oder tippen) möchten. Obwohl Knöpfe eines der kleinsten Elemente in Ihrem Design sind, sind sie eines der wichtigsten Elemente. Wie sonst würden Sie einem Benutzer Aktionen mitteilen? Wie würden sie sonst Informationen in dieser Rückkopplungsschleife liefern?
Denken Sie kurz an eine der großen Beschwerden über flaches Design in der Anfangsphase: Die Benutzer wussten nicht, was im Design interaktiv war und was nicht. Daher ist die Wichtigkeit eines großartigen Knopfdesigns wichtig.
Es sollte berührbar aussehen
Die Benutzer sollten eine Schaltfläche im Design sehen und denken, sie müssten sie erreichen, berühren und berühren. Während fast jede Größe auf einem Bildschirm angeklickt werden kann, ist die Größe und das Auffüllen um eine Schaltfläche auf einem Touch-Gerät von entscheidender Bedeutung.
Der durchschnittliche Benutzer hat eine Fingerspitzengröße zwischen 8 und 10 Millimetern. Vor diesem Hintergrund ist ein Ziel von 10 mal 10 Millimetern eine großartige Startgröße für Tasten auf Touch-Geräten. (Das ist etwas kleiner als die Standardtasten Ihrer Tastatur.)
Es gibt ein paar Design-Dinge, die Sie tun können, um ein Element auch ansprechbar zu machen.
- Ein subtiler Schatten kann sich heben? das Element aus dem Hintergrund, damit es sich dem Benutzer ein wenig näher anfühlt.
- Durch das erhöhte Polster um die Schaltflächen erscheint das Klicken leichter und der Benutzer wird an das Element herangeführt.
- Durch farbige Hover- oder Toggle-Aktionen können Benutzer in Echtzeit anzeigen, was sie tun, und Aktionen anzeigen.
Farbe ist wichtig
Die Farbe der Schaltflächen muss im gesamten Website-Design besonders sein. Dies ist ein guter Ort, um eine bestimmte Akzentfarbe zu verwenden und nur für Tastenaktionen zu verwenden.
Die Farbe der Tasten 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 sehen und heben sich vom Rest des Designs ab. Wählen Sie für eine Schaltfläche, die wirklich hervorsticht, eine Farbe aus, die ein komplementäres Paar zur Hauptfarbe des Designs ist (Gegensätze im Farbkreis).
Die andere Farbe betrifft die Marke. Sie möchten eine Schaltflächenfarbe auswählen, die mit Ihrer Farbpalette und Markenidentität zusammenarbeitet. Unabhängig davon, wie sehr Sie möchten, dass sich eine Schaltflächenfarbe im Design abhebt, sollte sie mit Ihrem primären Farbschema - und nicht mit diesem - funktionieren.
Noch wichtiger ist die Größe
Mach es gross!
Schaltflächen erfordern ein gewisses Maß an Gewicht, damit Benutzer sofort auf dem Bildschirm zu ihnen gezogen werden. Beim Geister-Schaltflächen-Trend werden ohne große Tastenfarbe Konturen angezeigt. Der Fokus lag auf großen Tasten in Bezug auf die Pixelanzahl, es fehlte jedoch das visuelle Gewicht. In Bezug auf die Größe muss eine Schaltfläche in beiden Punkten groß sein. (Dies ist ein Grund dafür, dass der Trend aus der Mode gekommen ist.)
Es gibt jedoch eine heikle Stelle, wenn ein Knopf von perfekter Größe zu peinlich übergroßer Größe wird. Wann genau dies geschieht, hängt von der Größe anderer Designelemente ab. Sie wissen jedoch genau, wann dies der Fall ist. Wenn der Knopf alles ist, was Sie im Design sehen, besteht die Chance, dass er zu groß ist.
Platzierung ist Schlüssel
Wohin soll der Button gehen? Gibt es einen Standort, der mehr Klicks als andere generiert?
In den meisten Fällen sollten Schaltflächen dem Inhalt entsprechen, den sie ergänzen sollen.
- Am Ende eines Formulars
- Rechts von einer Handlungsaufforderung
- Am unteren Rand der Seite oder des Bildschirms
- Unter einer Nachricht zentriert
Warum diese Platzierungen? Denn es folgt dem natürlichen Aktionsweg und der Art und Weise, wie Benutzer Websites lesen und mit ihnen interagieren.
Konzentrieren sie sich auf kontrast
Bei allen Gestaltungselementen ist Kontrast ein wichtiger Aspekt. Dies gilt für die Techniken, die innerhalb des Elements selbst verwendet werden, aber auch für die Beziehung zwischen dem Element und seiner Anordnung im Entwurf und dieser Umgebung.
Denken Sie an die folgenden Techniken in dieser dualen Umgebung:
- Farbe
- Geben Sie Gewicht und Größe ein
- Größe der Elemente
- Form wie sie sich auf den Hintergrund bezieht
- Transparenz oder Animation
- Schatten oder Graidentümer
- Whitespace und Polsterung
Verwenden Sie Standardformen
Bei Schaltflächen gibt es nur zwei Formen, die Sie berücksichtigen sollten:
- Kreise Der runde Knopf ist dank Material Design und Material Lite-Konzepten populär geworden. Bei jeder ähnlichen Ästhetik passt ein runder Knopf zum Design und passt sich dem Benutzermuster an.
- Rechtecke Diese Standardform sollte für alle Schaltflächen das Ziel sein, es sei denn, Sie verwenden in der obigen Instanz einen Kreis. Das wissen die Benutzer und sind es gewohnt. Die meisten Schaltflächenrechtecke sind mindestens doppelt so breit wie hoch (manchmal drei- oder viermal so breit). Benutzer sehen diese Form und wissen sofort, was zu tun ist. Während einige möglicherweise die Vorzüge abgerundeter Ecken im Vergleich zu 90-Grad-Winkeln argumentieren, ist dies je nach Designstil gleichermaßen angebracht.
Erklären Sie den Benutzern, was zu tun ist
Jede Schaltfläche sollte eine Textanweisung enthalten, die den Benutzern genau sagt, was die Schaltfläche tun 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. Das nächste, was angezeigt wird, sollte dem Benutzer mitteilen, dass er am erwarteten Ziel angekommen ist. Unabhängig davon, ob Sie ein Formular absenden, einen Kauf tätigen oder einfach nur zu einem anderen Link wechseln, der Benutzer sollte das gewünschte Ergebnis durch die Interaktion mit der Schaltfläche erhalten. (Falls nicht, vergewissern Sie sich, dass in der Feedback-Schleife ein Fehler angezeigt wird, damit Sie wissen, welche Korrekturen im Website-Design vorgenommen werden müssen.)
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 kurz vor dem Abschluss steht. Und dann wählen Sie ein Design für alle Elemente der Benutzeroberfläche aus, mit ein paar kleinen Unterschieden.
Bleiben Sie nicht in dieser gefährlichen Situation stecken.
Im Design sollten Schaltflächen aussehen nur Knöpfe! Nichts im Design sollte die gleiche Form, Farbe und visuelles Gewicht wie eine Schaltfläche haben. Sie müssen anders sein. Erstellen Sie einen Stil für Schaltflächen, der größer ist als alle anderen ähnlichen Elemente 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 die Verwendung hervorgehoben wird.
Fazit
Fangen Sie an, einige Ihrer Schaltflächendesigns zu überdenken? Glaubst du, du kannst etwas schaffen, das Klicks besser fördert?
Probieren Sie einige dieser Tipps aus und behalten Sie die Analyse Ihrer Website im Auge, um genau zu sehen, auf welche Designänderungen Ihre Benutzerbasis reagiert. Verwenden Sie diese Informationen, um Sie beim Erstellen noch anklickbarer Schaltflächen für zukünftige Projekte zu unterstützen.