Czym jest wizualna hierarchia lekcji i jak ułatwia zrozumienie

Strona lekcji może zawierać prawidłowe wyjaśnienie, przydatny diagram i dobre zadanie, ale uczeń nadal nie wie, od czego zacząć. Powodem jest czasem to, że wszystkie elementy są jednakowo widoczne lub główny etap gubi się wśród dekoracyjnych bloków. Hierarchia wizualna pomaga pokazać strukturę: co należy do głównego wyjaśnienia, gdzie jest przykład, jaki warunek jest ważny i co należy zrobić dalej. Powinna wspierać treść, a nie konkurować z nią o uwagę.

Poniżej znajduje się sugerowany sposób edycji strony szkoleniowej lub prezentacji. Nie obiecuje gwarantowanej poprawy wyników w przypadku określonego koloru lub czcionki. Najpierw musisz określić logikę lekcji, a następnie skoordynować z nią projekt. Dostępność i zrozumiałość sprawdzane są poprzez osobne działania. Piękny wygląd nie świadczy ani o poprawności wyjaśnienia, ani o możliwości wykorzystania materiału na różne sposoby percepcji. Przykłady w tym artykule są hipotetyczne i służą autorowi jako materiał do pracy.

Określ główną drogę do działania edukacyjnego

Określ, co student powinien zrobić po zapoznaniu się z wyjaśnieniem. Na przykład odróżnić obserwację od wniosku lub wybrać odpowiedni sposób prezentacji danych. Przejrzyj materiał właśnie pod kątem tego działania. Część informacji trzeba poznać przed dokonaniem wyboru, część wyjaśnia wynik, a część po prostu poszerza temat. Jeśli te role nie zostaną określone, projekt stanie się przypadkowy: autor wyróżni to, co mu się podoba, a nie to, co pomaga w ukończeniu zadania edukacyjnego.

Utwórz szkielet tekstowy bez kolorów i obrazów. Nazwa, krótki cel, wyjaśnienie, przykład, niezależne działanie i metoda weryfikacji powinny mieć przejrzystą kolejność. Nie każda lekcja wymaga użycia wszystkich tych bloków, ale każdy dostępny blok powinien mieć przypisaną rolę. Jeśli treści nie da się logicznie ułożyć bez projektu, konieczna jest najpierw metodyczna edycja. Ozdobna strzałka nie poprawi brakującego założenia, a jasna ramka nie sprawi, że sprzeczna zasada będzie jednoznaczna.

Zaznacz miejsce, w którym uczestnik przechodzi od czytania do działania. Instrukcje lepiej umieścić obok niezbędnych warunków i materiałów. Jeśli uczeń musi przewijać do tyłu, aby zapamiętać kryterium, sprawdź strukturę. Może wystarczyć krótkie powtórzenie niezbędnego warunku lub wyraźne odniesienie do niego. Nie powielaj całej teorii na każdym kroku. Trzeba zachować dostęp do odpowiedniego kontekstu, nie przeciążając głównej trasy niepotrzebnymi powtórzeniami.

Stwórz kilka poziomów treści zamiast wielu stylów

Dla autora pomocne będzie rozróżnienie pomiędzy tytułem lekcji, tytułami rozdziałów, treścią, przykładami i uwagami pomocniczymi. Do tych ról wystarczą spójne decyzje projektowe. Jeśli każdy akapit ma własne tło, obramowanie i ikonę, różnice przestają cokolwiek znaczyć. Uczestnik poświęca uwagę na rozpoznanie nowego projektu. Zidentyfikuj niewielki zestaw stylów i wyjaśnij zespołowi rolę informacyjną, jaką każdy z nich odgrywa w materiałach szkoleniowych.

