Come documentare un walkthrough di prodotto con screenshot automatici su Mac

Un walkthrough di prodotto mostra al lettore come appare un flusso dall'inizio alla fine: registrazione, primo progetto, una nuova funzione. Gli screenshot temporizzati funzionano bene quando il flusso include scorrimenti, animazioni o attese, situazioni in cui un'acquisizione basata sui clic perderebbe le schermate intermedie.

Questo articolo usa Temposhot Auto Capture su Mac per fare uno screenshot a intervalli fissi, poi trasforma i frame utili in una guida modificata.

Le sezioni seguono un unico esempio svolto. Il flusso è “Create and share your first board” in un'app web, eseguito in circa 105 secondi. Un'esecuzione di 70 frame con intervallo di 1,5 secondi ha prodotto una guida di 12 pagine.

1. Scegli un flusso del prodotto

Scegli un flusso con un inizio e una fine chiari, ad esempio “Create and share your first board”. Un walkthrough dell'intero prodotto diventa una lunga galleria che nessuno finisce.

Accanto al flusso, scrivi il pubblico: un potenziale cliente che valuta il prodotto, un nuovo utente o un collega che impara una release. Il pubblico decide quali schermate contano e quanto spiegare.

Dimensiona il flusso prima dell'acquisizione

Un flusso che sta in 8 o 15 pagine si legge comodamente in una sola sessione. Conta le schermate che il lettore deve vedere, non i clic. Il flusso della board ne ha 12: dashboard vuota, finestra di creazione della board, nome della board, scelta del template, board vuota, prima card, dettagli della card, pulsante Share, finestra di invito, menu dei ruoli, invito inviato e board condivisa.

Se il conteggio supera circa 20, dividi il flusso. “Create a board” e “Share a board” funzionano come due walkthrough che si collegano tra loro. Ogni parte ha così un inizio e una fine propri, e una release che modifica la condivisione tocca solo la seconda parte.

Adatta il livello di dettaglio al pubblico

Un potenziale cliente ha bisogno del risultato di ogni schermata e di pochi dettagli. Un nuovo utente ha bisogno dei nomi dei campi e dei valori da inserire. Un collega che impara una release ha bisogno solo delle schermate modificate, con il comportamento precedente indicato nella descrizione.

Gli stessi 70 frame possono servire tutti e tre i pubblici. Cambia quali frame diventano pagine e quanto sono lunghe le descrizioni.

2. Prepara un ambiente di test pulito

Un walkthrough mostra molto contenuto in una volta, quindi i dati visibili contano.

• Usa un account demo con contenuti di esempio realistici: nomi di progetti, alcuni elementi, una foto profilo che non ritragga una persona reale.
• Imposta una dimensione di finestra e mantienila. Un'area di acquisizione con un rapporto d'aspetto comune, come 16:9 a 1600×900, si adatta a slide e documenti.
• Chiudi le altre app, nascondi il Dock se si trova nell'area e attiva una modalità Focus di macOS.
• Prova il flusso una volta, per sapere dove si trovano le pause.

Fissa la finestra e l'area

Un walkthrough si legge come un pezzo unico quando ogni pagina ha la stessa dimensione e lo stesso layout. Imposta la finestra del browser una volta, poi disegna l'area di acquisizione sopra di essa con il preset 16:9 a 1600 × 900. Attiva Lock aspect, in modo che una modifica successiva mantenga il rapporto.

Se il preset non entra nel display, Temposhot lo riduce e mantiene il rapporto d'aspetto. Su un display di un laptop più piccolo, controlla la dimensione mostrata nell'overlay prima di avviare, perché un'area ridotta produce frame più piccoli.

Tieni fuori notifiche e finestre private

Auto Capture salva tutto ciò che è visibile nella sorgente. Un banner di notifica che scorre nell'area personalizzata durante l'esecuzione compare in più frame. La modalità Focus di macOS blocca la maggior parte dei banner, e chiudere le app di chat e posta elimina il resto.

Una sorgente Windows acquisisce una sola finestra dell'app, anche quando altre finestre le passano davanti. Una sorgente Custom Area acquisisce la regione così come appare, incluso tutto ciò che la copre. Per un walkthrough su una finestra del browser, l'area personalizzata è la scelta migliore solo se durante l'esecuzione nulla si aprirà sopra la regione.

Prova il flusso e annota le attese

La prova mostra dove il prodotto fa aspettare il lettore. Nel flusso della board, la galleria dei template impiega circa 2 secondi a caricarsi, e la conferma dell'invito appare circa 1 secondo dopo Send. Queste attese determinano l'intervallo e il tempo da trascorrere su ogni schermata.

3. Configura l'acquisizione temporizzata

