UX Movement Newsletter

How to Simplify a 15 Widget Dashboard

Anthony Tseng — Thu, 14 May 2026 13:02:23 GMT

Imagine opening an app to check how much money you made this month. Instead of seeing that number, you see 15 boxes. All the same size. All fighting for your attention at once. Where do you look first? Most users don’t know.

They either read every box one by one or they give up and close the app entirely. Either way, the dashboard failed them. The problem with most SaaS dashboards today isn’t that they show too much information, but that they treat every piece of data like it’s equally important.

How to Simplify 20 Dropdown Filters Without Removing Any

Anthony Tseng — Wed, 06 May 2026 13:12:48 GMT

Imagine you’re trying to filter data on a SaaS app and encounter 20 dropdowns. You scan and expand each of them to check if it’s the one you’re looking for. You’re spending a lot of time and effort, and still haven’t found the right one. This is the frustration that can come from too many dropdown filters.

When every filter gets its own dropdown, you’re indicating that they all deserve equal attention. However, most users don’t experience filters this way. They have a specific goal in mind and only need a few filters at most. The lack of visual hierarchy forces them to do more scanning and clicking to find the right filters.

60/30/10: The Color Ratio to Fix Ugly UIs

Anthony Tseng — Tue, 28 Apr 2026 13:33:51 GMT

Is your user interface ugly? Unfortunately, it is if it lacks the 60/30/10 color ratio. Without this essential balance, users won’t perceive your app as intuitive to use. Not only that, but you also won’t be able to justify charging a premium price for it. Ugly UIs end up costing you more than you realize.

Using the Primary Color Everywhere

For example, this app has very poor aesthetics because it doesn’t follow the 60/30/10 color ratio:

60% Neutral Colors for Space
30% Primary Color for Identity
10% Accent Color for Action

Why Onboarding Flow Is the New Signup Form

Anthony Tseng — Tue, 21 Apr 2026 13:22:44 GMT

Signup forms are dead. They’re no longer an acceptable way to create and set up accounts for SaaS apps. Your users deserve more than a long list of fields to fill out as their first interaction. The ideal signup experience leads with value, not friction.

A long signup form makes users question whether your app is worth their time and effort. Sometimes they’ll fill it out if they have to, but they certainly won’t do it because they want to. Demanding too much information at once is causing you to lose many potential signups.

Stop thinking of the signup process as a form, and start thinking of it as an onboarding flow. When you onboard someone new into an organization, you’re providing them with everything they need to do their job successfully. Instead of taking value from them, you’re giving them value in return. This is the type of frame that onboarding flows set.

The Sizing and Spacing System for Faster UI Design

Anthony Tseng — Tue, 07 Apr 2026 11:13:58 GMT

When designing any interface, one of the first things to consider is the size and spacing of your elements. This can be challenging because there are too many arbitrary values to choose from with no definitive right answer. Nitpicking pixel measurements in search of the perfect size and spacing will slow you down significantly and result in inconsistent designs.

For example, if you’re designing a card, what dimensions should the container be? What should be the width and height of the buttons? After that, what should the margin spacing be between all the elements within the card? Designing without clear constraints leads to decision fatigue and wasted time on minor details.

These card containers and buttons have different pixel sizes and spacing. Still, it’s hard to decide which design to go with because they look similar. How do you decide when there are so many arbitrary values and variations available? The answer is to build your own sizing and spacing system.

Building the System

Don’t struggle with arbitrary values when sizing or spacing elements. Instead, limit yourself to a predefined set of options to reduce decision-making time and ensure consistency across all elements and components.

Start with a sensible base value and then build a scale using factors and multiples of that value. A good base value is 12px because it’s a highly composite number with more divisors than any smaller number (1, 2, 3, 4, 6, 12). This makes it a foundational unit for various systems, including time (12 hours in a day/12 months in a year) and measurement (12 inches in a foot and a dozen).

It’s not as straightforward as just using multiples of 6 and 12, as there would still be too many options to choose from. For the system to be effective, it must consider the relative differences between adjacent values.

For instance, the relative difference between 48px and 60px avatars is 25%. However, the relative difference between a 480px and a 504px card width is 5%. This means the 5% difference is five times less significant than the increase from 48px to 60px.

In other words, the values at the lower end of the scale should be packed together because they have a high relative difference. On the contrary, those higher up the scale should be more spaced apart because they have a low relative difference. The key is determining how close or far adjacent values should be.

