Smashing Newsletter: Issue #348

Editorial

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.

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.

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)

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?

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.

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?

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)

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.

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.

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)

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).

April 12, 2022 Smashing Newsletter: Issue #348

Previous Issues