#348: UX and Interface Design

On interface design, accordions, breadcrumbs, contextual menus, motion in UX and design patterns. Issue #348 • Apr 12, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Tâi-gí Smashing Friends, Interface design is often seen as a very subjective matter. We explore, we imagine, we make use of [design patterns]( and we bring our designs to life in our sites and apps. However, design has a hard time surviving over time without established design KPIs and strong alignment within the team. We need to be able argue objectively why a certain design decision is good, or suboptimal. And this usually means testing variations of design and observing users. It also means gathering data and speaking the language of our managers. In this newsletter, we look at interface design and UX from the lense of user research, conversion and case studies. We explore design patterns for accordions, contextual menus, breadcrumbs, infinite scroll, pricing page and motion in UX design. You can find more articles on the topic in our [series of UX articles]( on Smashing Magazine as well. [SmashingConf San Francisco 2022]( Of course, we also have plenty of [online workshops on UX]( with a [live 4-weeks of online UX training]( launching this Friday, with real-life challenges, individual projects and UX certification by the completion of the course. Design is also very much at the heart of our SmashingConfs 2022 — with [San Francisco]( and [Austin]( coming up in late June. We sincerely hope to see you there. And now, let’s dive into design and UX! — Vitaly (@smashingmag) --------------------------------------------------------------- 1. Tapping Vs. Swiping: What’s Less Distracting? Is it possible to design touch interactions that are as user-friendly as physical controls? That’s the question that Casper Kessels asked himself when he was on a long drive recently, listening to his Spotify playlist. His car’s infotainment system has a controller in the center console that he can use to skip songs without taking his eyes off the road. A type of interaction that is difficult on a touchscreen. To explore if there are ways to improve the quick, frequent interactions when driving, Casper set up a driving simulator once he returned home. And, well, [he got interesting results](. [Swiping vs Tapping, What is Less Distracting to Drivers?]( Casper found out that both swiping and large buttons were easier to perform and produced significantly better results in driver distraction metrics compared to regular-sized buttons. As he concludes, an iPad and a touch-based infotainment system may look the same, but the usage context is fundamentally different which means that they require different design approaches. Of course, the experiment is nowhere near professional, but it is a great reminder that it is always worth exploring different interaction modes. (cm) --------------------------------------------------------------- 2. Improving UX With Settings And Contextual Menus When the team at the issue tracking tool Linear redesigned their settings page, they had an idea to make users feel more at home in the application: they added a customization layer with tips to educate users about the product, comparable to an onboarding experience. If you want to learn more about the approach, Adrien Griveau [shares valuable insights](. [Building contextual menus]( Another little detail that the Linear team relies on to make their application easier to use are contextual menus. When a user doesn’t remember a keyboard shortcut, for example, they can right-click to take the action with the mouse or remind themselves of the shortcut. And while the contextual menu itself already enhances the user experience significantly, it’s the implemented “safe areas” that really makes it shine. Andreas Eldh explains what they are all about and [how you can build a “safe area” React component yourself](. (cm) --------------------------------------------------------------- From our sponsor Communicate At The Speed Of Thought. Try Whimsical On Your Next Project. [Communicate At The Speed Of Thought. Try Whimsical On Your Next Project.]( Whimsical offers versatile boards that enable you to collaborate across [wireframes]( [diagrams]( [mind maps]( and more. Designers and UX Engineers love Whimsical for the rich library of configurable elements, thousands of built-in icons, and intuitive keyboard shortcuts. Keep ideas moving forward faster. --------------------------------------------------------------- 3. Designing The Perfect Accordion An established workhorse in interface design, accordions highlight important details of a section and reveal more details upon tap or click, if necessary. As a result, the design stays focused and displays critical information first, while everything else is easily accessible. However, even a component as frequently used as an accordion can leave room for interpretation and ambiguity. So what do we need to consider when designing an accordion? [Designing Accordions: Best Practices]( Roman Kamushken summarized [best practices for designing accordions]( and Vitaly also dives deep into [designing the perfect accordion]( sharing tips, examples, and a checklist of questions you can ask. If you are wondering which icon works best for accordions (spoiler: chevron!), the Nielsen Norman Group [conducted a study]( that gives more insights. (cm) --------------------------------------------------------------- 4. Upcoming Workshops & Meet-Ups Alongside our [SmashingConfs 2022]( coming up this year, we still have a number of online events coming up very soon. You may have heard it already: On April 20, Vitaly will be spending [a full hour with Denys Mishunov]( on all things optimalisation and DevOps. You can shape the conversation through your questions as well, of course! [A Smashing Hour with… Denys Mishunov]( This community event is free for all. [Register here](. Next month, on May 11, we’ll be speaking to [Amit Sheen]( about CSS animation. Make sure to mark your calendars for [The Meets for What?]( on May 17 for an exciting UX research-focused edition of our online community event Smashing Meets. With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Interface Design Patterns UX Training]( UX Vitaly Friedman. Apr 15 – May 13 - [Successful Design Systems]( Workflow with Brad Frost. Apr 18 – May 12 - [The TypeScript Masterclass]( Dev with Stefan Baumgartner. Apr 19 – May 3 - [Data Visualization Masterclass]( Dev Amelia Wattenberger. Apr 21 – May 5 - [Web Performance Masterclass]( Dev with Harry Roberts. May 3–17 - [Jump to all online workshops →]( --------------------------------------------------------------- 5. Motion In UX Design In recent years, animation in user interfaces has been a popular topic, and, well, users these days often seem to expect motion as a part of the user experience. Not without reason, because motion can increase usability and drive emotional connections with visitors. An inspiring post on motion in UX design comes from Marina Yalanska. [Motion In UX Design]( In “[Motion In UX Design]( Marina highlights six effective types of web animation: hero animation, loading animation, accent animation, interactive animation, hover animation, as well as motion for special effects. Each one of them is illustrated with creative examples that show how motion can support interactions and usability. A fantastic showcase. (cm) --------------------------------------------------------------- 6. Designing Better Breadcrumbs Breadcrumbs might seem rather boring, but they are an important component for navigation that illustrates where a user currently is in the hierarchy of a website. And while their design and position on the page are seemingly obvious, there are plenty of fine little details that can either make breadcrumbs confusing or infinitely more useful. So what can we do to enhance those little crumbles of pathways? [Designing Better Breadcrumbs]( In the article “[Designing Better Breadcrumbs]( we take a closer look at some of these fine line details. We explore when we actually need breadcrumbs, how people use them, and how to design them better to speed up a user’s navigation on a site. The Nielsen Norman Group also published a handy article with [eleven design guidelines for breadcrumbs]( and Justin Mifsud shares [tips for using breadcrumbs to improve SEO](. (cm) --------------------------------------------------------------- From our sponsor Best-In-Class Membership Software Used By The Biggest Creators On The Web [Best-In-Class Membership Software Used By The Biggest Creators On The Web]( Memberful is an easily customizable membership software made by developers, for developers. Give your client ownership over all things related to their brand and audience. Memberful provides everything necessary to run a membership program: custom branding, free and paid trials, podcasts, newsletters and more. [Check us out today!]( --------------------------------------------------------------- 7. Designing Pricing Pages That Convert For software companies, the pricing page is the single page on the marketing site that has the information that all potential customers want: How much will it cost? A seemingly simple question that involves more psychology to answer than everything else. [How to design a pricing page that converts]( In her article “[How to design a pricing page that converts]( Val Geisler dives deep into the science behind pricing pages to explore what it takes to create pricing pages that create a perceived value for the customer — or as Val puts it: “pricing pages that don’t just score high in beauty, but also in brains”. For more pricing page best practices, also be sure to take a look at [Pascal Barry’s article.]( He summarized 14 practical tips for designing a SaaS pricing page. A must-read. (cm) --------------------------------------------------------------- 8. Design Patterns To Improve A Customer’s Journey If users cannot find the answers to their questions or are not exposed to critical messaging, they will not act, and your website will fail. But what makes an information architecture effective? Paul Boag summarized a [process to help you circumvent common issues]( and ensure your site’s structure is easy to use. [Information Architecture]( To help your users quickly find what they are looking for, even if they need to browse through long-winded lists of search results, products, orders, or data entries, your natural design instinct might tell you that good old-fashioned pagination is the interface design pattern to consider. However, infinite scroll might be an option, too. Vitaly helps you [find out if infinite scroll is a good idea for your use case]( and what you can do to design an infinite scroll that solves the problems that the design pattern is usually known for. Another technology that can simplify and enrich the customer’s journey — even before they land on your site — are QR codes. For e-menus in restaurants, for example, boarding passes at the airport, or to collect customer feedback after food delivery. Dave Parry assembled a [few techniques]( of items to keep in mind as you try to leverage QR codes for your business. Handy patterns that help improve your customer’s journey. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [UX / Interaction Designer]( at Aquent Studios (Remote, USA) - [IT Specialist]( at U.S. Securities & Exchange Commission (Wash., DC) - [Senior Backend Developer]( at HDNET GmbH & Co. KG (Werther, Germany) --------------------------------------------------------------- 10. Recent Smashing Articles - [How To Get Work Done: Wrangling Stakeholders And Overcoming Obstacles]( - [How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List]( - [The What, When, Why And How Of Next.js’ New Middleware Feature]( - [Designing A Better Infinite Scroll]( - [Jump to all recent 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](