Nie lekceważ znaczenia warunku ze względu na niedogodności związane z jego projektowaniem. Ograniczenie metody może być krótkie, ale krytyczne. Należy to pokazać, zanim uczeń dokona wyboru. Jako notatkę pomocniczą lepiej jest sformatować rzeczywiście opcjonalne doprecyzowanie, bez którego główne zadanie pozostaje prawidłowe. Rozmiar tekstu powinien odpowiadać roli, a nie chęci zmieszczenia wszystkiego na jednym slajdzie. Jeśli nie ma wystarczającej ilości miejsca, przejrzyj podział materiału lub dodatkowe szczegóły.

Zapisz te zależności w prostej notatce. Przykładowo, jeden typ bloku jest używany do analizowanego przykładu, inny do zadania ucznia. Tytuł i tekst powinny również wyjaśniać rolę: sama kolorowa ramka nie wystarczy. W przyszłości nowy autor będzie w stanie odtworzyć logikę bez domysłów. Notatka powinna być krótsza niż pełna księga marki i zawierać przykłady prawidłowego zastosowania, szczególnie w sytuacjach, gdy kilka rodzajów informacji występuje obok siebie.

Niech nagłówki opisują zawartość sekcji

Nagłówek pomaga zorientować się w materiale przed przeczytaniem go w całości. „Sprawdź, czy dane potwierdzają wniosek” komunikuje więcej niż „Warto wiedzieć”. Konkretne tytuły sekcji pozwalają na powrót do żądanego wyjaśnienia. Jednocześnie nie zamieniaj nagłówka w długi akapit. Powinien wystarczająco precyzyjnie nazwać temat lub działanie, aby ułatwić nawigację. Spójrz na wszystkie nagłówki na osobnej liście: czy możesz zrozumieć z nich logikę lekcji bez elementów dekoracyjnych?

W3C WAI wyjaśnia rolę nagłówków jako strukturę, z którego mogą korzystać przeglądarki i technologie wspomagające. Dlatego też duża, pogrubiona linia nie zawsze sama w sobie jest technicznym nagłówkiem. Użyj odpowiedniego stylu lub elementu semantycznego w edytorze. Podrozdział powinien należeć do właściwego rozdziału, a tematy sąsiadujące muszą mieć spójny poziom. Nie wybieraj poziomu wyłącznie na podstawie żądanego rozmiaru litery w konkretnym szablonie.

Nie rób z każdego wyróżnionego zdania nagłówka. W przypadku krótkiego podkreślenia w objaśnieniu wystarczy odpowiedni projekt tekstu. Nadmierna liczba poziomów również utrudnia przeglądanie. Jeśli mała lekcja konsekwentnie wymaga zagnieżdżonych jednostek, sprawdź, czy łączy w sobie kilka różnych zadań edukacyjnych. Być może lepiej stworzyć osobne części z wyraźnym połączeniem. Struktura powinna odzwierciedlać myśl, a nie tylko uzupełniać dostępne style kreatora.

Grupuj powiązane elementy za pomocą odstępów

Pozycjonowanie pomaga pokazać, co należy do jednego przykładu. Podpis, obraz i wyjaśnienie należy postrzegać jako powiązaną grupę. Jeśli pomiędzy nimi znajduje się cudzy blok, uczeń może przypisać komentarz do innego schematu. Przejrzyj odstępy wewnątrz grupy i między grupami. Powinny wspierać te powiązania. Nie wyrównuj wszystkich spacji automatycznie tak samo, jeśli to sprawi, że zniknie różnica między nową sekcją a kontynuacją tego samego wyjaśnienia.

Na slajdzie z dwoma przykładami nadaj każdemu z nich własną nazwę i odpowiednią ilość miejsca. Nie polegaj wyłącznie na rozmieszczeniu po lewej i prawej stronie: rozmieszczenie kolumn może zmienić się podczas przeglądania na urządzeniu mobilnym lub czytania liniowego. W tekście nazwij przykłady według treści. Sformułowanie „w drugim przykładzie z niekompletnymi danymi” jest dokładniejsze niż „spójrz w prawo”. Ważne połączenia powinny pozostać wyraźne po zmianie szerokości ekranu lub sposobu odczytywania materiału.

