Decision Trees For UI Components — Smashing Magazine

How do you know which UI component to choose? Decision trees provide design teams with a systematic approach to documenting their design decisions. Once we decide which UI components to use and when, we can avoid endless discussions, confusion and misunderstandings.

Let us examine some examples of Decision trees for UI components and how we can get the most out of them.

This article is Part of our ongoing series To Design pattern. It is also an upcoming part of the 10h video library on Smart interface design patterns and the upcoming live UX training also. Use the code BIRDS to save 15%.

B2B navigation and help components: Doctolib

Doctolib Design System is a very impressive design system with decision trees, B2B navigation paths, photography, PIN entry, UX writing and SMS notifications – and detailed instructions on How to select UI components.

I love how handy these decision trees are. Each one shows an example of what a component looks like, but I would also add References to real UI examples and flows where and how these components are used. A fantastic starting point that documents design decisions better than any guide.

Decision trees for UI components: Workday

The team behind Workday’s Canvas design system created a fantastic set of design decision trees for notifications, errors and warnings, loading patterns, calls to action, truncation and overflow – with Guidelines, examples and use caseswhich can now only be accessed from the archive:

For each decision tree, the Workday team has some Contextual questions to consider first when making a decision before even entering the decision tree. There are also detailed examples for each available option as well as very detailed alternative text for each image.

Form Component Decision Tree: Lyft

A selection of Form component can often be daunting. When should you use radio buttons, checkboxes or dropdowns? Runi Goswami from Lyft has divided a detailed form component decision tree to help your team choose between form controls.

We first examine whether our UI allows a user to select more than one option. If it is indeed a multiple choice, we use toggles for short options and checkboxes for longer ones.

If only one option can be selected, we use tabs to filter, Radios for shorter optionsa switch for immediately applicable options and a checkbox when only one option can be selected. Dropdowns are used as a last resort.

Select onboarding components: NewsKit

Onboarding comes in different forms and forms. Depending on how subtle or conspicuous If we want to highlight a particular feature, we can use popovers, badges, hints, flags, toasts, feature cards or design a better empty state. The Newskit team has a Onboarding selection prototype in Figma.

The choice depends on whether we want interrupt the users to view details (is usually not very effective), show a function subtly during the experience (more effective) or Enable detection by highlighting a feature in the context of a task a user is trying to accomplish.

The toolkit asks the designer some questions about the Purpose of onboardingand then suggests the options that are likely to work best – a fantastic little helper for optimized onboarding decisions.

Design system process flowcharts: Nucleus

How do you decide whether to add a new component to a design system or extend an existing one? What is the process for contributions, maintenance and the overall design process? Some design teams codify their design decisions as process flow diagrams for the design system, as shown below.

And here are helpful decision trees for Adding new components to a design system:

Making decision trees visible

What I absolutely love about the decision tree approach is not only that it beautifully visualizes design decisions, but also that it serves as documentationIt sets common standards for all teams and provides examples to follow that are incredibly valuable to new employees.

Of course there are exceptions. But once you have codified the ways of working for design teams as a decision tree and placed it at the center of your design work, solves endless discussions about UI decisions forever.

So when a debate arises, document your decisions in a decision tree. Make posters out of them. Hang them in kitchen areas and at the workstations of developers and QA. Hang them in design critique rooms. Make them visible where design work takes place and code is written.

It’s worth noting that each project will need its own custom trees, so see the examples above as an example. Idea to build on and adapt it to your needs.

Learn intelligent interface design patterns

If you are interested in similar insights on UX, check out: Smart interface design patternsour 10h video course with hundreds of practical examples from real projects – with a live UX training later this year. Everything from mega dropdowns to complex enterprise tables – 5 new segments added every year. Jump to free preview.

100 design patterns and practical examples.
10-hour video course + live UX training. Free preview.

(Yes)