12 UX-Tipps, damit die Buttons Ihrer Website besser performen.

Was ist das Beson­dere an einem But­ton? Zunächst ein­mal ist die Auf­gabe eines But­tons als Schalt­fläche zu dienen, damit Sie eine Aktion aus­führen kön­nen. Das klingt zunächst sim­pel, aber dahin­ter ver­steckt sich ein gut durch­dacht­es Design. Wir von Max­o­me­dia sind eine Dig­i­ta­la­gen­tur in Bern, die eine jahre­lange Erfahrung in diesem Bere­ich hat.

Deshalb küm­mern wir uns darum, But­tons passend zum UX und UI Design zu entwer­fen: But­tons, die dazu ein­laden, gek­lickt zu wer­den. In diesem Artikel zeigen wir Ihnen, worauf wir als Dig­i­ta­la­gen­tur bei der Gestal­tung von But­tons achtgeben.

1. Die Auswahl der Farbe
Regel Num­mer 1 lautet, dass ein But­ton her­vorstechen muss. Dies kann am besten durch eine auf­fal­l­ende Farbe erre­icht wer­den. Am ehesten eignet sich eine Farbe, die hell ist und eine hohe Sät­ti­gung hat. Ausser­dem sollte sie einen Kon­trast zu den anderen Far­ben auf der Web­seite bilden. Wir ziehen bei der Far­bauswahl auch die ver­schiede­nen Ele­mente ein­er Schalt­fläche mit ein. Dazu gehört der Text, die Schalt­fläche, die Umran­dung und der Schat­ten des Buttons.

 

2. Die Anzahl der Button
Wer die Wahl hat, hat die Qual. Darum stellen wir sich­er, dass der wichtig­ste But­ton am stärk­sten her­vorsticht. Das kann manch­mal etwas schwierig sein, da viele Aktio­nen auf ein­er Web­seite miteinan­der konkur­ri­eren. Die Lösung dafür lautet, zu über­legen, welche Aktio­nen die höch­ste Pri­or­ität haben. Die But­tons mit der höch­sten Pri­or­ität platzieren wir im UX und UI Design an Stellen, sodass sie nicht in Konkur­renz zueinanderstehen.

 

3. Das richtige Design
Die Weisheit aus der Design­lehre „Weniger ist mehr“, trifft auch auf die Gestal­tung des But­tons zu. Die Dig­i­ta­la­gen­tur Max­o­me­dia hält das Design so ein­fach wie möglich. Dabei geht es uns in erster Lin­ie um eine ser­iöse Wirkung des But­tons. Ein But­ton, der ver­sucht, durch über­ladene Effek­te die Aufmerk­samkeit auf sich zu ziehen, wirkt beim Betra­chter als unser­iös. Zudem zeigen Stu­di­en, dass ein sim­pler But­ton, mit ein­er weis­sen Schrift­farbe, am ehesten gek­lickt wird.

 

4. Der Text auf dem Button
Der Text auf dem But­ton erk­lärt, was seine Auf­gabe ist, und sollte daher ein­ladend klin­gen. Ein befehlen­der Ton ist daher kon­trapro­duk­tiv. Deshalb bleiben wir konkret und verzicht­en auf gener­ische Begriffe wie „Ok“. Viel hil­fre­ich­er sind aktive Ver­ben, die auf einen direk­ten Vor­gang hin­weisen. Dadurch ver­ste­hen die Benutzer schneller, zu welch­er Aktion der But­ton sie führt.

5. Aufmerk­samkeit auf sich ziehen
Vielle­icht wün­schen Sie sich bei Ihrem But­ton einen Trig­ger, der die Benutzer dazu ein­lädt draufzuk­lick­en? Das ist kein Prob­lem für uns, dass wir durch ein kleines Dialogfeld in der Nähe des But­tons erre­ichen. In dieses Feld schreiben wir, was die Benutzer erwartet, wenn sie die Schalt­fläche aktivieren. Empfehlun­gen von anderen Usern sind eben­so hil­fre­ich und schaf­fen Ver­trauen in die auszuführende Aktion.

