it-swarm.com.de

Beispiele für die gute Verwendung von Animationen auf Webseiten

Ich überarbeite derzeit das Magento-Thema unseres Unternehmens mit dem Ziel, unsere Conversion-Rate so weit wie möglich zu erhöhen (offensichtlich :-)). Ich habe das, was ich für ein gutes Gesamtlayout halte, wobei der Blick auf die richtigen Stellen gelenkt wird - Dinge wie "In den Warenkorb", kostenloser Versand "auf Lager", gute Produktbilder, Bewertungen usw. haben alle ein herausragendes, aber geschmackvolles Design Funktionen, um das Auge zu ziehen.

Ein Bereich, der meiner Meinung nach vernachlässigt wurde, war der eigentliche "Checkout" -Button in der Kopfzeile unserer Seite. Ich wollte den Knopf nicht größer machen oder eine zusammenstoßende Farbe verwenden, um das Auge zu zeichnen, da ich der Meinung war, dass dies das Gesamtgefühl des Designs beeinträchtigen könnte. Deshalb habe ich mich entschieden (offensichtlich werde ich einen A/B-Test durchführen) dies) fügen Sie eine weiße Linie von schimmerndem Licht hinzu, um selten über den Knopf zu glasieren, mit der Hoffnung, die Aufmerksamkeit des Benutzers unbewusst auf sich zu ziehen - sollte es etwas sein, das sie vielleicht zuerst übersehen haben.

Bevor ich dies implementiere (und mit dem Testen beginne), habe ich mich gefragt, ob jemand andere Erfahrungen mit solchen Dingen gemacht hat, die er teilen könnte, oder ob es andere gute Beispiele dafür gibt, wie Animation im Design verwendet werden kann.

Vielen Dank.

3
Anonymous

Ich würde vorschlagen, dass Sie die Aufmerksamkeit nur zu einem geeigneten Zeitpunkt auf die Schaltfläche zum Auschecken lenken, z. B. nachdem der Benutzer einen Artikel in den Warenkorb gelegt hat. Außerdem ist der Bereich der Checkout-Schaltfläche mehr als nur eine Schaltfläche (siehe unten).

Wenn der Warenkorb leer ist, macht es keinen Sinn, ab und zu den Blick darauf zu lenken - dies lenkt den Benutzer von der Einkaufs-/Browsing-Aufgabe ab.

Unmittelbar nach dem Hinzufügen eines Artikels zum Warenkorb ist der perfekte Zeitpunkt, da der Benutzer dann höchstwahrscheinlich darauf klicken möchte. Es ist auch ein angemessener Zeitpunkt, dies zu tun, selbst wenn der Benutzer mehr Artikel in den Warenkorb legen möchte - im Gegensatz dazu, dass er dies nur "selten" (dh etwas zufällig) tut.

In Bezug auf die Methode, um das Auge auf die Checkout-Schaltfläche zu lenken, normalerweise:

  • der Hintergrund ändert seine Farbe
  • die Anzahl der Artikel im Warenkorb ändert sich
  • der Wert des Warenkorbs ändert sich
  • die Schaltfläche zum Auschecken wird aktiviert, sobald das erste Element hinzugefügt wurde.

Das sollte viel genug sein, um die Aufmerksamkeit des Benutzers auf sich zu ziehen, ohne dass auch eine Animation hinzugefügt werden muss, und die Änderungen sind für den Benutzer so viel relevanter. Ein Animationseffekt lässt die Checkout-Schaltfläche danach einfach im selben Zustand wie zuvor!

Hier ist ein Beispiel von John Lewis

enter image description here

Beachten Sie, wie sie auch den Wortlaut von einem beschreibenden Ihr Warenkorb in einen umsetzbaren Warenkorb anzeigen ändern, sobald Elemente hinzugefügt wurden. Eine nette Geste.

3
Roger Attrill