#327: Designing For Mobile and Touch

With useful tools for designing better mobile UX, best practices, onboarding UX and mobile UI inspiration. Issue #327 • November 16, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Smashing Friends, 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. [Touch Design for Mobile Interfaces]( [Touch Design for Mobile Interfaces]( 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. [Deep dive: Mobile design principles and best practices]( 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. [Mobile UX Trends: The Current State of Mobile UX]( 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) --------------------------------------------------------------- From our sponsor The Future Of Design Feedback [The Future Of Design Feedback]( [Cut through the noise with immediate, visual feedback](. Go from design to build to publish without losing your mind in the process. The best part... it’s free. --------------------------------------------------------------- 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](. [Mobile Tutorials: Wasted Effort or Efficiency Boost?]( 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. [Smashing Online Workshops]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. 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. [Why 36% is the magic number]( 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) --------------------------------------------------------------- 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](. --------------------------------------------------------------- 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. [Resources For Mobile UI Inspiration]( 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) --------------------------------------------------------------- #7. Recent Smashing Articles - [Powerful Terminal And Command-Line (CLI) Tools For Modern Web Development]( - [Useful React Hooks That You Can Use In Your Projects]( - [LFrom Good To Great In Dashboard Design: Research, Decluttering And Data Viz]( - [Localizing Your Next.js App]( - Read more of the [latest articles on Smashing Magazine →]( --------------------------------------------------------------- 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). 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](