Notes
IXD802 - Fundamental tools of user
interface
UI/UX
Laws &
Principles
▶
UI Principles
Layout Spacing
Visual Hierarchy Alignment
Typography Consistency
Color Accessibility
Iconography Reducing Visual Noise
▶
UIFundamental
Principlesprinciples ensure clarity, usability, consistency, and
accessibility in the interface.
Visual hierarchy guides user attention to the most important information
first.
Alignment creates order and visual balance, improving readability and
user flow.
Color enhances visual appeal, provides feedback, and ensures accessibility
through contrast.
Whitespace improves legibility and reduces cognitive load by separating
content areas.
▶
Consistency helps users predict interactions and reduces confusion.
Iconography uses symbols to simplify actions or ideas for quick recognition.
F-pattern helps scan text-heavy layouts; Z-pattern works for simpler,
image-based layouts.
Visual noise clutters the interface and distracts users—eliminating unnecessary
elements is key.
Spacing groups related items together and separates unrelated ones for clarity.
UX Principles
1. User-centricity means prioritizing user needs, behaviors, and
goals throughout the design process.
2. Consistency ensures similar elements behave the same,
aiding learnability and trust.
3. Hierarchy helps users navigate by visually emphasizing key
elements like headings or buttons.
4. Context considers the environment and situations in which
users interact with the product.
DATE
5. User control allows users to undo actions, exit flows, and feel in
control of their experience.
UX Principles
6. Usability includes ease of learning, task efficiency,
memorability, error tolerance, and satisfaction.
7. Accessibility ensures the design works for users with diverse
abilities and limitations.
8. Efficiency supports quick task completion through intuitive and
optimized flows.
9. Learnability is how easily new users can grasp how to use the
system effectively.
10. Satisfaction refers to how pleasant and enjoyable the overall
user experience feels.
UX Laws
1. Fitts’ Law
2. Hick’s Law
3. Gestalt Principles (Proximity, Similarity, Common Region,
Prägnanz, etc.)
4. Miller’s Law
5. Serial Position Effect
6. Peak-End Rule
▶
UX Laws List
Fitts’ Law Serial Position Effect
Hick’s Law Peak-End Rule
Gestalt Principles Law of Similarity
(Proximity, Similarity, Common
Region etc.) Law of Common Fate
Miller’s Law Law of Figure-Ground
Law of Uniform Connectedness
DATE
Fitts’ Law: The time to reach a target depends on its size and distance—make
key buttons large and easy to reach.
Hick’s Law: The more choices, the longer the decision—limit options for faster
user action.
Gestalt Law of Proximity: Items close together are seen as related—used in
UX Laws
grouping navigation or form fields.
Law of Common Region: Elements inside the same boundary are perceived as a
group—used in card designs or sections.
Law of Prägnanz: Users prefer simple, organized layouts—avoid overly complex
visuals.
DATE
Serial Position Effect: Users remember the first and last items in a list—place
important content accordingly.
Miller’s Law: People can remember ~7 items at once—limit choices in menus or
navigation.
Peak-End Rule: Users judge an experience based on its most intense point and
UX Laws
end—make final steps positive.
Law of Similarity: Similar elements are perceived as related—ensure consistent
button shapes/colors.
Law of Common Fate: Elements moving in the same direction are seen as
related—used in sliders and animations.
DATE
What does Fitts’ Law say about button size in
user interfaces?
Why should the most important item go at the
top or bottom of a list?
What is the average number of items people
can remember, as per Miller’s Law?
Why should we follow UX laws when designing
apps or websites?
Check your
knowledge
