User Experience (UX) – mehr Umsatz durch ein positives Nutzungserlebnis

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.

Read More

Storytelling – so erzählen Sie Geschichten, die begeistern, fesseln und mitreißen

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.

Tipp Icon

Ein Beispiel gelungenen Storytellings, dessen Anekdote Sie sicherlich nicht so schnell vergessen werden:

In den ersten Wochen an der Hochschule händigte der Professor seinen Studenten einen Fragebogen aus. Es war eine Art Quiz über ihre Motivation hier zu studieren, gemischt mit einigen Fragen zur Uni selbst. Nur die letzte Frage fiel aus dem Rahmen, sie lautete: „Wie heißt die Frau mit Vornamen, die regelmäßig diesen Hörsaal reinigt?“ Tatsächlich konnte kaum jemand die Frage beantworten. Zwar hatten die meisten der Studenten die Putzfrau schon ein paar Mal gesehen, wussten dass sie um die 50 war, dunkle Haare hatte und einen spanischen Akzent. Aber ihren Namen kannte keiner. Wie auch? Niemand hatte mit ihr je ein Wort gewechselt. Also ließen die meisten das Antwortfeld zu dieser Frage frei (einige versuchten es immerhin mit Chuzpe und schrieben einen geratenen Namen hin).

Als alle den Fragebogen abgaben, fasste sich einer der Studenten ein Herz und sprach den Professor direkt auf diese Frage an: „Wird diese Frage Einfluss auf die Gesamtnote am Ende des Semersters haben?“, wollte er wissen. „Absolut“, antwortete der Professor und erklärte auch warum: „In Ihrer Karriere werden Sie einen Haufen Leute kennenlernen. Und alle werden sehr wichtig sein. Und ich meine wirklich ALLE. Jeder einzelne davon verdient Ihre Aufmerksamkeit, Ihre Zuwendung – zumindest aber ein Lächeln.“

Der Student vergaß diese Lektion nie – ebenso wie den Namen der Putzfrau, nach dem er sich kurz darauf bei ihr erkundigte. Sie hieß Dorothy.

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.

Tipp Icon

Auf einen Blick: Gutes Storytelling…

  • …lädt den Betrachter emotional auf
  • …bleibt im Gedächtnis und wird weitererzählt
  • …unterhält den Nutzer
  • …löst idealerweise positive Empfindungen bei ihm aus oder bringt ihn zum Lächeln
  • …ist spannend und fesselt den Nutzer
  • …bezieht mehrere Sinne des Betrachters gleichzeitig ein
  • …ist logisch aufeinander aufgebaut
  • …vermeidet überflüssige Informationen
  • …ist authentisch und orientiert sich an lebensnahen Situationen der Zielgruppe
  • …ermöglicht dem Betrachter, sich mit dem Protagonisten bzw. der Handlung zu identifizieren
  • …fokussiert sich auf ein Thema
  • …enthält keine werbliche Sprache oder offensichtliche Werbung

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

Read More

Mit User Centered Design zu einer besseren Usability & User Experience

Das User Centered Design (kurz: UCD; deutsch: nutzerzentrierte Gestaltung) ist ein Konzept im Webdesign, bei welchem der Nutzer und seine Bedürfnisse von Anfang an im Mittelpunkt stehen. So wird das gesamte Webdesign maßgeblich von den Erwartungen und dem Verständnis der User gesteuert. Das Ziel ist es, auf diese Weise die ganzheitliche Usability (=Bedienung) und User Experience (=Nutzererfahrung) auf einer Website positiv zu beeinflussen.

Indem die zukünftigen Nutzer von Beginn an systematisch mit in den Entwicklungsprozess eingebunden werden, bleiben Ihnen langfristig teure Fehlentwicklungen und Optimierungen erspart.

Sinn und Zweck des User Centered Designs

Eine Webseite kann nur dann erfolgreich sein, wenn sie die Erwartungen, Bedürfnisse und Ziele der zukünftigen Nutzer bestmöglich befriedigt. Fühlen sich Besucher auf Ihrer Website nicht wohl oder finden sich nur schwer zurecht, verlassen sie diese innerhalb weniger Sekunden wieder. Vielen Webseitenbetreibern ist gar nicht bewusst, wie viel potenzieller Umsatz aufgrund einer schlechten Website Usability liegen bleibt.