1. Apri Auto Capture

   Premi Command+1 per aprire Auto Capture.

2. Scegli la sorgente

   Scegli Windows per una sola finestra dell'app, oppure Custom Area per disegnare una regione fissa. Il selettore dell'area offre preset come 16:9 1600×900 e Lock aspect.

3. Imposta la condizione di arresto

   Scegli Screenshots con un numero che copra il flusso, oppure Duration per una durata fissa. Il valore predefinito è 5 screenshot.

4. Imposta l'intervallo

   Un Interval da 1 a 2 secondi va bene per la maggior parte dei walkthrough. Il valore predefinito è 1 secondo.

5. Lascia vuoto Key press

   Guiderai il prodotto a mano, quindi non serve inviare alcun tasto tra uno scatto e l'altro.

6. Mantieni il conto alla rovescia

   Il Countdown predefinito di 3 secondi ti dà il tempo di passare alla finestra del prodotto.

Il preset Quick Demo (5 screenshot, 1 secondo, nessun tasto, conto alla rovescia di 3 secondi) è un punto di partenza. Oltre il numero di screenshot gratuiti per sessione serve Pro. La guida all'acquisizione automatica spiega ogni impostazione.

Impostazioni per il walkthrough della board

La prova è durata circa 95 secondi. Con un intervallo di 1,5 secondi corrispondono a circa 63 frame, quindi la condizione di arresto è stata impostata a 70 screenshot, per avere un margine. Il conto alla rovescia è stato portato a 5 secondi, perché passare al browser e posizionare il puntatore richiede più di 3 secondi.

Inserisci l'intervallo come 1500 millisecondi oppure 1,5 secondi: sono accettate entrambe le unità. Salva la configurazione con Save Current Setup usando un nome come “Walkthrough 70 frame 1,5 s”. Un preset salva la condizione di arresto, l'intervallo, il tasto e il conto alla rovescia, ma non la sorgente. Per questo l'area personalizzata va scelta di nuovo a ogni esecuzione.

Scegli l'intervallo in base alla schermata più lenta

L'intervallo deve essere più corto della schermata più breve che il lettore deve vedere, e abbastanza lungo perché i frame non si accumulino. Un intervallo di 1 secondo su un flusso di 105 secondi dà circa 105 frame, la maggior parte quasi duplicati. Un intervallo di 3 secondi dà 35 frame, ma può perdere il menu dei ruoli, che resta aperto per circa 2 secondi.

Per il flusso della board, 1,5 secondi ha catturato ogni schermata almeno una volta. Conta i frame per schermata dopo l'esecuzione: se una schermata importante ha un solo frame, accorcia l'intervallo o resta più a lungo su quella schermata la volta successiva.

4. Percorri il flusso con un ritmo costante

