Good vs Bad UX Patterns – Learn by Example

InputNew

Don't Limit User Input

Allow users to exceed character limits and show clear feedback instead of silently blocking their input.

inputtextareacharacter-limitvalidationfeedback

Bad example

Article title

No way to enter more text

Description

Text is cut off without warning

Good example

Article title (max 15 chars)

5 characters over limit (20/15)

Description (max 100 chars)

20 characters over limit (120/100)

Learn more

Navigation

Floating Action Button (FAB)

Hide FAB when scrolling down and show when scrolling up to reduce visual clutter

fabbuttonnavigationaccessibilitymobileux

Bad example

Scroll down, then try to create a post

User 1

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 2

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 3

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 4

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 5

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 6

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 7

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 8

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

The "Create Post" button disappears when scrolling

Good example

Scroll down — the create button stays accessible

User 1

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 2

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 3

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 4

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 5

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 6

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 7

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

User 8

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

FAB stays visible regardless of scroll position

Learn more

Feedback

Toast vs Inline feedback

Use inline feedback for contextual actions instead of disconnected toast notifications

toastfeedbackcopyclipboardaccessibility

Bad example

Click the ••• menu and select "Copy link" ?👇

Alex Johnson

2h ago

Just shared something interesting that I think you'll all enjoy! Check it out and let me know what you think.

Good example

Click the ••• menu and select "Copy link" ?👇

Alex Johnson

2h ago

Just shared something interesting that I think you'll all enjoy! Check it out and let me know what you think.

Learn more

Forms

Dropdown usability

Replace long dropdowns with searchable select components for better usability

formselectinputaccessibilitymobile

Bad example

Country

Good example

Country

Learn more

Input

Display options toggle

Use clear visual toggles for display options instead of confusing checkboxes

formselectinputaccessibility

Bad example

Subscription plan

Good example

Multiple good examples!

Subscription plan

Learn more

Modals

Modal closing interactions

Allow users to close modals with multiple methods: X button, outside click, and Escape key

modalaccessibilitykeyboardux

Bad example

Good example

Learn more

Navigation

Scroll to top button

Show a floating button to scroll back to top on long pages

scrollnavigationbuttonaccessibilityux