Opprette UserOnboard Teardowns Min prosess og verktøy

Det har vært en stor glede å se så mange mennesker å finne brukeren ombord på teardowns at jeg lager en slik hjelp.

Mange ganger fører det til at folk når ut og spør meg hvordan jeg lager dem. Dette, vennene, bør forhåpentligvis være den ultimate referansen på nøyaktig hvordan de er opprettet.

Merk: Det som følger er en veldig detaljert oppskrift på å generere lysbildefremvisninger, ikke det perspektiv jeg tar med til å evaluere ombordopplevelsene selv. Det er altfor mye der for å passe inn i en opplæring, og jeg har allerede skrevet en hel bok om emnet som det er.

Uansett, på med showet!

1. Gjør deg klar for Showtime

Alt starter i ScreenFlow, et program som jeg absolutt elsker. Det gjør opptak av lyd / video på skrivebordet og redigering av det etterpå, super enkelt, greit og morsomt. Jeg bruker det hele tiden, for et overraskende mangfoldig utvalg av brukssaker (podcastredigering, fange lyd fra Skype / hangout møter, innspilling av screencasts, etc.). Jeg anbefaler på det sterkeste å sjekke det ut.

Spesielt når det gjelder teardowns, bruker jeg det til å registrere hva som skjer på skjermen min (mer om det på et sekund), samt å spille inn live lydkommentarer mens jeg går (mikrofonen jeg bruker er en Yeti Blue og det er en veldig verdig investering) . ScreenFlow kan registrere flere kanaler samtidig, så hvis jeg vurderer en mobilapp som har en lydkomponent, kan jeg også ta opp lyden på et eget spor, også.

Her er et eksempel på hva slags rå video jeg registrerer:

Jeg pleide å prøve å ta skjermbilder mens jeg gikk, men jeg ville alltid bli sugd i å se på opplevelsen og glem å ta tak i hver skjerm, eller gå glipp av å ta en rad overgang eller animasjon. Skjermopptaket er super nyttig for å la meg fokusere på én ting om gangen, og lydkommentaren hjelper jogge minnet når jeg går inn i lysbildefremvisning - skape modus senere.

Når det gjelder hva som blir registrert til å begynne med, avhenger det sterkt av om det er et skrivebord / nettleserprodukt eller en mobilapp. Hvis det er det første, åpner jeg bare en inkognito-faneblad i Chrome, setter den til fullskjermmodus, og jeg er ute på løpene. Hvis det er mobilt, vel ... det er litt mer komplekst.

Når Apple släppte OS X Yosemite, fikk QuickTime Player en rad ny innstilling som lar deg spegle hva som skjer på iPhone på Mac-skjermen. Det setter selv mottak og batterilampe på mobiltelefonen til "full", noe som er en fantastisk touch (jeg blir alltid stresset ut på å se folks telefonskjerm griper når det er som 1% batteri igjen).

Du kan teknisk selv registrere lyd / video akkurat der i QuickTime mens du er på det, men jeg har funnet opptaket til å bli jevnere når jeg bruker Screenflow, og jeg er også ganske sikker på at du ikke kan spille inn flere lydkanaler i QuickTime, så holder jeg meg til det jeg vet fungerer.

2. Få det hele ned

Med opptaket på plass, vil jeg da spille det tilbake til meg selv og ta skjermbilder mens jeg går, limer dem inn i Keynote.

Merk: JEG kjærlighet Keynote. Hvis jeg måtte velge bare ett ikke-nettleserprogramvare for resten av livet, ville det være Keynote, og jeg ville ikke engang måtte tenke så lenge om det. Jeg bruker den til å lage presentasjoner. Jeg bruker den til wireframing / prototyping programvare. Jeg bruker den som en sketchpad. Heck, jeg brukte det til å lage hele brukeren på bordet, legge til nye lysbilder en etter en som hvordan du vil mate sider inn i en skrivemaskin.

Kjører kommentar