In solchen Fällen zaubern wir immer unseren Lieblingsspruch aus den Ärmeln. Vielleicht wirkt er etwas altertümlich. Aber er trifft es genau auf den Punkt:

“Der Köder muss dem Fisch schmecken, nicht dem Angler.”

Leider haben auch wir regelmäßig mit Kunden zu tun, die ihre Webseite nur nach ihrem eigenen subjektiven Geschmack beurteilen. Dass Geschmäcker unterschiedlich sind, möchte auch niemand abstreiten. Es gibt jedoch gewisse visuelle und strukturelle Regeln, die eingehalten werden müssen. Schließlich rufen die meisten Menschen tagtäglich die unterschiedlichsten Webseiten auf. Sei es unterwegs in der Bahn über das Smartphone oder gemütlich zu Hause vom Desktop-PC aus. Hier begegnen sie immer wieder vertrauten Gestaltungsmustern, die ihnen die intuitive Navigation durch die jeweiligen Seiten erleichtern.

Zum Beispiel wird in westlichen Kulturen ein Textfluss von links nach rechts erwartet. Größere Elemente (z.B. Schriften) sind bedeutender, als kleine. Das Unternehmenslogo befindet sich in der linken Ecke. Und das Wichtigste steht am Anfang einer Webseite.

Fallen Sie mit Ihrer Webseite hier aus dem Rahmen, sorgt das für Verwirrung und damit einhergehend für eine hohe Absprungrate.

Oder um es ganz unverblümt auszudrücken: Wir können Ihnen auf Wunsch eine knallpinke Webseite mit tausend blinkenden Glitzer-Animationen und lauter Techno-Musik im Hintergrund erstellen. Oder eine Webseite im Design aus der Internet-Steinzeit. Neukunden werden Sie damit nicht generieren, aber vielleicht macht sich ja ein eingerahmter Screenshot ganz schön im Wohnzimmer über der Couch 😉

Mit User Centered Design Besucher vom eigenen Angebot überzeugen

Das User Centered Design verfolgt den Ansatz, Ihre Webseite stattdessen aus den Augen Ihrer Zielgruppe zu betrachten. Es geht darum, Informationen verständlich und einfach zugänglich zu machen, sodass Besucher sich bei Ihnen gut beraten und aufgehoben fühlen. Das schafft Vertrauen in Ihre Marke und gleichzeitig auch in Ihre Kompetenz.

Und Kompetenz beweisen Sie nicht, indem Sie lauter Fachausdrücke auf Ihrer Webseite unterbringen, mit denen Laien nichts anzufangen wissen. Wenn Laien Ihre Produkte oder Dienstleistungen nicht verstehen, dann scheitert es schon an der zielgruppengerechten Kommunikation.

Nutzerzentrierte Gestaltung zielt vielmehr darauf ab, komplexe Sachverhalte einfach und verständlich zu übermitteln. Trockene oder komplexe Themen können beispielsweise mit inhaltsstützenden Grafiken anschaulich dargestellt werden. Auch der Einsatz von ansprechenden Bildern oder Videos kann dazu beitragen, Nutzer emotional aufzuladen und so eine persönliche Bindung zu Ihrem Unternehmen aufzubauen. Solange Nutzer einen Mehrwert in Ihrer Präsentation für sich gewinnen können, nehmen Sie Ihre Bedarfsgruppen schnell für sich ein.

Auch eine einwandfreie Technik, schnelle Ladezeiten und die Zugänglichkeit Ihrer Webseite über mobile Endgeräte wie Smartphones oder Tablets werden von Interessenten erwartet. Können Sie diese Erwartungshaltung nicht erfüllen, verschwinden Besucher über wenige Mausklicks schnell bei Ihrer Konkurrenz.

Die Vorteile von User Centered Design liegen damit auf der Hand:

  • Sie entwickeln ein besseres Gespür dafür, was Ihre Zielgruppe wirklich möchte
  • es entsteht eine stärkere Kundenbindung zu Ihrer Marke
  • die Zielgruppenakzeptanz wird gesteigert
  • Besucher werden besser in wiederkehrende Kunden konvertiert, was für steigenden Umsatz sorgt
  • Interessenten bauen schneller Vertrauen in Ihre Kompetenz auf
  • durch informative Inhalte und einen harmonischen Gesamtauftritt verweilen Nutzer länger auf Ihrer Webseite…
  • … wodurch letztendlich positive Synergieeffekte zu anderen Kanälen wie SEO entstehen
  • User Centered Design ist kosteneffizienter, da weniger Kosten für spätere Optimierungen anfallen
  • der gesamte Webauftritt wird von Anfang an optimal strukturiert, wodurch nachträgliche Korrekturen vermieden werden
