Was versteht man unter User Experience?

Mit User Experience wird das Nutzungserlebnis eines Users mit einem bestimmten Produkt, einer Dienstleistung oder einer Anwendung beschrieben. Die Bewertung der User Experience erfolgt dabei hauptsächlich durch subjektive Empfindungen und emotionale Aspekte.

Der Begriff User Experience wird in der ISO Norm 9241 – 210 definiert. Demnach beschreibt die User Experience:

„Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren. […] Dies umfasst alle Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen und psychologischen Reaktionen, Verhaltensweisen und Leistungen, die sich vor, während und nach der Nutzung ergeben.“

Wichtige Erfolgsfaktoren für eine positive User Experience

UX fasst alle Aspekte zusammen, die ein Nutzer bei der Interaktion mit einer Website oder aber bei der Nutzung eines physischen Produktes hat. Wichtige Erfolgsfaktoren einer guten User Experience sind hierbei:

Utility / Mehrwert bzw. Nutzen für den Anwender

Die Utility ist ein wichtiges Kernelement der User Experience. Denn sie sagt aus, inwiefern die angebotenen Inhalte und Funktionen die Bedürfnisse der Zielgruppe befriedigen. Der Mehrwert und der Nutzen des Angebots für den User stehen hierbei im Fokus.

Das ist eigentlich auch logisch: Denn sieht der Anwender für sich keinen Nutzen oder konnte seine Erwartungshaltung nicht erfüllt werden, kann es auch zu keiner positiven User Experience kommen. Eine App, die einfach zu bedienen ist, dem Anwender aber keinen Nutzen bringt, wird dieser höchstwahrscheinlich wieder löschen. Bei einer App, die er jedoch als nützlich empfindet, wird er sich schwer tun sie zu löschen, auch wenn die Bedienbarkeit seinem Anspruch nicht ganz gerecht wird.

Die Basis bei der Optimierung der Utility ist deswegen die Ausgangsfrage, was der potenzielle Kunde braucht und wie das eigene Angebot diese Anforderungen erfüllen kann.

Folgende Fragen können dabei helfen, den Nutzwert Ihrer Anwendung oder Ihres Produktes herauszufinden:

• Wie bewertet meine Zielgruppe das Produkt / die Anwendung?
• Kann mein Produkt / die Anwendung das Bedürfnis und die Anforderungen der Nutzer befriedigen?
• Wie bewertet der Nutzer die einzelnen Ideen und Funktionen des Produktes / der Anwendung?
• Hilft mein Produkt dem Nutzer dabei, seine Ziele zu erreichen?
• Welche Funktionen empfinden User als besonders nützlich?

Accessibility / Zugänglichkeit

Eine gute User Experience setzt voraus, dass die Anwendung von jedem Gerät aus verfügbar ist, kurze Ladezeiten hat und einfach in der Benutzung ist. Eine Webseite beispielsweise sollte für alle Nutzer zugänglich sein. Denn eine Webseite kann nur eine gute User Experience bieten, wenn sie keine Stolpersteine für den Besucher bereithält – auch nicht für Nutzer mit visuellen, akustischen, motorischen oder geistigen Einschränkungen. Die barrierefreie Umsetzung eines Projektes ist für eine gute User Experience demnach unabdingbar.

Usability

Mit Usability beschreibt man die Gebrauchstauglichkeit bzw. Benutzerfreundlichkeit einer Anwendung. Hierbei geht es im Gegensatz zur User Experience nicht um die subjektiven Empfindungen eines Anwenders mit dem Produkt, sondern um dessen tatsächliche Wahrnehmung. Wie schnell, effizient und einfach gelangt der Nutzer bei der Bedienung einer Anwendung an sein gewünschtes Ziel?

Eine gute Usability wird vom Nutzer in der Regel gar nicht bewusst wahrgenommen, eine schlechte hingegen schon. Wichtig ist die Usability grundsätzlich dabei bei allen Produkten, die über eine Schnittstelle zwischen Mensch und Maschine verfügen. Egal ob Software, Webseiten, Fernseher, Autos, Küchenherd oder medizinische Geräte.

Bei der Usability auf Webseiten gibt es dabei grundsätzlich einige Regeln, die von so gut wie jedem Besucher der Seite erwartet werden. Schon allein die Nichterfüllung eines einzigen Punktes kann zu einer schlechten User Experience führen:

• Klare Strukturen und intuitive Navigation
• Einsatz von Breadcrumbs zur besseren Orientierung
• Klarer Pfad zu den Firmeninformationen
• Schnelle Ladezeiten
• Einheitliche Darstellung über alle Endgeräte hinweg
• Aussagekräftige und leicht verständliche URLs
• Browserkompatibilität
• Gute Lesbarkeit und Strukturierung der Inhalte
• Nutzerfreundliche und barrierefreie Formulare
• Keine störenden oder aufdringlichen Pop Up Fenster

Ästhetik

Nicht zu vernachlässigen für eine gute User Experience ist auch die optische Attraktivität des Produktes oder der Anwendung für den Endkunden. Natürlich können ästhetische Maßstäbe je nach Kulturkreis, Szene oder Zielgruppe variieren und mitunter äußerst unterschiedlich ausfallen.

Dennoch gibt es vor allem bei der Gestaltung digitaler Produkte gewisse Regeln, die sich vor allem an der menschlichen Wahrnehmung und dem menschlichen Ordnungsprinzip orientieren.

Die 1923 von Wertheimer formulierten sechs Gestaltgesetze beschreiben folgende Faktoren für die Zusammenhangsbildung in der Wahrnehmung:

• Gesetz der Nähe: Elemente mit geringem Abstand zueinander werden als zusammengehörig empfunden.
• Gesetz der Ähnlichkeit: Auch einander ähnliche Elemente werden als zusammengehörig wahrgenommen.
• Gesetz der Prägnanz: Gestalten, die einer einprägsamen und einfachen Struktur resultieren, werden bevorzugt wahrgenommen.
• Gesetz der guten Fortsetzung: Elemente, die sich auf einer durchgehenden Linie befinden, werden als eine Einheit wahrgenommen.
• Gesetz der Geschlossenheit: Es werden bevorzugt Strukturen wahrgenommen, die geschlossen wirken.
• Gesetz des gemeinsamen Schicksals: Zwei oder mehrere Elemente, die sich gleichzeitig in dieselbe Richtung bewegen, werden als zusammengehörig wahrgenommen.

Ein aufgeräumtes und harmonisches Design mit konsistenter Farbgebung und einer einheitlichen Typografie sorgt dafür, dass Nutzer sich wohl fühlen. Und Nutzer, die sich wohl fühlen, bilden eine allgemein positivere Einstellung zu der Webseite und dessen Angeboten. Sie halten sich gerne länger auf der Seite auf, sind geduldiger und verzeihen auch eher die ein oder andere Usability-Schwäche.

Ein unübersichtliches Design, wo Farben und Schriften wild durcheinander gewürfelt werden, strengt Nutzer hingegen an, irritiert sie und führt leichter zur Überforderung. Das Erlebnis wird nicht als angenehm empfunden, was insgesamt für eine negative User Experience sorgt.

Funktionalität / Standhaftigkeit

