So erstellen Sie scrollende und ladende Mikroanimationen
Jakob Nielsen
Jakob Nielsen ist ein dänischer Web-Usability-Berater und Gründer der «Nielsen Norman Group». Er promovierte in Mensch-Computer-Interaktion an der Technischen Universität Dänemark in Kopenhagen.
(Wikipedia)
(Wikipedia)
Eines der Usability-Prinzipien von Jakob Nielsen lautet: "Das System sollte die Benutzer immer darüber informieren, was vor sich geht."
Eine Möglichkeit, Ihrer Website bei der Einhaltung dieser Regel zu helfen, besteht darin, sie mit Mikroanimationsfunktionen auszustatten. Wir haben zwei Arten von Animationen hinzugefügt:
1. Eine Seitenladeanzeige in einer anpassbaren Farbe mit der Aufschrift: „Alles ist in Ordnung, die Seite wird geladen.“
2. Eine Scroll-Anzeige, die einem Benutzer mitteilt, welchen Teil der Seite er gerade anzeigt.
1. Eine Seitenladeanzeige in einer anpassbaren Farbe mit der Aufschrift: „Alles ist in Ordnung, die Seite wird geladen.“
2. Eine Scroll-Anzeige, die einem Benutzer mitteilt, welchen Teil der Seite er gerade anzeigt.
1
So fügen Sie eine Ladeanimation und einen Indikator hinzu
Fügen Sie oben auf der Seite einen T228-Block aus der Kategorie "Andere" hinzu.
So sieht das Laden der Seite ohne Ladeanimation aus:
Das Laden von Inhalten wird nach dem Hinzufügen dieses Blocks reibungsloser:
Aktivieren Sie das Kontrollkästchen "Ladeindikator anzeigen" und wählen Sie im Einstellungsbereich des Blocks eine Hintergrundfarbe des Ladeindikators aus.
So sieht das Laden der Seite nach dem Hinzufügen eines Ladeindikators aus:
Diese Anzeige wird in Safari nicht angezeigt. Safari verfügt über eine eigene Anzeige zum Laden der Seite.
2
So fügen Sie eine Scroll-Animation hinzu
Fügen Sie oben auf der Seite einen T333-Block aus der Kategorie "Andere" hinzu.
Geben Sie die Farbe und die Höhe des Fortschrittsbalkens im Bedienfeld "Einstellungen" des Blocks an.
Geben Sie die Farbe und die Höhe des Fortschrittsbalkens im Bedienfeld "Einstellungen" des Blocks an.
