UX

User Experience; how users experience and accomplish tasks within a product.

html

<div class="uif-ux-stage" data-friction="high">
  <ol class="uif-ux-path">
    <li>Find product</li>
    <li>Add to basket</li>
    <li class="uif-ux-extra">Create an account</li>
    <li class="uif-ux-extra">Verify email</li>
    <li class="uif-ux-extra">Enter address twice</li>
    <li>Checkout</li>
  </ol>
  <p class="uif-ux-time" style="color:#A8E6C1;">Estimated task time: <span class="uif-ux-low">40s</span><span class="uif-ux-high">4 min</span></p>
  <p class="uif-ux-caption">The same task, high friction &mdash; how it feels to accomplish, not just how it looks</p>
</div>
<style>
.uif-ux-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }
.uif-ux-path { margin: 0; padding-left: 18px; }
.uif-ux-path li { padding: 3px 0; }
.uif-ux-extra { display: none; }
[data-friction="high"] .uif-ux-extra { display: list-item; }
.uif-ux-low, .uif-ux-high { display: none; font-weight: 700; }
[data-friction="low"] .uif-ux-low { display: inline; }
[data-friction="high"] .uif-ux-high { display: inline; }
.uif-ux-time { margin: 10px 0 0; font-weight: 600; }
.uif-ux-caption { margin: 8px 0 0; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]" data-friction="high">
  <ol class="m-0 pl-[18px]">
    <li class="py-0.5">Find product</li>
    <li class="py-0.5">Add to basket</li>
    <li class="tw-ux-extra hidden py-0.5">Create an account</li>
    <li class="tw-ux-extra hidden py-0.5">Verify email</li>
    <li class="tw-ux-extra hidden py-0.5">Enter address twice</li>
    <li class="py-0.5">Checkout</li>
  </ol>
  <p class="mt-2.5 font-semibold" style="color:#A8E6C1;">Estimated task time: <span class="tw-ux-low hidden font-bold">40s</span><span class="tw-ux-high hidden font-bold">4 min</span></p>
  <p class="mt-2 text-[11px] text-[#241430]/70">The same task, high friction &mdash; how it feels to accomplish, not just how it looks</p>
</div>
<style>
[data-friction="high"] .tw-ux-extra { display: list-item; }
[data-friction="low"] .tw-ux-low { display: inline; }
[data-friction="high"] .tw-ux-high { display: inline; }
</style>

react

export function UX({
  friction = "high",
  showTimings = true,
  accent = "#A8E6C1",
}) {
  const steps = ["Find product", "Add to basket"];
  if (friction === "high") steps.push("Create an account", "Verify email", "Enter address twice");
  steps.push("Checkout");
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430" }}>
      <ol style={{ margin: 0, paddingLeft: 18 }}>
        {steps.map((s) => (<li key={s} style={{ padding: "3px 0" }}>{s}</li>))}
      </ol>
      {showTimings && <p style={{ margin: "10px 0 0", fontWeight: 600, color: accent }}>Estimated task time: <strong>{friction === "low" ? "40s" : "4 min"}</strong></p>}
      <p style={{ margin: "8px 0 0", fontSize: 11, color: "#241430aa" }}>The same task, {friction} friction &mdash; how it feels to accomplish, not just how it looks</p>
    </div>
  );
}