Creazione di UserOnboard Teardown My Process and Tools

È stata una grande gioia vedere così tante persone trovare l'utente a bordo di teardowns che creo un tale aiuto.

Molte volte, porta a persone che si avvicinano e mi chiedono come le faccio. Speriamo che questo, gli amici, sia il riferimento finale su come sono stati creati.

Nota: ciò che segue è una ricetta molto dettagliata per generare le presentazioni, non la prospettiva che porto a valutare le esperienze di onboarding stesse. C'è troppo da fare per un tutorial, e ho già scritto un intero libro su quell'argomento così com'è.

Ad ogni modo, avanti con lo show!

1. Prepararsi per Showtime

Tutto inizia in ScreenFlow, un software che adoro assolutamente. Rende la registrazione del desktop audio / video e la modifica in seguito semplicissima, intuitiva e piacevole. Lo uso sempre, per una gamma sorprendentemente diversificata di casi d'uso (editing di podcast, acquisizione di audio da riunioni Skype / Hangout, registrazione di screencast, ecc.). Consiglio vivamente di controllarlo.

In particolare per quanto riguarda i teardown, lo uso per registrare qualsiasi cosa accada sul mio schermo (ne parlerò di più in un secondo), oltre a registrare il commento audio in diretta mentre vado (il microfono che uso è uno Yeti Blue ed è un investimento molto utile) . ScreenFlow può registrare più canali contemporaneamente, quindi se sto rivedendo un'app mobile con un componente audio, posso acquisire l'audio del telefono su una traccia separata,.

Ecco un esempio del tipo di video raw che registro:

Ho provato a fare screenshot mentre andavo, ma sarei sempre stato risucchiato a rivedere l'esperienza e ho dimenticato di catturare ogni schermo, o perdere l'opportunità di catturare una transizione o un'animazione. La registrazione dello schermo è super utile per permettermi di concentrarmi su una cosa alla volta, e il commento audio aiuta a farmi girare la memoria quando vado in modalità di creazione di diapositive in un secondo momento.

Per quanto riguarda ciò che viene registrato per cominciare, ciò dipende molto dal fatto che si tratti di un prodotto desktop / browser o di un'app mobile. Se è il primo, apro una scheda di navigazione in incognito in Chrome, imposta la modalità a schermo intero e partecipo alle gare. Se è mobile, beh ... è leggermente più complesso.

Quando Apple ha rilasciato OS X Yosemite, il suo QuickTime Player ha una nuova impostazione che ti consente di eseguire il mirror di qualsiasi cosa stia accadendo sul tuo iPhone sullo schermo del tuo Mac. Imposta persino la ricezione della tua cella e gli indicatori della batteria su "pieno", il che è un tocco fantastico (mi stresso sempre guardando le prese dello schermo del telefono della gente quando c'è, tipo, 1% di batteria rimasta).

Puoi anche registrare tecnicamente l'audio / video proprio lì in QuickTime mentre ci sei, ma ho trovato che la registrazione è più fluida quando utilizzo Screenflow, e sono anche abbastanza sicuro che non puoi registrare più canali audio in QuickTime, quindi mi attengo a quello che so funziona.

2. Tutto sotto controllo

Con la registrazione in atto, lo riprodurrò da solo e catturerò schermate mentre procedo, incollandole in Keynote.

Nota: IO amore Keynote. Se dovessi scegliere un solo software non-browser da utilizzare per il resto della mia vita, sarebbe Keynote e non dovrei nemmeno pensarci così a lungo. Lo uso per creare presentazioni. Lo uso per il software wireframing / prototyping. Lo uso come blocco per schizzi. Diamine, l'ho persino usato per creare l'intero libro di onboarding degli utenti, aggiungendo nuove diapositive una alla volta come faresti con le pagine in una macchina da scrivere.

Commento in corso

Ad ogni modo, con ogni screenshot aggiunto, trasformo il mio commento audio (e le nuove osservazioni dalla revisione della registrazione) in annotazioni che indicano cosa sta accadendo nell'esperienza del prodotto. Il carattere tipografico che uso per le annotazioni si chiama Sketchnote Text ed è stato molto generosamente offerto al progetto dall'eccellente Mike Rohde.

Come Mailbox per Mac Onboard Nuovi utenti

Una volta ottenuto tutto, rileggo tutto un paio di volte per assicurarmi che non ci siano errori di battitura o che non abbia dimenticato di oscurare il mio numero di telefono o qualcosa del genere. Circa la metà delle volte, qualcosa sfugge comunque. ahimè.

3. Tiralo fuori

Keynote non ha davvero un'opzione "sputa tutto come un mucchio di immagini web-ready", quindi devo fare un po 'di elaborazione per preparare le cose al consumo online. Il primo passo è quello di esportare il contenuto di Keynote in un PDF:

Rotolo con Migliore come impostazione di qualità in modo tale che sto introducendo il minor numero di artefatti di compressione possibili all'inizio del processo. (Apple, se stai ascoltando, ti preghiamo di prendere in considerazione l'impostazione di default di questa impostazione su qualunque cosa sia stata scelta per ultima, in realtà macina le mie marce per dover riselezionare Migliore ogni volta esporto qualcosa!)

