Basic UX Principles

Designing with user behavior and interaction in mind.

1. User-Centered Design

Explanation:
This design starts by understanding what the user wants to achieve, not just collecting generic information.

1.1 Personalized Onboarding

What describes you best?

Explanation:
Tailoring the experience based on user type ensures relevance and empathy for user goals.

2. Affordance

Explanation:
Affordance means elements suggest how they should be used. This button looks clearly clickable.

2.1 Affordance with Visual Cues

Explanation:
Icon placement inside inputs helps signal their purpose and actionability.

3. Feedback

Explanation:
The spinner shows the system is working, preventing confusion about the click result.

3.1 Instant Feedback via Toast

Explanation:
Confirmation messages reassure users that actions were successful.

4. Simplicity

Reset Password

Explanation:
A focused layout helps users complete their tasks without distractions.

4.1 Simple Call-to-Action

Need help logging in?

Explanation:
A single, clear action simplifies the decision-making process for users in need.

5. Consistency

Explanation:
Consistent design across components helps reduce cognitive load and confusion.

5.1 Consistent UI Components

Explanation:
When similar buttons look and behave consistently, users feel more confident in their actions.

6. Accessibility (A11y)

Make designs usable for everyone.

Explanation:
This button supports keyboard navigation and screen readers, improving accessibility.

6.1 Focusable Link

Learn More

Explanation:
Providing visible focus indicators ensures users who navigate with a keyboard don't get lost.

7. Usability

Ensure tasks are intuitive and efficient.

Explanation:
Good usability means tasks are quick and intuitive. Clear fields and a focused CTA ensure clarity.

7.1 Help Text

Use this if someone referred you.

Explanation:
Simple inline help text improves understanding without cluttering the interface.

8. Error Prevention/Recovery

Explanation:
Highlighting the problem with a red border and helpful message makes recovery intuitive.

8.1 Disabled Submit Until Valid

Explanation:
Preventing submission until valid input avoids user frustration and downstream errors.

9. Progressive Disclosure

Reveal advanced settings only when the user chooses to see them.

API Key: Debug Mode:

Explanation:
Progressive disclosure lets users focus on what matters most by hiding complex options until they’re needed. This keeps interfaces clean and friendly for beginners, while still supporting power users.

9.1 Expandable FAQ

We accept credit/debit cards, PayPal, and UPI. All transactions are encrypted and secure.

Explanation:
Expandable FAQs allow users to view only the information they’re interested in, which reduces visual clutter and improves scanability.

10. Hick's Law

Fewer choices = faster decisions.

Explanation:
Too many options delay decisions. Three clearly labeled choices speed up user actions.

10.1 Minimal Options

Explanation:
Reducing plan options helps users make quicker, more confident decisions.

11. Fitts's Law

Make clickable areas large & close to the user's focus.

Explanation:
Large buttons help users tap targets easily—especially on touch devices.

11.1 Fixed Bottom Button

Explanation:
Sticky CTAs close to the thumb zone follow Fitts's Law and improve mobile experience.