Ein Produkt oder eine Anwendung, welche der Nutzer aufgrund technischer Mängel nicht einwandfrei bedienen kann, ist ein absolutes No-Go für eine gute User Experience. Denn kein Anwender wird von einer positiven Erfahrung mit Ihrem Produkt oder Ihrer Anwendung sprechen, wenn er sich mit ständigen Abstürzen, langen Ladezeiten oder unzähligen Fehlermeldungen herumschlagen muss. Für nahezu jede Software, jede App und jede Webseite gibt es zahlreiche Alternativen, welche über Google und Co auch schnell gefunden werden. Funktioniert Ihr Produkt also nicht zuverlässig, wechselt der Kunde wahrscheinlich zu einem Ihrer Mitbewerber. Im schlimmsten Fall ist seine User Experience sogar so enttäuschend, dass er eine negative Bewertung hinterlässt, bei einer App zum Beispiel im App Store.

Vertrauen und Sicherheit

Eine gute User Experience setzt voraus, dass Nutzer der Anwendung bzw. dem Hersteller vertrauen können und es keine Sicherheitsbedenken gibt.

Stellen Sie sich vor, Sie kaufen in einem Onlineshop ein und anschließend wird die Seite gehackt und Ihre Daten werden von Fremden für allerlei Unfug missbraucht. Natürlich kann es immer passieren, dass eine Seite gehackt wird, auch wenn noch so starke Sicherheitsvorkehrungen getroffen wurden. Dennoch hinterlässt das beim Käufer einen üblen Beigeschmack, selbst, wenn er mit dem eigentlichen Kauf zufrieden war. Sein Vertrauen in den Shop wird er durch diesen Vorfall höchstwahrscheinlich verlieren und die Wahrscheinlichkeit ist groß, dass er sich aufgrund dieser negativen Erfahrung nach einem alternativen Anbieter umsieht.

Oder ein anderes Beispiel: Sie kaufen eine Überwachungskamera für den Innenraum, weil Sie vielleicht das Verhalten Ihres Hundes beobachten möchten, wenn Sie außer Haus sind. Sie sind begeistert von der Kamera, finden es toll, dass Sie diese mit einer App verknüpfen können und so Ihren Hund überall von unterwegs aus beobachten können. Sie sind begeistert von der einfachen Installation, der leichten Handhabung und dem geringen Stromverbrauch. Und dann bekommen Sie eines Tages plötzlich mit, dass die Kamera gehackt wurde und Sie bereits seit mehreren Tagen von den Unbekannten ohne Ihr Wissen in Ihren eigenen vier Wänden beobachtet wurden. So begeistert Sie auch von der Kamera waren – diese Erfahrung wird sich auf Ihre User Experience mit dem Produkt vollkommen negativ auswirken.

Emotionen

Emotionen können sich auf die subjektiv empfundene User Experience auswirken. Produkte und Anwendungen, die in uns positive Gefühle auslösen, werden wir mit viel höherer Wahrscheinlichkeit ein weiteres Mal nutzen. Schafft es ein Produkt oder eine Anwendung, beim User Freude hervorzurufen und ihm ein Lächeln ins Gesicht zu zaubern, wird er viel mehr Zeit damit verbringen und auch nicht direkt frustriert aufgeben, wenn mal etwas nicht gleich so funktioniert, wie er es erwartet.

Wie sich durch positive Emotionen die User Experience verbessern lässt, zeigt beispielsweise Mailchimp. Kurz vor dem Absenden einer Newsletter Kampagne sind viele Nutzer nervös und vergewissern sich noch gefühlt hundert Mal, ob auch wirklich keine Fehler mehr im Newsletter sind. Sie halten also nochmal kurz inne, bevor sie endgültig auf den „Versenden“-Button klicken. Diese Nervosität greift Mailchimp mit folgender Grafik auf:

Je länger der Nutzer nun wartet, desto schwitziger wird der Affenarm. Der Anwender hat das Gefühl, der Affe fühlt mit ihm und kann genau nachempfinden, wie spannend dieser Moment für ihn ist. Das bringt viele Nutzer zum Schmunzeln, wirkt sympathisch und verwandelt bestenfalls die Nervosität in ein positives Kribbeln.

Hat der Nutzer sich dann endlich überwunden, auf den „Absenden“-Button zu klicken, belohnt Mailchimp ihn mit einem High Five:

Unbewusst löst der High Five in dem Nutzer nun das positive Gefühl aus, etwas Richtiges getan zu haben und dafür belohnt zu werden. Er fühlt sich verstanden und gut aufgehoben.

Unterschied zwischen Usability und User Experience

Die Begriffe Usability und User Experience werden immer wieder verwechselt und durcheinandergeworfen. Grundsätzlich erweitert die User Experience den Begriff Usability um ästhetische und emotionale Faktoren wie eine ansprechende Gestaltung, Aspekte der Vertrauensbildung oder Spaß bei der Nutzung (Joy of use).

Den Unterschied soll folgendes Beispiel verdeutlichen:

Stellen Sie sich vor, Sie wollen sich neue Schuhe Ihrer Lieblingsmarke online bestellen. Auf der Couch besuchen Sie, vom Smartphone aus, einen Onlineshop, der Ihnen von einem Bekannten empfohlen wurde. Die Webseite des Shops lässt sich über das Smartphone super bedienen und er ist so gut strukturiert, dass Sie tatsächlich schnell die gewünschten Schuhe in der passenden Größe und zu einem angemessenen Preis finden. Auch bei der Bestellung funktioniert von der technischen Seite her alles reibungslos.

Nun bekommen Sie wenige Minuten nach der Bestellung eine E-Mail mit der Information, dass sich der Versand verzögert, weil das Produkt doch nicht mehr auf Lager ist. Sie sind schon etwas enttäuscht, freuen sich aber so sehr auf die Schuhe, dass Sie eben die paar Tage länger abwarten. Nach einer Woche kommen die bestellten Schuhe endlich an. Beim Auspacken stellen Sie dann aber fest, dass die Schuhe optische Mängel aufweisen. Sie senden die Bestellung zurück. Die Rückerstattung des Kaufpreises erfolgt daraufhin erst Wochen später, nachdem Sie gefühlt tausend Mal bei der Hotline angerufen haben und nachfragen mussten.

Dieses Beispiel zeigt sehr gut, inwiefern Usability und User Experience zusammenhängen. Während die Usability, also die Bedienung der Webseite, offensichtlich sehr gut und intuitiv ist, ist die ganzheitlich betrachtete Nutzererfahrung, also die User Experience, mit dem getätigten Einkauf eher negativ gewesen. Die anfängliche Vorfreude auf das Produkt wurde ab dem Moment, als die verzögerte Lieferung angekündigt wurde, immer mehr von enttäuschenden Erfahrungen abgelöst. Höchstwahrscheinlich wird also ein Kunde, der eine negative User Experience mit einem Unternehmen oder Produkt gemacht hat, nie wieder dort einkaufen, geschweige denn, es an jemanden weiterempfehlen.

Eine Anwendung, die eine gute Usability hat, bewirkt also nicht zwangsläufig eine gute User Experience. Andersherum führt eine Anwendung, die keine gute Usability hat, hingegen aber niemals zu einer guten User Experience. Denn wenn schon das Bestellen im Shop den Nutzer durch eine schlechte Strukturierung oder technische Mängel vor eine Herausforderung stellt, leidet bereits hier die User Experience darunter.

Die Frage nach der User Experience erfasst damit also Aspekte vor, während und nach der Nutzung einer Anwendung. Die Usability befasst sich allerdings ausschließlich mit dem Prozess während der Nutzung selbst.

Als maßgeblicher Faktor für Kundenzufriedenheit entscheidet die User Experience und deren Optimierung über den wirtschaftlichen Erfolg eines Produkts und des Herstellers.