How to Design the Most Intuitive Share Modal

Anthony Tseng — Thu, 26 Mar 2026 17:25:40 GMT

Sharing and collaboration are among the most powerful features in any SaaS application. It allows users to view, edit, and comment on the same document in real-time. However, designing it with an intuitive user experience is no easy task. There are many states, actions, and components to get right. This article walks you through how to design an intuitive share modal in thorough detail.

The Best UX Pattern for Date Fields on Forms

Anthony Tseng — Tue, 17 Mar 2026 13:46:41 GMT

How easy is it for users to enter dates on your form? Dates are one of the most common form fields that designers poorly implement. The design pattern you choose directly impacts speed, accuracy, and accessibility. Here’s a look at three bad patterns to avoid and the best pattern to adopt.

3 Separate Fields

Separating the date input into three fields increases cognitive load with no real benefit. Most users think of a date as a single entity, so fragmenting it into month, day, and year fields breaks that mental model and forces artificial pauses mid-entry.

The Right Way to Use Line Dividers and Containers

Anthony Tseng — Wed, 11 Mar 2026 13:11:57 GMT

Organizing data on a screen is harder than it looks. Without structure, users will struggle to scan and process information efficiently. Most designers know this, so they add line dividers and containers to their design. However, they often misuse these elements, making their interface harder to read and understand.

Look at how many dividers and containers can end up in a single layout. When there are almost as many structural elements as there are pieces of data, the result is clutter. Instead of guiding the eye, all those lines create visual noise that gets in the user’s way.

Why Account Menus Work Better in the Sidebar

Anthony Tseng — Wed, 04 Mar 2026 19:22:36 GMT

Where is the user’s account menu located on your app? If it’s in the top-right corner of the screen, it’s not in the optimal position. With so many clickable elements on the screen, users will get confused about where to look to manage their account.

One reason for this confusion is that the account menu is in the same area as the page-level actions. The account menu is a global control with actions that apply system-wide. Placing it close to page-level actions can lead users to think the account menu is also page-level, which can cause interaction issues.

A Better UX for User Account Menus

Anthony Tseng — Wed, 25 Feb 2026 18:17:08 GMT

How easy is it for your users to manage their accounts? One of the most critical components of an application is the account menu. It’s the command center where users manage their personal information and preferences. If it’s hard to use, they’ll have trouble customizing the app experience to meet their needs.

It’s not enough to place a “My Account” button in the navigation bar with a list of menu items. In fact, this creates a poor user experience that requires much time and effort to interact with. Your design needs to do more to help users perform their account tasks efficiently.

Win 5 Free Copies of the Forms Book

Anthony Tseng — Fri, 20 Feb 2026 17:30:10 GMT

Happy Chinese Lunar New Year! 新年快乐

I know not everyone celebrates this, but it’s a very interesting time for our world. It’s the year of the Fire Horse, which represents a period of intense energy, bold action, dramatic transformations, rapid progress, and disruptive volatility.

In honor of this, I will be giving away 5 free copies of my ebook “Dos and Don’ts for Form Input and Selection.” I will also be working hard to release a new ebook this year. Can’t wait to share it with you.

To enter the giveaway, comment below what personal design project, idea, or vision you want to bring to life this year. Winners will be selected at random and will receive a message if they win. Good luck!

Update: Congratulations to the following winners. They’ll receive a message to download the book. Thanks to all who participated.

Melvin
Sophia
Wahinya
Susan
Norair

Rags and Runts: The Hidden Problem Hurting Your Text

Anthony Tseng — Wed, 18 Feb 2026 14:22:55 GMT

When users read your content, they develop a natural reading rhythm. However, rags and runts can disrupt it. A rag refers to the uneven, irregular edges of body text. A runt is a short line that appears at the end of a paragraph, typically just one or two words trailing off alone.

While rags and runts might seem like a minor detail, they create both visual and reading problems that affect user experience. As users read your body text, abrupt line breaks create an awkward pause in their reading momentum. When read aloud, this disjointedness becomes even more apparent.

"My" vs "Your" in User Interface Design

Anthony Tseng — Fri, 13 Feb 2026 14:47:13 GMT

Every interface makes an implicit choice: Is it an extension of the user, or a separate entity speaking to them? This fundamental question shapes how you label items and how users understand what belongs to them. The difference between “my” and “your” is more than grammatical—it’s about ownership and agency.

