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
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)
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)
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)
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)
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)
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)
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.
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 firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
- Waterfalls, Flame Charts and Inline Validation
- Dark Mode, Onboarding and Checkout UX
- SVG Generators, Figma and Accessibility
- Little Helpful Tools and Browser Extensions
- Git, Design Systems, TypeScript, CSS clamp()
- UX Edition
- Accessibility, Inspiration and Debugging Strategies
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.