Nie używaj pustych linii ani spacji do symulowania tabeli w postaci zwykłego tekstu. Jeśli dane zawierają wiersze, kolumny i nagłówki, wymagana jest odpowiednia struktura. Jeśli są to dwa niezależne wyjaśnienia, lepszym rozwiązaniem może być utworzenie kolejnych bloków. Projektant musi wiedzieć, jakie relacje pomiędzy elementami są istotne. Bez tego potrafi pięknie uporządkować informacje, ale traci związek między warunkiem, przykładem i wnioskiem, na którym opiera się zadanie edukacyjne.

Zachowaj kolejność zachowującą sens poza układem

W materiale cyfrowym widoczna kolejność nie zawsze pokrywa się z kolejnością, w jakiej elementy są odczytywane przez oprogramowanie. Wyjaśnienie WCAG dotyczące znaczącej sekwencji odnosi się do przypadków, w których sekwencja wpływa na znaczenie. Dla lekcji ważne jest, aby warunek pojawiał się przed pożądanym rozwiązaniem i aby komentarz nie był pomieszany z innym przykładem. Sprawdź to w rzeczywistym formacie udostępnianym studentom, a nie tylko na makiecie autora.

Czytaj stronę liniowo, bez wyimaginowanych kolumn. Czy jest jasne, do którego obrazu należy podpis? Czy problem nie zaczyna się od wniosku, który należało ukryć przed próbą? W przypadku prezentacji sprawdź kolejność czytania obiektów. W lekcji internetowej — strukturę elementów i działanie technologii wspomagających. Jeśli potrzebujesz pomocy technicznej, przekaż programiście konkretny fragment i oczekiwaną sekwencję, a nie ogólną prośbę „zrobić to dostępnie”.

Nie każda zmiana kolejności jest błędem. Dwa niezależne przykłady referencyjne można przedstawić w innej kolejności bez utraty znaczenia. Ważne jest dokładne zdefiniowanie wymaganych zależności. Pomaga to uniknąć niepotrzebnych ograniczeń i jednocześnie chroni główną trasę. Na przykład wyjaśnienia dwóch równoważnych terminów można zamienić, ale dane wejściowe i uzasadniony wniosek muszą pozostać powiązane. Walidacja powinna opierać się na znaczeniu, a nie na kopiowaniu współrzędnych z układu.

Używaj akcentów do określonego zadania

Pogrubienie jest odpowiednie, gdy pomaga znaleźć termin lub ważne rozróżnienie. Jeśli podświetlony zostanie prawie cały akapit, akcent traci swoją funkcję. Poproś autora o dokładne nazwanie tego, co uczeń powinien zauważyć. Następnie sprawdź, czy potrzebujesz wyróżnienia, krótszego tekstu lub osobnego wyjaśnienia. Czasami najlepszym rozwiązaniem jest przepisanie złożonego zdania. Duża ilość ozdobnych znaczników może być sygnałem, że redaktor stara się zrekompensować niejasną logikę strony.

Kolor nie powinien być jedynym nośnikiem znaczenia. WCAG Use of Color wyjaśnia ten wymóg. Jeśli obie opcje różnią się jedynie kolorem zielonym i czerwonym, dodaj tytuł tekstowy lub inny odpowiedni sposób ich rozróżnienia. Do wykresu potrzebne są jasne oznaczenia serii, a do wyniku zadania komunikat o treści odpowiedzi. Nie zmuszaj ucznia do zapamiętywania palety warunkowej, aby zrozumieć, czy jego rozwiązanie zostało zaakceptowane.

Minimalny kontrast tekstu zgodnie z WCAG dla zwykłego tekstu jest to 4,5:1, a dla zdefiniowanego dużego tekstu jest to 3:1, z wyjątkami określonymi w kryteriach. Sprawdź dopasowanie za pomocą narzędzia, a nie tylko wzroku. Zwróć szczególną uwagę na podpisy, tekst przycisków i notatki na kolorowym tle. Paleta korporacyjna nie zapewnia automatycznie czytelności tekstu informacyjnego. Jeśli to konieczne, użyj innej kombinacji dla samych treści edukacyjnych.