Responsive Webdesign Beispiel

Der nutzerorientierte Gestaltungsprozess im Überblick

Die Steigerung der Usability und User Experience durch intuitive Benutzerführung erfordert eine gut durchdachte Herangehensweise. Das User Centered Design lässt sich dabei grob in vier Phasen einteilen:

Analyse des Nutzungskontextes

In der ersten Phase des UCD werden die individuellen Bedürfnisse, Probleme und Anforderungen Ihrer Zielgruppe definiert. Hierfür werden sogenannte Buyer Personas entwickelt, die Ihre idealen Kunden darstellen. Neben demografischen Eigenschaften wie Alter, Geschlecht, Hobbys oder Beruf, geht es vor allem um die Frage, welche ihrer alltäglichen Probleme Sie mit Ihrem Angebot lösen können.

Aber auch Kenntnisse der technischen Rahmenbedingungen werden in dieser Phase eingeholt. Nutzt Ihre Zielgruppe eher das Smartphone für die Informationsbeschaffung? Oder handelt es sich bei Ihrer Zielgruppe vielleicht um gesundheitlich eingeschränkte Menschen, die auf ein barrierefreies Webdesign angewiesen sind? Welche Art von persönlicher Ansprache bevorzugt Ihre Zielgruppe?

Definition der Anforderung

Basierend auf den Erkenntnissen der Nutzeranalysen werden Anforderungen definiert, die auf Ihrer Webseite umgesetzt werden sollen.

Konzeption und Entwurf

Die definierten Anforderungen werden in einem ersten Entwurf ausgearbeitet und zu einem interaktiven Prototypen entwickelt. Ziel ist es, zunächst eine nutzerfreundliche Informationsarchitektur zu entwickeln und sicherzustellen, dass das Konzept dem mentalen Modell der Nutzer entspricht und nicht die interne Sicht des Unternehmens widerspiegelt.

Evaluation und Feintuning

In der letzten Phase folgt die finale Überprüfung des ausgearbeiteten Konzepts. Um sicherzustellen, dass die Anforderungen der Nutzer auch tatsächlich erfüllt werden, wird zum Beispiel direktes Nutzerfeedback eingeholt. Aber auch andere Methoden des Usability-Testings kommen zum Einsatz. So können Schwachstellen des Konzeptes noch rechtzeitig ausfindig gemacht und behoben werden.

User Experience

Worauf es allgemein ankommt – Usability Checkliste

Grundsätzlich gibt es einige Usability Regeln, die von so gut wie jedem Nutzer beim Besuch einer Webseite erwartet werden. Schon allein die Nichterfüllung eines einzigen Punktes kann beim Besucher einen negativen Gesamteindruck hinterlassen.

Design

  • ästhetisches und aufgeräumtes Design
  • konsistente Farbgestaltung
  • Vertrauenssignale wie Kundenstimmen oder Referenzen

Struktur

  • klare Strukturen und intuitive Navigation
  • Einsatz von Breadcrumbs zur besseren Orientierung
  • Klarer Pfad zu Firmeninformationen
  • Zielführender Einsatz von Call-to-Actions

Technik

  • schnelle Ladezeiten unter 2 Sekunden
  • Einheitliche Darstellung über alle Endgeräte hinweg (Smartphone, Tablet, Desktop-PC)
  • Aussagekräftige und leicht verständliche URLs
  • Browserkompatibilität

Inhalte

  • gut lesbare Typographie und Schriftgrößen
  • Verständliche Ausdrucksweise und fehlerfreie Rechtschreibung
  • gut strukturierte Texte mit inhaltsstützenden Medien wie Grafiken oder Videos
  • informative und ansprechende Überschriften
  • Einsatz von Aufzählungen zur Auflockerung des Textes
  • Verlinkungen sind konsistent und klar als solche zu erkennen
  • Thema der Seite ist innerhalb von 5 Sekunden ersichtlich