User Experience beginnt oft schon vor der eigentlichen Nutzung

Strenggenommen beginnt die User Experience oftmals schon vor der eigentlichen Nutzung des Produkts oder der Anwendung.

Nehmen wir als Beispiel das Herunterladen einer App. Höchstwahrscheinlich werden Sie sich vor dem Download der App zunächst über sie informiert haben. Vielleicht haben Sie einen ansprechenden Trailer gesehen oder sie wurde Ihnen von einem engen Freund weiterempfohlen. Auch die vielen positiven Rezensionen können Sie letztendlich dazu veranlasst haben, die App herunterzuladen.

Vor der eigentlichen Verwendung der App haben Sie also bereits eine positive User Experience mit der Anwendung gemacht, auch ohne diese direkt benutzt zu haben.

Vorteile einer guten User Experience

Positive Erfahrungen mit den Produkten oder Services einer Marke sorgen für überzeugte und loyale Kunden, die ihrerseits zu Markenbotschaftern in ihrem Umfeld werden.

• Mehr Neukunden durch geringere Absprungraten
• Steigerung der Kaufbereitschaft und höhere Conversion Rate
• Kundenzufriedenheit und mehr Weiterempfehlungen
• Wiederkehrende Kunden
• Verbesserung des Markenimages
• Reduzierung von Support- und Schulungskosten
• Subjektive Qualitätssteigerung Ihres Angebots
• Vermittlung von Vertrauen und Seriosität in Ihre Produkte
• Steigerung von Umsatz und Gewinn
• Akzeptanz höherer Preise im Vergleich zu Mitbewerbern
• Steigerung der Rentabilität und der Wettbewerbsfähigkeit

Wie lässt sich die User Experience messen bzw. bewerten?

Da das Nutzungserlebnis von Anwendern subjektiv wahrgenommen wird, gibt es keine konkrete Formel für die Messung der User Experience. Allerdings lassen sich mithilfe verschiedener Analysen und Tracking-Tools Rückschlüsse auf die User Experience ziehen.

Für die Beurteilung der User Experience eignen sich insbesondere:

Eyetracking & Heatmaps

Beim Eyetracking werden mittels spezieller Brillen, Webcams oder externen Remote-Eye-Trackern die Blickverläufe der Nutzer erfasst und aufgezeichnet. Die Ergebnisse werden anschließend über eine Heatmap visualisiert. Eine Heatmap arbeitet dabei klassischerweise mit denselben Farben, die auch eine Wärmebildkamera erzeugt. Bereiche, die beim Nutzer am meisten Aufmerksamkeit erzeugen, werden dabei rot dargestellt, während weniger beachtete Bereiche bläulich angezeigt werden.

Mithilfe von Eyetracking und Heatmaps lässt sich so sehr leicht ablesen, welche Elemente von Ihren Nutzern besonders wahrgenommen werden und welche nicht. Auch kritische Punkte und Schwachstellen, an denen Nutzer die Orientierung oder die Geduld verlieren, lassen sich so einfach identifizieren.

Die daraus gewonnenen Daten können anschließend zur Optimierung der User Experience herangezogen werden.

Umfragen

Natürlich können Sie Ihre Zielgruppe auch direkt nach deren User Experience mit Ihrer Anwendung oder Ihrem Produkt befragen. Beispielsweise können Sie Zielpersonen dazu einladen, an einer Umfrage teilzunehmen und sie anschließend für ihre Mühe mit einem Gutschein belohnen.

Bedeutung der User Experience für SEO

Eine gute User Experience ist zwar kein direkter Rankingfaktor, kann indirekt aber durchaus Ihre Positionierung in den SERPs beeinflussen.

Denn nach den offiziellen Google-Grundsätzen steht der Nutzer an erster Stelle. Hier ist auch zu lesen, dass Google dem Nutzer eine optimale und einzigartige Erfahrung bieten möchte. Daraus lässt sich ableiten, dass Webseiten, die dem Nutzer eine gute User Experience bieten, auch bessere Chancen auf eine hohe Platzierung innerhalb der Suchergebnisse erhalten. Darüber hinaus ist längst bekannt, dass das Google Ranking maßgeblich von den Reaktionen der User bestimmt wird.

Fühlen sich Besucher auf einer Webseite wohl, verweilen sie länger auf dieser und greifen womöglich auch wiederholt auf ihre Angebote zurück. Für Google ist dies ein bedeutendes Signal für die Relevanz der Seite. Was viele Nutzer als gut empfinden, möchte Google auch anderen Usern nicht vorenthalten, was letztendlich zu einer Verbesserung des Rankings führt.

Bietet eine Webseite hingegen eine schlechte User Experience, beispielsweise aufgrund zu langer Ladezeiten, unstrukturiertem Aufbau oder anderer Mängel, führt das zu einer hohen Absprungrate und vergleichsweise wenigen Seitenaufrufen. Google schließt daraus, dass die Webseite die Erwartungen des Suchenden nicht erfüllen konnte, was zu einem Abstieg im Ranking führt.

Eine gute User Experience kann aber nicht nur SEO positiv beeinflussen. Zufriedene Nutzer werden häufiger zu wiederkehrenden Kunden als unzufriedene. Ebenso ist die Weiterempfehlungsrate bei zufriedenen Kunden natürlich signifikant höher. Die Optimierung der User Experience führt also auch zu mehr Conversions, mehr Neukunden und damit auch zu mehr Umsätzen.

Was ist Storytelling?

Storytelling bedeutet nichts anderes, als Geschichten zu erzählen.

Seit jeher werden von Menschen Geschichten erzählt. Laut Ethnologen reicht der Ursprung des Storytellings ganze 200.000 Jahre zurück, als sich unsere Vorfahren am Lagerfeuer gegenseitig Geschichten erzählten. Sei es, um Wissen weiterzugeben, Erfahrungen zu teilen oder um Werte und Normen zu vermitteln. Storytelling kann sogar als wichtiger Bestandteil unserer Evolution betrachtet werden, das uns unser Überleben sicherte. Denn schon lange bevor Menschen das Schreiben lernten, waren es die Geschichtenerzähler, die überlebenswichtige Informationen von Generation zu Generation weitertrugen.

Auch Unternehmen setzen vermehrt auf Storytelling, um von ihrer Zielgruppe in Zeiten der Informationsflut besser wahrgenommen zu werden. Denn die Menge an Werbebotschaften, mit denen Konsumenten täglich konfrontiert werden, steigt unaufhörlich. Schätzungen gehen davon aus, dass uns um die 10.000 Werbebotschaften täglich erreichen! Da niemand diese Flut an Werbung aufnehmen kann, fangen wir an, die Werbung um uns herum immer weiter zu ignorieren. Die Werbeblindheit der Konsumenten nimmt zu. Damit schafft sich die Werbung sozusagen selbst ab.

Um aus der Masse hervorzustechen und wahrgenommen zu werden, bringt es demzufolge nichts, einfach noch mehr Werbung zu schalten. Storytelling bietet die Möglichkeit, sich bei der Zielgruppe Gehör zu verschaffen und sie durch originelle Geschichten von den eigenen Produkten zu überzeugen, statt sie zu überreden.

Was macht gutes Storytelling aus?

Grundsätzlich gibt es kein allgemeingültiges Geheimrezept für gutes Storytelling.

Gutes Storytelling lädt den Zuhörer emotional auf und motiviert ihn, sich mit der gebotenen Thematik tiefer zu befassen. Es fesselt ihn, wirkt mitreißend und berührt ihn auf einer emotionalen Ebene. Gutes Storytelling inspiriert das Publikum so sehr, dass es fest im Gedächtnis verankert bleibt und freiwillig weitererzählt wird.

