Eine gute Website fesselt, lädt zum Verweilen ein und macht Spaß – ganz genauso wie ein gutes Spiel. Von klassischen Spiele-Mechanismen könnt ihr euch so einiges abschauen; mit Challenges, interaktiven Tests oder sogenannten Easter Eggs wird der Besuch einer Website gleich viel spannender. Erfahrt, wie ihr Gamification für eure Website oder Online-Kampagne sinnvoll einsetzen könnt!

Was ist Gamification?

Werden spielerische Elemente in nicht-spielerische Umgebungen integriert, so spricht man von Gamification. Mit diesen Elementen kann eine Website interessanter gestaltet werden und damit das Surferlebnis der User verbessert werden. Sogar komplexe Inhalte und Informationen können durch Gamification zugänglich kommuniziert werden. Challenges, Tests, aber auch simple Fortschrittsbalken sind klassische Gamification-Elemente – und nicht nur relevant für Apps oder Social Media. Auch Websites profitieren von geschickt eingesetzten Elementen, die User animieren und das Interesse am Weitersurfen wecken.

Ziele von Gamification nicht nur auf Websites

Gamification …

  • schafft Interaktion
  • stärkt die Bindung zur Zielgruppe
  • steigert die Aufmerksamkeit der User
  • erhöht den Spaßfaktor
  • vermittelt Inhalte spielerisch
  • und motiviert zum interaktiven Surfen.

Diese Ziele sind natürlich auch für uns im Webdesign äußerst relevant. Denn der Erfolg eines Projekts kann maßgeblich gesteigert werden, wenn Elemente aus der Spielwelt die User Experience positiv beeinflussen.

6 Gamification-Elemente für eure Website – mit Beispielen

1. Fortschrittsbalken

Eine sehr simple und oft gesehene Gamification-Methode ist der Fortschrittsbalken. Ein paar Anwendungsbeispiele, an welchen Stellen so ein Fortschrittsbalken eingesetzt werden kann: 

  • Formulare
    Hier sorgt der Forschrittsbalken dafür, dass User motiviert werden, das Formular zu Ende auszufüllen und nicht abzuspringen. Beispiel: Unser Projektplaner
  • Fundraising/Spendenformular
    Auch hier sorgt der Forschrittsbalken dafür, dass man motiviert dabei bleibt und nicht abspringt. Beispiel: WWF-Spendenformular
  • User-Profile
    Der Balken visualisiert, wieviel Prozent schon ausgefüllt sind und soll dazu motivieren, dass die User ihr Profil 100 % vervollständigen. Beispiel: LinkedIn-Profil (zu finden bei „Aussagekraft des Profils“)
  • Blog/Artikel
    Hier gibt der Balken Aufschluss darüber, wie lange der Artikel ist und zeigt gleichzeitig, wie weit man beim Lesen schon gekommen ist. Beispiel: Wir setzen es in unserem eigenen Blog subtil ein. Solltest du gerade live beim Lesen dieses Artikels sehen! ;)

Fortschrittsbalken kann man also immer dann einsetzen, wenn die User mehrere Schritte vollziehen sollen. Der Balken motiviert und regt dazu an, weiterzumachen. 

2. Quiz/Test

Ein Quiz verspricht Interaktion. Ein kleiner Wissenstest animiert aber nicht nur zum Mitmachen. Er kann User außerdem anspornen, sich intensiver mit dem Inhalt zu beschäftigen, um dann mehr Punkte beim Test zu erzielen.

Ein paar Beispiele:

  • Quiz
    Bei einem Multiple Choice Quiz kann zu einem bestimmten Thema das eigene Allgemeinwissen getestet werden. Anschließend erscheint ein Fenster mit dem spezifischen Hintergrundwissen zu der Ausgangsfrage. Beispiel: Quiz zur Schriftgeschichte
  • Online-Test
    Ähnlich wie beim Quiz werden bei einem Online-Test den Usern eine Reihe von Fragen gestellt: Anhand dessen können diese erfahren, welches Produkt aus der Produktpalette sich am besten für sie eignet, wie sie sich am besten für ein Belangen engagieren können oder wie groß zum Beispiel ihr CO2-Abdruck ist – die Einsatzmöglichkeiten für solch einen Test sind vielfältig.
    Beispiel: Wikimedia-Test: Wie kannst du für Freies Wissen aktiv werden? (Website und App kommen übrigens von uns)

Quiz oder Tests bieten sich dann an, wenn Usern der Inhalt möglichst genau vermittelt werden soll oder sie sich noch gründlicher mit einem Thema auseinandersetzen sollen.

Nutzergenerierte Inhalte & Gamification

