Narzędzie do tworzenia instrukcji krok po kroku – GuideJar

Bardzo lubię tworzyć instrukcje krok po kroku, które potem wysyłam znajomym i klientom. Używam ich jako alternatywy lub uzupełnienia do materiałów video i zazwyczaj zbierają bardzo pozytywne opinie. Przerobiłem tego typu aplikacji i usług co najmniej kilkanaście. Dziś polecę wam jedno narzedzie – GuideJar.

GuideJar – co to w zasadzie robi?

W skrócie – pozwala łatwo nagrać serię zrzutów ekranu, które później możesz edytować, duplikować, opatrywać opisami. Celem jest przygotowanie instrukcji dla kogoś, komu chcesz coś wytłumaczyć, a co polega na klikaniu myszką po ekranie. Może to być konfiguracja WordPress, operacje na Google Workspace czy przepis na edycję video w CapCut.

Na końcu procesu dostajesz link, który możesz wysłać lub kod HTML do osadzenia na swojej stronie. Po osadzeniu wygląda to w ten sposób:

Czy narzędzie do tworzenia instrukcji krok po kroku jest Tobie potrzebne?

Zastanów cię czy:

• często zdarza Ci się tłumaczyć komuś jak coś „przeklikać” – telefonicznie lub mailowo?
• często tłumaczysz wciąż te same rzeczy i chciałbyś komuś podesłać link do gotowej instrukcji,
• (nad)używasz w swoich wiadomościach zrzutów ekranu ze strzałkami, zaznaczeniami, dymkami

To może być znak, że potrzebujesz tego typu narzędzia.

GuideJar – historia trudnej miłości

GuideJar można (było) kupić na AppSumo w planie dożywotnim. Nie zapowiadało się jakoś spektakularnie – byłem niemal pewny, że ta usługa nie pożyje nawet roku (wiele na to wskazywało). Wyglądała jak kopia Scribe, a sama wtyczka do przeglądarki była podejrzanie podobna (nadal jest). Na szczęście zaryzykowałem, kupiłem najtańszy plan i… narzędzie okazało się brzydkim kaczątkiem.

Twórcy GuideJar nie porzucili usługi zaraz po sprzedaży planu LTD na AppSumo i regularnie wrzucają do niej fajne nowości. Dodają przy tym funkcje, które zdradzają, że za produktem stoi silny zespół inżynierów.

Zaufałem im do tego stopnia, że wykupiłem wyższy plan, uprawniający mnie do chociażby budowania centrum pomocy we własnej domenie, czy eksportów video.

Czym różnią się narzędzia do nagrywania instrukcji krok po kroku od Camtasia i podobnych?

Mówimy o dwóch różnych podejściach do tworzenia materiałów szkoleniowych.

Jedno zakłada nagrywanie video, gdzie robisz coś na ekranie i (zazwyczaj) komentujesz to na głos. Takie instruktaże również nagrywam – najczęściej za pomocą OBS i CapCut, czasem używam też Camtasia albo Loom czy Berrycast i podobnych narzędzi.

Drugie podejście to zrzuty ekranowe opatrzone komentarzem, strzałkami, ramkami i różnymi dodatkowymi wskazówkami. Bardzo często robię takie zrzuty w świetnym Greenshot i wklejam po prostu w mail. Ale czasem potrzebuję czegoś, co wygląda bardziej jak interaktywna instrukcja a nie kilka ekranów jeden pod drugim. Wtedy przydaje się GuideJar, który pozwala mi zrobić takie coś w kilka(naście) minut.

Oba podejścia są przydatne w różnych sytuacjach. GuideJar nadaje się właściwie do każdej instrukcji, którą da się „nagrać” wykonując czynności na ekranie, a która nie wymaga płynnego video i głosowego komentarza. Pozwala też łatwo cofać kroki, na spokojnie zapoznać się z opisem, łatwo w nim dodać adnotacje no i finalny produkt nie waży kilkadziesiąt czy kilkaset megabajtów.

Rzadko spotykana funkcja „zmiennych” w instrukcjach

Co ciekawe tekst osadzony w instrukcjach może być w pewnym zakresie dynamiczny, dzięki funkcji „dynamic variables„. Przykładowo – robimy instrukcję jak zalogować się do panelu WordPress. W instrukcji wstawiamy tekst {{url}} a w linku do niej zaszywamy parametr url=stronaklienta.pl. Innemu klientowi wysyłamy link z parametrem url=stronadrugiegoklienta.pl. Każdy z nich zobaczy instrukcję z adresem własnej strony. Fajne, co?

Jest to funkcja, którą udało mi się „wypromować” na liście życzeń, która jest regularnie przeglądana przez twórców narzędzia.

Jak wygląda tworzenie instrukcji krok po kroku w GuideJar?

Jest to banalnie proste. Najpierw odpalasz tryb „nagrywania” – za pomocą wtyczki do Chrome albo desktopowej aplikacji. Przy każdym kliknięciu robi się zrzut ekranu.

Po nagraniu wchodzisz w tryb edycji. Każdy z kroków (czyli jeden zrzut) możesz duplikować, przesuwać, opatrzyć komentarzem, strzałkami, dymkami, czym tam potrzebujesz. Edytor wygląda mniej więcej tak:

Oprócz edycji kolejności ekranów, położenia kursora czy opisu przy nim dostajemy dość prosty edytor graficzny. Możemy więc wejść w każdy obraz i wykorzystać sporo narzędzi związanych z opisywaniem tego co widać na danym zrzucie ekranu. Strzałki, kolejne numerki, zamazanie fragmentów obrazu, dodawanie tekstu – wszystko czego potrzeba. Przykład poniżej.

Jak mogę opublikować moje instrukcje?

Tutaj jest wiele opcji. Udostępnienie linkiem, pobranie do PDF lub HTML czy też osadzenie na własnej stronie. Instrukcja może być chroniona hasłem, lub udostępniona tylko dla zaproszonych użytkowników. Jej osadzenie można ograniczyć do własnej domeny.

Wyższe plany mają też opcję generacji plików video oraz zbudowanie własnego centrum pomocy, gdzie instruktaże mogą być umieszczone w kategoriach i podkategoriach. Coś takiego możesz zobaczyć chociażby na https://pomoc.palikowski.eu/.

Jakie jeszcze ciekawe funkcje znajdę w GuideJar?

Cała lista jest na stronie z ich funkcjami, ale poniżej hasłowo:

• dynamiczne zmienne, o których wspominałem
• rozgałęzienia w instrukcjach (różne ścieżki zależne od tego co kliknie oglądający)
• różne formy instrukcji (krok-po-kroku, interaktywna, video)
• tłumaczenia wspomagane AI
• Voiceover generowany przez AI
• Role użytkowników
• Centrum Pomocy we własnej domenie
• Formularze i Strony (póki co w wersji beta i niezbyt rozbudowane)

Podsumowując

GuideJar zdobył moje serce, ponieważ robi jedną rzecz ale za to całkiem nieźle. Zastąpił mi nieodżałowanego WinkDebug, który używałem sto lat temu. Rzadziej też sięgam po BerryCast, chociaż ono też ma swoje zalety. Klienci, którym wysyłam instrukcje zazwyczaj bardzo sobie chwalą ten format przekazywania wiedzy.

Mam nadzieję, że Tobie też przyda się na coś to mało znane narzędzie. Jeśli tak to klikaj w link do GuideJar (z moim kodem polecającym) i baw się dobrze :).