Ottimizzazione con Automator e Photoshop

Ora ho un grande PDF, ma quello che voglio veramente sono i singoli file di immagine. Fortunatamente, i Mac dispongono di uno strumento chiamato Automator che consente di eseguire macro per eseguire una serie di azioni quando si rilasciano file su di esse. Dopo aver sperimentato un po ', ecco la "ricetta" che ho trovato per funzionare al meglio:

Questo genera un PNG di alta qualità per ogni pagina del PDF, il cui nome deriva dalla pagina che rappresenta. I file sono piuttosto grandi, però, perché nei miei esperimenti non riuscivo a far sì che Automator facesse sembrare non junky a qualsiasi risoluzione inferiore a 300 dpi. Photoshop rende le cose pronte per il web molto meglio, quindi prendo gli enormi PNG e li plop su una droplet Ps che li ridimensiona e abbassa la risoluzione a un ragionevole 72 dpi.

Presentazione

File pronti per il Web in mano, lo sono quasi fatto. Non resta che postare i file nel cloud e creare una nuova pagina per il teardown da vivere. Scrivo una breve descrizione per introdurre la presentazione e quindi visualizzare il tutto come una bozza per assicurarmi che tutte le immagini vengano caricate (e per cercare di catturare gli errori di stampa ancora una volta).

Come i nuovi utenti di Onboard di Foursquare

Il codice dello slideshow stesso è composto da un jQuery che ho scritto molto insieme, originariamente basato sul tutorial di Jon Raasch anni e anni fa, e ora così mal adattato che assomiglia a malapena al suo script di esempio originale. C'è anche una funzionalità di zoom fornita dal plugin jQuery Zoom di Jack Moore, che fa un grande lavoro per rendere più facile vedere i dettagli su schermi più piccoli.

Conclusione

In realtà c'è un ultimo passaggio, ed è il più eccitante: inviare via email un link per il nuovo teardown alla lista di iscritti UserOnboard. Ho usato MailChimp sin dal primo giorno e sono sempre stato molto contento di quello che mi permette di fare in questo senso.

L'elenco delle e-mail viene visualizzato per primo quando escono nuovi teardown (clicco) inviare nel momento in cui nuovi esempi vengono pubblicati), e mi è stato detto più volte che è uno dei pochi abbonamenti che hanno in realtà che non vedono l'ora di ricevere e-mail. Se sei interessato ad unirti al divertimento, devi assolutamente farlo!

Spero che questo articolo ti abbia fornito utili informazioni sul mio processo e su come vengono creati i teardown onboarding. Non vedo l'ora di sentire il tuo feedback nei commenti!