Bedienung

  • Nutzerfreundliche und barrierefreie Kontaktformulare
  • Keine störenden oder aufdringlichen Pop Up Fenster
  • Nutzerfreundliche Suchfunktion
  • Anlegen einer individuellen 404 Fehlerseite
  • Verlinkung des Logos mit der Startseite

Read More

Was ist responsive Webdesign?

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

Responsive 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
Responsive Webdesign Beispiel

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.
Responsive Grid

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.

Read More

Parallax Scrolling Effekt im Webdesign – inkl. 23 kreative Webseiten Beispiele

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.

Read More

Website Relaunch – diese Dinge sollten Sie beachten

Ein Website Relaunch gehört zum natürlichen Lebenszyklus einer jeden Website und lässt sich auf Dauer nicht vermeiden, egal wie gewissenhaft und gut das Konzept ausgearbeitet wurde. Bei einem Website Relaunch gibt es dabei unglaublich viel zu beachten. Designer, Entwickler, Entscheidungsträger, Online Marketing Spezialisten und Content-Produzenten müssen an einem Strang ziehen um aus einem komplexen Gebilde ein noch besseres komplexes Gebilde zu machen. Die größte Sorge bei einem Website Relaunch ist dabei meistens die, dass die bisher guten Besucherzahlen durch Rankingverluste bei Google einbrechen. Doch wenn man die Sache richtig und gut durchdacht angeht, kann ein Neustart der Website sogar gewinnbringend sein.

„Wer nicht mit der Zeit geht, geht mit der Zeit.“ – Friedrich Schiller

First things first – was ist überhaupt der Unterschied zwischen Website Relaunch und Website Redesign?

Bei einem Website Relaunch werden sowohl Inhalte, als auch das Design einer bestehenden Website maßgeblich verändert. Von einem Website Redesign spricht man hingegen, wenn sich nur das Design einer Website ändert.

In den letzten Jahren schwappt dabei meistens eine Website Relaunch-Welle durchs Netz. Ein wichtiger Grund hierfür ist vorallem der Zuwachs an mobilen Endgeräten und ein erforderliches neues Layout, welches sich flexibel an die verwendete Bildschirmgröße des Nutzers anpasst (Stichwort Responsive Webdesign). Viele Unternehmen nutzen hier natürlich direkt die Möglichkeit neben einem responsiven Design auch Inhalte und Struktur der alten Website neu zu überdenken.

1. Konzeption und Planung des Website Relaunch

Die Konzeption und Planung sind ein maßgebender Erfolgsfaktor für das Gelingen eines Website Relaunches. Eine Bestandsaufnahme und die Analyse der bisherigen Website kann hier schnell deutlich machen, an welchen Stellen Optimierungspotentiale liegen. Hier gibt es viele – sehr viele -Fragen, die zunächst beantwortet werden sollten:

  • Welche Gründe gibt es für den Website Relaunch? Beispiel: „Der Mitbewerber hat jetzt auch eine neue Website.“ Hier stellt sich die Frage, ob er damit auf die Anforderungen des Marktes reagiert hat oder ob er andere Gründe dafür hatte und wenn ja, ob diese auch für Sie gelten?
  • Ist ein Website Relaunch wirklich erforderlich? Inwiefern wirkt er sich auf die Erfüllung des Zwecks Ihrer Website aus? Würde eine neue Website helfen? Wenn ja, wie?
  • Was wollen Sie mit dem Website Relaunch erreichen? Welche Ziele haben Sie? (z.B.: Image verbessern, Neukunden gewinnen, Kundenbindung stärken etc.)
  • Welche Zielgruppe wollen Sie mit der neuen Website ansprechen?
  • Was hat sich auf der alten Website bewährt und was muss anders gemacht werden?
  • Soll das bisherige CMS weiter genutzt werden oder bringt ein Wechsel Vorteile?
  • Welche Menüpunkte sollen von der alten Website übernommen werden und welche neuen Menüpunkte kommen dazu?
  • Welche Inhalte sollen von der alten Website übernommen werden? Welcher und wie viel Content ist nötig und an welcher Position? Dient der Content nur Ihrer Selbstdarstellung oder ist es wirklich das, was Ihre Zielgruppe interessiert?
  • Welche Struktur ist zielführend?
  • Für welche Keywords soll die neue Website optimiert werden? Gibt es Budget für eine kontinuierliche Suchmaschinenoptimierung?
  • Wann soll der Website Relaunch durchgeführt werden bzw. wann sollte die neue Seite online gestellt werden?
  • Wollen Sie beim bisherigen Webhoster bleiben oder bringt ein Wechsel des Webhosters Vorteile?
  • Ist Barrierefreiheit ein wichtiges Thema? (z.B. für blinde Personen)
  • Wer kümmert sich um was?

