Share
Ce fut une grande joie de voir autant de personnes trouver l'utilisateur qui a intégré les démos que je crée une telle aide..
Plusieurs fois, cela amène les gens à tendre la main et à me demander comment je les fabrique. J'espère que cela, amis, devrait être la référence ultime sur exactement comment ils sont créés.
Remarque: Ce qui suit est une recette très détaillée pour générer les diaporamas, pas la perspective que j’apporte pour évaluer les expériences d’accueil elles-mêmes. Il y a beaucoup trop de choses à faire dans un tutoriel, et j'ai déjà écrit un livre entier sur ce sujet tel quel..
Quoi qu'il en soit, avec le spectacle!
Tout commence avec ScreenFlow, un logiciel que j'adore absolument. Il rend l’enregistrement audio / vidéo sur le bureau et son édition par la suite super simple, simple et agréable. Je l'utilise tout le temps, pour une gamme étonnamment variée de cas d'utilisation (édition de podcast, capture d'audio à partir de réunions Skype / Hangout, enregistrement de screencasts, etc.). Je recommande fortement de le vérifier.
En ce qui concerne plus particulièrement les démontages, je l’utilise pour enregistrer tout ce qui se passe sur mon écran (plus à ce sujet en une seconde), ainsi que pour enregistrer des commentaires audio en direct au fur et à mesure (le micro que j’utilise est un Yeti Blue et c’est un investissement très rentable) . ScreenFlow peut enregistrer plusieurs canaux à la fois. Ainsi, si je passe en revue une application mobile comportant un composant audio, je peux également capturer l'audio du téléphone sur une piste distincte..
Voici un exemple du type de vidéo brute que j'enregistre:
J'avais l'habitude d'essayer de prendre des captures d'écran au fur et à mesure, mais j'avais toujours trop tendance à passer en revue l'expérience et à oublier de saisir chaque écran, ou de ne pas capturer une transition ou une animation rad. L'enregistrement d'écran est super utile pour me permettre de me concentrer sur une chose à la fois, et le commentaire audio m'aide à me rafraîchir la mémoire lorsque je passe en mode création de diaporama ultérieurement.
En ce qui concerne ce qui est enregistré pour commencer, cela dépend grandement s'il s'agit d'un produit de bureau / navigateur ou d'une application mobile. S'il s'agit de l'ancien, j'ouvre simplement un onglet de navigation privée dans Chrome, je le passe en mode plein écran et je pars pour les courses. Si c'est mobile, eh bien… c'est un peu plus complexe.
Lorsque Apple a publié OS X Yosemite, son lecteur QuickTime s’est doté d’un nouveau paramètre qui vous permet de refléter tout ce qui se passe sur votre iPhone sur l’écran de votre Mac. Il règle même les indicateurs de batterie et de réception de votre téléphone sur «saturé», ce qui est une touche incroyable (je suis toujours stressé lorsque je regarde les saisies sur l'écran du téléphone des gens lorsqu'il reste, comme par exemple, 1% de batterie).
Vous pouvez même techniquement enregistrer l'audio / la vidéo directement dans QuickTime pendant que vous y êtes, mais j'ai constaté que l'enregistrement était plus fluide lorsque j'utilise Screenflow, et je suis également à peu près sûr que vous ne pouvez pas enregistrer plusieurs canaux audio. dans QuickTime, je reste donc avec ce que je sais qui fonctionne.
Une fois l’enregistrement en place, je le reproduirai moi-même et je prendrai des captures d’écran au fur et à mesure pour les coller dans Keynote..
Remarque: JE amour Keynote. Si je devais choisir un seul logiciel sans navigateur à utiliser pour le reste de ma vie, ce serait Keynote et je n'aurais même pas à y penser plus longtemps. Je l'utilise pour créer des présentations. Je l'utilise pour les logiciels de wireframing / prototyping. Je l'utilise comme un carnet de croquis. Heck, je l'ai même utilisé pour créer l'intégralité du livre d'intégration utilisateur, en ajoutant de nouvelles diapositives une à une, comme si vous aviez inséré des pages dans une machine à écrire..
Quoi qu'il en soit, avec chaque capture d'écran ajoutée, je transforme mon commentaire audio (et les nouvelles observations résultant de l'examen de l'enregistrement) en annotations indiquant ce qu'il se passe dans l'expérience du produit. Le caractère que j'utilise pour les annotations s'appelle Sketchnote Text et a été très généreusement offert au projet par l'excellent Mike Rohde..
Comment Mailbox for Mac Onboards nouveaux utilisateursUne fois que tout est en place, je relis tout à plusieurs reprises pour m'assurer qu'il n'y a pas de fautes de frappe ou que je n'ai pas oublié de noircir mon numéro de téléphone ou quelque chose du genre. Environ la moitié du temps, quelque chose passe de toute façon. Hélas.
Keynote n'a pas vraiment d'option «cracher le tout comme un groupe d'images prêtes pour le Web», je dois donc effectuer un peu de traitement pour que tout soit prêt pour la consommation en ligne. La première étape consiste à exporter le contenu Keynote vers un fichier PDF:
Je roule avec Meilleur comme paramètre de qualité afin que je présente le moins d'artefacts de compression possible aussi tôt dans le processus. (Apple, si vous écoutez, envisagez de définir par défaut ce paramètre sur la dernière option choisie; cela me met vraiment mal au point de devoir sélectionner à nouveau Meilleur chaque fois que j'exporte quelque chose!)
Maintenant, j'ai un gros PDF, mais ce que je veux vraiment, ce sont des fichiers image individuels. Heureusement, les Mac ont un outil appelé Automator qui vous permet de créer des macros pour effectuer une série d’actions lorsque vous y déposez des fichiers. Après quelques expériences, voici la «recette» que j'ai trouvée qui fonctionne le mieux:
Cela génère un fichier PNG de haute qualité pour chaque page du fichier PDF, nommé d'après la page qu'il représente. Les fichiers sont assez volumineux, cependant, car lors de mes expériences, je ne pouvais pas faire en sorte qu'Automator donne l'impression que les choses ne ressemblaient pas à une résolution inférieure à 300 dpi. Photoshop rend les choses beaucoup mieux prêtes pour le Web, alors je prends les énormes PNG et les plonge dans un gouttelette Ps qui les réduit et réduit la résolution à une résolution raisonnable de 72 dpi.
Fichiers Web prêts à la main, je suis presque terminé. Il ne reste plus qu'à poster les fichiers dans le nuage et à créer une nouvelle page pour que le démontage soit opérationnel. Je rédige un texte de présentation rapide pour présenter le diaporama, puis le tout sous forme de brouillon pour assurer le chargement de toutes les images (et pour essayer d'attraper les fautes de frappe une fois de plus)..
Comment Foursquare intègre de nouveaux utilisateursLe code de diaporama lui-même est fait à partir de jQuery très jeté que j’ai écrit, basé à l’origine sur les tutoriels de Jon Raasch d’il ya des années et qui est si mal adapté qu’il ressemble à peine à son exemple de script original. Il existe également une fonctionnalité de zoom fournie par le plugin jQuery Zoom de Jack Moore, qui permet de mieux voir les détails sur des écrans plus petits..
Il y a en fait une dernière étape, et elle est la plus excitante: envoyer par courrier électronique un lien pour le nouveau démantèlement vers la liste des abonnés de UserOnboard. J'ai utilisé MailChimp depuis le premier jour et j'ai toujours été très heureux de ce que cela me permet de faire à cet égard..
La liste d’emails est la première fois que de nouveaux démos sont lancés (je clique sur envoyer au moment où de nouveaux exemples sont mis en ligne), et on m'a dit plus d'une fois qu'il s'agissait de l'un des rares abonnements auxquels les gens ont souscrit et qu'ils attendent avec impatience de recevoir des courriels. Si vous souhaitez vous amuser, vous devriez absolument!
J'espère que cet article vous a donné un aperçu utile de mon processus et de la manière dont les décharges d'intégration sont créées. J'ai hâte d'entendre vos commentaires dans les commentaires!
Accentsconagua