Kausalität

Eine Geschichte braucht zunächst einen Grund, warum sie überhaupt erzählt wird. Machen Sie sich also bewusst, welche Botschaft Sie Ihrer Zielgruppe vermitteln möchten. Achten Sie auf eine logische Erzählweise und führen Sie den Zuhörer durch eine zusammenhängende Geschichte. So stellen Sie sicher, dass der Rezipient durch überflüssige oder verwirrende Fakten nicht den Faden verliert und sein Interesse bis zum Ende der Geschichte bestehen bleibt. Alle Handlungen müssen sich dabei sinnvoll auseinander ergeben (Prinzip der Kausalität).

Authentizität

Wer authentisch bleibt, schafft Vertrauen und Glaubwürdigkeit bei seinen Zuhörern. Denn beim Storytelling geht es hauptsächlich um valide Fakten, nicht um fiktive Märchen. Orientieren Sie sich mit Ihren Geschichten daher im besten Fall an reale Erlebnisse und lebensnahe Situationen Ihrer Zielgruppe.

Dramaturgie

Die Dramaturgie ist ein ideales Mittel, um einen kontinuierlichen Spannungsbogen zu erzeugen, damit Zuschauer aufmerksam und aktiv bleiben. Der Leser wird an die Geschichte gebunden, da er wissen möchte, was als nächstes passiert. Er fiebert mit dem Protagonisten mit.

Bereits vor 2500 Jahren hielt Aristoteles in seiner Abhandlung zur „Poetik“ die Grundlagen der Geschichte und die Kunst der Dramaturgie fest. Sein Grundkonzept basiert auf einer 3-Akt-Struktur, mit einer emotionalen Ausgangslage im 1. Akt, einem entstehenden Konflikt im 2. Akt und dessen Auflösung im 3. Akt. Die drei Teile des Dramas (Anfang, Mitte und Ende) werden dabei anhand einer Pyramide dargestellt. Die Verbindungslinien stellen den Spannungsbogen dar. An der Spitze wird schließlich der Höhepunkt der Spannung erreicht.

Die Spannung selbst kann dabei beispielsweise durch überraschende Wendungen oder unvorhergesehene Geschehnisse erzeugt werden.

Nahezu jeder Film und jedes Buch basiert auch heute noch auf diesem grundlegenden Aufbau.

Wie sollte Storytelling aufgebaut sein?

Storytelling unterliegt grundsätzlich dem klassischen Aufbau einer Geschichte, die sich in Einleitung, Hauptteil und Schluss untergliedern lässt.

Folgende Elemente findet man außerdem in fast jeder Geschichte:

Helden / Protagonisten

Schon in den 1940er Jahren analysierte Mythenforscher Joseph Campbell diverse Geschichten und Erzählungen und stellte dabei fest, dass sie fast alle einem bestimmten Muster folgen. Er nannte es „The Hero’s Journey“ – zu Deutsch: Heldenreise.

Eine Geschichte braucht also einen Helden, der eine sogenannte Heldenreise durchlebt. So gut wie alle Hollywoodfilme, Bücher und sogar Songtexte liegen diesem Modell zugrunde.

Dabei starten die meisten Helden gar nicht direkt als Überflieger, sondern sind oftmals sogar eher unscheinbare Wesen. Sie entwickeln sich erst auf ihrer Reise zu wahren Helden, weil sie ein Problem oder einen Konflikt gelöst haben, durch welchen sie über sich selbst hinauswachsen und ihre wahre Stärke erkennen. Denken wir nur einmal an Harry Potter, Spiderman, Lara Croft oder den Clownfisch Nemo – sie alle starteten am Anfang der Geschichte als „Normalsterbliche“, die durch ein bestimmtes Ereignis aus ihrem gewohnten Alltag gerissen wurden. Seit diesem Auslöser stehen sie im weiteren Verlauf der Heldenreise verschiedenen Herausforderungen gegenüber. Auf dem Weg zum Ziel treffen sie Freunde und Verbündete, die ihnen helfen, aber auch Feinde, die sie vor weitere Prüfungen stellen. Und mit jeder weiteren Herausforderung wächst der Wille und die Kraft, das Ziel zu erreichen.

Gerade weil wir den Helden am Anfang der Geschichte als „einen von uns“ erleben, wächst er uns ans Herz und wir fühlen mit ihm mit. Wir sind ihm gegenüber empathisch und können uns so besser mit ihm identifizieren. Womöglich hat er auf uns sogar eine Vorbildfunktion, ganz nach dem Motto „Wenn er/sie das schafft, dann kann ich das auch!“

Unternehmen, die Storytelling im Marketing einsetzen möchten, sollten dabei ihre Kunden als Helden darstellen. Mindestens jedoch eine Person, mit welcher sich die Zielgruppe identifizieren kann. Menschen lieben es, sich mit Helden einer Geschichte identifizieren zu können. Und ein Produkt kann nie der Held einer Geschichte sein.

Matthew Winkler zeigt in diesem Video eindrucksvoll, was einen echten Helden wirklich auszeichnet:

Antagonist

Der Antagonist stellt den Feind bzw. Gegner des Protagonisten dar, der ihm auf dem Weg zu seinem Ziel immer wieder neue Hindernisse in den Weg stellt. Der Antagonist wird dabei meistens als böse und ungerecht charakterisiert.

Der Einsatz eines Antagonisten findet im Storytelling zwar nicht immer statt, es kann allerdings dabei helfen, dass der Zuhörer mit dem Protagonisten mitzittert und hofft, dass am Ende doch das Gute gewinnt.

Das Ziel / Die Lösung eines Problems

Storytelling sollte stets ein Ziel für die emotionale Motivation beinhalten. Schließlich drehen sich alle Geschichten um ein Ziel, welches der Held auf seiner Reise erreichen will. Das Ziel gibt ihm überhaupt erst die Motivation, Hindernisse auf seinem Weg zu bewältigen. Ob er das Ziel erreicht oder nicht ist letztendlich auch das, was eine Geschichte so spannend und emotional machen kann.

Unternehmer, die Storytelling als Marketinginstrument einsetzen möchten, sollten stets darauf achten, dass sich die Zielgruppe mit diesem Ziel identifizieren kann. Als Marketinginstrument sollte Storytelling veranschaulichen, wie das Unternehmen dem Helden (dem Kunden) dabei helfen kann, sein Ziel zu erreichen.

Hierbei geht es nicht um Fakten des Produktes oder um günstige Preise. Vielmehr sollte dem Kunden klar werden, welche seiner Träume er mit den Produkten verwirklichen kann oder welche Probleme sie für ihn lösen. Im Idealfall wird beim Kunden ein „Aha-Erlebnis“ ausgelöst, das dazu beiträgt, dass er sich noch lange an die Geschichte zurückerinnert.

Eine Herausforderung / Ein Problem

Ein Spannungsbogen entsteht in der Regel dann, wenn ein sympathischer Charakter auf dem Weg zu seinem Ziel einem Problem gegenübersteht. Ohne eine Herausforderung oder ein Problem wirken Geschichten langweilig und eintönig.

Storytelling im Webdesign und Online Marketing

Längst sind es nicht mehr nur Schriftsteller oder Filmemacher, die Geschichten erzählen. Auch Unternehmen nutzen Storytelling vermehrt als Werkzeug der Kommunikation.