Um die Bindung zu eurer Community zu stärken, kann es Sinn machen, eure User selbst in eure inhaltliche Redaktion einzubinden – zum Beispiel durch Foto- oder Videowettbewerbe. So bietet ihr euren Usern eine Plattform und habt gleichzeitig authentischen Content, den ihr nutzen könnt.

3. Challenges

von photocase.de / MMchen

Challenges werden sehr gerne bei E-Learning-Apps oder Self-Improvement-Apps eingesetzt.

  • Badges
    Das System der Badges animiert User, möglichst viele Aufgaben zu bestehen. Mit jedem Meilenstein in einem Level erhält der User einen neuen Badge. Beispiel: Die App Duolingo feiert den User mit einem Badge, sobald sie oder er alle Aufgaben eines Levels erfolgreich bestanden hat.
  • Missions
    Kleine Aufgaben regen die User dazu an, Ziele spielerisch zu verfolgen. Beispiel: In der Nike Runner’s App können Benutzer Zielen förmlich hinterher rennen. Dabei haben sie Missions, wie 15km in einem Monat zu rennen oder ihre eigenen Bestzeiten zu schlagen.
  • Daily Tasks
    Tägliche Herausforderungen motivieren auf eine Seite zurück zu kehren und neue Aufgaben zu absolvieren. Challenges werden sehr gerne bei E-Learning-Apps oder Self-Improvement-Apps eingesetzt. Wir stellen euch hier drei gängige Beispiele vor. Beispiel: In Apps wie Smoke Free wird gerne das System von täglichen Tagebucheinträgen, Remindern oder kleinen Aufgaben verwendet, die das Aufhören vom Rauchen erleichtern sollen.

Diese spielerischen Elemente eignen sich vor allem immer dann, wenn die User bei der Stange gehalten werden sollen und dabei verschiedene Handlungen hintereinander über einen längeren Zeitraum hinweg ausführen sollen.

Euer Website-Projekt ist eher eine negative Challenge?

Das sollten wir schleunigst ändern!

Lasst euch von uns beraten zu Themen wie Gamification, Branding oder auch (Re-)Launch. Gemeinsam erschaffen wir ein tolles Web-Erlebnis – für euch und für eure Kund*innen

4. Easter Eggs

Easter Eggs können den Besuch einer Website abwechslungsreich gestalten. Sie sind kleine versteckte Elemente, die oftmals durch Zufall gefunden werden. Häufig werden sie von Programmierern in die Seite als kleiner harmloser Spaß integriert. Soll auf der Website eine kleine Ostereierjagd entfacht werden, können dabei die Easter Eggs auch angeteasert werden. Die User fühlen sich dabei eingeweiht in einen gemeinsamen Inside Joke, sie werden Teil einer Community. Nicht umsonst gibt es ganze Website, die sich nur mit Easter Eggs beschäftigen und wo sie sich verstecken.

Beispiele für den Easter Egg Einsatz zur Gamification auf Websites:

  • 404-Error-Seiten
    Kommt der User auf eine Fehlerseite, so kann das möglicherweise frustrieren. Baut man hingegen genau hier ein Easter Egg ein, so kann dies im besten Fall für einen kleinen Spaß sorgen. Beispiel: Auf der Bernie-Sanders-404-page ist ein kleines Video eingebunden.
  • Suchspiele
    Auf der Website verstecken sich kleine Elemente, die der User suchen kann. Dieses Suchspiel kann direkt beim Betreten der Seite kommuniziert werden, so dass klar ist, worauf zu achten ist. Das steigert die Aufmerksamkeit und Bereitschaft auf der Seite zu Surfen. Beispiel: Schaut euch die kleine Sprechblase auf unserer Startseite an und versucht dann, die drei Eulen zu finden. Beispiel: Auf dem Eintrag bei Wikipedia über Easter Eggs versteckt sich auch direkt eines.

Möchtet ihr das Surfen auf eurer Website interaktiver und spaßiger gestalten, können Easter Eggs sich gut dafür eignen. 

5. Belohnung

von photocase.de / MADworks