Podporządkuj obraz objaśnieniu

Najpierw określ rolę obrazu: objaśnienie procesu, pokazanie obiektu, dostarczenie danych do analizy, stworzenie ogólnego nastroju. Nie proś, aby ozdobna okładka pełniła rolę schematu edukacyjnego. Jeśli uczeń ma rozróżnić etapy, obraz musi wiernie oddawać te etapy i ich relacje. Podpis wyjaśnia, na co należy zwrócić uwagę, nie zastępując samodzielnego zadania, gdy jego celem jest zinterpretowanie materiału na swój sposób.

Umieść wyjaśnienie obok odpowiedniej części, jeśli jest to pomocne w porównaniu. W przypadku złożonego schematu czasami lepiej jest kolejno analizować fragmenty, a następnie pokazywać całość. Ale nie ukrywaj połączeń między częściami ze względu na spektakularny wygląd. Wracając do materiału, uczeń powinien móc obejrzeć pożądany stan bez konieczności długiego powtarzania animacji. W przypadku dokumentu statycznego zachowaj wystarczający kontekst, aby pojedynczy fragment nie sprawiał wrażenia modelu niekompletnego lub sprzecznego.

Treściwego tekstu nie należy niepotrzebnie przekształcać w obraz. Taki tekst trudniej zmieniać, wyszukiwać i dostosowywać do potrzeb czytelnika. Jeśli obraz jest naprawdę potrzebny, zapewnij odpowiedni dostęp tekstowy do niezbędnych informacji. Dotyczy to szczególnie schematów i wykresów, które są warunkiem zadania. Wyjaśnienie alternatywy powinno zachować zadanie edukacyjne: nie ukrywać niezbędnych danych, ale też nie podawać gotowego wniosku tam, gdzie student powinien sformułować go samodzielnie.

Rozróżnij przykład, próbę i wyjaśnienie odpowiedzi

Hipotetyczna lekcja uczy testowania siły wniosku opartego na danych. Najpierw autor pokazuje omówiony przykład z wyjaśnieniem. Następnie podaje kolejny zestaw i prosi ucznia o dokonanie własnego wyboru. Jeśli oba bloki są zaprojektowane tak samo i nie mają tytułu, uczestnik może kontynuować czytanie zamiast wykonać zadanie. Zaznacz, gdzie zaczyna się niezależne działanie, co należy zgłosić i kiedy otwiera się komentarz. Rola bloku powinna być jasna z tekstu.

Przed próbą studenta nie przedstawiaj prawidłowej odpowiedzi jako największej lub najbardziej kontrastującej. W przeciwnym razie projekt zmienia zadanie na znalezienie wskazówki wizualnej. Porównywane wersje powinny mieć spójny wygląd, chyba że różnica w stylu jest częścią testowanej treści. Po dokonaniu wyboru możesz pokazać wynik i wyjaśnienie, ale nie tylko zmienić kolor. Uczestnik musi zrozumieć, który element decyzji był istotny i co należy wziąć pod uwagę w poniższym przykładzie.

Oddziel wskazówkę pomocniczą od gotowej analizy. Wskazówka może skierować uwagę na pożądany wskaźnik bez podawania wniosku. Analiza całkowicie wyjaśnia logikę. Jeżeli oba elementy są ukryte za przyciskami o tej samej nazwie, uczeń nie ma kontroli nad poziomem pomocy. Podaj konkretne nazwy i wyjaśnij dostępność. Sprawdź implementację techniczną w swoim środowisku, nie zakładając, że każdy typ bloku automatycznie przekazuje wymagane stany do technologii wspierających.

Sprawdź materiał na rzeczywistej szerokości ekranu