Kein Wunder, denn gutes Storytelling ist ein überaus mächtiges Marketinginstrument. Es hilft dabei, kalten, nackten Zahlen Leben einzuhauchen und kann selbst langweilige und trockene Themen spannend und emotional vermitteln. Zudem gibt Storytelling den Personen hinter einem Produkt ein Gesicht, sodass Kunden sich besser mit der Marke identifizieren können. Storytelling soll durch mitreißende Geschichten den Adressaten überzeugen, statt ihn mit aufdringlichen Werbebotschaften zu überreden.

Und genau das ist der Grund, warum Storytelling im Marketing auf dem Vormarsch ist. Konsumenten sind schlichtweg genervt von aufdringlicher Werbung. Laut einer Studie erreichen uns heute bis zu 10.000 Werbebotschaften täglich! Auf jeder Webseite müssen reihenweise Pop-Ups und Werbeanzeigen weggeklickt werden, bevor man überhaupt den relevanten Inhalt zu Gesicht bekommt. Nutzer fühlen sich regelrecht verfolgt durch diverse Retargeting-Maßnahmen, die von Unternehmen immer intensiver eingesetzt werden. Als Verbraucher kann man durchaus das Gefühl haben, von geldgierigen Unternehmen geradezu umzingelt zu sein und als Mensch selbst nur noch eine untergeordnete Rolle zu spielen.

Wir sprechen von personalisierter Werbung, geben vor, die Bedürfnisse unserer Zielgruppe genau zu kennen. Dabei tun wir im Grunde nichts anderes, als sein Nutzungsverhalten im Internet auszuspionieren und für die eigenen Marketingzwecke zu missbrauchen.

Konsumenten wollen keine reinen Konsumenten mehr sein. Sie wollen mitmachen, wünschen sich ein Zugehörigkeitsgefühl. Und vor allem entscheiden sie zunehmend selbst, wem sie ihre Aufmerksamkeit schenken. Nicht demjenigen, der am lautesten schreit. Sondern vielmehr demjenigen, der sich auf sympathische Weise mit seinen Bedürfnissen und Ansprüchen auseinanderzusetzen weiß und mit dem sich der Konsument am besten identifizieren kann.

In Zeiten der Informationsflut und Überforderung der Nutzer kann Storytelling dabei helfen, sich erfrischend anders von der Konkurrenz abzuheben. Die Botschaft wird eher von der Zielgruppe aufgenommen und gehört.

Wer die Menschen berühren möchte, schafft das nicht mit bloßen Fakten. Damit eine Geschichte in Erinnerung bleibt, muss sie Emotionen erzeugen.

Vorteile von Storytelling im Webdesign und Marketing

Storytelling bietet für Unternehmen eine Reihe von Vorteilen:

• Das Unternehmen wirkt persönlicher und nahbarer
• Storytelling weckt Emotionen und verleiht einem Sachverhalt Bedeutung
• Nutzer werden stärker involviert, was das Zugehörigkeitsgefühl und damit die Bindung zu einer Marke verstärkt
• Botschaften werden durch Storytelling im Gedächtnis der Zielgruppe verankert
• Gute Geschichten werden von Nutzern freiwillig viral verbreitet
• Storytelling hilft dabei, das Markenimage und die Markenwahrnehmung zu stärken
• Storytelling aktiviert deutlich mehr Gehirnregionen, wodurch Informationen einfacher verarbeitet werden können
• Steigerung der Reichweite und des Vertrauens
• Employer Branding

Häufig eingesetzte Elemente beim Storytelling im Webdesign

Storytelling entfaltet sein Potenzial, wenn Text durch Bilder, Audios, Videos und Illustrationen ergänzt wird – also möglichst viele Sinne einbezogen werden. Hier sind einige Elemente, mit welchen sich Storytelling im Webdesign perfekt inszenieren lässt:

Interaktive Inhalte

Interaktive Inhalte ermöglichen dem Nutzer an dem Geschehen zu partizipieren und so stärker als Teil der Geschichte involviert zu werden. Besonders spannend wird es, wenn der Nutzer durch seine Interaktion Einfluss auf das Geschehen nehmen kann. Interaktive Infografiken und Karten, sowie der Einsatz von Hotspots und 360° Videos können hierbei unterstützen.

Wie eindrucksvolles Storytelling mit interaktiven Elementen funktioniert, zeigen folgende Beispiele:

https://alacrangroup.com/

https://savetheair.de/

https://unravel.vangogh.com/en/

https://plumegame.com/

https://360.iflymagazine.com/de/

https://www.orano.group/experience/innovation/en

http://oatthegoat.co.nz/intl.html

https://heraclosgame.com/

http://thymia.world/

Parallax Effekt

Beim Parallax Effekt werden verschiedene Grafiken auf unterschiedlichen Ebenen eingesetzt, die sich dann während des Scrollens oder durch die Mausbewegung unterschiedlich schnell bewegen. Der Parallax Effekt gibt einer Webseite mehr Tiefe und hilft dabei, eine Geschichte lebendig und dynamisch wirken zu lassen. Daher ist vor allem das Parallax Scrolling als visuelles Gestaltungsmittel im Storytelling besonders beliebt. Die einzelnen Grafiken werden dabei so platziert, dass sie beim Scrollen eine Geschichte erzählen.

Adobe

http://www.sbs.com.au/theboat/

https://www.beargrylls.com/

https://my.pottermore.com/hogwarts

https://www.rainforestfoods.com/experience/#!/slide-health

Flat Design bzw. Material Design

Storytelling muss nicht zwangsläufig mit realen Bildern erzählt werden. Auch Zeichnungen werden von Menschen instinktiv verstanden und meistens zudem viel leichter verarbeitet. Manchmal ist es auch einfacher, eine Geschichte mithilfe von Zeichnungen zu inszenieren, da hier der Fantasie keine Grenzen gesetzt sind. Eine sprechende Banane? Ein davonlaufender Geldschein? Was in der Realität schwer abzubilden ist, lässt sich über Zeichnungen ganz einfach darstellen.

Flat Design und Material Design eignen sich hervorragend für Storytelling, das auf Zeichnungen und Illustrationen setzt.

Einige coole Beispiele für Storytelling im Flat Design:

http://everylastdrop.co.uk/

Onepager

Als Onepager bezeichnet man eine Webseite, die aus einer einzigen Seite besteht. Alle wichtigen Informationen werden auf dieser Seite kurz und prägnant präsentiert. Onepager sind daher ideal geeignet für eine fokussierte kompakte Kommunikation und für Seiten, die starke visuelle Eindrücke vermitteln möchten.

Beim Storytelling ist es wichtig, den Zuhörer zu fesseln und unnötige Ablenkungen zu vermeiden. Da beim Onepager keine weiteren Unterseiten existieren, kann sich der Nutzer voll und ganz auf die Geschichte konzentrieren.

Videos

Bewegte Bilder lösen stärkere Emotionen in uns aus, als statische Inhalte wie Fotos oder Texte. Laut diversen Studien aus der Hirnforschung, nehmen Menschen Informationen außerdem besonders bereitwillig auf, wenn mehrere ihrer Sinne gleichzeitig mit einbezogen werden. Durch die Einbeziehung unterschiedlicher Sinne kann unser Gehirn die Informationen leichter verarbeiten, sodass wir auch komplexe Themen durch eine audiovisuelle Darstellung besser nachvollziehen können. Zudem bleibt ein Video eher im Gedächtnis des Betrachters, besonders, wenn er einen inspirierenden „Aha-Effekt“ erlebt.

