Den Nutzer das Produkt „fühlen“ lassen

Image Comparison Slider
Kommentare

Es gibt verschiedene Möglichkeiten, Produktwebsites ansprechend zu gestalten, sodass Kunden eher dazu angeregt werden, das Produkt zu kaufen. Eine effektive UX-Lösung ist das Implementieren eines Image

Es gibt verschiedene Möglichkeiten, Produktwebsites ansprechend zu gestalten, sodass Kunden eher dazu angeregt werden, das Produkt zu kaufen. Eine effektive UX-Lösung ist das Implementieren eines Image Comparison Sliders. So einen Slider in die eigene Produktseite einzufügen ist nicht schwierig – er kann leicht mit CSS3 und jQuery erstellt werden, um zwei Bilder miteinander zu vergleichen. Claudia Romano erklärt in ihrem Tutorial, wie man einen solchen Slider implementiert.

Skizze des Image Comparison Sliders Prinzip des Image Comparison Sliders, Quelle: CodyHouse.co

Auf dem Weg zum Image Comparison Slider

Um einen Image Comparison Slider zu erstellen, muss zunächst dessen Struktur definiert werden. Dafür wird ein Figure-Element zum Umschließen des Original-Bildes, das angepasste Bild als Hintergrund im div-Element und der Slider-Handle benötigt.

Anschließend wird der Stil des Sliders angepasst. Das Original-Bild ist im Code eingefügt und gibt damit die richtigen Dimensionen seines Containers vor, während das angepasste Bild durch das Ziehen des Sliders in seiner Breite verändert wird.

Ebenso lässt sich mit CSS3 und jQuery eine Animation zum Image Comparison Slider hinzufügen, zum Beispiel ein Bounce-Effekt. Auch lässt sich die Funktionalität des Sliders mit der Definition von verschiedenen Funktionen an die eigenen Wünsche anpassen.

Mit jQuery mobile lässt sich der Slider auch auf mobilen Geräten entsprechend anzeigen. Wie das funktioniert, zeigt Claudia Romano detailliert in ihrem Blogpost. Dort gibt es auch zahlreiche Code-Beispiele, die dabei helfen, den Image Comparison Slider auch auf der eigenen Website implementieren zu können.

Aufmacherbild: controls of an audio mixing device von Shutterstock / Urheberrecht: Anan Kaewkhammul

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -