Smashing Newsletter #272: Dark Mode, Onboarding and Checkout UX

With design guidelines to design for dark mode, video player UI, mobile app onboarding and eCommerce checkout UX. Issue #272 • Tue, Oct. 27, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, It’s Tuesday again, and here is another issue of the Smashing Newsletter to brighten your mailbox. We’d like to extend a warm welcome to our new subscribers who have joined us to enter our [Smashing Giveaway](. Existing subscribers were entered automatically, and Topple the Cat has randomly drawn our winners from its fancy hat. The winners are: - Chiara Ricolfi - Alexey Andreev - Monika Tyszkiewicz - Eugene Pempel - Dale Boyd - Michelle O’Rorke - Isaack Brian - Antonio Cerciello - Helene Hildebrandt - Stéphane Sulikowski Congratulations to you all! You’ll be hearing from us very soon. This time we have an assortment of UX design links to check out. If you want more, then take a look at our [Smashing Guide to UX](. We also have some upcoming front-end & UX workshops that might be of interest to you or your team. If you are quick, you can join Aarron Walter for his [Designing for Emotion Masterclass]( starting tomorrow. Vitaly will be presenting his very popular [Smart Interface Design Patterns]( workshop later in December. Looking ahead to January, you might like to take a deep dive into [Form Design]( with Adam Silver. Until next time, stay safe! — Rachel Andrew (@rachelandrew) --------------------------------------------------------------- Table of Contents 1. [A Complete Guide To Dark Mode On The Web](#a1) 2. [UX Takeaways From Streaming Services](#a2) 3. [Getting Mobile-App Onboarding Right](#a3) 4. [Streamlining The Checkout Experience](#a4) 5. [Ten Principles For Designing Delightful CLIs](#a5) 6. [The Maturity Of UX Writing](#a6) 7. [Coming Up Next on Smashing](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#9) --------------------------------------------------------------- #1. A Complete Guide To Dark Mode On The Web Dark mode is quickly becoming a user preference with Apple, Windows, and Google having it implemented into their operating systems. But what about dark mode on the web? Adhuham wrote a [comprehensive guide]( to dark mode that delves into different options and approaches to implementing a dark mode design on the web. [A Complete Guide to Dark Mode on the Web]( To start off, the guide looks at the technical considerations that implementing a dark mode entails, covering different approaches to toggling the themes and how to store a user’s preferences so that they will be applied consistently throughout the site and on subsequent visits. Tips for handling user agent styles with the color-scheme meta tag help avoid potential FOIT situations. Design considerations are also tackled, of course, with valuable tips to get images, shadows, typography, icons, and colors ready for dark mode. (cm) --------------------------------------------------------------- #2. UX Takeaways From Streaming Services Users are sensitive to any friction while using an app and as the number of apps that offer similar features is growing, the more important the experience is as a differentiator. Joseph Mueller analyzed the little [experience decisions that make all the difference]( in the top streaming apps on iOS. [Experience is in the details: analyzing the UX of streaming services]( Diving deeper into Netflix’s “kitchen sink”, Hulu’s concept of “back 10 forward 30”, YouTube’s double tap targets, and “rotate for more” approaches, Joseph summarized five key takeaways to improve UX that can be applied to any kind of project: Remove the reasons a user will have to exit the app; pay attention to the nuance of a user’s motivation as it could lead to a new solution; educate the user with the interface; change exit points to opportunities; let your users get the results they want without having to be too precise. Joseph’s analysis shows great examples of how this can be achieved. (cm) --------------------------------------------------------------- From our sponsor Meet Anima 4.0. For React: The First Continuous Design-to-Development Platform [Meet Anima 4.0. For React]( Bring together developers and designers — and collaborate over real code. Anima saves you precious time by translating design into workable React code. Clean, reusable code components that developers actually like to use. [Get started for free today](. --------------------------------------------------------------- #3. Getting Mobile-App Onboarding Right Mobile-app onboarding helps get users familiar with a new interface. However, a dedicated onboarding flow with instructions, feature promotion, and customization needs to be handled with care and not all apps require a separate onboarding flow either. [Mobile-App Onboarding: An Analysis of Components and Techniques]( In her [article for the Nielsen Norman Group]( Alita Joyce takes a closer look at common misconceptions around onboarding, when an onboarding flow makes sense, and why certain components of it are more likely to be appropriate than others. As Alita recommends, keep onboarding as simple as possible and be sure to focus on what users need to be successful in your app, highlight what’s new or unfamiliar, and keep instructional content brief and unobtrusive. A great reminder. If you are looking for more examples of what onboarding flows look like out in the wild, [UserOnboard]( has got you covered with teardowns of how popular apps handle their onboarding experiences. (cm) --------------------------------------------------------------- #4. Streamlining The Checkout Experience 56. That’s the number of actions a customer needs to complete to buy an American Airlines ticket. Let’s face it, checkout forms are often too long and a hassle to fill out. In the worst case, customers might even abandon the process. To help us do better, UX Planet published a four-part article series on streamlining the checkout experience back in 2017 which is still gold for everyone working on a checkout flow today. [Streamlining The Checkout Experience]( The [first part]( in the series examines examples where the checkout experience has gone wrong and why. The [second part]( pins down the most important things that will help improve any checkout form experience in 16 easy-to-follow tips. [Part three]( is dedicated to form validation and how to minimize the number of errors a customer might make, while also taking a closer look at differences between B2C and B2B markets that lead to differences in design. Last but not least, [part four]( is all about bank card details, teaching you how to detect and validate a card number and how to deal with the other payment form fields. A long but worthwhile read. (cm) --------------------------------------------------------------- From our sponsor The MongoDB Developer Blueprint [The MongoDB Developer Blueprint]( From document schema design to application development trends, this five-part series has everything you need to get your next project humming. [Get the free series!]( --------------------------------------------------------------- #5. Ten Principles For Designing Delightful CLIs Command-line interfaces have been around since the dawn of computers and there are many established conventions and guidelines to design a CLI that makes it easy for users to adopt a tool. If you need to build a CLI to support your service, resource, or platform, Natalie Johnson and Michael Belton share a handy [checklist]( of what you need to consider to design a successful command-line interface. [10 design principles for delightful CLIs]( The ten principles stem from Natalie’s and Michael’s experience from designing a CLI for the cloud app development platform Forge. From showing progress visually and creating a reaction for every action to crafting human-readable error messages, supporting skim-readers, and suggesting the next best steps, a lot of little details set the foundation for a CLI experience that is delightful to use and helps your users accomplish their tasks quickly and efficiently. (cm) --------------------------------------------------------------- #6. The Maturity Of UX Writing For the past five years, organizations and designers have turned their focus to the importance of writing. They’ve realized that content can indeed help to design clear and meaningful experiences. But what is UX Writing and why is it that important? [The Maturity Of UX Writing]( According to the [UX Writing Worldwide Report]( UX Writing focuses on users and helps create experiences that are relevant to their needs. The [survey results]( are quite interesting and useful because they can help to better understand the role of the UX Writer in companies around the world. (il) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #7. Coming Up Next on Smashing With [Smashing Membership]( you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. We’re currently busy preparing new Smashing TV sessions, so keep an eye on the [Smashing TV schedule]( to not miss out on anything. [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end and UX with Cassie Evans, Christian Nwamba, Harry Roberts, and many others. We also have [online workshops on front-end & UX]( — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk. - [Designing for Emotion Masterclass]( (Oct 28–29) - [Front-End Accessibility Masterclass]( (Nov 6–20) - [Designing Websites That Convert]( (Nov 18–26) - [Smart Interface Design Patterns, 2020 Edition]( (Dec 1–15) - [Building A Design System With CSS]( (Dec 3–17) - [Build, Ship and Extend GraphQL APIs from Scratch]( (Jan 5–19) - [Form Design Masterclass]( (Jan 19–27) Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf) --------------------------------------------------------------- #8. New On Smashing Job Board - [3D-Artist (m/f/d)]( at BASF Coatings GmbH (Münster) - [User Experience Designer]( at Stanford University Libraries (Stanford, CA / Remote in USA) - [Developer Relations Engineer/Advocate (Junior/Mid/Senior)]( at New Relic (Remote) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [How To Overcome Data Onboarding Challenges For Software Products]( - [Speed Up Your Workflow With Figma Plugins]( - [Getting Started With Next.js]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](