Uansett, med hvert skjermbilde lagt til, slår jeg lydkommentaren min (og nye observasjoner fra gjennomgang av opptaket) inn i kommentarer som peker på hva som skjer i produktopplevelsen. Typefeltet jeg bruker for kommentarene heter Sketchnote Text og ble veldig sjenerøst frivillig til prosjektet av den utmerkede Mike Rohde.

Hvordan postboks for Mac på bordet Nye brukere

Når jeg har fått alt på plass, leser jeg gjennom alt et par ganger for å forsikre deg om at det ikke er noen skrivefeil eller at jeg ikke har glemt å svarte ut telefonnummeret mitt eller noe. Om lag halvparten, noe slipper gjennom allikevel. Alas.

3. Få det ut

Keynote har egentlig ikke en "spytte alt ut som en haug med web-ready-bilder", så jeg må gjøre litt behandling for å få ting klart for onlineforbruk. Det første trinnet er å eksportere Keynote-innholdet til en PDF-fil:

Jeg ruller med Beste som kvalitetsinnstillingen slik at jeg kan innføre de minste kompresjonsartefaktene dette tidlig i prosessen. (Apple, hvis du lytter, vær så snill å vurdere å bruke denne innstillingen til det som ble valgt sist, det griner meg veldig godt for å måtte velge på nytt Beste hver eneste gang jeg eksporterer noe!)

Optimalisering med Automator & Photoshop

Nå har jeg en stor PDF, men det jeg egentlig vil ha er individuelle bildefiler. Heldigvis har Macer et verktøy som heter Automator, som lar deg lage makroer for å utføre en rekke handlinger når du slipper filer på dem. Etter å ha eksperimentert litt, her er "oppskriften" jeg syntes å fungere best:

Dette gir en høy kvalitet PNG for hver side i PDF-filen, oppkalt etter hvilken side den representerer. Filene er ganske store, men fordi jeg i mine eksperimenter ikke kunne få Automator til å få tingene til å se seg ujevn ved en oppløsning under 300 dpi. Photoshop gjør ting som er web-ready mye bedre, så jeg tar de store PNG-ene og plop dem på en Ps-dråpe som skalerer dem ned og senker oppløsningen til en rimelig 72 dpi.

lysbilde~~POS=TRUNC

Web-ready filer i hånden, jeg er nesten gjort. Alt som er igjen er å legge inn filene til skyen og piske opp en ny side for teardown å leve. Jeg skriver opp en rask blur for å introdusere lysbildeserien og så se hele greia som et utkast for å sørge for at alle bildene lastes (og for å prøve å fange skrivefeil en gang til).

Hvordan Foursquare Onboards Nye Brukere

Lysbildeseriekoden i seg selv er laget av noen veldig kastet sammen jQuery skrev jeg, opprinnelig basert på Jon Raaschs opplæring år og år siden, og nå så dårlig tilpasset, ligner det nesten ikke sitt opprinnelige eksempelskrift. Det er også en zoomfunksjonalitet som leveres av Jack Moore's jQuery Zoom-plugin, noe som gjør en god jobb med å gjøre det enklere å se detaljer på mindre skjermer.

Konklusjon

Det er faktisk et siste skritt, og det er den mest spennende: emailing ut en lenke for den nye teardown til UserOnboard-abonnentlisten. Jeg har brukt MailChimp siden dag ett og har alltid vært super fornøyd med hva det gjør meg i den forbindelse.

E-postlisten får de første hodene opp når nye teardowns går ut (jeg klikker sende øyeblikket nye eksempler går live), og jeg har blitt fortalt mer enn en gang at det er en av de få abonnementene folk har at de faktisk ser frem til å få e-post fra. Hvis du er interessert i å bli med i moroa, bør du helt!

Jeg håper denne artikkelen ga deg et nyttig innblikk i prosessen min, og hvordan ombordstigning er opprettet. Jeg gleder meg til å høre tilbakemeldingen din i kommentarene!