Einige gute Gründe, die für einen Website Relaunch sprechen wären:

  • Das aktuelle CMS bereitet mehr Schwierigkeiten, als dass es Vorteile mit sich bringt oder man hatte bisher gar kein CMS und möchte nun eines nutzen
  • Die alte Website ist technisch veraltet und führt immer wieder zu Fehlermeldungen
  • Die alte Website soll auch auf mobilen Endgeräten nutzerfreundlich dargestellt werden (Responsive Design)
  • Die Unternehmensstruktur und/oder -philosophie hat sich geändert
  • Sie wollen Ihr Image aufpolieren
  • Sie wollen Ihre Sichtbarkeit bei Google nachhaltig verbessern

2. Entwicklung des neuen Designs / Layouts

2.1 Inhaltserstellung

Die Planung und Erstellung der Inhalte ist ein entscheidender Faktor dafür, ob Sie mit Ihrer neuen Website Erfolg haben oder nicht. Deswegen sollten Sie hier ausreichend viel Zeit einplanen oder die Texte ggbf. in professionelle Hände auslagern. Einzigartige Texte mit Mehrwert sind nicht nur ein bedeutender Rankingfaktor bei Google, sondern wirken sich auch auf die Conversion Rate Ihrer Website aus. Finden Nutzer Ihren Content langweilig oder irrelevant, springen sie schnell wieder ab, wohingegen guter und informativer Content auch gerne mit anderen geteilt wird und daher zur Stärkung Ihrer Marke beiträgt.

Anstatt sich mit langweiligen Floskeln wie „Herzlich willkommen auf unserer Website!“ aufzuhalten, sollten Sie sich Gedanken darüber machen, wie Sie Ihre Nutzer mit Ihren Inhalten fesseln und überzeugen können. Erzählen Sie nicht direkt zu Beginn ausschweifend von Ihrem Unternehmen, sondern nutzen Sie die Vorteilskommunikation um Besucher neugierig zu machen und zum Verweilen auf Ihrer Website zu bewegen. Durch die Informationsflut im Internet heutzutage ist es wichtig, sich auf das Wesentliche zu beschränken und dafür zu sorgen, dass der Nutzer alle für ihn relevanten Informationen auf Anhieb findet. Zudem sollten Sie nicht einfach „blind“ die Inhalte Ihrer bisherigen Website übernehmen und kopieren, sondern genau auswählen, welche Inhalte übernommen werden können und welche Inhalte aktualisiert oder optimiert werden müssen.

Hier noch einige Tipps zur richtigen Inhaltserstellung:

  • Nutzen Sie klare und neugierig machende Überschriften. Jede Unterseite sollte dabei eine Hauptüberschrift haben (h1), in welcher das Hauptkeyword enthalten ist.
  • Neben einer Hauptüberschrift sollten Sie entsprechend der Textlänge eine angemessene Anzahl an Zwischenüberschriften setzen.
  • Kopieren Sie keinesfalls Texte von Mitbewerbern, sondern setzen Sie auf einzigartigen Content.
  • Platzieren Sie Ihr Hauptkeyword angemessen oft (!) innerhalb des Textes, so dass es nicht erzwungen klingt. Texte sollten immer für den Leser geschrieben werden und nicht für Suchmaschinen.
  • Nutzen Sie auch Synoynme für Ihr Hauptkeyword innerhalb des Textes.
  • Texte sollten mindestens 600 Wörter lang sein. Je populärer das Keyword, desto mehr Text ist besser, vorausgesetzt dieser bietet Nutzern echten Mehrwert. Doch vorsicht: zu viel Text ist wiederum auch nicht gut, da der Google-Crawler nur über begrenzte Kapazitäten verfügt. Ihre Texte sollten also nicht mehr als ca. 3500 Wörter enthalten (je Seite).
  • Achten Sie auf eine gute Lesbarkeit der Texte, z.B. mithilfe von Absätzen, Grafiken oder Aufzählungszeichen.
2.2 Design