6. Den näch­sten Schritt einleiten
Egal, was die Benutzer auf der Web­seite auszuführen haben, es muss immer klar sein, was als Näch­stes fol­gt. Bei ein­er Kau­fab­wick­lung wer­den die Käufer durch die ver­schiede­nen Schritte geleit­et, die deren Bestä­ti­gun­gen erfordert. Das heisst, dass das Ziel für die Käufer immer erkennbar sein muss. Der But­ton übern­immt dabei die Auf­gabe, die Käufer durch diesen Prozess mit klaren Aus­sagen zu leiten.

7. Die Grösse des Buttons
Bei der Grösse des But­tons geht es darum, dass er nicht zu klein oder zu gross ist. Ein zu klein­er But­ton fällt näm­lich weniger auf, während ein zu gross­er, unser­iös wirkt. Ein guter Gradmess­er ist das Ver­hält­nis zu den anderen Ele­menten auf der Web­seite. Der But­ton sollte gröss­er sein, als die anderen Ele­mente, damit er schnell auf­fällt. Er sollte aber nicht zu gross sein, indem er die anderen Ele­mente durch seine Präsenz erdrückt.

 

8. Die Textlänge auf dem Button
Die passenden Wörter für einen guten Text auf einem But­ton zu find­en, kann etwas schwierig sein. Auf der einen Seite, sollte er seine Funk­tion erk­lären und auf der anderen, kurz und knapp sein. Wir über­legen uns deshalb einen Satz, der seine Funk­tion erk­lärt, und kürzen diesen auf die notwendi­gen Infor­ma­tio­nen. Ein Beispiel­satz kön­nte fol­gen­der­massen laut­en, „Laden Sie hier hil­fre­iche Doku­mente herunter“. Wir kürzen ihn dann auf, „Doku­mente herun­ter­laden“ und schaf­fen Kon­text durch Text, der den But­ton umgibt.

 

 

9. Nicht mit Links zu verwechseln
Wer­fen Sie But­tons nicht mit Links in einen Topf. Ein Link hat die Auf­gabe, die Benutzer zu einem anderen Ort zu führen, während der But­ton sie eine Aktion aus­führen lässt. Deshalb ist es eine schlechte Idee, einen Link als But­ton zu tar­nen, um die Benutzer durch die Web­seite zu lot­sen. Das führt zur Ver­wirrung und wird als schlechter Stil angesehen.

10. Die Platzierung bei kleinen Fenstern
Der Ort auf der Web­seite, wo der But­ton platziert wird, ist von gross­er Bedeu­tung. Die Benutzer haben ein intu­itives Gespür, an welchen Orten sie nach einem But­ton Auss­chau hal­ten müssen. Das liegt auch ein wenig daran, dass die meis­ten Web­seit­en der gle­ichen Auf­baulogik fol­gen. Aber viel wichtiger ist die Sehge­wohn­heit­en von Benutzern. In der west­lichen Welt sind wir daran gewöh­nt, von links nach rechts zu lesen. Darum ist ein But­ton auf einem kleinen Bild­schirm unten rechts am besten aufge­hoben, weil unsere Augen nach dem Über­fliegen der Seite dort landen.

 

 

11. Die Platzierung bei einem Vollbild
Bei einem Voll­bild, also einem Bild­schirm, der die kom­plette Bre­ite hat, ist die Regel umgekehrt. Ein solch­er Bild­schirm hat mehr leeren Raum um die Ele­mente, weshalb sich die Augen auf das Erste, was auf dem Bild­schirm zu sehen ist, konzen­tri­eren. Und das ist der Ort oben links. Darum empfehlen wir, dort die wichtig­sten Funk­tio­nen als Erstes zu platziert.

12. Eine falsche Entschei­dung rück­gängig machen
Wenn Sie Ihre Kun­den vor falschen Entschei­dun­gen bewahren wollen, dann bietet sich ein But­ton an, der diese Entschei­dung rück­gängig macht. Wir gestal­ten in diesem Fall für Sie einen But­ton, der den Befehl hat, die Aktion umzukehren oder zu löschen.

 

 

 

Das könnte Sie auch interessieren

Suchbegriff eingeben