Deswegen erfreuen sich auch Erklärvideos immer größerer Beliebtheit. Sie setzen fast immer auf Storytelling und sind inhaltlich auf das Wesentliche beschränkt. Innerhalb von 60-90 Sekunden erhält der Zuschauer so alle nötigen Informationen, die er für das grobe Verständnis einer Thematik benötigt.

Audiodateien

Die Unterlegung des Storytellings mit Musik oder passenden Audioeffekten gibt dem Zuschauer zusätzlich das Gefühl, einen Film anzusehen.

Weitere Beispiele für gelungene Storytelling Kampagnen

Hornbach – Sag es mit deinem Projekt

Edeka – Weihnachtsclip

Nivea – Danke Mama

Was ist responsive Webdesign?

Das responsive Webdesign beschreibt eine aktuelle Technik, die es ermöglicht, Webseiten so zu entwickeln, dass sie sich flexibel an die visuellen und haptischen Möglichkeiten des verwendeten Endgeräts und dessen Bildschirmgröße anpassen.

Übersetzt bedeutet der Begriff responsive Webdesign so viel wie „reagierendes Webdesign“.

Sinn und Zweck des responsiven Webdesigns

Die Art, wie Menschen das Internet heute nutzen, hat sich seit der Markteinführung von Smartphones und Tablets stark verändert. Bereits über die Hälfte aller Suchanfragen bei Google werden heute über mobile Endgeräte getätigt. Landen Nutzer auf einer nicht mobiloptimierten Website, verlassen sie diese meistens bereits nach wenigen Sekunden wieder. Einfach, weil die Bedienung zu umständlich ist und ähnliche Anbieter nur wenige Mausklicks entfernt sind. Viele Webseitenbetreiber unterschätzen nach wie vor, wie viele potentielle Kunden und damit Geschäftspotential an dieser Stelle verloren gehen.

Mit der Verbreitung mobiler Geräte wie Smartphones und Tablets steigt gleichzeitig der Anspruch der Nutzer an die Zugänglichkeit von Inhalten beziehungsweise an die intuitive Navigation auf Webseiten. Nutzer erwarten, dass sie jede Website von jedem beliebigen Ort und Endgerät aus aufrufen und intuitiv bedienen können. Nur, wenn Webseitenbetreiber in der Lage sind, diesen Anforderungen nachzukommen, können sie weiterhin von zufriedenen Kunden und hohen Kaufabschlussraten profitieren. Dies erzwingt allerdings ein Umdenken bei der Webseitengestaltung. Es reicht nicht mehr, ein Layout für eine einzige Bildschirmgröße anzupassen. Stattdessen muss ein Webdesign in der Lage sein, flexibel auf unterschiedliche Bildschirmgrößen und deren Verhalten zu reagieren:

Smartphones: 320px bis 480px
Tablets: 768px bis 1024px
Desktop-PCs: 1024px+

Unterschied von Smartphone Bildschirmen zu Desktop Bildschirmen:

• Deutlich kleinerer Bildschirm, dadurch weniger Platz für die Darstellung
• Hoch- und querformatig nutzbar (Portrait / Landscape)
• Oft höhere Pixeldichte (Retina)
• Bedienung über Touch, nicht mit einem Mauszeiger
• Eventuell weniger verfügbares Datenvolumen, daher müssen Ladezeiten dringend optimiert werden

Starres Grid Layout vs. flexibles Grid Layout

Was versteht man unter einem Grid Layout?

Jede Website basiert auf einem Gestaltungsraster, dem sogenannten Grid-Layout. Hierbei handelt es sich um ein unsichtbares System an Linien, an dem die verschiedenen Elemente einer Website ausgerichtet werden. Ein Webdesign, das auf einem solchen Layout basiert, wirkt meist aufgeräumter und harmonischer.

Mehrspaltige Inhalte auf einer Website sind beispielsweise ein häufig verwendeter Teil eines Grid Layouts.

Starres Grid Layout

Noch vor einigen Jahren konnte keiner ahnen, dass Webseiten in Zukunft von diversen unterschiedlichen Bildschirmgrößen aufgerufen werden. Es gab einige gängige Bildschirmgrößen, für welche Webseiten angepasst wurden. Schaut man sich eine solche veraltete Webseite heute auf einem Smartphone an, dann erkennt man sehr gut das starre Grid Layout, mit welcher sie entwickelt wurde. Auf dem Smartphone sieht die Webseite genauso aus, wie auf dem Desktop-PC. Allerdings bietet der deutlich kleinere Smartphone Bildschirm nicht genug Platz für das starre Layout, das nun sozusagen über die Bildschirmränder hinausragt.

Wollen wir alle Inhalte der Seite erfassen, müssen wir den Bildschirm hin und her bewegen und zoomen, um gewisse Bereiche lesen zu können. Auch das Menü der Seite ist – vor allem mit „Wurstfingern“ – auf einem kleinen Smartphone Bildschirm nur schwer zu bedienen. Mal eben schnell die Öffnungszeiten eines lokalen Geschäfts zu recherchieren kann hier schnell zur Geduldsprobe werden. Nutzer haben schlichtweg keine Lust, sich an Ihre Website anzupassen. Sie erwarten, dass sich die Website flexibel an ihre Bedürfnisse anpasst und nicht umgekehrt.

Nachteile eines starren Layouts im Überblick:

• Nutzer müssen zoomen oder den Bildschirm hin und her schieben um alle Inhalte zu erfassen
• Schaltflächen sind besonders bei dicken bzw. großen Fingern nicht immer leicht zu treffen
• Schrift und Bilder haben oft nicht die optimale Größe und sind daher nicht immer gut zu erkennen
• Anklickbare Elemente liegen möglicherweise zu dicht beieinander
• Die umständliche Bedienung sorgt für eine schlechte User Experience und dadurch für stärkere Abbruchraten

Flexibles Grid Layout

Auch auf kleinen Bildschirmen eine gleichbleibende Nutzerfreundlichkeit zu gewährleisten, erfordert ein Umdenken bei der Webseitengestaltung insbesondere hinsichtlich des Gestaltungsrasters. Das Layout der Website muss sich flexibel an die Bildschirmgröße anpassen, statt wie bisher seine starre Form über alle Bildschirme hinweg zu behalten.

Bei einem flexiblen Layout wird auf feste Pixelangaben weitgehend verzichtet. Stattdessen werden heute eher relative Werte wie Prozentangaben verwendet. Denn wenn man bspw. die Breite eines Bildes mit 1920px fest definiert, wird es zwar auf einem großen Bildschirm optimal dargestellt. Auf einem kleinen Bildschirm mit einer Gesamtbreite von 480px würde das Bild jedoch um 1440px überstehen. Mit Prozentangaben kann man dieses Problem beim responsive Webdesign umgehen, da sich dann das Bild relativ entlang der Bildschirmgröße bzw. entlang der zur Verfügung stehenden Fläche ausrichtet.

Auch die Darstellung von Spalten muss sich flexibel an die Bildschirmgröße anpassen können. Auf einem großen Desktop-PC sehen vier Spalten nebeneinander noch gut aus. Auf einem kleineren Bildschirm werden die Spalten jedoch extrem schmal, sodass vor allem lange Wörter schnell überstehen.

Stattdessen sollten Breakpoints gesetzt werden, sodass die Spalten auf kleinen Bildschirmen untereinander dargestellt werden, statt nebeneinander. So sind die Inhalte innerhalb der Spalten für den Anwender deutlich einfacher zu erfassen. Hier arbeitet man ebenfalls mit relativen Prozentangaben statt mit festen Pixelwerten:

