Issue 10 – October 2018
Voice prototyping in Adobe XD, everything about skeleton screens, and prototyping for augmented reality.
One, two. One, two. Can you hear me? Probably not. Unless you’re using assistive technologies, chances are that you are reading this newsletter quietly to yourself. Voice interfaces are still not that well-established, but with over 90 million smart speakers in the U.S. alone by the end of this year and a growth rate unseen since the smartphone, this is changing rapidly at the moment. So it is about time that we – both designers and developers – learn about the strengths and weaknesses of this type of user interface to improve our understanding and to positively shape the future of technology. Prototyping is perfect for that since it allows you to experiment and explore this new field fairly inexpensively. And since this October, Adobe XD comes with intuitive voice prototyping capabilities – without the need of writing a single line of code.
I really hope you enjoy the links I selected for October. As always: If you built, wrote, or found something that should find its way into this newsletter, simply write a short email to matthias@prototyping.news or send a tweet mentioning @PrototypingNews.
– Happy prototyping! Matthias
Links
Best Practices for Voice UI Design and Prototyping in Adobe XD
Using an iterative, prototyping-based approach is the best way to develop voice interfaces. In this post, Oliver Lindberg explains why it is also important to focus on the user and he shares some do’s and don’ts by Marc Webster, director of product at Adobe, when using the new voice prototyping feature in Adobe XD.
https://theblog.adobe.com/best-practices-voice-user-interface-design-and-prototyping/
A Practical Guide to Designing Conversational Voice Interfaces
This article on UX matters digs a bit deeper into the details of designing voice user interfaces. Based on their experience from building a language learning VUI called Chattie, the authors – Pallavi Benawri, Puhe Liang, Ruchi Ookalkar, and Sonali Tandon – share six useful design principles that can serve as guides for designers creating conversational VUIs.
https://www.uxmatters.com/mt/archives/2018/10/a-practical-guide-to-designing-conversational-voice-interfaces.php
User flow is the new wireframe
Not only voice interfaces are conversational: Using graphical interfaces like websites is a constant conversation, too, involving a series of steps towards a goal, the so-called user flows. Alexander Handley quickly walks you through the steps of creating user flows and explains where they differ from good old wireframes.
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a
Everything you need to know about skeleton screens
Skeleton screens, those grey placeholders that are progressively populated with final UI components and content, have found their way into user interface design as a way of improving the perceived (loading) performance of apps and websites. Bill Chung wanted to know if and how they work, so he did some user testing. In this extensive post, he shares his findings and tips on how to best design skeleton screens.
https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a
What I Learned Making 5 ARKit Prototypes
“By materializing an idea as a prototype, we can experience it firsthand and explore possible improvements.” Nathan Gitter created five augmented reality (AR) prototypes and now shares his prototypes and his findings, together with five basic concepts to consider when prototyping and designing for AR.
https://medium.com/@nathangitter/what-i-learned-making-five-arkit-prototypes-7a30c0cd3956
Becoming a better designer through prototyping
Prototyping is a helpful tool on many levels. Peter Vachon shares some of his favorite reasons to build prototypes, like the incredibly rich feedback you get from them, or that they will save your business time and money. Also, he provides some nice examples of how you can add some finesse to your prototypes and explains why you should always consider the scope and the audience of a prototype.
https://uxdesign.cc/becoming-a-better-designer-through-prototyping-2de76df8c866
No more excuses: Idea to Prototype in 30 Days
If you ever had an idea for a product or apps that didn’t come to live, the Prototypr.io prototyping challenge might be a great chance to change that. For 30 days you can join the challenge to create a prototype of your idea with the support of Prototypr.io.
https://blog.prototypr.io/no-more-excuses-idea-to-prototype-in-30-days-4defe5152bf4
An Organized Workflow for Prototyping
Rocio Lopez shares some really useful guiding principles and tips to effectively prototype in agile project settings and also talks about what to look for when you want to prepare prototypes for user testing.
https://medium.com/sumo-logic-ux/an-organized-workflow-for-prototyping-dfb9169f31d0
Tools
October 2018 Release of Adobe XD: Voice-Based Prototypes and More Unveiled at Adobe MAX
The Adobe XD team saved a lot of interesting new features for their impressive Adobe MAX release: First and foremost, the previously mentioned voice prototyping feature which allows you to use voice triggers and speech playback in your XD prototypes. Then, there is the amazing Auto-Animate feature that lets you quickly create animated transitions between artboards. With Linked Symbols, you can use symbols across multiple documents. On top of that, Adobe also added support for drag gestures, Illustrator documents, and export to After Effects.
https://theblog.adobe.com/xd-october-2018-update-and-adobe-max/
Microsoft Maquette
Microsoft is working on a new way to prototype ideas in VR: Maquette is a mixed reality tool for creating spatial prototypes using a PC VR headset and it is now available as a public beta.
https://www.maquette.ms/
wiARframe
wiARframe lets you build augmented reality prototypes quickly, with no coding skills required. But it is also a platform for discovery and co-design where you can explore and share your ideas with a community of AR prototypers.
https://www.wiarframe.com
Framer X: Introducing the Page Tool
The Framer team added a new feature to Framer X: The page tool. It lets you design multiple types of interactions, from simple swipe gestures or 3D numeric pickers to even momentum-based flicking.
https://framer.com/blog/posts/page-tool/
Supernova: Introducing CodeX
Pretty impressive: Supernova Studio, a design, prototyping, and development tool, now produces production-ready code. “CodeX” allows you to preview the entire interface code right within the software in real time. For that, all design elements are backed by native components and are translated into production-ready code for iOS, Android, and React Native.
https://blog.prototypr.io/introducing-codex-5cdaf7140090
Designing with Ratio
A super-interesting project by Florian Schulz: Ratio is a new tool for working with type on the Web that combines modular scales, fluid typography, color transformations, design tokens and the layout power of modern browsers. “It’s about the relationships, the boundaries, the extremes, and everything in between.” The first video of the software looks very promising, so make sure to sign up to be notified when it leaves closed Alpha.
https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d
Animate your Figma designs with our new Principle integration
Figma now integrates with the prototyping tool Principle. You can import your designs from Figma and then build advanced animations and interactions like scrolling, swiping, and more.
https://blog.figma.com/animate-your-figma-designs-with-our-new-principle-integration-f6f1488d5c0a