NA SKRÓTY
Piotr Peszko
+48 605 570 195
ppeszko@gmail.com

Elementy interaktywne w elearningu – Etykietka (tooltip)

Elementy interaktywne w elearningu – Etykietka (tooltip)

8 marca 2016

Tooltip – chmurka z tekstem pojawiająca się po wskazaniu jakiegoś elementu np. menu. Element powszechnie używany do przekazania dodatkowej informacji.

Sprawa prosta, żyjemy z nią codziennie, a przez to bardzo ważna i zasługująca na uwagę, zwłaszcza że będzie dobrym początkiem analizy różnych wzorców projektowych, które powszechnie stosuje się przy projektowaniu i realizacji szkoleń online.

PREZENTACJERobię

Wprowadzenie

Tooltip stosuje się, gdy chcemy przekazać rozszerzoną informację na temat jakiegoś elementu ekranu. Tworząc oprogramowanie, lub strony internetowe tooltip stosuje się głównie w celu opisania aktywności, interakcji z obiektem. Po wskazaniu określonego elementu kursorem pojawia się opis. Element ten jest tak powszechny, że nawet nie zastanawiamy się nad tym, że istnieje.

Tooltip rozwiązuje sytuację, w której zadaniem użytkownika jest odkrycie i użycie funkcjonalności (strony internetowej, obiektu), której nie zna. Głównym zadaniem tego modułu jest przekazanie informacji, o tym co stanie się po interakcji z obiektem. Mechanizm działania jest równie prosty jak sama funkcjonalność. Po wskazaniu obiektu kursorem, jeszcze przed kliknięciem pojawia się opis tego, co stanie się w efekcie kliknięcie, np. przeładuje się strona.

Koncepcja projektowa

Przy projektowaniu tooltipy ułatwiają obsługę podając dodatkową informację, dokładnie wtedy, kiedy użytkownicy jej potrzebują ponosząc minimalny wysiłek, aby ją uzyskać. Z założenia tooltipy są elementami, które pozwalają efektywniej wykorzystać powierzchnię aplikacji i uniknąć przeładowania ekranu informacjami.

W szkoleniach online rola tooltipów rozszerza się na zadania związane z przekazaniem konkretnej treści edukacyjnej, zwykle znacznie obszerniejszej, niż sam tooltip aplikacji, (wyjątkiem mogą tu być screencasty).

Zadaniem tooltipów może być również przyciągnięcie uwagi do określonych obszarów ekranu. Ich stosowanie może okazać się krytyczne zwłaszcza w przypadku wyjaśniania sposobów działania.

Informacje, które nadają się do tooltipów można scharakteryzować w następujący sposób:

  • Zwięzłe – pojawiająca się „chmurka” jest idealna do umieszczenia, krótkich informacji. Ważne jest, aby informacja była bardzo zwięzła i treściwa. Jeśli chcemy przedstawić kilka paragrafów, ważne jest właściwe formatowanie i publikowanie treści w odpowiednio sformatowanych blokach. Należy zwrócić uwagę na to, że duże bloki tekstu pozbawione właściwego formatowania będą trudne do przyswojenia.
  • Pomocne – tekst musi przede wszystkim przekazywać informacje istotne dla osoby uczącej się. Należy unikać oczywistości oraz powtarzania informacji, która już znajduje się na ekranie. Dobrą praktyką jest nawiązywanie do ścieżki audio – lektora.
  • Stanowiące uzupełnienie – ponieważ tooltip z założenia nie jest widoczny na stronie cały czas, powinien stanowić uzupełnienie właściwej informacji znajdującej się na stronie. Jeśli planujemy, aby informacja pojawiała się jedynie po najechaniu myszką, nie powinna ona być również elementem koniecznym do ukończenia szkolenia. W takim przypadku informacja zawarta w tooltipach nie powinna być krytycznie ważna.
  • Statyczne – z wyjątkiem publikowania dużych elementów treści, bądź interakcji „chmurki” powinny być elementami statycznymi i powinny zawierać głównie tekst, ewentualnie grafikę i przyciski akcji. Jeśli chodzi o prezentowanie większych obszarów treści, np. materiałów video, symulacji itd. kwestia statyczności staje się dyskusyjna.