Weitere Gestaltungsregeln um aus einem starren Layout ein flexibles Layout zu machen:

• Das Hauptmenü sollte auf kleinen Bildschirmen als sogenanntes Hamburgermenü dargestellt werden.
• Im responsive Webdesign sollten Schriftgrößen, Zeilenhöhen etc. auf der Basis von Prozentangaben (%) oder anderen relativen Werten (z.B. em) definiert werden. So entspricht eine Schriftgröße von 16 Pixeln 100% oder 1em.
• Bildgrößen sollten ebenfalls mit relativen Werten definiert werden.
• Mehrspaltige Inhalte sollten auf kleinen Bildschirmen untereinander, statt nebeneinander dargestellt werden.

Wie funktioniert Responsive Webdesign? – Technische Umsetzung

Mithilfe von sogenannten Media Queries werden beim Aufruf einer Website zunächst verschiedene Daten abgefragt, wie:

• Breite und Höhe des Bildschirms (Viewport)
• Breite und Höhe des Geräts
• Geräte-Orientierung (Landscape / Portrait)
• Auflösung
• usw.

Abhängig vom Ergebnis der Abfrage werden zuvor die mittels Media Queries festgelegten Gestaltungsregeln abgerufen und angewendet. Innerhalb dieser Gestaltungsregeln werden sogenannte Breakpoints gesetzt. Überschreitet die Geräteauflösung einen solchen Breakpoint, wird das Layout der Website dynamisch angepasst.

Simples Beispiel:

Wir wollen die Schriftgröße abhängig von der verwendeten Bildschirmgröße anpassen. Auf dem Smartphone soll sie etwas kleiner (18px) sein als auf einem Tablet (20px).

Mittels Media Queries lässt sich diese Anforderung problemlos lösen. Da Media Queries ein Teilgebiet der Stylesprache CSS sind, müssen wir die Gestaltungsregeln innerhalb einer Datei mit der Endung .css (z.B. style.css) eingeben. Üblicherweise werden Media Queries ganz am Ende der Datei definiert. Natürlich kann man Media Queries aber auch in einer separaten CSS-Datei auslagern, welche dann noch im Hauptdokument eingebunden werden muss.

In der Praxis sieht der zugehörige “Responsive Webdesign Code” so aus:

/* „Normale“ Style-Angaben ohne Media Queries, z.B. für die normale Desktop-Version */

p {
font-size: 22px;
}

/* Anpassung für Tablet */

@media screen and (min-width: 768px) and (max-width: 1024px) {

p {
font-size: 20px;
}

}

/* Anpassung für Smartphones */

@media screen and (min-width: 320px) and (max-width: 480px) {

p {
font-size: 18px;
}

}

Die Vorteile von responsive Webdesign

Wer sich eine Homepage erstellen lassen möchte, sollte stets beachten, dass ein responsive Webdesign kein “Nice to have”, sondern vielmehr ein “Must have” ist. Wer über seine Website neue Kunden generieren möchte, muss dementsprechend für eine einfache Bedienung über alle Endgeräte hinweg sorgen.

Vorteile des responsive Webdesign im Überblick:

• Die Internutzung wird zunehmend mobil. Im Jahr 2018 nutzen XX% aller Menschen in Deutschland das Smartphone.
• Seit April 2014 zählt ein responsive Webdesign bei Google als entscheidender Rankingfaktor. Nicht-mobiloptimierte Webseiten rutschen in den Suchergebnissen immer weiter nach hinten. Ein mobiloptimiertes Layout kann also einen deutlichen Vorsprung bei Google bedeuten.
• Die Usability der Website wird ganzheitlich verbessert, was unabhängig vom verwendeten Endgerät für eine bessere Nutzererfahrung sorgt. So werden Absprungraten deutlich reduziert. Dadurch erhöht sich die Conversion Rate und damit auch der Unternehmensumsatz.
• Mit responsive Webdesign bleiben Sie zukunftsfähig, egal, welche neuen Bildschirmgrößen den Markt erobern.
• Nach Veröffentlichung der Website werden nachträglich veränderte Inhalte automatisch an alle Bildschirmgrößen angepasst und müssen nicht einzeln bearbeitet werden.

Was ist “Mobile First” und lohnt sich das?

Mit Mobile First ist ein Ansatz gemeint, bei dem durch responsives Webdesign die Website zuerst für den mobilen Zugriff konzipiert und optimiert wird. Um auch größere Displays zu berücksichtigen, wird die Website für diese anschließend entsprechend angepasst.

Dieses Konzept liegt der Annahme zugrunde, dass es wesentlich leichter ist, ein mobiles Layout auf einen Desktop-PC zu übertragen als umgekehrt. Das Mobile First Prinzip sorgt außerdem dafür, dass Inhalt und Struktur der Seite stärker bedacht werden. Beispielsweise wird vielen Unternehmen klar, dass gewisse Informationen überflüssig sind und weggelassen werden können. Mobile First unterstützt also auch dabei, wichtige Informationen von unwichtigen zu trennen und die Website nicht mit unnötigen Informationen zu überladen. Die Logik von “Mobile First”, dass man mit der Konzeption einer mobilen Website eine perfekte Desktop-Version sozusagen “gratis” dazu erhält, hat in den vergangenen Jahren einen enormen Hype auf den Mobile First Ansatz ausgelöst.

Auch wenn viele Webdesigner auf dieses Prinzip schwören, sind wir der Meinung, dass man “Mobile First” nicht bei jedem Kunden und jedem Projekt anwenden muss bzw. sollte. Es kann zwar durchaus Sinn machen, die mobile Version einer Seite nur auf die wichtigsten Elemente und Informationen herunterzubrechen. Dies genauso auf die Desktop-Version zu übertragen ist jedoch nicht zwingend die optimale Lösung. Denn während häufig die User Experience auf mobilen Endgeräten verbessert wird, kann die Nutzererfahrung auf Desktop PCs darunter leiden.

Bei jedem Projekt sollte man individuell entscheiden, ob “Mobile First” ein richtiger Ansatz sein kann und falls ja, welche konkreten Vorteile es mit sich bringt. Sinnvoller ist es, die unterschiedlichen Endgeräte und Nutzungssituationen einzeln und unabhängig voneinander zu betrachten. Es ist also nicht verkehrt, zuerst die Desktop-Version zu kreieren und anschließend um eher unnötige Informationen auf der mobilen Version zu reduzieren. Ein User, der zu Hause gemütlich vor dem PC sitzt, hat eventuell mehr Zeit sich Ihre Inhalte durchzulesen, als jemand, der von unterwegs nur schnell die wichtigsten Informationen nachlesen möchte.

Wie kann ich testen, ob mein Webdesign responsive ist?

Es gibt verschiedene kostenlose Online-Tools, mit welchen man testen kann, ob die eigene Website responsive ist. Am besten gefallen hat uns das Tool ami.responsivedesign.is

Online-Tools funktionieren aber nicht immer zuverlässig. Verschiedene Plugins beispielsweise bei WordPress definieren ihre responsiven Eigenschaften nicht unbedingt an der Pixelgröße des Bildschirms, sondern am verwendeten Endgerät selbst. Die Eigenschaften werden also nur übernommen, wenn das Gerät auch tatsächlich ein Smartphone ist.

Da Online-Tools aber meistens von einem Desktop-PC aufgerufen werden, greifen die speziell für das Smartphone definierten Eigenschaften hier nicht.

