Unsere Besucher befinden sich auf der Startseite. Mit dem Content und dem Visual-Storytelling haben wir sie angesprochen und ihr Interesse geweckt. Und jetzt? Spätestens jetzt sollten wir ihnen sagen, wie sie weiter vorgehen sollten, indem wir zu einer eindeutigen Handlung auffordern – mit dem Call-To-Action.
Der Call-To-Action (CTA) auf unserer Startseite ist eines der wichtigsten Elemente, wenn nicht sogar das wichtigste Element. Die große Bedeutsamkeit dieses Elementes liegt vor allem darin begründet, dass wir unseren Besuchern damit Orientierung auf unserer Seite geben, sie an die Hand nehmen und führen (Harmanus 2016).
In den meisten Fällen handelt es sich beim CTA um einen Button mit einem bestimmten Text darin, der zu einer bestimmten Handlung auffordert. Diese Handlung hängt ganz davon ab, was wir primär erreichen möchten. Das kann die Anmeldung zum Newsletter sein, die Platzierung eines Artikels im Warenkorb oder, wie in unserem Fall, dass unsere Besucher mit dem ersten der drei Schritte starten, nämlich mit der Auswahl eines Designs.
Wie bringen wir unsere Besucher aber dazu, unseren CTA-Button überhaupt anzuklicken? Dafür haben wir mit unserem sympathischen Visual-Storytelling und dem Content tatsächlich schon einen großen Teil geleistet. Denn damit schaffen wir Vertrauen und bestärken letztlich in der Entscheidung, ihn zu klicken.
Was einen Button aber überhaupt ausmacht, an welchen Best-Practices wir uns orientieren sollten und wie wir mit einem Button sogar Erlebnisse schaffen können, sehen wir uns jetzt genauer an.
Bevor wir uns allerdings Gedanken darüber machen, wie man mit einem Button sogar Erlebnisse schaffen kann, sollten wir uns erst mal ansehen, was einen Button überhaupt zu einem Button macht. Und wie wir unseren Nutzern damit mitteilen, dass sie ihn klicken können und sollen.
»Buttons sollen wie Buttons aussehen« (Babich 2016). Was im ersten Moment vielleicht wahnsinnig naheliegend und logisch klingt, ist es offenbar für viele Designer gar nicht. Möglichst kreativ und ausgefallen sein, lautet die Devise. Dass wir als Gestalter wissen, welche Elemente in unseren Designs klickbar sind, ist logisch – doch wir sind nicht die Nutzer.
Deshalb muss für unsere Nutzer ein Button sofort als solcher identifizierbar sein. Das Aussehen eines Buttons wird bestimmt durch seine Größe, seine Form, seine Farbe, die Typografie und den enthaltenen Content. Diese Elemente schaffen in ihrer Gesamtheit einen Button, der einen Angebotscharakter hat (Norman, Donald A.: The Design of Everyday Things. Revised and expanded edition. 67. erw. u. verb. Aufl. New York: Basic Books 2013, S. 11), unseren Besuchern also sofort zeigt, dass sie damit interagieren können. Auch weitere Ausgestaltungen wie Schatten können einen wertvollen Beitrag dazu leisten, da sich der Button dadurch optisch von der Seite abhebt, ihm eine weitere Dimension gegeben wird und dies insgesamt den Angebotscharakter steigert.
Dass die Größe nicht entscheidend ist, hat man bestimmt schon das ein oder andere Mal gehört – im Falle eines Buttons ist sie es aber definitiv. Die empfohlene Mindestgröße für einen Button gibt das MIT Touch Lab mit 10 × 10 Millimeter an (Dandekar et al. 2003).
Diese Empfehlung hängt mit der durchschnittlichen Fingerspitzengröße zusammen und ist deshalb relevant, weil die Mehrheit der Nutzer mittlerweile Mobilgeräte mit Touchscreens nutzt (Enge 2019). Fitts Gesetz besagt zudem, dass die Zeit, die es benötigt, eine Zielfläche – zum Beispiel eben einen Button – zu erreichen, neben der Entfernung stark mit deren Größe zusammenhängt (Fitts 1954, S. 381-391).
Wie wir von Jakob Nielsen schon wissen, verbringen unsere User deutlich mehr Zeit auf anderen Websites als auf unserer. Das heißt, dass eine gewisse Erwartungshaltung vorherrscht. Sonderlich viel Spielraum haben wir damit nicht – sieht man sich Buttons an, unterscheiden sie sich in ihrer Form hauptsächlich durch das Ausmaß der Abrundungen der Ecken (Shen 2018).
Wissenschaftler sind sich übrigens einig, dass abgerundete beziehungsweise komplett runde Ecken bei Formen angenehmer für unsere Augen sind und damit eher die Aufmerksamkeit auf sich ziehen (Troncoso et al. 2008). Dies führen sie auf die Tatsache zurück, dass es in unserer natürlichen Umgebung kaum Objekte gibt, die so hart und scharf sind, wie digital erstellte Formen ohne Abrundung anmuten.
Oftmals – und im Speziellen beim CTA-Button – stellt ein Button die primäre Aktion auf einer Seite dar. Deshalb macht es Sinn, ihn auch farblich besonders hervorzuheben. Sind neben dem Primärbutton auch noch weitere Buttons vorhanden, sollten diese eine deutlich geringere visuelle Aufmerksamkeit erzeugen, etwa indem man sie grau färbt oder sogenannte Ghost-Buttons verwendet, die statt einer Farbfüllung nur eine Kontur haben.
Beachten müssen wir außerdem, dass ein Button immer mehrere Status hat, die er uns bestenfalls auch mitteilt. Die bekanntesten und meist genutzten Zustände eines Buttons sind der Normalzustand (»default«), zudem jener Zustand, wenn wir mit der Maus über dem Button schweben (»hover«) sowie jener, wenn wir ihn drücken (»active«) . Daneben sollten es auch noch unterschiedliche Erscheinungsbilder für die Zustände geben, in denen er deaktiviert (»disabled«) ist und zuletzt, wenn er im Fokus ist (»focus«) – ein Zustand, der meist durch die Tabulator-Taste herbeigeführt wird. Unterschiedliche Farben und verschiedene Ausprägungen der Schatten sind dabei gute Möglichkeiten, dies zu bewerkstelligen.
Letztlich muss auch die Textfarbe – ganz egal in welchem Status der Button sich befindet – einen ausreichend hohen Kontrast zur Buttonfarbe aufweisen, um die Leserlichkeit sicherzustellen. Was hilft uns ein Button, von dem niemand weiß, was er tut?
Richtig, gar nichts. Oder er stiftet nur Verwirrung und sorgt schlimmstenfalls damit für eine schlechte User-Experience. Deshalb sollte ein Button neben der Leserlichkeit auch immer unmissverständlich mitteilen, was er tun wird, wenn man ihn klickt – »OK« im Button zählt nicht.
Stellen wir uns vor, wir möchten den Zahlungsprozess in einem Onlineshop abbrechen. Ein kleines Popup-Fenster erscheint mit der Frage »Möchten Sie den Zahlungsprozess wirklich abbrechen?«, darunter zwei Buttons. Ein Button enthält den Text »OK«, der andere »Abbrechen«.
Gar nicht so einfach, sich hier im ersten Moment für einen Button zu entscheiden, oder? Wesentlich schneller klar würde es sein, wären die Beschriftung der Buttons »Nein, zurück zur Zahlung« und »Ja, Zahlung abbrechen«.
Neben klaren inhaltlichen Hinweisen darüber, was ein Button tut, wird zusätzlich empfohlen, Aktionen, die »weniger Schaden anrichten«, hervorzuheben beziehungsweise vorauszuwählen. In diesem Fall wäre es das Zurückkehren zur Zahlung.
Auf unserer Startseite geht es uns aber primär – und in diesem Kapitel befinden wir uns ja auch gerade – um den Call-To-Action-Button. Wie schon in der Einleitung beschrieben, wollen wir, dass unsere Besucher direkt mit der Auswahl eines Designs starten. »Jetzt entdecken« oder »Jetzt starten« liest man ziemlich häufig, allerdings würden auch diese Buttons ohne Kontext nicht funktionieren, da nicht klar ist, was entdeckt oder womit begonnen werden soll.
Auffällig ist aber, dass in den meisten Varianten ein auffordernder Begriff wie eben »Jetzt« zu finden ist – und das nicht ohne Absicht. Denn gemeinsam mit aktiven Verben und einer kurzen Aussage darüber, wohin der Button führt beziehungsweise was er tut, können wir sogar den ein oder anderen normalerweise klickfaulen Nutzer davon überzeugen, einen ersten Schritt auf unserem Pfad der drei einfachen Schritte zu gehen (Gadd 2019).
Sehr häufig wird der Text in Buttons ausschließlich in Großbuchstaben gesetzt. Da dies die Leserlichkeit beeinträchtigt, wie schon im Unterkapitel »Typografie« beschrieben, rate ich davon ab. Lässt es sich unter keinen Umständen vermeiden, hilft auch hier eine erhöhte Laufweite.
Nicht nur das Aussehen des Buttons an sich macht einen Button aus, sondern auch, wovon der Button umgeben wird. Tatsächlich ist es in vielen Fällen die eleganteste Lösung, wenn der Button von nichts umgeben ist und »Luft zum Atmen« hat. Dieses »Nichts« wird gemeinhin als Weißraum bezeichnet und ist ein oft unterschätzter aber wesentlicher Teil eines verständlichen, nutzerfreundlichen Designs (Babich 2017). Je größer der Weißraum, je mehr Bedeutung bekommt das Element, das in ihm lebt. Man denke an ein Museum, in dem an einer riesengroßen weißen Wand nur ein Bild in der Mitte hängt. Es ist genau diese Leere um das Bild, die das Bild besonders wertvoll erscheinen lässt.
Genau so verhält es sich auch mit Elementen auf unserer Website. Und unser wichtigstes Element auf der Startseite, der CTA-Button, verdient es, entsprechend prominent platziert zu werden. Wenn unsere Nutzer ihn nicht sehen, werden sie nicht wissen, dass es ihn gibt – und in letzter Folge auch nicht auf ihn klicken. Ein ausgewogen großer Weißraum um den Button stellt – gemeinsam mit all den anderen schon besprochenen Attributen eines Buttons – sicher, dass er die nötige Aufmerksamkeit bekommt.
Aber auch alle anderen Buttons – auf welcher Unterseite auch immer – sollten dort positioniert werden, wo es unsere Nutzer erwarten. Erwartungen entstehen durch Erfahrungen, die wir alle während der Nutzung von allen möglichen Websites und Apps machen. Wir als UX-Designer tun uns allen einen großen Gefallen, wenn wir bei der Platzierung von wichtigen Interaktionselementen wie Buttons nicht besonders ausgefallen agieren, sondern den Erwartungen unserer User entsprechen und etablierte Layouts sowie User-Interface-Patterns verwenden.
Bewegungen darzustellen ist einer der ältesten Träume der Menschheit – sofern man so manchen Historikern Glauben schenken möchte. Die Theorie beginnt schon bei Höhlenmalereien: In vielen dieser Gemälden haben die Kreaturen unnatürlich viele Extremitäten. Einige Forscher meinen nun, dass das die frühesten Versuche sind, Bewegungen in Bildern einzufangen (Kabil 2018).
Kaum etwas ist natürlicher als eben das, schließlich leben wir ja auch in einer sich bewegenden Welt. Animation ist Bewegung und Veränderung. Sie ist eine der besten und natürlichsten Ansätze, unser Leben widerzuspiegeln.
Von sich großflächig bewegenden Bildern bis hin zu kaum sichtbaren Effekten: Zumindest kleine Animationsansätze sind mittlerweile überall im digitalen Design zu finden. Animationen helfen uns, die Nutzerfreundlichkeit unseres Webshops wesentlich zu verbessern. Einige Anwendungsfälle für Animationen werden wir uns im weiteren Verlauf dieser Arbeit deshalb im Detail ansehen.
Im Fall unseres Call-To-Action-Buttons habe ich mir als kleine Überraschung zur positiven Bestärkung überlegt, Herzen aus dem Button fliegen zu lassen, sobald man mit der Maus darüber schwebt. Der in meinen Augen momentan einfachste und schnellste Weg, eine solch komplexe Animation zu bewerkstelligen, ist, das AfterEffects-Plugin LottieWeb (airbnb.io/lottie) zu verwenden. Die optimale Dauer einer solchen Animation sollte kontextabhängig bestimmt und getestet werden. Für die gemächlich schwebenden Herzen habe ich 400 Millisekunden als guten Kompromiss zwischen einer gut wahrnehmbaren Animation und einer nicht zu langsamen Geschwindigkeit gewählt.
Probier es aus!