The Good, The Bad and The UX

A collection of UX patterns with comparative examples

Forms

Autofocus on Modal input

When a modal opens with a single input, it should be automatically focused

modalinputaccessibilitymobile

Bad example

Good example

Forms

Disable submit button during loading

Prevent double submissions by disabling the button and showing a spinner

buttonloadingformmobile

Bad example

Good example

Forms

Verification code paste support

Allow users to paste verification codes instead of typing digit by digit

inputverificationpasteOTPmobile

Bad example

Your code:

Click to copy

Enter verification code

Good example

Your code:

Click to copy

Enter verification code

Feedback

Copy to clipboard feedback

Provide visual feedback when content is copied to clipboard

copyclipboardfeedbacktoast

Bad example

Your promo code:

SAVE20OFF

Good example

Your promo code:

SAVE20OFF

Feedback

Skeleton loading vs Spinner

Show content structure with animated placeholders instead of a generic spinner

loadingskeletonspinnerplaceholderux

Bad example

Team Members

Good example

Team Members

Forms

Auto-submit verification code

Automatically validate the code when all digits are entered instead of requiring manual submission

verificationotpauto-submitinputux

Bad example

Test code:

Click to copy

Enter verification code

Press Enter or click Verify

Good example

Test code:

Click to copy

Enter verification code

Code validates automatically when complete

Feedback

Progressive Loading Messages

Show evolving status messages during long operations to keep users informed

loadingfeedbackprogressstatusux

Bad example

Generate Monthly Report

This may take a few seconds

Good example

Generate Monthly Report

This may take a few seconds

Forms

Form validation with error feedback

Keep submit buttons enabled and show clear error messages on submit instead of disabling buttons on incomplete forms.

formvalidationerrorbuttonaccessibilityfeedback

Bad example

Please fill all fields correctly to enable the button

Good example

Forms

Auto-format inputs with mobile keyboard

Automatically format structured inputs (credit card, IBAN, phone) with proper spacing and show the appropriate mobile keyboard.

forminputformatmobilekeyboardibancredit-cardaccessibility

Bad example

Good example

Navigation

Scroll to Top Button

Provide a quick way to return to the top on long scrollable content

scrollnavigationbuttonaccessibilityux

Bad example

Blog Articles

Scroll down and try to get back to the top...

Article 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

No way to quickly return to the top

Good example

Blog Articles

Scroll down and use the button to return to the top

Article 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Article 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Button appears after scrolling, smooth scroll back to top

Forms

Paste button for OTP code

Add a visible paste button to let users quickly fill the OTP from clipboard

verificationotppasteclipboardinputux

Bad example

Test code:

Click to copy

Enter verification code

Type the code manually or use Ctrl+V to paste

Good example

Test code:

Click to copy

Enter verification code

Click the paste button or use Ctrl+V