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

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.

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

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

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

Sinn und Zweck des responsiven Webdesigns

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

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

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

Unterschied von Smartphone Bildschirmen zu Desktop Bildschirmen:

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

Starres Grid Layout vs. flexibles Grid Layout

Was versteht man unter einem Grid Layout?

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

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

Starres Grid Layout

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

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

Nachteile eines starren Layouts im Überblick:

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

Flexibles Grid Layout

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

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

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

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

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

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

Wie funktioniert Responsive Webdesign? – Technische Umsetzung

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

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

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

Simples Beispiel:

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

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

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

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

p {
font-size: 22px;
}

/* Anpassung für Tablet */

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

p {
font-size: 20px;
}

}

/* Anpassung für Smartphones */

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

p {
font-size: 18px;
}

}

Die Vorteile von responsive Webdesign

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

Vorteile des responsive Webdesign im Überblick:

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

Was ist “Mobile First” und lohnt sich das?

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

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

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

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

Wie kann ich testen, ob mein Webdesign responsive ist?

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

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

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

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

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

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

Parallax Scrolling Effekt im Webdesign

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

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

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

Einsatzmöglichkeiten des Parallax Scrolling Effekts

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

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

Mögliche Probleme beim Einsatz des Parallax Scrolling Effekts

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

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

Vertikaler vs. horizontaler Parallax Effekt

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

Benötigen Sie Unterstützung?

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

Tolle Beispiele für einen horizontalen Parallax Effekt:

AO.com

wildnatureinkazan.ru

switchwine.com.au

mattiecsboy.com

www.drugtreatment.com

hotdot.pro

Weitere Webdesign Beispiele mit kreativem Einsatz des Parallax Effekts:

The Boat (mein absoluter Favorit!)

melaniedaveid.com

antonandirene.com

restaurantleduc.com

www.cabletv.com

makeyourmoneymatter.org

cyclemon.com

benthebodyguard.com

www.madwell.com

www.firewatchgame.com

jonathannicol.com

www.sweetestevia.gr

theuniquehorn.com

boy-coy.com

graphicnovel-hybrid4.peugeot.com

www.nytimes.com

gardenestudio.com.br

everylastdrop.co.uk