Screenshot prima e dopo

Uno screenshot prima e dopo è una coppia di immagini della stessa vista in due momenti o stati diversi, usata per mostrare cambiamenti, miglioramenti o regressioni.

Related workflow terms: Confronto tra screenshot, Flusso di lavoro per gli screenshot.

Perché il confronto prima e dopo è utile

Senza un riferimento è difficile valutare un cambiamento. Uno screenshot dello stato corrente mostra l'aspetto di una pagina adesso, ma non ciò che è cambiato. Affiancarlo allo stato precedente rende subito visibile la differenza, senza chiedere a chi guarda di ricordare com'era la pagina.

Per questo le coppie prima/dopo sono un modo efficace per comunicare un cambiamento visivo. Lo sguardo passa da sinistra a destra, o dall'alto verso il basso, e riconosce automaticamente le differenze. Una descrizione scritta può essere interpretata in modi diversi; le due immagini mostrano direttamente la modifica.

Il valore del confronto dipende però dalla coerenza. Se dimensioni, zoom o posizione di scorrimento cambiano, non si distinguono più le modifiche intenzionali dalle differenze casuali. Una coppia affidabile richiede le stesse condizioni di acquisizione: viewport, browser e stato dei contenuti identici, con la sola modifica da valutare come variabile.

Dove si usano gli screenshot prima e dopo

• Revisioni di design — per mostrare agli interessati l'aspetto di una pagina prima e dopo la riprogettazione
• Verifica delle correzioni — per allegare a un ticket lo stato errato e quello corretto, così chi revisiona può confermare il risultato senza riprodurre il problema
• Note di rilascio e changelog — per illustrare nuove funzioni o miglioramenti dell'interfaccia con prove visive
• Documentazione dei test A/B — per archiviare entrambe le varianti mostrate ai diversi gruppi di utenti
• Monitoraggio dei siti — per creare con acquisizioni periodiche una cronologia visiva e vedere che cosa è cambiato e quando
• Consegne ai clienti — per rendere tangibile il valore del lavoro affiancando il problema o il vecchio design al risultato

Come acquisire coppie efficaci

L'obiettivo è isolare la modifica. Tutto il resto deve rimanere identico. Per riuscirci:

• Blocca la viewport. Imposta larghezza e altezza precise e riusale per entrambe le acquisizioni. Anche pochi pixel possono spostare il layout e aggiungere rumore.
• Mantieni la posizione di scorrimento. Raggiungi lo stesso elemento o usa un'ancora, in modo che le immagini mostrino la medesima parte della pagina.
• Usa lo stesso browser e dispositivo. Browser diversi rendono font, spazi e colori in modo leggermente diverso, creando false differenze.
• Acquisisci alla stessa ora quando serve. Feed, banner temporanei e sezioni personalizzate possono cambiare in base al momento della giornata.
• Usa PNG. La compressione senza perdita conserva i pixel esatti; gli artefatti JPG possono sembrare cambiamenti che in realtà dipendono dal formato.

I flussi automatici applicano questi vincoli per impostazione predefinita. Ogni acquisizione usa lo stesso URL, la stessa viewport e le stesse impostazioni, quindi le coppie sono direttamente confrontabili.

In un vero flusso di rilascio o monitoraggio, la coppia viene in genere conservata insieme a URL, viewport e data. Questo contesto trasforma un semplice confronto visivo in una registrazione affidabile anche in futuro.

Errori comuni

• Inquadrature incoerenti. Acquisire il prima con una larghezza e il dopo con un'altra rende inutile il confronto: i cambiamenti di layout nascondono la modifica reale.
• Dimenticare lo stato iniziale. Dopo la distribuzione, il vecchio stato non è più disponibile. Registra il riferimento prima della modifica; nel monitoraggio continuo, automatizza questa operazione.
• Ignorare i contenuti dinamici. Pubblicità, caroselli, orari ed elementi personalizzati cambiano indipendentemente dal design. Maschera o escludi queste aree.
• Mostrare la coppia senza etichette. Due immagini affiancate e senza indicazioni lasciano dubbi sull'ordine. Usa sempre etichette chiare come "Prima" e "Dopo", oppure date e numeri di versione.