Układ utworzony na dużym monitorze może stracić swoją hierarchię na telefonie. Kolumny stają się długą sekwencją, podpis jest oderwany od przykładu, a po dużym ozdobnym obrazie pojawia się ważny przycisk. Przetestuj główną trasę przy różnych szerokościach i powiększeniach tekstu. Nie zmniejszaj wszystkich elementów do mikroskopijnych rozmiarów, aby zachować kompozycję. Konieczne jest zachowanie treści i czytelności, a nie niezmienionego wyglądu każdego piksela.

Jeśli porównanie wymaga jednoczesnego obejrzenia dwóch części, rozważ dostępny sposób porównania na wąskim ekranie. Możesz użyć kolejnych, wyraźnie nazwanych bloków, podsumowania różnic lub innej struktury, odpowiedniej dla zadania. Nie obiecuj, że dowolna tabela automatycznie stanie się wygodny w telefonie. Otwórz właściwy materiał i spróbuj wykonać zadanie. Widok autorski w kreatorze nie zawsze pokazuje wszystkie warunki, które widzi uczestnik kursu.

Platforma LMS WeStudy może być środowiskiem publikacji lekcji, dlatego sprawdź rzeczywisty wynik dla ucznia. Ważna jest interakcja projektowania materiałów z nawigacją po kursie i instrukcjami. Jeśli nazwa przycisku w samej lekcji koliduje z kolejnym krokiem w programie, popraw to połączenie. Nie czyń szablonu odpowiedzialnym za wszystkie decyzje dotyczące tworzenia. Zespół powinien przejrzeć już zmontowaną stronę z jej rzeczywistym tekstem, przykładami i dostępnymi działaniami.

Wykonaj szybkie sprawdzenie zrozumienia

Pokaż materiał kilku dobrowolnym przedstawicielom publiczności i poproś o określenie początku zadania, niezbędnych warunków i sposobu weryfikacji. Nie pytaj tylko, czy podoba im się wygląd. Obserwuj, co robi dana osoba i jak wyjaśnia cel bloków. Jest to mały test diagnostyczny, a nie dowód skuteczności dla wszystkich uczniów. Pomaga znaleźć konkretną barierę, której autor ze względu na znajomość materiału nie zauważa podczas własnego oglądania.

Zadaj osobne, sensowne pytanie. Jeśli dana osoba łatwo odnajdzie blok, ale nie rozumie poprawnie zasady, konieczna jest praca z wyjaśnieniem. Jeśli zna regułę, ale nie wie, gdzie udzielić odpowiedzi, problem może leżeć w trasie. A gdy ważny fragment nie jest czytelny w określony sposób, wymagane jest sprawdzenie dostępności. Nie wrzucaj tych przypadków do jednej oceny „złego projektu”. Różne przyczyny wymagają różnych zmian i różnych sposobów ponownego sprawdzenia.

Zapisuj warunki i konkretne obserwacje. Na przykład podpis uznano za część kolejnego schematu lub przycisk otwartej podpowiedzi został pomylony z wysłaniem odpowiedzi. Popraw odpowiedni fragment i przetestuj go ponownie z osobami, które nie znają intencji autora. Nie wprowadzaj dziesiątek zmian na raz, jeśli chcesz zrozumieć przyczynę zamieszania. W pierwszym cyklu wystarczy usunąć główną przeszkodę i upewnić się, że nowe rozwiązanie nie stworzyło kolejnej.

Edytuj jeden przeciążony fragment krok po kroku

Wyobraź sobie stronę z trzema dużymi kolorowymi blokami, diagramem i przyciskiem zadania. W pierwszym bloku podana jest reguła, w drugim informacje historyczne, w trzecim warunki stosowania. Wydają się one równoważne, chociaż do rozwiązania wymagana jest reguła i warunek. Autor najpierw definiuje tę zależność. Informacje te można przenieść po głównej praktyce lub oznaczyć jako lekturę dodatkową. Nie ma potrzeby usuwania przydatnego rozwinięcia, ale nie powinno to zakłócać głównej trasy.

