Jak tworzyć mikroanimacje przewijania i ładowania
Jakob Nielsen
Jakob Nielsen jest duńskim konsultantem ds. użyteczności stron internetowych i założycielem grupy Nielsen Norman. Uzyskał tytuł doktora w dziedzinie interakcji człowiek-komputer na Politechnice Duńskiej w Kopenhadze.
(Wikipedia)
(Wikipedia)
Jedna z zasad użyteczności Jakoba Nielsena mówi: "System powinien zawsze informować użytkowników o tym, co się dzieje".
Jednym ze sposobów na dopasowanie witryny do tej zasady jest wyposażenie jej w funkcje mikro animacji. Dodaliśmy dwa rodzaje animacji:
1. Wskaźnik ładowania strony o dostosowywanym kolorze, mówiący: "Wszystko jest w porządku, strona się ładuje".
2. Wskaźnik przewijania informujący użytkownika, którą część strony aktualnie przegląda.
1. Wskaźnik ładowania strony o dostosowywanym kolorze, mówiący: "Wszystko jest w porządku, strona się ładuje".
2. Wskaźnik przewijania informujący użytkownika, którą część strony aktualnie przegląda.
1
Jak dodać animację ładowania i wskaźnik
Dodaj blok T228 z kategorii "Inne" na górze strony.
Tak wygląda ładowanie strony bez animacji ładowania:
Po dodaniu tego bloku ładowanie zawartości stanie się płynniejsze:
Zaznacz pole wyboru "Pokaż wskaźnik ładowania" i wybierz kolor tła wskaźnika ładowania w panelu Ustawienia bloku.
Tak wygląda ładowanie strony po dodaniu wskaźnika ładowania:
Wskaźnik ten nie jest wyświetlany w przeglądarce Safari. Safari ma własny wskaźnik ładowania strony.
2
Jak dodać animację przewijania
Dodaj blok T333 z kategorii "Inne" do górnej części strony.
Określ kolor i wysokość paska postępu w panelu Ustawienia bloku.
Określ kolor i wysokość paska postępu w panelu Ustawienia bloku.
