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. Auch 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.

Aktuell: Stammtisch in Berlin zum Thema „Usability-Tests”

Der Stammtisch für die gute Sache wurde ins Leben gerufen, um die Vernetzung von Berliner NGOs zu fördern. Wir möchten in kleinem und geschütztem Rahmen Austausch zu Themen & Best-Practices der Online-Kommunikation schaffen.

Das Thema: Echte User = echte Ergebnisse – Usability-Tests leicht gemacht

 

Wann? 25. September 2019 um 19 Uhr

Wo? in Berlin bei nebenan.de Stiftung, Köpenicker Straße 154, 10997 Berlin

Wer? Eingeladen sind NGOs, gemeinnützige Vereine und Stiftungen. Soziale und nachhaltige Unternehmen dürfen auch kommen :)

 

Ihr wollt euch direkt anmelden? Schreibt uns eine Mail!

Mehr erfahren? 

Ziele von Gamification

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. Mit Elementen aus der Spielwelt, welche die User Experience positiv zu beeinflussen, kann maßgeblich der Erfolg eines Projekts gesteigert werden.

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

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!); zweites Beispiel hier (erscheint nach einigem Runterscrollen)

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

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.

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 eigene 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.

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 die Easter Eggs auch angeteasert werden. Die User fühlen sich 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.

  • 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. 

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.

Gamified Storytelling

Gamified Storytelling nutzt die narrativen Elemente von Spielen, wobei User zum Beispiel Teil einer Story werden und ins Geschehen eingreifen können. In diesen Geschichten werden komplexe Inhalte und Fakten so verpackt, dass sie für die User ansprechend gestaltet sind und Zusammenhänge leicht erfasst werden können. 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:

  • 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

Die Annäherung und Auseinandersetzung mit komplexen und ernsten Thematiken kann mit Gamification lockerer und ungezwungener gestaltet werden. 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 kann einfacher gelingen, wenn beim User Interesse und SpaĂź geweckt wird – und hier 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. Es werden Fragen gestellt wie „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 wird auf eure Spendenaktion aufmerksam gemacht – 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, um Freiwillige zu finden etc.

Im ersten Schritt sollten aber ganz eindeutige Konversionsziele definiert werden. 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. 

Kritik an Gamification – eine Frage der Ethik?

von photocase.de / complize

Vor allem Social-Media-Plattformen wie Facebook & Co setzen Gamification gerne ein. Dadurch werden User motiviert, regelmäßig zu interagieren, auf Werbung zu klicken oder 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.

Soll Gamification in eine Website integriert werden, sollte man sich 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

Gamification ist eine Praxis, die im Webdesign nicht auĂźer Acht gelassen werden sollte. 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, das schnelle Entscheidungen der User unterstützt, animiert diese dazu, aktiv zu werden. Dabei müssen die Rahmenbedingungen klar vermittelt werden, sobald die Aufgabe beginnt und während diese abgearbeitet wird. Transparenz hilft, die Regeln zu verstehen und sich schneller in dem System zurechtzufinden.

Kleinen Kniffe aus der Spielwelt können euren 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.

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.