Wizualizacja i nawigacja e-materiałów dydaktycznych

1. Wizualizacja i nawigacja e-materiałów dydaktycznych Andrzej Filip

2. Czym jest wizualizacja? Wizualizacja jest procesem przekazywania informacji w postaci graficznej. Wizualizacją nazywamy graficzny obiekt szkoleniowy, np.: • diagram, • wykres, • mapa, • film, • animacja, • prezentacja interaktywna. [Rieber, 2000; IEEE 1484.12.1-2002]

3. Wizualizacje statyczne • Wizualizacje statyczne są nieanimowanymi, nieinteraktywnymi grafikami. • Są charakterystyczne dla tradycyjnego medium, jakim jest papier. • W materiałach edukacyjnych służą uzupełnieniu tekstu wykładu. • Pełną efektywność osiągną, gdy dopasują się do cech ludzkiej percepcji. • Ich opracowanie jest stosunkowo proste.

4. Wizualizacje statyczne Przykładami wizualizacji statycznych są: • mapy, • zdjęcia, • rysunki, • diagramy, • wykresy.

5. Ułatwienia percepcji • Eksponowanie istotnych elementów, • redukcja zbędnych detali, • unikanie szumu informacyjnego, • prostota formy, • dopasowanie do cech ludzkiej percepcji, • wsparcie strategii wyszukiwania.

6. Wsparcie strategii wyszukiwania Przykład strategii wyszukiwania - szukanie drogi. [www.multimap.com]

7. Prawa Gestalt w wizualizacji Prawa Gestalt są ogólnie sformułowanymi prawami ludzkiej percepcji. Wskazują mechanizmy decydujące o odbiorze bodźców wizualnych. Poprawne zastosowanie praw Gestalt umożliwia: • ułatwienie percepcji, • uniknięcie wieloznaczności, • skupienie uwagi odbiorcy na treści szkoleniowej, zamiast na dekodowaniu przekazu wizualnego.

8. Prawo podobieństwa Grupowane percepcyjnie są obiekty o podobnym kształcie, rozmiarze, jasności lub kolorze.

9. Prawo podobieństwa • Grupowanie percepcyjne: • typy wydobycia (kolor), • wielkość wydobycia (rozmiar). [Atlas Geograficzny Świat Polska]

10. Prawo podobieństwa • Grupowanie percepcyjne: • kategorie wydarzeń (kolor, kształt) [www.digitalhistory.uh.edu]

11. Prawo podobieństwa • Grupowanie percepcyjne: • Elementy macierzy i wzoru (kolor) [E-studia Informatyczne]

12. Prawo bliskości Grupowane percepcyjnie są obiekty leżące blisko siebie.

13. Prawo bliskości Poprawne grupowanie bliskością. [SmartDraw Examples]

14. Prawo bliskości Błędy w grupowaniu bliskością. [SmartDraw Examples]

15. Prawo zamknięcia Obszar otoczony zamkniętym konturem traktowany jest jako obiekt.

16. Prawo zamknięcia Elementy interfejsu są wydzielone konturem. [www.forgefx.com]

17. Prawo połączenia Linia łącząca tworzy silniejsze powiązanie percepcyjne niż kolor, kształt, rozmiar lub bliskość. Prawo to nie zostało stworzone przez szkołę Gestalt. Zostało sformułowane przez Palmera i Rocka (1994) jako uzupełnienie praw Gestalt.

18. Prawo połączenia Połączenie jest silniejszym powiązaniem niż bliskość, Kształt, rozmiar i kolor. [C. Ware, 2004]

19. Prawo połączenia Połączenie decyduje o sile wyrazu diagramów. [SmartDraw Examples]

20. Prawo ciągłości Ludzka percepcja preferuje postrzeganie kształtów jako gładkie i ciągłe zamiast zawierających nagłe zmiany kierunku.

21. Prawo ciągłości Gładkie krawędzie łączące wierzchołki diagramu ułatwiają szukanie połączeń. [C. Ware, 2004]

22. Kodowanie kolorem Wiązanie kolorem etykiet z elementami wizualizacji. W praktyce więcej niż 5-10 elementów kodowanych innymi kolorami może ograniczyć czytelność wizualizacji. [E-studia Informatyczne; C. Ware, 2004]

23. Kodowanie kolorem Wiązanie kolorem obszarów z wartościami. Biorąc pod uwagę utrudnione rozróżnianie kolorów na wielu monitorach LCD ilość barw nie powinna przekraczać kilkunastu. [Atlas Geograficzny Świat Polska]

24. Możliwości i zagrożenia wizualizacji statycznych: • uzupełnienie tekstu, • wsparcie percepcji, • selekcja informacji, • łatwiejsze zapamiętywanie, • zasada minimum wysiłku, • obecność rozpraszających uwagę ozdobników, • niespójność semantyczna w obrębie kursu, • nadmierna komplikacja przekazu wizualnego.

25. Rozdzielczość ekranu vs rozdzielczość papieru Ekran dysponuje mniejszą rozdzielczością niż papier. Typowe rozdzielczości ekranu wynoszą: • 0,48 megapiksela (800 x 600), • 0,79 megapiksela (1024 x 768), • 1,31 megapiksela (1280 x 1024), • 1,92 megapiksela (1600 x 1200). Papier o podobnej do monitora powierzchni dysponuje rozdzielczością od 4 do 40 i więcej megapikseli.