Seleziona Start Capture (nel selettore dell'area personalizzata, Start Auto Capture), passa al prodotto durante il conto alla rovescia ed esegui il flusso. Resta su ogni schermata importante per almeno due intervalli, così un frame la cattura completamente caricata.

Usa Pause capture nella barra mobile per correggere un errore, e Resume capture per riprendere. Finish capture termina subito l'esecuzione.

Ritmo dell'esecuzione di esempio

Restare due intervalli su una schermata significa circa 3 secondi con un intervallo di 1,5 secondi. Digitare il nome della board ha richiesto più tempo, quindi ha prodotto 5 frame, e l'ultimo mostra il nome completo. La linea temporale sotto indica dove l'esecuzione ha speso il suo tempo.

Tasti durante l'esecuzione

La barra mobile resta visibile mentre il browser è in primo piano. Anche i comandi della barra dei menu funzionano, quindi l'esecuzione può essere avviata e terminata senza passare alla finestra di Temposhot.

Scorri a piccoli passi regolari

Gli schermi con scorrimento sono dove l'acquisizione temporizzata aiuta di più, ed è anche dove più spesso produce frame sfocati o a metà movimento. Scorri circa mezzo schermo alla volta e fermati tra uno scorrimento e l'altro per almeno un intervallo. Ogni sosta produce così un frame pulito, e i frame consecutivi si sovrappongono, in modo che nulla venga saltato.

Se una pagina lunga richiede un'unica immagine alta invece di più frame, esporta i frame in PNG e uniscili con Stitch Screenshots. Lo strumento li unisce dall'alto verso il basso e rileva la sovrapposizione tra un'immagine e l'altra.

Gestisci un errore durante l'esecuzione

Se un clic sbagliato apre la finestra sbagliata, seleziona Pause capture, chiudi la finestra, torna all'ultima schermata corretta e seleziona Resume capture. I frame dell'errore restano nella sessione e vengono saltati quando si costruisce il Document. Con la condizione di arresto Screenshots, il conteggio riprende da dove si era fermato, quindi il budget di 70 frame non si esaurisce a causa della pausa.

Se l'errore ha modificato i dati di demo, ad esempio una board creata con il nome sbagliato, interrompi l'esecuzione, correggi i dati e ricomincia. Una seconda esecuzione pulita si modifica più in fretta di un'esecuzione con una correzione a metà.

5. Trasforma i frame utili in un Document

Al termine dell'esecuzione, il pannello dei risultati mostra Capture complete e i frame. L'acquisizione temporizzata produce più frame dei passi, quindi scegli quelli che raccontano la storia.

Due modi per costruire il Document:

• Create Document nel pannello dei risultati usa l'intera sessione. Elimina le pagine in più dopo, nel pannello Pages.
• In Documents (Command+4), apri il menu New Document e scegli Capture History…. Espandi la sessione, includi solo i frame che vuoi e seleziona Add selected Frames.

Il secondo percorso è più veloce se tieni meno della metà dei frame. La guida a pagine e importazioni copre entrambi.

Quale percorso conviene con 70 frame

L'esecuzione della board ha tenuto 14 frame su 70 al primo passaggio, cioè il 20 percento. Eliminare 56 pagine una per una è più lento che spuntare 14 frame, quindi il selettore di Capture History era il percorso migliore.

Create Document usa sempre tutti i frame della sessione, inclusi quelli non selezionati. La selezione con le checkbox nel pannello dei risultati si applica alle esportazioni ZIP, Images, PDF e MP4, non al Document.

Scegli il frame per ogni schermata

Quando una schermata compare in 3 o 4 frame consecutivi, scegli l'ultimo. Mostra la schermata dopo che il caricamento è terminato e il puntatore si è fermato. Per una finestra di dialogo, scegli il frame in cui la finestra è completamente aperta, non quello a metà dell'animazione.

Dopo il primo passaggio, 2 delle 14 pagine erano quasi duplicati della schermata dei dettagli della card. Eliminandole sono rimaste 12 pagine, una per ogni schermata dell'elenco del flusso nella sezione 1.

6. Scrivi le istruzioni delle pagine

Ogni pagina ha bisogno di un Page title che dica cosa vede o fa il lettore, e di una breve descrizione del motivo per cui la pagina conta nel flusso.

• “Assegna un nome alla board”: cosa digitare e dove.
• “Invita i colleghi via email”: quale campo usare e quale ruolo scegliere.
• “Controlla la board condivisa”: cosa deve notare il lettore.

Usa Framing (F) con Custom per ritagliare ogni pagina sulla parte di schermo che descrive il titolo. Aggiungi una Arrow (A) o un Rectangle (R) dove deve andare lo sguardo. I frame temporizzati non contengono la posizione del clic, quindi Focus on action si applica solo alle pagine di Action Capture.

Schemi per titolo e descrizione

Un titolo indica una sola schermata o una sola azione. La descrizione aggiunge il valore da digitare, la scelta da fare o il risultato atteso. Mantieni le descrizioni in due frasi, così lo screenshot resta in alto nella pagina PDF.

Ritaglia e annota ogni pagina

Un frame 1600 × 900 mostra l'intera app, ma la maggior parte delle pagine riguarda una sola finestra o un solo campo. Custom nell'editor dell'inquadratura imposta la regione visibile, e Frame size mostra la sua larghezza e altezza. Il frame originale non cambia, e Show full image lo ripristina.

Di solito basta un solo segno per pagina. Una Arrow indica un controllo che il lettore deve trovare, e un Rectangle delinea un campo da compilare. Nell'Object Inspector imposta Width in modo che il contorno sia visibile alla dimensione di esportazione, e usa lo stesso colore in tutte le pagine.

7. Esporta e verifica il walkthrough

Seleziona Export PDF per un documento da inviare o allegare. Con Pro, la finestra PDF aggiunge una copertina, i numeri dei passi e i numeri di pagina. Apri More export formats per le pagine in PNG, JPG o WebP da inserire in slide o wiki, oppure per un pacchetto ZIP con document.json.

Controlla l'esportazione alla dimensione finale. Verifica che ogni titolo corrisponda al suo screenshot e che nessun dato reale di cliente sia finito in un frame. La guida all'esportazione dei Documents elenca tutti i formati.

Controlla il PDF alla dimensione finale

L'anteprima PDF nella finestra di esportazione mostra ogni pagina come verrà salvata. Scorri tutte le 12 pagine e controlla tre cose: il titolo corrisponde allo screenshot, il ritaglio lascia visibile il controllo e nessun dato di demo sembra un dato reale. Con l'impostazione predefinita Fit without enlarging, una pagina ritagliata strettamente mantiene la sua dimensione invece di essere ingrandita e sfocata.

Il piè di pagina riassume il risultato, ad esempio “12 steps · A4 · Landscape”. Se il conteggio non corrisponde all'elenco del flusso, una pagina manca o è duplicata.

File del walkthrough della board

La guida della board è stata esportata due volte: una come PDF da inviare via email, e una come pagine PNG per una presentazione. I file immagine prendono il nome dai titoli delle pagine, così le slide si possono ordinare per nome.

Le pagine PNG sono senza perdita di qualità e mantengono nitido il testo dell'interfaccia nelle slide. Le pagine JPG sono più piccole e si adattano a una wiki con limiti di caricamento. Per un unico PDF che unisce questa guida ad altre, lo strumento del browser Merge PDF unisce i file esportati.

Trasforma gli stessi frame in un breve video

Il pannello dei risultati esporta MP4 dai frame selezionati, in ordine. La frequenza di fotogrammi determina la durata del video. Per i 70 frame della board, la durata a ogni frequenza è il numero di frame diviso la frequenza.

A 5 fps, l'impostazione più bassa, ogni frame resta visibile per 0,2 secondi. Una schermata quindi compare nel video solo per il numero di frame che occupa nell'esecuzione. Un'esecuzione temporizzata in cui chi presenta resta 3 secondi su ogni schermata dà 2 frame per schermata, cioè 0,4 secondi di video.

Per una sequenza più lenta dei 14 frame scelti, selezionali ed esporta una GIF da Export settings…. GIF frame delay arriva fino a 1 secondo per frame, quindi 14 frame durano 14 secondi. Lo strumento del browser Images to Video è un'altra opzione per una presentazione a diapositive dalle pagine PNG esportate.

Mantieni il walkthrough aggiornato

I walkthrough mostrano molte schermate, quindi invecchiano a ogni release. Conserva la sessione e il Document sul Mac che li ha creati, indica la versione del prodotto in copertina e riacquisisci solo le schermate modificate. L'articolo su come mantenere aggiornata la documentazione con gli screenshot descrive una routine di revisione.

Se un walkthrough è guidato dai clic, senza attese né scorrimenti, Action Capture produce una pagina per ogni clic invece di frame temporizzati.

Aggiorna solo le pagine modificate

Quando una release modifica la finestra di invito, servono nuovi screenshot solo per 3 delle 12 pagine. Rieseguire l'intero flusso e ricostruire la guida ripete il lavoro su 9 pagine che non sono cambiate.

Le nuove pagine da un'acquisizione possono essere inserite dopo la pagina attualmente selezionata, quindi seleziona prima la pagina che precede la sezione modificata. I file esportati non si aggiornano da soli: esportali di nuovo dopo ogni modifica.

Limite di conservazione delle sessioni

Capture History conserva 30 sessioni per impostazione predefinita, e il limite può essere impostato da 1 a 500 in Settings > History. Il Document conserva una copia propria di ogni immagine che usa, quindi la guida sopravvive alla rimozione della sessione di origine. I 70 frame grezzi non vengono conservati: esportali come ZIP se una modifica futura potrebbe richiedere un frame non scelto.

Domande frequenti

Per i walkthrough è meglio l'acquisizione temporizzata o quella al clic?

L'acquisizione temporizzata è adatta ai flussi con scorrimento, caricamenti e animazioni. L'acquisizione al clic è adatta ai compiti basati su moduli, dove ogni clic è un passo. Vedi screenshot manuali e acquisizione al clic.

Posso creare un video dai frame?

Sì. Il pannello dei risultati esporta MP4 da 5 a 60 fps. Un MP4 breve è adatto a una demo, mentre un Document è adatto a una guida che i lettori seguono al proprio ritmo.

Quale intervallo devo usare?

Da 1 a 2 secondi per la maggior parte dei walkthrough di interfaccia. Intervalli più brevi catturano le transizioni, ma creano più frame da ordinare.

Quanti screenshot deve consentire la condizione di arresto?

Dividi il tempo della prova per l'intervallo e aggiungi circa il 10 percento. Una prova di 95 secondi con intervallo di 1,5 secondi dà circa 63 frame, quindi 70 lascia un margine.

Il walkthrough può acquisire una pagina dietro un accesso?

Sì, con Auto Capture. Acquisisce la schermata così come appare, quindi accedi all'account demo nel browser prima dell'esecuzione. Website Capture è diverso: carica le pagine in una sessione privata, senza l'accesso del tuo browser.

Trasforma gli screenshot ripetibili in lavoro finito

Automazione degli screenshot su Mac acquisisce il walkthrough a intervalli fissi e consegna i frame a un Document modificabile. Scarica Temposhot e registra il tuo primo flusso.