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?

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