So erstellen Sie Mikroanimationen zum Scrollen und Laden

Jakob Nielsen

Jakob Nielsen ist ein dänischer Web-Usability-Berater und Gründer der "Nielsen Norman Group". Er hat einen Doktortitel in Mensch-Computer-Interaktion von der Technischen Universität von Dänemark in Kopenhagen.

(Wikipedia)

Eines der Usability-Prinzipien von Jakob Nielsen besagt: "Das System sollte den Benutzer immer darüber informieren, was vor sich geht."

Eine Möglichkeit, Ihrer Website zu helfen, diese Regel zu erfüllen, ist, sie mit Mikro-Animationsfunktionen auszustatten. Wir haben zwei Arten von Animationen hinzugefügt:
1. Ein Seitenlade-Indikator in einer anpassbaren Farbe, der sagt: "Alles ist in Ordnung, die Seite wird geladen."
2. Eine Bildlaufanzeige, die dem Benutzer mitteilt, welchen Teil der Seite er gerade sieht.

1

So fügen Sie eine Ladeanimation und einen Indikator hinzu

Fügen Sie einen T228-Block aus der Kategorie "Sonstige" oben auf der Seite ein.

So sieht das Laden der Seite ohne Ladeanimation aus:

Das Laden der Inhalte wird nach dem Hinzufügen dieses Blocks reibungsloser ablaufen:

Aktivieren Sie das Kontrollkästchen "Ladeanzeige anzeigen" und wählen Sie im Einstellungsfenster des Blocks eine Hintergrundfarbe für die Ladeanzeige.

So sieht das Laden der Seite nach dem Hinzufügen eines Ladeindikators aus:

Dieser Indikator wird in Safari nicht angezeigt. Safari hat eine eigene Anzeige für das Laden der Seite.

2

So fügen Sie eine Bildlaufanimation hinzu

Fügen Sie einen T333-Block aus der Kategorie "Andere" oben auf der Seite ein.
Legen Sie die Farbe und die Höhe des Fortschrittsbalkens im Einstellungsfenster des Blocks fest.