Deswegen empfehlen wir, Webseiten immer direkt von einem Smartphone oder Tablet aus zu überprüfen, um wirklich 100% sicher sein zu können.

Benötigen Sie Hilfe bei der Erstellung Ihres responsive Webdesign?

Gerne unterstützen wir Sie im Rahmen von Webdesign Frankfurt bei der Konzeption und Entwicklung Ihrer responsiven Website. Sprechen Sie uns einfach vollkommen unverbindlich an.

Parallax Scrolling Effekt im Webdesign

Sicherlich ist Ihnen in den vergangenen Jahren die ein oder andere Website mit dem beliebten Parallax Scrolling Effekt begegnet. Der Parallax Scrolling Effekt wird dann sichtbar, sobald man auf einer Webseite scrollt (wer hätte das gedacht ? ). Meistens werden hierfür verschiedene Grafiken auf unterschiedlichen Ebenen eingesetzt, die sich dann während des Scrollens unterschiedlich schnell bewegen. So kann sich beispielsweise ein Hintergrund langsamer bewegen, während sich alle darauf befindlichen Bilder und Grafiken schneller bewegen. Durch den Parallax Effekt erhalten Webseiten mehr Tiefe und es wird mehr Räumlichkeit und Bewegung simuliert. Insgesamt erhält die Website so einen dreidimensionalen Touch.

Parallax Scrolling arbeitet mit der sogenannten Bewegungsparallaxe. Wenn ein Beobachter sich parallel zu zwei Objekten bewegt, erscheinen ihm die Objekte als ob sie sich mit verschiedenen Geschwindigkeiten bewegen. Das nähere Objekt scheint sich schneller zu bewegen, das weiter entfernte Objekt langsamer. Beim Beobachter entsteht durch diesen wahrnehmungspsychologischen Effekt eine besondere Tiefenwahrnehmung, da die Lichtreflexionen des nahen Objektes schneller auf die Netzhaut treffen. Das menschliche Gehirn verarbeitet diese Reize so, dass der abgebildete Raum wie in 3D wahrgenommen wird. So begegnet auch Ihnen der Parallax Effekt im Grunde genommen täglich, beispielsweise, wenn Sie mit dem Auto auf einer Landstraße unterwegs sind. Während sich die Bäume und Straßenschilder direkt am Straßenrand in hohem Tempo an Ihnen vorbeibewegen, scheinen sich die Häuser dahinter langsamer zu bewegen und die Berge hinter diesen Häusern kriechen nur so dahin.

Sehr schön erkennt man den Parallax Effekt an folgender Grafik:

Einsatzmöglichkeiten des Parallax Scrolling Effekts

Häufig sieht man den Parallax Scrolling Effekt auf sogenannten Onepagern – also Webseiten, die ihre Inhalte auf nur einer einzigen Seite präsentieren. Der Parallax Effekt wird dabei oft beim sogenannten “Storytelling” eingesetzt. Die einzelnen Elemente werden also so platziert, dass diese beim Scrollen eine Geschichte erzählen. Durch das visuelle Storytelling sorgt das beim Nutzer für einen sehr hohen Spaßfaktor beim Betrachten und Nutzen der Website. Zudem bleiben Webseiten mit gut umgesetztem Storytelling einem Besucher mit Sicherheit noch lange positiv in Erinnerung.

Der Parallax Scrolling Effekt lässt sich mit etwas Kreativität natürlich unabhängig vom jeweiligen Thema auf einer Website umsetzen. So gibt es in unseren Beispielen weiter unten auch ein Restaurant, welches seine Fischgerichte mittels dem Parallax Effekt hervorragend präsentiert.

Mögliche Probleme beim Einsatz des Parallax Scrolling Effekts

So schön der Effekt auch ist, er bringt leider oft auch viele Nachteile mit sich. Deswegen sollte der Effekt wenn möglich nur sparsam auf einer Website eingesetzt werden. Beim Einsatz des Parallax Effekts über die ganze Seite – bspw. beim Storytelling – sollten viele Punkte beachtet werden.

• Im besten Fall sollte Flat-Design genutzt werden…
• … denn auch die Ladezeit wird beim Einsatz vieler Bilder und Grafiken natürlich leiden. Die Dateigröße der einzelnen Grafiken sollte daher so klein wie möglich sein. Generell sollten Sie die Ladezeit Ihrer Website beim Einsatz von Parallax sehr gut im Blick behalten. Denn letztendlich nützt Ihnen die tollste Parallax Website nichts, wenn Nutzer die Seite frustriert wieder verlassen.
• Sie sollten Ihren Fokus nicht nur auf die tolle visuelle Darstellung legen, sondern darauf achten, dass auch wichtige Informationen bestens an den Nutzer weitergegeben werden. Denn aus diesem Grund hat ein Besucher immerhin Ihre Website überhaupt betreten. Achten Sie auch darauf, dass trotz toller Effekte Nutzer sich intuitiv zurecht finden und keine unnötigen Hürden bei der Kontaktaufnahme oder dem Kauf eines Produktes entstehen.
• Insbesondere die Darstellung und Navigation auf dem Touchscreen mobiler Endgeräte kann viele Schwierigkeiten mit sich bringen. Wenn möglich, sollten Sie für die Darstellung auf mobilen Endgeräten also eine alternative Lösung anbieten.
• Unerfahrene Internetnutzer könnten sich von zu viel Parallax Effekt überfordert fühlen und die Internetseite irritiert wieder verlassen. Sie sollten sich im Vorfeld also schon Gedanken darüber machen, wer Ihre Zielgruppe ist und ob der Einsatz des Parallax Effekts bei dieser angemessen ist.
• Vor allem, wenn Sie den Parallax Effekt für das Storytelling auf einem Onepager einsetzen möchten, kann es schwierig sein, die Seite für Suchmaschinen zu optimieren. Neben der Ladezeit ist auch zu wenig Text und dadurch auch eine geringe interne Verlinkung ein häufiges Problem auf solchen Webseiten.
• Generell gilt: viel hilft nicht immer viel. Setzen Sie den Parallax Effekt wirklich nur angemessen und sparsam ein. Auch ein dezenter “Eyecatcher” kann für einen bleibenden “Wow-Effekt” sorgen.

Vertikaler vs. horizontaler Parallax Effekt

Meistens begegnet uns auf Webseiten ein vertikaler Parallax Effekt, aber auch horizontal lässt sich der Effekt wunderbar einsetzen.

Benötigen Sie Unterstützung?

Gerne unterstützt unsere Webdesign Frankfurt Agentur Sie bei der Konzeption und Umsetzung eines ansprechenden Parallax Effektes! Sprechen Sie uns einfach unverbindlich an.

Tolle Beispiele für einen horizontalen Parallax Effekt:

AO.com

wildnatureinkazan.ru

switchwine.com.au

mattiecsboy.com

www.drugtreatment.com

hotdot.pro

Weitere Webdesign Beispiele mit kreativem Einsatz des Parallax Effekts:

The Boat (mein absoluter Favorit!)

melaniedaveid.com

antonandirene.com

restaurantleduc.com

www.cabletv.com

makeyourmoneymatter.org

cyclemon.com

benthebodyguard.com

www.madwell.com

www.firewatchgame.com

jonathannicol.com

www.sweetestevia.gr

theuniquehorn.com

boy-coy.com

graphicnovel-hybrid4.peugeot.com

www.nytimes.com

gardenestudio.com.br

everylastdrop.co.uk