26. Rozdzielczość ekranu vs rozdzielczość papieru Porównanie rozdzielczości zrzutu ekranu i skanu – przekątna obydwóch wynosi ok. 26 cm. 730 x 688 (0,5 MP) 2277 x 2049 (4,6 MP) [Microsoft Encarta; Atlas Geograficzny Świat Polska]

27. Dostępny obszar dla wizualizacji Wizualizacje o większej rozdzielczości niż rozdzielczość ekranu stwarzają konieczność korzystania z pasków przewijania. [Microsoft Encarta Online]

28. Przykładowy obszar roboczy [www.forgefx.com]

29. Przykładowy obszar roboczy [Jagielloński Kampus Wirtualny]

30. Do jakiej rozdzielczości dopasować wizualizacje? Proste grafiki edukacyjne można dostosować do rozdzielczości 800 x 600. Biorąc poprawkę na interfejsy przeglądarki, platformy oraz marginesy platformy do dyspozycji mamy przynajmniej 400 x 300 pikseli obszaru roboczego.

31. Do jakiej rozdzielczości dopasować wizualizacje? Bardziej złożone grafiki edukacyjne wymagają rozdzielczości 1024 x 768. Biorąc poprawkę na interfejsy przeglądarki, platformy oraz marginesy platformy do dyspozycji mamy przynajmniej 650 x 500 pikseli obszaru roboczego. Jeśli nie ogranicza nas interfejs platformy i marginesy, rozdzielczość pozioma może osiągnąć nawet 900 pikseli.

32. Do jakiej rozdzielczości dopasować wizualizacje? Jeśli zachodzi potrzeba umieszczenia grafiki dużej rozdzielczości (skanu mapy, złożonego wykresu, wysokiej jakości zdjęcia itp.) można zastosować kilka rozwiązań: • umieścić miniaturę i otworzyć grafikę o pełnej rozdzielczości w nowym oknie, • umieścić miniaturę i pozwolić pobrać grafikę na dysk, • zastosować aplet interaktywny.

33. Czym jest interaktywność? Ogólnie, interaktywność to dwustronny przepływ informacji między użytkownikiem a aplikacją. • Interaktywność indykatywna charakteryzuje się obecnością elementów nawigacyjnych, sterujących prezentacją treści. • Interaktywność symulacyjna jest to interaktywność, która pozwala uczącym się naśladować, przy różnym stopniu uproszczenia, rzeczywistą aktywność. Możliwość wyboru pomiędzy różnymi stronami sieci Web jest interaktywnością indykatywną; możliwość lotu wirtualnym samolotem w realistycznym środowisku to interaktywność symulacyjna. [Mark Nichols,A theory for eLearning, Educational Technology & Society, 6(2), 1-10]

34. Wizualizacje w e-nauczaniu Wizualizacja Interaktywna Statyczna Indykatywna Symulacyjna

35. Interaktywna nawigacja wizualizacji statycznych Fragment diagramu w aplecie Zoomify. [SmartDraw Examples]

36. Prosta animacja vs interakcja Cykliczna, nieinteraktywna animacja. Treść wykładu znajduje się obok wizualizacji. Animacja interaktywna z osadzoną treścią wykładu. [www.keveney.com; www.forgefx.com]

37. Interaktywna prezentacja treści Prezentacja interaktywna: fazy i zaćmienia księżyca. [www.forgefx.com]

38. Prezentacja modeli 3D Interaktywny aplet prezentujący modele bryły i funkcje. [E-studia Informatyczne]

39. Prosta symulacja Symulacja tworzenia map topograficznych. [www.forgefx.com]

40. Potencjalne problemy techniczne z wizualizacją interaktywną • Brak oprogramowania po stronie odbiorcy, • Przepustowość łączy internetowych po stronie placówki edukacyjnej, • Przepustowość łączy internetowych po stronie odbiorcy.

41. Możliwości i zagrożenia wizualizacji interaktywnych W przypadku wizualizacji interaktywnych możliwości i zagrożenia są podobne jak w przypadku wizualizacji statycznych. Dochodzą do nich: • informacja zwrotna i związana z tym możliwość eksperymentowania, • ułatwiona percepcja i przeszukiwanie danych, • przedstawianie zmian w czasie, • skupienie uwagi odbiorcy i zwiększenie aktywności podczas nauki, • nieergonomiczny interfejs, • koszty, koszty, koszty...

42. Podsumowanie – skuteczność Wizualizacja jest skuteczna, jeśli: • spełni cel edukacyjny, • dostosuje się do właściwości ludzkiej percepcji, • wyselekcjonuje istotne informacje, • posiada transparentny interfejs, • wzajemnie uzupełni się z tekstem wykładu, • nie jest nadużywana.

43. Podsumowanie - koszt Koszt można redukować poprzez: • przygotowanie bibliotek graficznych, • wykorzystanie dedykowanych narzędzi do tworzenia: • diagramów (np. SmartDraw, Visio, IHCM Map Tools), • wykresów (np. Statistica, Mathematica, Maple), • korzystanie z darmowych repozytoriów map.

44. Bibliografia L. P. Rieber, Computer, graphics & Education, 2000, http://www.nowhereroad.com/cgl/request.html. (pozycja poświęcona metodyce wizualizacji – pierwsze wydanie dostępne jako darmowy e-book) C. Ware, Information Visualization. Perception for Design, San Francisco, Elsevier, 2004. (pozycja poświęcona dostosowaniu wizualizacji do uwarunkowań ludzkiej percepcji)

45. Dziękuję za uwagę!