Skip to content

The 3Ps of UI Design: Purpose, Principles, Personality

Derick Zr5 min read

Most UI problems aren't design problems. They're decisions made in the wrong order.

The 3Ps give you the order:

  1. Purpose: what is this for?
  2. Principles: what rules follow from that?
  3. Personality: how does it sound and feel?

Skip the first one and the other two are just taste. Every demo below uses the same small to-do app, so you can see all three at work.

1. Purpose

Purpose is what the interface is for. Every decision has to trace back to it.

Write it as one sentence. For the to-do app:

Help one person see what to do today, and get it done without thinking about the app.

Then go one level down: give every page one question. The page header says it in plain words.

PageThe one question it answers
TodayWhat do I need to do today?
UpcomingWhat's coming this week?
A listWhat's on this list?
ActivityWhat did I add, finish or change?

Now everything on the page has one test: does it help answer the question? If it doesn't, it moves or it goes.

Try it on the Today page:

Press the green button. Everything it changes is right below it.
Tasks / Today
TodayWhat do I need to do today?
Buy groceriesAdded 3 days ago
Call the dentistDue 5 pmAdded last week
Send the invoiceAdded yesterday
TodayUpcomingActivity

The "Added 3 days ago" stamps follow a good rule: show when things changed. But they answer another page's question, so they belong on Activity. Purpose doesn't replace your principles. It tells them where they apply.

2. Principles

Principles are the rules you apply once the purpose is clear.

A good principle ends an argument. If it doesn't help you pick between two options, it's a vibe.

PrincipleThe argument it ends
The subject is the biggest thingIs the title the section name, or the thing?
One header, same place, every pageWhere do title, description and action go?
One control per jobTabs, pills or a filter menu?
Scope sits above what it scopesWhere does the period picker go?
Three levels of heading, no moreIs this a card, a section, or a card in a card?
One primary action per screenDoes this button get to be green?
Quiet until something's wrongShould this be coloured? Only if it's status.

"One control per job" needs the jobs written down, or it's useless:

JobControlWhere
Go to another part of this pageTabsBottom of the page header
Change what the whole page coversScope barRight under the header
Change how one card shows its dataSmall toggleThat card's corner
Narrow one listFilter menuTop of that list

Here's a page that breaks five of them. Fix it:

Tap a blue number. Each one fixes the problem it sits on.
Tasks / Lists / Groceries
0 of 5 fixed
Lists
GroceriesShared with Sam
To buyBought
To buy
Prices at Corner shop ▾
Milk$1.20Eggs$2.80Bread$2.10
Estimated total$6.10

No new features, no new data. Only placement and size. That's most of what "consistent" means.

Put principles in components. A doc gets forgotten. A PageHeader that only accepts a title, a description, one action and tabs can't be used wrong:

<PageHeader
  title={list.name} // ✅ the subject, not "Lists"
  description={`Shared with ${list.sharedWith}`}
  aside={<AddItemButton />} // ✅ the one primary action
  tabs={{ value: tab, onChange: setTab, options: ["To buy", "Bought"] }} // ✅ the only place tabs live
/>
<PageHeader
  title={list.name} // ✅ the subject, not "Lists"
  description={`Shared with ${list.sharedWith}`}
  aside={<AddItemButton />} // ✅ the one primary action
  tabs={{ value: tab, onChange: setTab, options: ["To buy", "Bought"] }} // ✅ the only place tabs live
/>

3. Personality

Personality is the character of the interface. For an app people open every day, it's mostly words and behaviour.

Pick three or four traits and write what each one sounds like, and what it doesn't:

TraitSounds likeNot like
Calm"Nothing left for today. New tasks show up here.""🎉 All done! Treat yourself!"
Direct"Mark done", "Add item""Submit", "Proceed"
QuickUndo after the action"Are you sure?" dialogs
Exact"Due today, 5:00 pm""Due soon"

Same screen, three voices. Finish the task in each:

Pick a voice, then finish the task. Same screen, different person talking.
Tasks / Today
TodayManage your tasks.
Call the dentistDue soon
Nobody chose this voice. It's what you get by default.

Personality has to fit the purpose too. The purpose says "without thinking about the app". Confetti on every finished task makes you think about the app. Cheerful is great for a game, not here.

The 3Ps on One Card

  • Purpose: one sentence for the product, one question per page. Anything that doesn't answer it moves or goes.
  • Principles: each one ends an argument. Build them into components.
  • Personality: three or four traits, written as "sounds like / not like". Verbs on buttons, calm empty states, exact numbers, undo over confirm.
  • Order matters: purpose settles fights between principles, and personality can't save a page with no purpose.