05. Juli 2017

Mit SnapSVG eine traumhafte User Experience umsetzen

Oft steht man bei Online Projekten vor der Frage „Wie vermittle ich dem Besucher meine Informationen?“ Generell bekannt ist, dass man seine eigene Webseite nicht mit Zahlen und Fakten überladen sollte, um dem Nutzer ein angenehmes Erlebnis zu ermöglichen. Dafür ist ein gutes UX Design zwingend erforderlich.

Dieser Ansatz ist für viele Arten von Webseiten und Webapplikationen, wie z.B. Online-Shops, eine praktikable Vorgehensweise. Was aber ist mit Webauftritten, die ausschließlich Informationen vermitteln wollen? Wie soll man den Besucher dazu bewegen, sich auch die letzte Statistik noch mit Interesse anzusehen? Hier ist zusätzlich zum UX Design auch ein ausgeklügeltes User Interaction Konzept notwendig.

Toutbaern Devices

Eine sehr geschickte Methode ist das Verpacken von Zahlen und Fakten in einer Geschichte. Dabei verfolgt der Besucher z.B. einen Charakter, der die Zahlen nicht einfach nur vorträgt, sondern sie „erlebt“. Wenn man diese Art des Storytellings mit viel Sorgfalt und Überlegung durchführt ist es möglich, seinen Nutzern auch den trockensten Inhalt interessant zu vermitteln.

Untersuchungen zeigen, dass durch eine Geschichte das menschliche Gehirn aktiver ist als wenn einfach nur Fakten präsentiert werden (Widrich 2012). Fest steht auch, dass bei einer Vielzahl von gleichzeitig präsentierten Informationen ein Mensch schnell den Überblick, und damit seine Motivation verliert, weiter nach Informationen zu suchen.

Eine Story ermöglicht dem Webseiten-Betreiber seine Nutzer an genau der Stelle abzuholen, an welcher er oder sie diese anfangen lassen möchte. Im Laufe der Geschichte werden immer mehr Zahlen und Informationen präsentiert. Je unterhaltsamer die Geschichte, desto größer ist die Wahrscheinlichkeit, dass der Nutzer sich die Informationen bis zum Schluss ansieht.

Als interessierter Leser haben Sie diesen Beitrag bis hier her verfolgt und denken sich sicherlich „das macht Sinn“ oder „das war mir bereits bekannt“. Die alles entscheidende Frage, die sich Ihnen mittlerweile sicherlich stellt ist die: wie erzähle ich im Internet eine Geschichte? Mit Video?

Ein Video zu veröffentlichen ist sicherlich eine Option. Mit Videos kann man spannende Geschichten erzählen, mit dramatischer Musik unterlegen und den Nutzer quasi am Bildschirm fesseln. Leider ist ein sehr gutes Video meist mit sehr hohen Produktionskosten verbunden. Außerdem hat ein Video den großen Nachteil, dass man dem User die Informationen mit einer vorher bestimmten Geschwindigkeit präsentiert. Daher kann ein Video trotz aufwändiger Produktion zu Lasten der User Experience gehen.

Interessiert sich der User z.B. für einen ganz bestimmten Wert, z.B. den Durchschnittsverdienst eines Bauern im Kanton Bern, ist er unter Umständen gezwungen das Video anzuhalten, an eine bestimmte Stelle zurückzusetzen, um dann die nötigen Informationen, z.B. wie dieser Wert zustande kommt, noch einmal zu sehen.

Dafür gäbe es eine einfache Lösung: Text. Einfach eine Geschichte ganz klassisch als Text verfassen und online stellen. Aber möchte der Nutzer, der nach bestimmten Informationen sucht, mehrere Seiten Text präsentiert bekommen? Ist ein statischer Text heutzutage überhaupt noch dem modernen Internet angemessen?

Das Internet bietet mit seinen vielen Technologien unglaublich viele Möglichkeiten, Emotionen bei den Besuchern auszulösen. Ein Text ist also eher „2010“, und lässt vor allem eine angenehme User Experience vermissen.

Eine sehr innovative Möglichkeit, im Internet Geschichten zu erzählen, haben wir von artd Webdesign im Zusammenhang mit dem Kanton Bern umgesetzt. Auf www.toutbaern.ch kann der Nutzer interaktiv durch Stories wandern und lernt dabei etwas über die Menschen, die im Kanton Bern leben. Der Vorteil dieses Interaction Designs gegenüber einem herkömmlichen Video: Der Benutzer erlebt die Geschichte in seiner intuitiv gewählten Geschwindigkeit. Der Vorteil gegenüber reinem Text: ganz klar die Interaktivität.

Um die einzelnen Geschichten auf www.toutbaern.ch umzusetzen, haben wir auf liebevoll entworfene SVG-Dateien gesetzt. SVG steht für „Scalable Vector Graphics“. Ohne hier in unnötige Details zu gehen, liegt der große Vorteil solcher Grafiken darin, dass Sie in der Größe ohne Probleme skaliert werden können. Damit sind die Stories auf jedem Device abspielbar.

Die Umsetzung des UX Designs haben wir im artd Team mit der Library SnapSVG realisiert. Mit Hilfe dieser Bibliothek können neue Grafiken on-demand auf den Bildschirm gezeichnet werden und bestehende Grafiken hinsichtlich Form, Farbe und Größe manipuliert werden. Dabei lassen sich auch sehr komplexe Interaction Designs umsetzen.

SnapSVG ist eine JavaScript Bibliothek und kommt nur client-seitig zum Einsatz. Damit hat der Benutzer die komplette Geschichte bereits im Browser geladen und genießt daher eine angenehme User Experience. Wir haben SnapSVG zusammen mit jQuery verwendet um im Interface die Stärken jeder Bibliothek separat einzusetzen. Während jQuery also hauptsächlich für Menüs und Navigation zum Einsatz kommt, ist SnapSVG wirklich nur für die Animationen der SVG Grafiken verantwortlich.

All diese Ideen und Bibliotheken sowie ein effektives Teamwork untereinander, mit Designern und mit der Stadt Bern haben das Projekt www.toutbaern.ch zu dem gemacht, was es heute ist.


Referenzen

Widrich, L. (2012, May 12). The Science of Storytelling: Why Telling a Story is the Most Powerful Way to Activate Our Brains. Retrieved June 30, 2017, from http://lifehacker.com/5965703/the-science-of-storytelling-why-telling-a-story-is-the-most-powerful-way-to-activate-our-brains





Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2