Smashing Magazine - #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:


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?

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


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Key phrases

Older messages

#347: Web Performance

Tuesday, April 5, 2022

On Core Web Vitals, 3rd-Party-Scripts, B/F Cache, Priority Hints and responsive images preloading. Issue #347: Web Performance • Apr 5, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#346: UX and Interface Design

Tuesday, March 29, 2022

How to prevent errors, measure usability, dive into internationalization and User Research Report 2022. Issue #346 • Mar 29, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A

#345: Little Front-End Utilities

Tuesday, March 22, 2022

With a resource hints validator, VS Code extensions, hidden npm packages, tools for third-parties, user testing and useful round-ups. Issue #345 • Mar 22, 2022 • View in the browser 💨 Smashing

#344: Front-End Accessibility

Tuesday, March 15, 2022

With accessible focus indicators, accessible charts, toggles and how to document accessibility in your projects. Issue #344 • Mar 15, 2022 • View in the browser 💨 Smashing Newsletter Dziękuję Smashing

#343: New Front-End Techniques

Tuesday, March 8, 2022

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and performance optimization. Issue #343 • Mar 8, 2022 • View in the browser 💨 Smashing Newsletter Dobryden

Software Testing Weekly - Issue 94

Friday, October 22, 2021

"The day my script killed 10000 phones..." 😱 View on the Web Archives ISSUE 94 October 22nd 2021 COMMENT Welcome to the 94th issue! What a story shared by Shantnu Tiwari this week! "The

Deal Alert: Get A Samsung Frame TV For Its Lowest Price Ever

Friday, October 22, 2021

Plus: Amazon's Early Black Friday Deals Are Out In Full Force—Here Are 10 You Don't Want To Miss All products and services featured are independently selected by Forbes Vetted contributors and

Chipotle order prices

Friday, October 22, 2021

Data Analysis, Python, Pandas, Data Manipulation, External Dataset, InterviewQs Chipotle order prices Data Analysis Python Pandas Data Manipulation External Dataset Forward this email to a friend or

💉Biden’s vaccine mandate

Tuesday, September 14, 2021

President Joe Biden is now requiring workers in the private sector to get vaccinated or be subject to weekly COVID tests President Joe Biden's latest vaccination vision is simple: Everyone needs to

The Washington Post design system

Tuesday, May 24, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week There's a smarter way to map user journeys - That's why we built Flows in Zeplin. Easily connect published

Trends are Dead, Instagram Sans, Instagram Brand, Underused CSS, Interpolation Calculator

Tuesday, May 24, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 24 2022 Trends are dead vox.com Coastal grandmother, night

Accessibility Weekly #293: WCAG 2.2. and WCAG 3 Status Updates

Tuesday, May 24, 2022

Sponsored by Automattic. They're hiring. May 23, 2022 • Issue #293 View this issue online or browse the full issue archive. Featured: WCAG 2.2. and WCAG 3 status updates “We expect WCAG 2.2 to be

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Lane Barden Architect, critic,

Into the Archive: California Dreaming

Monday, May 23, 2022

Plus, everything you need to know about designing an ADU (image) Architectural Digest AD PRO Logo Into the Archive: California Dreaming The June 2022 issue of AD is all about families. But from cover

Button Component, Line Length, Design Thinking, Glenn Davis, Keyboard Accordion

Monday, May 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 23 2022 Building a button component web.dev A foundational

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library