Share
Het was een grote vreugde om te zien dat zoveel mensen de gebruiker aan boord van de uitloop vinden dat ik zo'n hulp creëer.
Vaak leidt dit ertoe dat mensen contact zoeken en vragen hoe ik ze maak. Dit, vrienden, moet hopelijk de ultieme referentie zijn over hoe ze precies zijn gemaakt.
Notitie: wat volgt is een zeer gedetailleerd recept voor het genereren van de diavoorstellingen, niet het perspectief dat ik inbreng bij het evalueren van de onboarding-ervaringen zelf. Er is veel te veel om in een tutorial te passen en ik heb al een heel boek geschreven over dat onderwerp zoals het is.
Hoe dan ook, verder met de show!
Het begint allemaal in ScreenFlow, een stukje software waar ik absoluut dol op ben. Het maakt het opnemen van desktop audio / video en nadien supereenvoudig, recht toe recht aan en plezierig. Ik gebruik het de hele tijd, voor een verrassend divers aantal gebruikscasussen (podcast-bewerking, het vastleggen van audio van Skype / hangout-vergaderingen, het opnemen van screencasts, enz.). Ik raad het ten zeerste aan om het te bekijken.
Specifiek met betrekking tot demontage, gebruik ik het om alles op te nemen wat er op mijn scherm gebeurt (meer daarover in een seconde), evenals live audiocommentaar op te nemen als ik ga (de microfoon die ik gebruik is een Yeti Blue en het is een zeer waardevolle investering) . ScreenFlow kan meerdere kanalen tegelijkertijd opnemen, dus als ik een mobiele app evalueer die een audiocomponent heeft, kan ik de audio van de telefoon opnemen op een afzonderlijke track, evenals.
Hier is een voorbeeld van het soort onbewerkte video dat ik heb opgenomen:
Ik probeerde altijd screenshots te maken terwijl ik ging, maar ik zou er altijd te goed aan doen om de ervaring te bekijken en te vergeten elk scherm te pakken, of een rad-overgang of animatie te missen. De schermopname is super handig om me te laten focussen op één ding tegelijk, en het audiocommentaar helpt mijn geheugen op gang te krijgen als ik later in de modus voor het creëren van dia's ga.
Wat betreft wat er wordt opgenomen om mee te beginnen, dat hangt er sterk van af of het een desktop- / browserproduct of een mobiele app is. Als dit de eerste is, open ik gewoon een incognitotabblad in Chrome, stel ik het in op de modus Volledig scherm en ga ik naar de races. Als het mobiel is, nou ... dat is iets complexer.
Toen Apple OS X Yosemite uitbracht, kreeg de QuickTime Player een rad nieuwe instelling waarmee je alles wat er op je iPhone gebeurt op het scherm van je Mac kunt spiegelen. Het zet zelfs de ontvangst- en batterijindicatoren van uw cel op "vol", wat een geweldig gevoel is (ik word altijd gestresst wanneer ik kijk naar het scherm van mensen als er, zoals, 1% batterij over is).
Je kunt de audio / video nu zelfs in QuickTime opnemen terwijl je bezig bent, maar ik heb gemerkt dat de opname soepeler verloopt wanneer ik Screenflow gebruik, en ik ben er ook vrij zeker van dat je niet meerdere audiokanalen kunt opnemen in QuickTime, dus ik blijf bij wat ik weet dat het werkt.
Met de opname op zijn plaats, speel ik het terug naar mezelf en maak ik schermafbeeldingen terwijl ik ze aan Keynote plak.
Notitie: Ik liefde Keynote. Als ik voor de rest van mijn leven maar één niet-browser stukje software moest kiezen, zou het Keynote zijn en zou ik er niet eens zo lang over na hoeven denken. Ik gebruik het voor het maken van presentaties. Ik gebruik het voor wireframing / prototyping software. Ik gebruik het als een schetsblok. Ik heb het zelfs gebruikt om het volledige onboarding-boek van de gebruiker te maken, waarbij ik nieuwe dia's één voor één toevoeg, zoals hoe je pagina's in een typmachine zou invoeren.
Hoe dan ook, bij elk toegevoegd screenshot zet ik mijn audiocommentaar (en nieuwe waarnemingen van het beoordelen van de opname) om in aantekeningen die aangeven wat er in de productervaring gebeurt. Het lettertype dat ik gebruik voor de annotaties heet Sketchnote Text en werd zeer genereus aangeboden aan het project door de uitstekende Mike Rohde.
Hoe Mailbox voor Mac nieuwe gebruikers gebruiktZodra ik alles op zijn plaats heb gekregen, lees ik alles een paar keer opnieuw door om er zeker van te zijn dat er geen typefouten zijn of dat ik niet vergeten ben mijn telefoonnummer of iets zwart te maken. Ongeveer de helft van de tijd glijdt er toch iets door. Helaas.
Keynote heeft niet echt een "spuug alles als een hoop webklare beelden" optie, dus ik moet een beetje verwerken om dingen gereed te maken voor online consumptie. De eerste stap is het exporteren van de Keynote-inhoud naar een PDF:
Ik rol met Het beste als de kwaliteitsinstelling, zodat ik zo vroeg mogelijk in het proces de minste compressie-artefacten introduceer. (Apple, als je aan het luisteren bent, overweeg dan alsjeblieft deze instelling te negeren naar wat het laatst is gekozen, het maakt me echt kapot om opnieuw te selecteren Het beste elke keer als ik iets exporteer!)
Nu heb ik één grote PDF, maar wat ik echt wil zijn individuele afbeeldingsbestanden. Gelukkig hebben Macs een tool genaamd Automator waarmee je macro's kunt maken om een reeks acties uit te voeren wanneer je bestanden erop neerzet. Na een beetje experimenteren, hier is het "recept" dat ik het best heb gevonden:
Hiermee wordt een PNG van hoge kwaliteit uitgevoerd voor elke pagina in de PDF, genoemd naar de pagina die deze weergeeft. De bestanden zijn behoorlijk groot, omdat ik in mijn experimenten niet kon krijgen dat Automator dingen zag die er niet slecht uitzien bij een resolutie van minder dan 300 dpi. Photoshop maakt dingen veel beter web-klaar, dus ik neem dan de enorme PNG's en plof ze op een Ps-druppel die ze verkleint en de resolutie verlaagt tot een redelijke 72 dpi.
Web-ready bestanden in de hand, ik ben bijna gedaan. Het enige dat overblijft is om de bestanden naar de cloud te posten en een nieuwe pagina voor de aftakking op te zetten om te leven. Ik schrijf een snelle blurb op om de diavoorstelling te introduceren en bekijk het geheel als een concept om te zorgen dat alle afbeeldingen worden geladen (en om nog een keer typfouten te proberen).
Hoe Foursquare nieuwe gebruikers installeertDe diavoorstelling code zelf is gemaakt van een aantal zeer samengevoegde jQuery die ik schreef, oorspronkelijk gebaseerd op Jon Raasch's tutorial jaren en jaren geleden, en nu zo slecht aangepast lijkt het nauwelijks op zijn originele voorbeeld script. Er is ook een zoomfunctie beschikbaar die wordt geleverd door de jQuery Zoom-plug-in van Jack Moore, waarmee het gemakkelijker wordt om details op kleinere schermen te bekijken..
Er is eigenlijk nog een laatste stap en het is de meest opwindende: een e-mail versturen voor de nieuwe demontage naar de gebruikerslijst UserOnboard. Ik heb MailChimp sinds de eerste dag gebruikt en ben altijd super blij geweest met wat ik hiermee kan doen.
De e-maillijst krijgt de eerste heads-up als nieuwe demontages uitgaan (ik klik sturen het moment waarop nieuwe voorbeelden live gaan) en mij is meer dan eens verteld dat het een van de weinige abonnementen is waar mensen echt op uitkijken om e-mails te ontvangen. Als je geïnteresseerd bent om deel te nemen aan het plezier, zou je dat absoluut moeten doen!
Ik hoop dat dit artikel u een nuttig inzicht heeft gegeven in mijn proces en hoe onboarding-demontages worden gecreëerd. Ik kijk uit naar uw feedback in de reacties!
Accentsconagua