Das Design einer Website muss sich heute ganz anderen Herausforderungen stellen als noch vor ein paar Jahren. Im Zuge des Website Relaunch wird das Design und das Layout der Website also auch so angepasst, dass es für Mobilgeräte optimiert ist. Auch hier gibt es einige Fragen, die beim Website Relaunch zu beantworten sind:

  • Besteht ein Corporate Design, das beibehalten werden soll? Welche Hauptfarben hat das Unternehmen? Gibt es eine Hausschrift, welche auch auf der Website übernommen werden soll?
  • Gibt es ein Logo, welches im Vektorformat zur Verfügung steht? Falls nein: sollte ein neues Logo erstellt werden / das bisherige Logo überarbeitet bzw. modernisiert werden?
  • Soll ein fertiges Template genutzt und an Ihre Bedürfnisse angepasst werden oder soll ein individuelles Design erstellt werden?
  • Welche Bilder sollen auf der neuen Website platziert werden? Brauchen Sie neue, aktuellere Bilder? Wenn ja, benötigen Sie hierfür einen Fotografen? Sollen Bilder über eine Stock-Agentur wie Fotolia, Shutterstock etc. erworben werden? Wer kümmert sich um die Bildrecherche?
  • Gibt es zusätzliches Material, welches Sie auf der Website veröffentlichen können? Z.B. Videos, Infografiken, Checklisten etc.
  • Gibt es Webseiten, die Ihnen gefallen? Wenn ja, was gefällt Ihnen an diesen besonders?
  • Was ist Ihr favorisierter Design-Stil? (z.B. schlicht, modern, verspielt, traditionell, bunt etc.)
  • Muss auch Ihre Geschäftsausstattung angepasst werden? Briefpapier, Visitenkarte etc.
  • Wie sieht es mit der Usability aus? Worauf legen Nutzer hier besonders wert?

Anhand eines statischen Mockups können Sie sich kaum vorstellen, wie Ihre Website sich später anfühlt. Deswegen ist es wichtig, bereits früh Zugang zu einer Entwicklungsumgebung zu erhalten, um direkt einen Eindruck der Usability und vom gesamten Interface zu bekommen. Es empfiehlt sich daher, eine Testumgebung zu schaffen, auf welcher ein erster Prototyp der neuen Website erstellt werden kann. Mithilfe der Testumgebung bleibt Ihre alte Website bis zum Go-Live der neuen Website für Besucher verfügbar. Das ist wichtig, damit Besucher, die in dieser Zeit auf Ihre Website kommen, nicht ins Leere laufen.

2.3 Schritt – Struktur

Bereits bei der Planung sollten Sie sich die grundlegende Strukturierung Ihrer neuen Website überlegen. Welche Inhalte sollen wo positioniert werden? Wie sieht es aus der Sicht des Nutzers und dessen Erwartungshaltung aus? Wo vermutet er welche Inhalte und wie können Sie dafür sorgen, dass er die Informationen, welche er sucht, auf Anhieb findet?

An dieser Stelle noch eine kleine Checkliste für eine gute Seitenstruktur:

  • Sind Inhalte gemäß der Nutzererwartung platziert?
  • Ist die Navigation verständlich und klar strukturiert?
  • Gibt es eine flache Hierarchie (max. 3-4 Ebenen)?
  • Ist die Klickpfadlänge angemessen? Braucht der Nutzer maximal 3-4 Klicks zu allen Seiten und maximal einen Klick bis zu Ihren Kontaktinformationen?
  • Ist die URL-Struktur optimiert? (Tipp: verwenden Sie kurze URLs | das Hauptkeyword sollte in der URL enthalten sein | es sollten sich keine unverständlichen Parameter in der URL befinden wie z.B. ?id=n | vermeiden Sie Großschreibung in den URLs | nutzen Sie als Trennzeichen „-„)
  • Wie sieht es mit der internen Verlinkung aus?

3. Go-Live und Rankingverluste vermeiden

Auch wenn Sie den Website Relaunch bisher perfekt angegangen sind, stellt der Umzug der Website von der Testumgebung zur endgültigen Domain noch die größte Hürde dar. Auch hier ist Planung das A und O. Bevor der Umzug gestartet wird, sollte überprüft werden, wann der Traffic auf der Website am höchsten und wann am niedrigsten ist, um die Wahrscheinlichkeit, dass Besucher auf einer Fehlerseite landen, zu reduzieren.

