Skip to main content

Mood Congruence

People generally like for their UIs to "understand them". They like for their interfaces to be in tune with the context around the task at hand. If you're accessing a banking app, you'll likely want a UI with minimal colors, high legibility, and very few distractions. But, if you're playing a game, you can likely find a lot more joy in a UI that is more colorful and playful.

This is the concept of "mood congruence". The UI should be in tune with the mood of the user.

Both examples below are functionally achieving the same banking task. See your balance, and move money as needed. The first window keeps the tone calm and legible so the interface matches the serious financial context. The second turns the saturation, motion, and promotional chrome way up, making it far less legible and usable as a utility tool.

Mood Congruent
bank.liambsullivan.com
Bank of SullivanChecking
Available balance$12,847.52

Not actually sending any money.

Mood Mismatched
bank.liambsullivan.com
RB
BANK OF SULLIVANChecking Account
Balance (USD)$12,847.52

Not actually sending any money.