Smashing Newsletter: Issue #272

Editorial

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)

A Complete Guide To Dark Mode On The Web
UX Takeaways From Streaming Services
Getting Mobile-App Onboarding Right
Streamlining The Checkout Experience
Ten Principles For Designing Delightful CLIs
The Maturity Of UX Writing
Coming Up Next on Smashing

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.

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.

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)

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.

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.

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)

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.

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?

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)

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.

Practicing skills matters. Meow! — 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)

October 27, 2020 Smashing Newsletter: Issue #272

Previous Issues