November 16, 2021 Smashing Newsletter: Issue #327
This newsletter issue was sent out to 177,562 subscribers on Tuesday, November 16, 2021.
Editorial
Over the last few years, I’ve developed an unusual habit. When reading articles or technical books, I’d read slowly and carefully, questioning and challenging every statement or conclusion. I would even spend several minutes pondering about some seemingly obvious things, and hours arguing about one bold statement or the other. With some books, it’s remarkably difficult to do so, and for me, that’s a sign that there is some truth in the words that I’m reading.
However, when reading Steven Hoober’s new Smashing book on “Touch Design for Mobile Interfaces” (now available as eBook, and shipping worldwide in early January), I found it quite difficult to argue against some of the findings and insights that Steven shares. He provides fantastic and unique insights that one can verify by observing their own behavior as well. The book covers guidelines and best practices all around designing for touch and designing for mobile, while diving into the fine details of how we use mobile screens and how to design better experiences with that in mind.
Steven has designed the first Google mobile search, one of the first mobile app stores and has contributed to plenty of global brands around the world. We’ve been working with Steven on his new Smashing book for almost a year, and we are very happy and honored to see the book now becoming a reality. The eBook is already available, so go ahead and get it right away, and the printed copies will be shipped in early January. It’s a book that will help you really understand what designing for touch really means, with plenty of deep dives and insights. Of course, as a Smashing Member, you’ll find the book in your dashboard free of charge.
In today’s newsletter issue, as a little celebration of the upcoming book, we cover a few useful pointers for designing better mobile experiences, including onboarding UX, mobile UI inspiration, and common pitfalls in mobile eCommerce UX. Happy reading, everyone! And hopefully, you’ll have a hard time challenging them, too!
— Vitaly (@smashingmag)
1. Mobile Design Principles And Best Practices
It’s estimated that people check their phones about 80 times per day, often for short bursts of activity. So what can you as a designer do to get the most out of these short interaction periods — both for the user and for your product’s conversion? Don’t break with expected patterns, unless they provide significant value, is the advice that Miklos Philips gives.
Miklos summarized everything you need to know about mobile design principles and best practices in a comprehensive deep dive into the topic. In it, he takes a look at the five crucial components of usability, shares tips for tackling specific mobile UI challenges, and explains how findings from psychology and human-computer interaction science help you design mobile experiences that are convenient, easy to use, and efficient. Only things that worked in practice and that are bound to help you improve your mobile experiences, too. (cm)
2. Common Pitfalls In Mobile E-Commerce UX
Large ads in primary areas of the mobile homepage, no autocomplete suggestions for only slightly misspelled search queries, no load indicators when new content is loading — these are just a few of the common UX pitfalls that the Baymard Institute came across when analyzing the current state of mobile e-commerce. For users, things like these are annoying; for the e-commerce industry, they are missed opportunities.
In fact, as the Baymard Institute found out, the mobile e-commerce performance for the average top-grossing US and European e-commerce sites is only mediocre. To help us all do better, they distilled their findings down into 18 common design pitfalls and strategic oversights that offer room for improvements, in particular when it comes to the UX within the mobile homepage, on-site search, forms, as well as site-wide features and elements. A must-read. (cm)
3. Getting Mobile App Onboarding Right
Mobile tutorials are a double-edged sword. Created with good intent to get users familiar with a new interface when they open an app for the first time, they can result in a contrary effect, as the Nielsen Norman Group found out.
The Nielsen Norman Group conducted a quantitive usability test with 70 users and four mobile apps that use deck-of-cards tutorials to provide instructions for how to use an interface. The surprising result: Participants who read the tutorials perceived tasks as more difficult than those who skipped reading them. And they didn’t show any advantage in terms of success rates or task-completion times either.
Of course, there are occasions when a well-thought-out onboarding flow makes sense: for apps that need user information to tailor the experience or for complex apps with unique interaction patterns, for example. For those occasions, the Nielsen Norman Group shares three useful guidelines that help you make mobile app onboarding successful: Focus on what users need to be successful in your app, highlight what’s unfamiliar, and keep instructional content brief and unobtrusive. Great reminders indeed! (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Dynamic CSS Masterclass Dev
with Lea Verou. Nov 29 – Dec 14. - Maintaining Successful Design Systems Workflow
with Brad Frost. Nov 30 – Dec 14 - Design Management Masterclass UX
with Yury Vetrov. Dec. 1–15 - Jump to all online workshops →
5. Finding The Right Amount Of Text In Mobile Apps
Language is design material, too, just like color palettes, iconography, or Gestalt principles. And it’s one that shouldn’t be underestimated. After all, it guides people through the entire user journey. But how much text is enough to use in cases where space is much more limited than on desktop? Jonathon Colman got curious and studied the first screen of 25 popular iOS apps to determine how much text they are actually using.
36%. That’s the magic number that Jonathon found. Of course, in a camera-first app like Snapchat, text only occupied 3.5% of the screen, while personal finance apps like PayPal display a lot of information on the first screen, filling almost half of it with text. Even if the data set of 25 apps is far from being representative, Jonathon’s research is a great reminder that language isn’t a distraction from the experience but a crucial part of it. (cm)
6. Mobile UI Inspiration
Everyone needs a bit of inspiration every now and again. No matter if you’re stuck on a project or are looking for some ideas on how other designers solved a particular UI problem, Stéphanie Walter collected some handy resources that are bound to give you a little inspiration boost when designing for mobile.
In Stéphanie’s list, you’ll find more than 15 resources for mobile UI inspiration, neatly arranged into different categories: resources that are sorted by UI patterns, type of view, components, specific flows, as well as app category and mobile icon inspiration. And even though the content is already two years old, it’s still a treasure chest for everyone working on a mobile interface. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.