Design principles

Understanding the User Experience of Product should guide the Design process

“Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away” – Antoine de Saint-Exupery 🌹

UX Design Principles

User-centered design – focus on the needs of end user 👖
Usability – make sure the product is easy to use and understand 🪛
Consistency – maintain familiarity in elements look & functionality across the product 🧬
Accessibility – design for wide range of users, including ones with disabilities 👂
Visual hierarchy – guide attention to the most important elements 🪜
User control – give users a sense of control over their experience (right amount) ☸️

Usability principles

Learnability – how easy is to accomplish the task the first time use 🧠
Efficiency – does it allow to complete the desired task quickly and efficiently 🎯
Memorability – how easy to recognize how to use it again after a while 🤔
Errors prevention – how does it help users avoid making errors 🧯
Satisfaction – how pleasant and enjoyable product for users to engage 🍦

As a UX designer, U should prioritise usability over aesthetics, ensuring a user-friendly and efficient user experience overall. Incorporate Usability Testing to enhance it

Accessibility principles POUR

Perceivable – user should be able perceive info via either senses 👀
Operable – should be usable without interactions user can not perform 🔦
Understandable – users should be able to comprehend and use info 🛟
Robust – content should be reliably interpreted by a wide variety of user agents 🎲

“UX principles are about both visual design and functionality.
E.g. a car engineer has to understand how car is used, and how its look could enhance its specs”

Less is More

Clarity – convey the essential message 💡
Simplicity – keep it simple, avoid unnecessary elements 🪛
Focus – prioritize the most important, direct user’s attention towards goal 🎯
Whitespace – use empty space to create breathing room and guide the user’s 👀
Conciseness – communicate effectively using the fewest words 🎙️
Repetition – minimize redundancy, reuse essential elements for consistency 🧬

Useful, Usable, Used

Usafel – helps the user accomplish a task
Usable – the ease at which thea user can complete the task
Used – users keep using the product which helps them achieve their goal

Tesler’s law

For any system there is a certain amount of complexity which cannot be reduced

Don’t idealize – build for wide range, not all users behave rationally 🎭
Don’t burden – lift up as much as possible complexity from user ⛑️
Make guidance – accessible help to users no matter what path they choose 🛟

Complexity is a necessary evilbut it should be managed to keep the system usable

Doherty threshold

400ms the maximum time a user is willing to wait for system response 🥱

Feedback – let users know their actions are being processed 📡
Progress indicators – show users the progress of their actions 🧨
Pace less than 400msensures that neither system nor user has to wait each other

Heuristics 🧠

Heuristics are like mental shortcuts that people instinctively use to make decisions and judgments quickly and efficiently

Jakob's law

Users spend most of their time on other sites

Users prefer Ur site to work in familiar way 🚲 don’t reinvent the wheel unless it provides enough value

Goal-Gradient effect

As people increase effort to approach the goal as they get closer to its accomplishment

The closer U get to a finish line, the more motivated you feelindicate progress to motivate users to complete tasks

Fit's law

The bigger the distance and the smaller the target’s size, the longer it takes to move a pointer to it

Big and near objects are easy to clickmake clickable area big & close enough to point

Parkinson's law

Task will inflate to fill the available time for its completion

Too much time – waste of time
Too less time – frustration

All allocated time will be spentreducing the actual duration a bit might improve experience

Hick's law

The more choices that are available to the user, the longer it will take them to reach a decision

Challenge to make the right choice of manycan lead to procrastination

Visual Perception biases 👀

Cognitive biases are potential miss-conceptions due to systematic patterns in our thinking, that can lead us to make irrational decisions or miss-judgments

Aesthetic-Usability effect

Users often perceive aesthetically pleasing design as design that’s more usable

Visually pleasing designincreases user’s tolerance to some usability issues

Serial position effect

People tend to recall items at the beginning (primacy effect) & end (recency effect) of a list better than those in the middle

Better remembering first and last piecesinfluences overall perception

The Isolation effect

When multiple similar objects are present, the one that differs from the rest is most likely to be remembered

Visually distinctive infoattracts user attention

Zeigarnik effect

People remember uncompleted or interrupted tasks better than completed tasks

Sense of artificial progressincreases motivation to complete task

Gestalt Design principles 🎨

Proximity

Objects that are near or proximate to each other, tend to be grouped together

Grouping related itemshelp to organize & comprehend information faster

Similarity

Human eye tends to perceive similar elements in a design as a complete picture

Visually similar elements perceived as relateduse colour, shape & size consciously

Closure

Mind automatically fills the gaps between elements to perceive a complete image

We see the whole firstcleverly placed elements forming the whole are appreciated

Continuity

Human eye follows the paths, lines, and curves of a design & prefers to see a continuous flow of visual elements rather than separated objects

Eye follows the direction even through obstaclesalign element to interlink them

Common Region

Elements sharing an area with a clearly defined boundary perceived as group

Common region isolates the groupuse border and background to effectively show relationship between elements and sections

Common Fate

Objects moving into same direction perceived as group

Common fate unites the groupuse movement to show relationship between elements

Multistability

Ambiguous images can be interpreted in multiple ways, but not simultaneously
we experience the sensation of switching between the interpretations

Eye cannot see the multiple versions simultaneouslyguide the interpretation with contrast

Figure/Ground

Brain perceives elements as either objects of focus (the figure) or background (ground)

Brain separates the foreground from the backgrounddistinguish figure, create a sense of visual focus

Uniform Connectedness

Human eye tends to perceive similar elements in a design as a complete picture

Visually connected elements perceived as relateduse border, lines & arrows to emphasize the items relationship

Symmetry and Order

Symmetrically arranged visual elements usually perceived as grouped

Mind tends to favor symmetrical formsgrid systems help to keep visual order

Focal Point

Highlighted main element or object becomes the center of attention

Emphasis captures & hold attentiondistinguish the most important

Prägnanz law

People interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us

The human eye simplifies complex shapespeople are better able to visually process and remember simple figures

Understand more Psychological biases to guide User effectively