PixelPilot uiux-anti-dark-patterns.instructions.md

Anti-Dark Patterns

Dark patterns manipulate users into actions they didn't intend. This file defines what to avoid and how to design ethically. Because trust is the most valuable conversion metric.

---

CRITICAL RULES

1. Respect user intent — Make it easy to do what users came to do.
2. No deception — Never mislead about costs, commitments, or consequences.
3. Equal treatment — Unsubscribe should be as easy as subscribe.
4. Clear consequences — Users should understand what will happen.
5. No manipulation — Avoid exploiting cognitive biases.

---

THE DARK PATTERNS CATALOG

These are banned in ethical UI design:

1. Confirmshaming

Guilt-tripping users into an action.

❌ "No thanks, I don't want to save money"
❌ "I'll stay uninformed"
❌ "No, I hate discounts"

✅ "No thanks"
✅ "Maybe later"
✅ "Skip"

// Bad
<button>Yes, sign me up!</button>
<button className="text-muted text-sm">
  No thanks, I prefer to miss out on exclusive deals and stay uninformed
</button>

// Good
<button>Subscribe to newsletter</button>
<button>No thanks</button>

---

2. Trick Questions

Confusing double negatives or misleading wording.

❌ "Uncheck this box if you prefer not to not receive emails"
❌ "Check to opt out of promotional communications"

✅ "Send me promotional emails" (unchecked by default)
✅ "I'd like to receive updates" (clear, simple)

---

3. Hidden Costs

Revealing fees late in checkout.

❌ Showing "$29.99" then adding "$4.99 handling" + "$2.99 service fee" at checkout

✅ Show total price upfront
✅ Break down costs clearly from the start
✅ "Price includes all fees"

// Transparent pricing component
function PriceBreakdown({ subtotal, shipping, tax, total }: PriceBreakdownProps) {
  return (
    <div className="price-breakdown">
      <div className="price-breakdown__row">
        <span>Subtotal</span>
        <span>${subtotal.toFixed(2)}</span>
      </div>
      <div className="price-breakdown__row">
        <span>Shipping</span>
        <span>{shipping === 0 ? 'Free' : `$${shipping.toFixed(2)}`}</span>
      </div>
      <div className="price-breakdown__row">
        <span>Tax</span>
        <span>${tax.toFixed(2)}</span>
      </div>
      <div className="price-breakdown__row price-breakdown__row--total">
        <span>Total</span>
        <span>${total.toFixed(2)}</span>
      </div>
      <p className="price-breakdown__note">
        No hidden fees. This is your final price.
      </p>
    </div>
  );
}