“My” signals absolute possession. When users see “My Picks” or “My Photos,” they understand these are spaces they control and have personalized. The first-person perspective puts them in the driver’s seat.

“Your” signals contextual relevance. “Your Recommendations” or “Recommended for You” indicates content the system has curated for them. The second-person perspective positions the interface as a helpful assistant presenting personalized selections.

How to Fit Massive Menus on Mobile Screens

Anthony Tseng — Fri, 06 Feb 2026 14:13:32 GMT

Do you have a massive menu on your desktop app? Unfortunately, that navigation won’t fit on mobile screens. As a result, your mobile users won’t have a pleasant experience navigating your app.

A common approach is to allow menu items to bleed off the edges so users can scroll horizontally to navigate. However, this isn’t intuitive because not all users will perceive the horizontal scroll function and may only interact with the visible items.

Also, horizontal scrolling and scanning require more effort with the finger and eyes. It’s much harder for users to scan and scroll a list horizontally than vertically. The movement feels more awkward as it goes against the downward direction of the page flow.

How to Simplify a 46 Item Mega Menu

Anthony Tseng — Wed, 21 Jan 2026 13:28:31 GMT

Mega menus have become the default solution for complex navigation, but they often create more problems than they solve. When users hover over a category, they’re suddenly hit with a grid of dozens—sometimes hundreds—of items. This cognitive overload violates a fundamental principle of good UX design: reducing the burden on the user’s working memory.

Imagine being confronted with 46 items organized into 4 columns. When users open the mega menu, they're trying to hold too many things in their working memory: the item they’re looking for, the category labels they're scanning, and their current position in the navigation structure. The result is working memory overload, where they feel overwhelmed, make slower decisions, or simply give up.

Inline Cards: Better Data Display Without Modals

Anthony Tseng — Wed, 07 Jan 2026 12:21:01 GMT

Many designers default to modals when they need to display supplementary information or edit data fields. However, this pattern often harms the user experience by causing context loss and interruptions to the task flow.

When a modal appears, it obscures the very information users need to make informed decisions. For example, viewing version history in an overlay prevents users from comparing changes against the current state. Instead of seeing all the information they need, they must hold it in their working memory.

Output Forms: Match Input as Output for Better UX

Anthony Tseng — Mon, 29 Dec 2025 16:06:59 GMT

When a user submits a form, there are two possible outcomes for their input. The first sends their input privately to an administrator, while the second makes it publicly visible to others. If you’re designing a form for public visibility, it’s crucial to provide users with a preview of how the output will look.

For example, if you’re listing a property for sale, it’s important to consider the presentation, as this can influence its chances of selling. Unfortunately, most forms do not offer a preview of how the user’s input will appear when the listing goes live. Instead, users only see standard text fields without any indication of the output.

Why Using Too Many Borders Hurts Your UI

Anthony Tseng — Tue, 16 Dec 2025 13:49:34 GMT

There’s a bad design practice you might not know you’re doing. It’s so subtle that most designers aren’t aware of this problem. Using too many borders is hurting your user interface.

When you have borders within borders, there’s more visual noise that interferes with the user’s viewing experience. The borders are harsher on the eyes and become a distraction as users scan for information. Not only that, but the UI looks less like a finished design and more like an incomplete wireframe.

Why Radio Buttons Should Always Have Borders

Anthony Tseng — Wed, 03 Dec 2025 14:33:27 GMT

Do your radio buttons have the best user experience? Chances are, they don’t because they don’t have borders. If they don’t have borders, you’re likely making it hard for users to select options on forms and in settings.

Borderless radio buttons have no container for the text label. This makes the radio buttons harder to notice, read, and click. Just take a look at the example below. The options look like a cluster of mangled text scattered across the screen. You have to hone in on the details to read and process each option. Selecting an option shouldn’t require this much cognitive effort.

Why Bright Button Colors Fail Accessibility

Anthony Tseng — Fri, 21 Nov 2025 14:15:55 GMT

Are you using a bright color on your buttons? You might not know this, but your users could be having trouble reading the text labels. If they have difficulty reading them, they won’t feel comfortable clicking them to complete their tasks.

Brightly colored buttons with white text labels are inaccessible to users with visual impairments. This includes color blindness and low vision, which commonly affects the elderly.

To check your button accessibility, use an online color contrast calculator to calculate the contrast ratio. It needs to be 4.5 or higher to meet the level AA accessibility standard. Unfortunately, most bright button colors fail the test.