Ein weiterer wichtiger Schritt vor dem endgültigen Website Relaunch ist die korrekte Einrichtung von 301-Weiterleitungen. Hier passiert einer der häufigsten Fehler, der zum viel gefürchteten Rankingverlust führt. Bei einem Website Relaunch verändert man in der Regel Verzeichnisse, benennt Seiten um und löscht alte Seiten. Das führt dazu, dass die Einträge bei Google und Co.  ohne korrekte Weiterleitung ins Leere führen. Statt der angeforderten Seite erhalten sowohl Besucher als auch Suchmaschinen-Bots eine 404-Fehlerseite mit der Information, dass die angeforderte Seite nicht existiert. Da jedoch das oberste Ziel der Suchmaschinen dasjenige ist, den Nutzern relevante Suchergebnisse zu präsentieren, führen solche 404-Fehlermeldungen in gehäufter Form letztendlich zum Rankingverlust oder im schlimmsten Fall sogar zum kompletten Ausschluss aus dem Index.

Jede Seite sollte mittels eines Redirects also nun auf die neue Adresse umgeleitet werden, um solche Fehlermeldungen zu vermeiden. Die permanente 301-Weiterleitung ist hierbei das Mittel zur Wahl. Eine Seite, die gelöscht wurde, zeigt mittels des Redirects dann automatisch auf die Startseite, Besucher laufen also nicht mehr ins Leere. Auch dem Verlust von Backlinks beugt man so sicher vor. Weiterleitungen richtet man üblicherweise über die .htaccess Datei oder direkt über das CMS (beispielsweise über ein Plugin) ein.

Noch einige weitere Tipps, die vor dem endgültigen Website Relaunch beachtet werden sollten:

  • Auch bei der größten Sorgfalt wird hin und wieder eine Weiterleitung vergessen oder fehlerhaft implementiert. Mithilfe einer guten 404-Fehlerseite können Besucher dennoch abgeholt und auf die gesuchte Information weitergeleitet werden. So sorgen Sie dafür, dass die Absprungrate so gering wie möglich bleibt.
  • Vergessen Sie nicht nach dem Website Relaunch eine neue Sitemap mit allen neuen Seiten anzulegen und diese sowohl auf Ihren Server, als auch in der Google Search Console hochzuladen.
  • Überprüfen Sie Ihre Website auf Broken Links, z.B. mit dem kostenlosen Broken Link Checker.
  • Überprüfen Sie auch die Ladezeit Ihrer neuen Website, z.B. mit dem kostenlosen PageSpeed Insights.
  • Sichern Sie vor dem Website Relaunch in jedem Fall Ihre bisherigen Daten!
  • Wahlweise können Sie natürlich auch Ihre Besucher nun über den Website Relaunch informieren und darauf hinweisen, dass diese Sie bei Auffälligkeiten in Verbindung mit der neuen Website kontaktieren dürfen bzw. ihr Feedback dazu abgeben können. Auch eine Umfrage kann hilfreich sein um zu überprüfen, wie die neue Website bei den Besuchern ankommt.
  • Beantragen Sie bei Google über die Google Search Console manuell die Indexierung Ihrer neuen Website. Falls Sie zusammen mit dem Website Relaunch auch Ihre Domain gewechselt haben, sollten Sie – ebenfalls über die Google Search Console – Google über die Adressänderung informieren.

4. Sichtbarkeit und Ranking im Auge behalten

Nach dem Website Relaunch sollten Sie die Indexierung und das Ranking Ihrer Website stets im Blick behalten. Überprüfen Sie, ob Sie Rankingverluste verzeichnen und ob neue Seiten richtig indexiert werden. Auch Besucherzahlen sollten Sie kontrollieren, beispielsweise mithilfe von Google Analytics.

Benötigen Sie Unterstützung bei Ihrem Website Relaunch?

Gerne unterstützen wir Sie dabei, wenn Sie sich eine neue Website erstellen lassen möchten. Als langjährig erfahrene Webdesign Agentur unterstützen wir Unternehmen im gesamten Rhein-Main-Gebiet, z.B. aus Frankfurt, Wiesbaden, Hanau und Offenbach. Sprechen Sie uns einfach unverbindlich an!

[ninja_form id=1]

Read More
Show Buttons
Hide Buttons