Single Blog Title

This is a single blog caption
8
Mar

Elementy interaktywne w elearningu – Etykietka (tooltip)

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.


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.

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/

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

 

 

Podobało Ci się? Chcesz więcej?

Zostaw swój e-mail, bardzo chętnie przypomnę Ci o nowych treściach, a przy okazji dostaniesz e-booka o elearningu.

Poprzednie newslettery możesz znaleźć na stronie archiwum.

* indicates required