November 9, 2021 Smashing Newsletter: Issue #326

Editorial

There are so many complex interfaces out there. Think of all the enterprise dashboards, complex tables, long multi-column multi-page forms with sophisticated filtering, sorting and autocomplete. Getting it all right isn’t easy. However, if a system is complex, it doesn’t mean that the interface has to be complicated. In this newsletter, we highlight a few useful UX guidelines to make quite complicated things slightly easier — and things to keep in mind while doing so.

Also, don’t forget to join the Smashing Hour with Sara Soueidan and yours truly, starting in just a few hours, for a random chat about pizza, front-end, accessibility, and birds.

And if you’d like to dive deeper, join us for our next free online event on front-end accessibility on December 6, “Smashing Meets For All”, with sessions on building accessible products.

Of course, we also announced a few new front-end workshops on front-end testing and ethical design that you might want to consider as well. Or join us at the in-person SmashingConf SF 2022 that’s going to take place on March 28–31, 2022. Let’s jazz together — we’d love to see you there!

— Vitaly (@smashingmag)

1. Designing Better Complex Enterprise Tables

Designing large complex tables is tricky. There is quite a bit of information that we need to show, and showing that information in a structured form requires quite a bit of space. For desktop, we could allow customers to customize the table, move columns around and change the views. In fact, in her article, “ The Ultimate Guide to Designing Data Tables,” Molly Helmuth highlights some of the best practices for designing complex data tables, and Andrew Coyle has some table design patterns that you can use as well.

When it comes specifically to enterprise tables that usually require inline editing and filtering, Fanny Vassilatos and Ceara Crawshaw have written a detailed guide to enterprise tables, with useful considerations about viewing options, scroll behavior, sticky headers and footers, pagination, sorting, filtering and search.

But what do we do for mobile? Transforming a table into a slightly narrower table on mobile usually doesn’t work particularly well. Usually, we’d need to redesign the experience from scratch. As Joe Winter shows in his piece on Designing a complex table for mobile, we could allow customers to navigate the data set by column first, or by row first — combining a dropdown with cards and filters to support this type of navigation. All excellent patterns that we can use to start off our project on the right foot! (vf)

2. Checkbox, Toggle, Dropdown Or Radio?

How do we make a good decision when choosing a particular input type, or component for a particular input? When would we use a checkbox, and when would we use radio buttons? What about segmented control and tabs? And when would a regular good ol’ button work as well? In “A Better Segmented Control”, Runi Goswami (from the Lyft design team) explains how the team makes decisions around forms in their work.

Runi also provides a comprehensive flowchart, explaining when we would use each of the options, so the decision-making could be streamlined and aligned for the entire team. Also, Sara Soueidan goes into fine detail exploring when it makes sense to use one checkbox vs. two radio buttons, collecting some thoughts and suggestions from the community. For example, with a checkbox, the label is likely to be a statement, while with radio buttons the label would be a question. An interesting thread worth keeping close to you when making those difficult decisions! (vf)

3. Designing Better Sliders

If we have to include some sort of complicated filtering in our UI, or perhaps add a product configurator or a mortgage calculator, chances are high that we’ll be using a good old-fashioned slider. We use them when we want to allow customers to quickly explore a wide array of options all at once; more specifically, the impact of changing values for one attribute on the final outcome. However, usually filters are slow, difficult to handle, and barely usable once we want to be precise in our input. Not all too surprising, as Christian Holst mentions in Requirements For Slider Interfaces that if we can’t handle design affordances, can’t have a non-linear slider scale and can’t provide a text fallback, we shouldn’t use a slider at all.

However, sliders can be very powerful if designed right. Designing The Perfect Slider is a very comprehensive opus highlighting all the critical design details and implementation details that we need to get right for a slider to be accessible and useful. Most importantly, that means always including three modes of interaction: the slider itself for the best speed of exploration, +/- steppers to increment and decrement values in a predictable way, and text input fallback for the best precision.

And if you’d like to see all of the techniques coming together in a case study, Chris Annetts has published a wonderful piece on Improving The Tesco Loan Calculator, going into all the fine details and decisions on how she’d make the calculator slightly better. Very valuable insights into the design and process of getting it just right. (vf)

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.
• 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. Designing Better Web Forms

Getting form right can be quite an adventure. There are so many questions to ask: from form layout to inline validation, from marking required and optional fields to disabled buttons, from the right way to display error messages to autocomplete UX. Adam Silver’s “Form Design: From Zero To Hero” dives deep into all the intricate details around web forms, presenting them together in one single post — with references to further articles, examples and research backing up Adam’s suggestions.

If you’d like to dive into the implementation details of building better web forms, you’ll find plenty of accessible examples in the recently released free web.dev Forms course and Heydon Pickering’s “Inclusive Components”, for example. Also, if you are looking for a case study on simplifying a complex form, Brooke Nankin’s article on “Complex Form Made Simple” goes into all the fine examples of designing user-friendly long-form flows with multiple branches. (vf)

6. Modal Or Not Modal?

Nobody wakes up in the morning looking forward to seeing more modals around the web. However, sometimes modals can be very useful, especially if we want customers to move into another mode of interaction without losing the context of the page. However, for the implementation to be accessible, we need to take care of the focus management and listen for events that signal dismissing the trapped content.

Therese Fessenden highlights various types of dialogs in her article on Modal & Nonmodal Dialogs: When (& When Not) to Use Them. In general, self-initiated modals work well, but auto-triggered modals are frustrating and annoying. Therese highlights best practices and the different kinds of dialogs that we might need or could use to make them more useful.

It’s worth mentioning that tooltips are modals as well, and very often they have quite a few problems, so perhaps avoiding them and replacing them with a regular hint (perhaps within an accordion) might be a good idea as well. (vf)

7. The Role Of Sounds

Just like logos, sounds also play an important part in creating your visual brand identity. While there are two categories of UI sounds that designers mostly focus on (i.e. notification and interaction sounds), all of them need to draw users’ attention to a certain event and make the experience as pleasant as possible.

So how do sound designers find the best appropriate sound for a certain app notification or a particular event taking place at a particular moment in time? As Roman Zimarev explains: “Only the sounds that provide useful information or improve the user’s experience should stay.” Make sure to study what kind of sounds there are, what their functions are, and where we actually need to use them. That way, there’s no doubt that users’ experiences will be more pleasant and memorable. (il)

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

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.