Belohnungen können häufig mit anderen spielerischen Elementen kombiniert werden, so zum Beispiel mit einem Quiz, einer Challenge oder Easter Eggs. Wird eine Handlung komplett und richtig ausgeführt, gibt es eine kleine Belohnung, die Ansporn sein kann.

  • besonderer Inhalt
    Bei Neuanmeldung können auf manchen Websites noch mehr Artikel gelesen werden oder ein besonderer Inhalt wird zugänglich. Beispiel: Bei Pottermore können nach der Anmeldung viele weitere Artikel gelesen werden, die von Joanne K. Rowling verfasst sind und man wird in sein Hogwarts-Haus einsortiert
  • Rabatt
    Das Kundenwerben wird häufig mit Rabattcodes oder Gutschriften belohnt. Beispiel: Airbnb verspricht eine Gutschrift, sobald man einen Freund wirbt, der über Airbnb eine Unterkunft oder Entdeckung bucht.
  • besonderer Status
    Häufig bringt das Kundenwerben auch andere Vorteile wie einen besonderen Status. Der besondere Status verstärkt das Gefühl, in der Community ein wichtiges bzw. sachkundiges Mitglied zu sein. Beispiel: Natural Cycles gibt nach zehn Neuwerbungen von Freunden den Status des „Star Cyclers“. Sie belohnen ihre Nutzer:innen also nicht nur materiell mit Rabattcodes oder ähnlichem, sondern kreieren auch den Ansporn, in der Community aufzusteigen.

Belohnungen eignen sich vor allem dann, wenn User zum Handeln aufgefordert werden. Am Ende von einer oder mehreren Handlungen winkt ein Gewinn, der die Motivation erhöht, bis zum Ende durchzuhalten.

6. Gamified Storytelling

Gamified Storytelling nutzt die narrativen Elemente von Spielen, wobei User zum Beispiel Teil einer Story werden und ins Geschehen eingreifen können. Das geht so weit, dass es in Haiti ein Gamification-Projekt zu Erdbeben gab. In diesen Geschichten sind komplexe Inhalte und Fakten so verpackt, dass sie die User ansprechen und Zusammenhänge leicht verständlich sind. Mit dem Besuch der Website taucht der User in die Erzählung ein und wird Teil einer aufregenden Reise. Bereits das Betreten der Website erweckt das Gefühl vom Beginn einer Show und die erzeugte Spannung überträgt sich auf die User.

Beispiele für Gamified Storytelling:

  • interaktive Dokumentation
    Komplexe Inhalte können spielerisch über eine Dokumentation angeeignet werden, deren Handlung die User selber mitbestimmen und so Hintergründe oder Auswirkungen aufdecken und verstehen können. Beispiel: Wie sich die Klimaerwärmung auf verschiedene Menschen in verschiedenen Regionen der Welt auswirkt, zeigt die interaktive Dokumentation von Climate Under Pressure.
  • verknüpfte Themenanalyse
    Fragen zu einer verflochtenen Thematik zu verstehen und einzuordnen – das wird für User einfacher, indem die Themenfelder visuell und narrativ verbunden werden. Beispiel: Bei Welcome to the Universe wird interaktiv das Universum erklärt, indem wir uns durch Fragen über Themen der Astrophysik klicken können und die Arbeit von verschiedene Wissenschaftler:innen erklärt wird.

Spielen für die gute Sache? Gamification für Non-Profit-Organisationen

Gamification gestaltet die Annäherung und Auseinandersetzung mit komplexen und ernsten Thematiken auf einer Website lockerer und ungezwungener. Das ist besonders für NGOs sowie gemeinnützige Stiftungen und Vereine interessant, die mit gut eingesetzten Elementen eine größere Reichweite bei ihren Kampagnen erzielen können. Im Idealfall geht solch eine Kampagne sogar viral – und die User setzen sich gleichzeitig inhaltlich mit dem Thema auseinander.

Zwei erfolgreiche Beispiele aus dem Non-Profit-Bereich:

  • User können bei Slavery Footprint interaktiv herausfinden, wie viele Sklaven für ihren Lebensstandard aufkommen.
  • Die Ice Bucket Challenge ging viral um die Welt und hat so viel Aufmerksamkeit und Spenden für die ALS Association generiert.

Auch für NGOs: Ziele von Gamification klar definieren

Unter Konversion versteht man, wenn ein User eine gewollte Handlung durchführt, zum Beispiel ein Formular auf eurer Website ausfüllt. Solch eine Konversion gelingt einfacher, wenn ihr beim User Interesse und Spaß weckt. Und dabei kommt im wahrsten Sinn des Wortes wieder Gamification ins Spiel. 

Ein fiktives Beispiel: Ihr setzt euch spendenbasiert für den Erhalt des Regenwalds ein. In einem kleinen Spiel nimmt nun der User die Perspektive einer bedrohten Tierart ein, die im Amazonas lebt. Die Fragen lauten „Wie viel Prozent deines Lebensraum wurde dieses Jahr durch Rodungen zerstört?“ „Wie viele deiner Artgenossen sterben jährlich aufgrund dessen?“. Am Ende des Spiels macht ihr dann auf eure Spendenaktion aufmerksam. Durch das Spielerlebnis wurde hautnah vermittelt, wie gravierend die Situation ist und der User ist im besten Fall handlungsbereit und spendet.

