UX oF UX Portfolio
UX oF UX Portfolio
Principles used: 7 crore, Jk :)
Principles used: 7 crore, Jk :)
Curiosity Gap
Curiosity Gap
Curiosity gap comes from the missing piece of information. When we don't have the info, which we want to know, our brain just gets eager to know what's lying behind those curtains
Curiosity gap comes from the missing piece of information. When we don't have the info, which we want to know, our brain just gets eager to know what's lying behind those curtains
Example: Google pay can directed show us the rewards, it can be quick, requires less efforts from user and is time saving. But why do they hide that info? and why do they make us scratch the card & then reveal us the same info
Example: Google pay can directed show us the rewards, it can be quick, requires less efforts from user and is time saving. But why do they hide that info? and why do they make us scratch the card & then reveal us the same info
To create a suspense, to trigger a sense curiosity in human mind which hits dopamine release when resolved.
To create a suspense, to trigger a sense curiosity in human mind which hits dopamine release when resolved.
Mental Model, Discoverability, Constraint & Feedback
Mental Model, Discoverability, Constraint & Feedback
It's story time, so, when I gave this portfolio link to 2 of my friends to give me feedback, one of them asked - "how does it open? I tried clicking on it center circle several times, but it's not opening"
It's story time, so, when I gave this portfolio link to 2 of my friends to give me feedback, one of them asked - "how does it open? I tried clicking on it center circle several times, but it's not opening"
And that's when I realized, I forgot that people have different mental models for everything (Mental model simply means, a person's interpretation of how something will work)
And that's when I realized, I forgot that people have different mental models for everything (Mental model simply means, a person's interpretation of how something will work)
Now, since users can think - it opens by clicking,
so I need to use feedback to tell users - it open by scrolling. So, I used the change in cursor's color from white to red, (red as it's standard color for error state) as an indicator of constraint that would communicate - it's not to be clicked..
Now, since users can think - it opens by clicking,
so I need to use feedback to tell users - it open by scrolling. So, I used the change in cursor's color from white to red, (red as it's standard color for error state) as an indicator of constraint that would communicate - it's not to be clicked..
But even after constraint signifier, how would users discover that it open by scrolling?
But even after constraint signifier, how would users discover that it open by scrolling?
Well I had to prefer usability over aesthetics. So finally, I added a message in an alternate cursor state, saying "scroll down" when hovered over the center circle. It removed all confused and made discoverability easier.
Well I had to prefer usability over aesthetics. So finally, I added a message in an alternate cursor state, saying "scroll down" when hovered over the center circle. It removed all confused and made discoverability easier.
Social Proof
Social Proof
Whenever you come across a situation that is ambiguous or when you are unsure whether to trust or not,
it's a short cut for your brain -
to take decisions easily,
save time and energy,
avoid confusion and ambiguity,
reduce risk of financial losses by avoiding unfamiliar option.
by simply looking at what others are choosing.
Whenever you come across a situation that is ambiguous or when you are unsure whether to trust or not,
it's a short cut for your brain -
to take decisions easily,
save time and energy,
avoid confusion and ambiguity,
reduce risk of financial losses by avoiding unfamiliar option.
by simply looking at what others are choosing.
Gestalt's law, Cognitive biases & Fundamental design principles
Gestalt's law, Cognitive biases & Fundamental design principles
Use of Gestalt's law like -
Law of Proximity,
Law of Common region &
Law of Similarity,
was made along with basic design principles of -
Repetition,
Contrast,
Consistency &
Hierarchy.
as well as cognitive biases like -
Chunking,
Progressive disclosure,
Familiarity Bias &
Fitts's Law.
Use of Gestalt's law like -
Law of Proximity,
Law of Common region &
Law of Similarity,
was made along with basic design principles of -
Repetition,
Contrast,
Consistency &
Hierarchy.
as well as cognitive biases like -
Chunking,
Progressive disclosure,
Familiarity Bias &
Fitts's Law.
Peak-End Rule, Serial Position Effect, Sensory Appeal & Delighters
Peak-End Rule, Serial Position Effect, Sensory Appeal & Delighters
Well for those who don't know the above terms-
Peak-end rule: Users remember the intense peak & end movements of interaction
Serial position effect: It's easier to recall the start & end of a list or any content
Delighters: Surprise elements which makes users happy & generates a strong positive emotional response
So to make this portfolio stand out, it is the Delighters- 1. Domino game, 2. Motion in career Path, anddd it's "positioning" that matters for creating a better impact.
Well for those who don't know the above terms-
Peak-end rule: Users remember the intense peak & end movements of interaction
Serial position effect: It's easier to recall the start & end of a list or any content
Delighters: Surprise elements which makes users happy & generates a strong positive emotional response
So to make this portfolio stand out, it is the Delighters- 1. Domino game, 2. Motion in career Path, anddd it's "positioning" that matters for creating a better impact.
Pleasing senses like visual, auditory, haptic or olfactory is a great way to make user experience more memorable & to increase audience engagement. So, I added sounds in buttons which auto-plays on hovering & it also provides very distinguishable feedback.
Pleasing senses like visual, auditory, haptic or olfactory is a great way to make user experience more memorable & to increase audience engagement. So, I added sounds in buttons which auto-plays on hovering & it also provides very distinguishable feedback.
Anddddd now since you are aware that this meme is also a Delighter placed as per Peak-end rule, so it will have an lesser impact this time, wondering why?
Cause of Reactance: It is a psychological bias which says that users have a natural urger to push back and oppose when they become of aware that they are made to feel a certain way or that there freedom of choice is threatened.
A similar bias is Hawthorne effect: Tendency to alter one's behaviour when they are aware they are being observed or analyzed .
So, I am sharing this info to you, to ensure transparency as well as knowing the fact that this portfolio is made to be analyzed & seen by other senior designers, who will be aware of each & every Psychological trick used here to amaze recruiters as they are the target audience for this design portfolio.
Anddddd now since you are aware that this meme is also a Delighter placed as per Peak-end rule, so it will have an lesser impact this time, wondering why?
Cause of Reactance: It is a psychological bias which says that users have a natural urger to push back and oppose when they become of aware that they are made to feel a certain way or that there freedom of choice is threatened.
A similar bias is Hawthorne effect: Tendency to alter one's behaviour when they are aware they are being observed or analyzed .
So, I am sharing this info to you, to ensure transparency as well as knowing the fact that this portfolio is made to be analyzed & seen by other senior designers, who will be aware of each & every Psychological trick used here to amaze recruiters as they are the target audience for this design portfolio.
So, ending it here! (trust me this is the last delighter haha)
So, ending it here! (trust me this is the last delighter haha)
Reach
OUT
Reach
OUT
Challenge for you, make the domino fall
Tap to Start
W - front, S - back
A - left, D- right