WEBINARYRobię

Sposób prezentacji

Generalnie istnieją trzy sposoby wyświetlania tooltipów:

  1. Statyczny -Widoczny przez cały czas wyświetlania ekranu szkoleniowego, stanowiąc element layoutu ekranu.
  2. Zsynchronizowany – zsynchronizowany model tooltipów jest najpowszechniej stosowany w celu prezentacji tekstów uzupełniających ścieżkę dźwiękową. Takie stosowanie jest bardzo częste w przypadku dialogów, wyjaśnień elementów dowolnych obiektów, lub części aplikacji w screencastach.
  3. Aktywny – taki sposób prezentacji tooltipów jest bardzo często stosowany w oprogramowaniu. Po wskazaniu kursorem myszy na ikonę pojawia się dodatkowy opis. W eLearningu takie podejście często stosuje się do przedstawiania informacji dodatkowych, lub podpowiedzi na temat akcji, które należy podjąć.

Przykłady stosowania

Tekst

Podstawowe zastosowanie służące do prezentacji jedynie tekstu. bardzo popularne rozwiązanie. W większości wypadków tekst pojawia się po najechaniu kursorem na element, do którego tooltip jest przypisany.
Tooltipy z samym tekstem stanowią bardzo często uzupełnienie screencastów. W przypadku rozwiązań rapid elearningowych np. Adobe Captivate tooltipy tworzone są automatycznie w trakcie nagrywania screencastu.

http://preloaded.com/

http://dribbble.com/shots/89002-Tool-Tip

Tekst i link

Często stosowane w elementach odsyłających do innej treści. Umieszczenie linku w tooltipie może również powodować wykonanie jakiejś akcji, ale nie jest to zalecane podejście, gdyż z założenia link odpowiadać ma za przeniesienie użytkownika do innej lokalizacji. W przypadku wykonywania jakiejś akcji powinien to być raczej przycisk.


http://www.tastebook.com/

http://www.sixapart.com/

Nagłówek i tekst


http://www.bohemiancoding.com/

Nagłówek i grafika


http://www.dtelepathy.com/our-projects/lifegear

Nagłówek, grafika i link


http://dribbble.com/shots/34979-Graph-Tooltip

Formularz


http://dribbble.com/shots/88756-Tooltip

http://www.allbusinesscards.com/

Znaczna część treści

http://dribbble.com/shots/90596-Help-Tooltip

http://markjardine.com/

KALENDARZSzkoleń

Ciekawy przykład


http://store.apple.com/

Bardzo dobry przykład funkcjonalnego tooltip’a znalazłem na stronie sklepu Apple. W czytelny, minimalistyczny sposób łączy ze sobą kilka wymienionych powyżej cech. Po pierwsze jest interaktywny, gdyż pojawia się po najechaniu na ikonę prezentu. Po drugie, bez wymuszania na nas przechodzenia na inną stronę pokazuje, sposób zapakowania produktu, a także opis usługi. Kolejną cechą mieszczącą się w kategorii „best practice” jest umiejscowienie linku oraz przycisku wyłączania tooltipa.

Gotowe rozwiązania

Articulate: Labeled Graphics

Adobe Captivate: Text Captions i Rollover Text Captions

""
1
Previous
Next
o-autorze
Piotr PESZKO

Urodziłem się w małym mieście na Podkarpaciu, tam po raz pierwszy zmuszono mnie tego, żeby zdobyć formalne wykształcenie, chociaż wolałem social learning, zbieranie puszek po napojach i przesiadywanie godzinami przed komputerem w poszukiwaniu szybszej metody na wczytanie gry z kasety do swojego Commodore 64.