Dieser Gedanke lässt sich natürlich auf unzählige weitere Vorhaben übertragen: um mehr Teilnehmende für ein Event zu finden, um Inhalte und Aufklärung zu verbreiten oder um Freiwillige zu finden.

Definiert im ersten Schritt ganz eindeutige Konversionsziele. Die Website/Kampagne/User Journey dann auf diese Ziele hin auszurichten und zu optimieren, ist zwingender Bestandteil einer intelligenten Webstrategie. Leider passiert es aber viel zu oft, dass Ziele zwar unausgesprochen im Raum schweben, aber nie konkretisiert und priorisiert werden. 

Ihr seid eine NGO und habt Interesse an Gamification für eure Website?

Wir haben eine große Trickkiste, die wir euch gerne vorstellen!

So findet ihr ganz bestimmt die richtigen Tools.

Lasst uns euere Website zu einem spannenden Erlebnis machen!

Kritik an Gamification – eine Frage der Ethik?

von photocase.de / complize

Vor allem Social-Media-Plattformen wie Facebook & Co setzen Gamification gerne ein. Sie motivieren User regelmäßig zu interagieren, auf Werbung zu klicken oder ihre Daten zu teilen. Wo beginnt dabei Manipulation? Eine Kritik an Gamification ist also durchaus gerechtfertigt – das Einsetzen von spielerischen Elementen kann fragwürdig sein. 

Ist es zum Beispiel wirklich notwendig, mit einer Bestenliste den Wettkampf und Konkurrenzkampfanzustacheln? Was machen Elemente wie der Like-Button mit den Usern? Dazu erscheinen immer wieder Studien, die auf das große Suchtpotenzial insbesondere der Social-Media-Plattformen verweisen.

Wenn ihr Gamification in eine Website integrieren möchtet, solltet ihr euch auf jeden Fall auch mit den kritischen Stimmen und der Ethik hinter diesen Methoden beschäftigen. Diese Auseinandersetzung ist wichtig, um nicht den manipulativen Aspekt der Elemente hervorzubringen, sondern den, der das Interesse  an spannenden Themen weckt und motiviert sich diesen anzunehmen. Wie das aussehen kann, zeigen virale Aktionen, mit deren Hilfe weltweit Spenden gesammelt werden oder NGOs, die Informationen und Aufklärung für alle ermöglichen. Diese Beispiele zeigen, wie Gamification positiv wirken kann.

Fazit: Gamification & Usability

Gerade im Webdesign sollte man Gamification nicht außer Acht lassen. Ein angenehmes Surferlebnis, welches das Engagement der User anregt, macht fast jede Website besser. 

Wichtig dabei ist jedoch, die User nicht zu überfrachten. Schnell kann es zu viel werden und die Gefahr besteht, sich in den Elementen zu verlieren, ohne dabei Informationen weiterzugeben. Intuitives Surfen unterstützt schnelle Entscheidungen der User und lässt sie aktiv mit der Seite interagieren. Dabei müssen die Rahmenbedingungen klar vermittelt werden. Markiert den Beginn der Aufgabe, sowie auch den Fortschritt und den Abschluss. Transparenz hilft, die Regeln zu verstehen und sich schneller in dem System zurechtzufinden.

Kleine Kniffe aus der Spielwelt können Usern helfen, euren Content besser zu verinnerlichen und verstehen. Und schlussendlich ist genau das erfolgreich eingesetztes Gamification: Inhalte für eure User zugänglicher und ansprechender gestalten und verpacken.

Straße mit Pixelart-Monster

Ihr möchtet mehr zu Gamification erfahren?

Wollt wissen, wie ihr Spiele-Mechanismen sinnvoll und nachhaltig in eure Website integrieren könnt?

Wir helfen euch gerne, auch auf eurer Page den Spieltrieb der User zu wecken.

Team Frauenpower im Grünen

Erfahre regelmäßig, wie du das Web besser machen kannst

Trage dich jetzt in unseren Newsletter ein. So bekommst du immer eine Nachricht, wenn wir einen neuen Blogartikel veröffentlichen und spannende Tipps rund um Themen für ein nachhaltiges Web für dich haben.

Die Einwilligung zur Anmeldung kannst du jederzeit durch den Abmelde-Link am Ende jedes Newsletters widerrufen. Deine Anmeldedaten, deren Protokollierung, der E-Mail-Versand und eine statistische Auswertung des Leseverhaltens werden über den Anbieter Brevo verarbeitet. Alle Informationen dazu stehen in unserer Datenschutzerklärung.

Dieses Feld dient zur Validierung und sollte nicht verändert werden.