Następnie redaktor sprawdza powiązanie ze schematem. Jeśli wyjaśnia szczególne ograniczenie metody, umieść go obok odpowiedniego tekstu i opatrz go znaczącym podpisem. Przenieś przycisk zadania za wszystkie niezbędne warunki. Nazwij akcję konkretnie: nie „Dalej”, jeśli faktycznie otwiera ona samodzielną próbę z odpowiedzią. Po takim przestawieniu można dostosować rozmiary, odstępy i akcenty. Teraz wspierają już określoną logikę, zamiast ukrywać ją dekoracyjną kompozycją.

Następnie usuń zbędne sygnały ważności. Jeśli reguła wykorzystuje jednocześnie dużą czcionkę, wielkie litery, ikonę i jasne tło, sprawdź, które z nich są naprawdę potrzebne. Zachowaj odpowiednią widoczność i czytelność. Użyj jasnej nazwy warunku i umieść ją obok rozwiązania. Może być wizualnie spokojniejszy, ale nie powinien stać się niezauważalny. Hierarchia pokazuje relację, a nie po prostu szereguje wszystkie bloki od najgłośniejszego do najcichszego.

Obejrzyj zrekonstruowany fragment w odczycie liniowym i na wąskim ekranie. Kiedy kolumny stają się kolejne, diagram i jego objaśnienia muszą pozostać razem. Daj drugiej osobie zadanie znalezienia warunku zastosowania i wyjaśnienia kolejnego kroku. Jeśli od razu znajdzie to, czego potrzebuje, ale błędnie zinterpretuje ograniczenie, wróć do samego sformułowania. Nie powiększaj ramki wokół tekstu, który wymaga wyjaśnienia treści lub innego przykładu nauczania.

Ostatnim krokiem jest dokładne zapisanie, co i dlaczego zostało zmienione. Na przykład informacje dodatkowe przeniesiono z głównej trasy, a warunek umieszczono przed ćwiczeniem. Pomoże to innemu autorowi odtworzyć tę zasadę, zamiast dosłownie kopiować układ. Podczas następnej aktualizacji będzie mógł sprawdzić, czy połączenie zostanie utrzymane. Taki opis rozwiązania jest często bardziej przydatny niż zrzut ekranu pięknej strony bez wyjaśnienia jej struktury uczenia się i oczekiwanego działania uczestnika.

Zachowaj spójność pomiędzy lekcjami

Po przejrzeniu jednej lekcji utwórz kilka przykładów wykorzystania stylów dla zespołu. Wymagane są próbki prostego wyjaśnienia, omówionego przykładu, zadania, ważnego warunku i źródła. Nie wymuszaj, aby wszystkie tematy miały tę samą długość i liczbę bloków. Spójność oznacza stałe znaczenie oprawy graficznej, a nie mechaniczną kopię kompozycji. Jeśli określony rodzaj materiału wymaga innej struktury, wyjaśnij to i sprawdź, czy uczeń ma jasną drogę działania.

LMS platforma WeStudy w kursie ogólnym powinna współpracować z tym systemem autorskim: znajomy sposób oznaczania zadań i przykładów pomaga zespołowi w utrzymaniu materiałów. Przed kolejnym naborem sprawdź aktualne strony po aktualizacjach, zwłaszcza gdy zmieniły się wzorce, pakiety lub instrukcje. Dobra hierarchia pozostaje widoczna w tym, co uczeń może znaleźć, przeczytać i zrobić. Wymaga sprawdzenia treści i ścieżki nauki, a nie tylko zatwierdzenia ładnego szablonu.

Rozpocznij edycję od najważniejszej decyzji ucznia podjętej podczas lekcji. Jeśli projekt pomaga znaleźć odpowiednie warunki i przeprowadzić tę akcję, można go przetestować i stopniowo udoskonalać w oparciu o konkretne doświadczenia uczestników.

Źródła

• W3C WAI — Headings.

• W3C WAI — Understanding Meaningful Sequence.

• W3C WAI — Understanding Contrast Minimum.

• W3C WAI — Understanding Use of Color.