AdvertisementCreating UserOnboard Teardowns: My Process and ToolsAdvertisementIt’s been a great joy to see so many people finding the user
that I create such a help.Many times, it leads to people reaching out and asking me how I make them. This, friends, should hopefully be the ultimate reference on exactly how they’re created.Note: what follows is a very detailed recipe for generating the slideshows, not the perspective I bring to evaluating the onboarding experiences themselves. There’s way too much there to fit into a tutorial, and I’ve already written an entire
as it is.Anyway, on with the show!1. Getting Ready for ShowtimeIt all starts in , a piece of software I absolutely adore. It makes recording desktop audio/video and editing it afterward super simple, straightforward, and enjoyable. I use it all the time, for a surprisingly diverse range of use cases (podcast editing, capturing audio from Skype/hangout meetings, recording screencasts, etc.). I highly recommend checking it out.Specifically regarding teardowns, I use it to record whatever’s happening on my screen (more on that in a second), as well as recording live audio commentary as I go (the mic I use is a
and it is a very worthwhile investment). ScreenFlow can record multiple channels at once, so if I’m reviewing a mobile app that has an audio component, I can capture the phone’s audio on a separate track, as well.Here’s an example of the kind of raw video I record:
I used to try taking screenshots as I went, but I’d always get too sucked into reviewing the experience and forget to grab every screen, or miss out on capturing a rad transition or animation. The screen recording is super helpful for letting me focus on one thing at a time, and the audio commentary helps jog my memory when I go into slideshow-creating mode later on.As for what’s being recorded to begin with, that greatly depends on whether it’s a desktop/browser product or a mobile app. If it’s the former, I just open up an incognito tab in Chrome, set it to full-screen mode, and I’m off to the races. If it’s mobile, well… that’s slightly more complex.When Apple released OS X Yosemite, its QuickTime Player got a
that lets you mirror whatever’s happening on your iPhone on your Mac’s screen. It even sets your cell reception & battery indicators to “full”, which is an awesome touch (I always get stressed out looking at people’s phone screen grabs when there’s, like, 1% battery left).You can technically even record the audio/video right there in QuickTime while you’re at it, but I’ve found the recording to be smoother when I use Screenflow, and I’m also pretty sure you can’t record multiple audio channels in QuickTime, so I stick with what I know works.2. Getting It All DownWith the recording in place, I will then play it back to myself and grab screenshots as I go, pasting them into .Note: I love Keynote. If I had to pick only one non-browser piece of software to use for the rest of my life, it would be Keynote and I wouldn’t even have to think that long about it. I use it for creating presentations. I use it for wireframing/prototyping software. I use it as a sketchpad. Heck, I even used it to create the entire , adding new slides one by one like how you’d feed pages into a typewriter.Running CommentaryAnyway, with each screenshot added, I turn my audio commentary (and new observations from reviewing the recording) into annotations pointing out what’s happening in the product experience. The typeface I use for the annotations is called
and was very generously volunteered to the project by the excellent .Once I’ve gotten everything in place, I re-read through everything a couple of times to make sure there aren’t any typos or that I haven’t forgotten to black out my phone number or something. About half the time, something slips through anyway. Alas.3. Getting it OutKeynote doesn’t really have a “spit everything out as a bunch of web-ready images” option, so I have to do a bit of processing to get things ready for online consumption. The first step is to export the Keynote content to a PDF:I roll with Best as the quality setting so that I’m introducing the fewest compression artefacts possible this early in the process. (Apple, if you’re listening, please consider defaulting this setting to what it really grinds my gears to have to re-select Best every single time I export something!)Optimizing with Automator & PhotoshopNow I have one big PDF, but what I really want are individual image files. Fortunately, Macs have a tool called
which lets you make macros to perform a series of actions when you drop files onto them. After experimenting a bit, here’s the “recipe” I found to work best:This outputs a high-quality PNG for each page in the PDF, named after whatever page it represents. The files are pretty huge, though, because in my experiments I couldn’t get Automator to make things look non-junky at any resolution below 300 dpi.
makes things web-ready much better, so I then take the huge PNGs and plop them onto a
that scales them down and lowers the resolution to a reasonable 72 dpi.SlideshowWeb-ready files in hand, I’m almost done. All that’s left is to post the files to the cloud and whip up a new page for the teardown to live. I write up a quick blurb to introduce the slideshow and then view the whole thing as a draft to make sure all the images load (and to try to catch typos one more time).The slideshow code itself is made out of some very thrown-together
I wrote, originally based on
years and years ago, and now so maladapted it barely resembles his original example script. There’s also a zoom functionality provided by Jack Moore’s , which does a great job of making it easier to see details on smaller screens.ConclusionThere’s actually one final step, and it’s the most exciting one: emailing out a link for the new teardown to the UserOnboard subscriber list. I’ve used
since day one and have always been super happy with what it lets me do in that regard.The email list gets the first heads up when new teardowns go out (I click send the moment new examples go live), and I’ve been told more than once that it’s one of the few subscriptions people have that they actually look forward to getting emails from. If you’re interested in , you totally should!I hope this article gave you a useful insight into my process and how onboarding teardowns are created. I look forward to hearing your feedback in the comments!
Advertisement
just $90/yr AdvertisementEnvato Tuts+ tutorials are translated into other languages by our community members&you can be involved too!Powered byAdvertisementcourse now
has a range of items for sale to help get you started.Connecting to %s当前位置: >
“尴尬”的UI界面，如何拯救？（一）(2)
教学标注，或者被称为指导性叠加层，这些元素在我看来，可以算作最欠考虑的初次体验方案了。这种方式将用户需要通过多个界面来记忆学习的内容一股脑儿强塞进来，制造了很大的心理障碍，太煞风景了。下面，我们就来一探初次使用状态的究竟。
初次使用／载入页面
如果这是用户第一次使用你的产品，那么这个状态就是呈现现有数据的一大机会。这是个诱发动作的好机会，帮助用户理解屏幕互动可能产生的价值。第一印象只有一次，大家要抓好机会。
我对这个状态的青睐，部分原因来自文学世界的“英雄之旅”，约瑟夫·坎贝尔在他的精彩著作里讲述了千面英雄的故事，它也成为了奥德赛和星球大战的神话故事铺垫。下面是该故事的前言：
“这是关于一名英雄从平凡世界进入神域的冒险经历，他体验了神奇的力量，并取得了决定性的胜利。英雄从神秘的探险中回归，将力量赐予他的同伴。”将空白状态想象成英雄之旅，推动用户去探索，帮助他们跨过可能面对的挑战和诱惑，让用户获得更强大的个人力量。
那么，要怎么做到呢？有这样几点：
我很喜欢这几个空白状态的例子。
Hipchat会弹出指示信息，并同时提及一些用户尚未发现的有趣功能。
脸书 Paper 在教用户使用一些主要手势的同时，逐渐带入一些功能介绍。
Basecamp 并没有展示什么内容，但是它放置了提示窗，展示产品可以呈现的功能。这会引起我的完成欲，想要去创建一个新项目，看看可以如何提高效率。
首次进入Airbnb的心愿单将出现简约风格的空白状态。我喜欢这款设计的原因是它并没有刻意设计（符合Airbnb的设计语言），但同时信息也很明确，可推动用户开始收集数据。
有关载入状态以及首状态的主题足以单独分出，自成一书。也的确真有这么一本书，如果大家有兴趣，推荐Samuel Hulick的The Elements of User Onboarding，超赞。
用户清除数据
空白状态的第二种情况就是用户主动清除所有数据。举个例子，如果用户完成了任务清单中的所有项目，读了所有通知，浏览了所有邮件，或所有的音乐下载都已完成。
这些空白状态的情况是用来奖励用户，或激发他们进行进一步操作的大好机会。达到“零邮件收件箱了吗？”太棒了！快看看这张超美的照片。所有音乐都下载完毕了吗？快去听歌吧。读完所有通知了吗？你可能也想读一下这个。
如果用户清除数据，那么说明他们在使用你的产品。先用户所想，替他们做些事情，可以保持他们对产品的兴趣。不要将进行下一步的重担压在用户的肩上。
对，这是iOS 6的截屏。虽然已是很久之前的设计了，但是仍然良好地表现了当收件箱为零时对促进用户多巴胺分泌的效果。你的奖励就是一张手选的Instagram，咖啡店或日落照——你可以将它分享到社交网络，庆祝收件箱清零，同时又宣传了这款邮箱。一举多得啊！
万一用户正在浏览或搜索产品中的数据，那就有可能出现没有搜索结果的情况。这些情况都是为用户推送信息或提供智能搜索结果的大好机会。
亚马逊的做法就是我所见过的最佳案例之一。它智能纠正拼写错误，并查找相近结果，很少给出空白的搜索结果。亚马逊会给出最接近的搜索结果，并提示不符合搜索条件的信息。
这个案例貌似暴露了我对金属的喜爱。暴露就暴露吧。
Pinterest呈现结果的方式与亚马逊不同，但是这就是Pinterest的特点了。它自行对我的输入进行理解并搜索，用户应该也可以根据结果作相应调整后，查找所需信息。
要点：切勿在这一状态让用户觉得无路可走，给他们一些提示或建议，继续进行操作。
欲知后续状态，且听下回分解。更有案例分析哦～
原文地址：The blog of SCOTT HURFF
文章来源：站酷
译者：朵璞
责任编辑：横走网
共有人阅读，期待你的评论！评论}