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

ChatGPT vs. Google: Was ist die Zukunft der Internetsuche?

ChatGPT vs. Google: Was ist die Zukunft der Internetsuche?

Mehr erfahren
Die Kraft des Prompt Engineerings für KI, AI und Chatbots.

Die Kraft des Prompt Engineerings für KI, AI und Chatbots.

Mehr erfahren
UX Gesetze - 6 Bausteine für eine intuitive Nutzererfahrung

UX Gesetze - 6 Bausteine für eine intuitive Nutzererfahrung

Mehr erfahren

Suchbegriff eingeben