haleys-archive
🧠 101가지 UIUX 심리학
💡디자이너로 살기
Figma 실무 꿀팁
디자인 기본 지식
📝 Figma
기능별 플러그인 모음
피그마 한글 폰트 프리뷰 | Korean Font Preview
디자인 리소스
Sign In
Home
Haley's archive | UIUX 디자인 스터디
Design News
Figma Insight
Beyond View
🧠 101가지 UIUX 심리학
📚 UIUX 디자인에 도움 될 심리학 공부
스트라이샌드 효과 (Streisand effect)
간결의 법칙 (Law of Prägnanz)
고정편향 (Anchoring Bias)
피드포워드 (Feedforward)
유사성의 법칙 (Law of Similarity)
가용성 휴리스틱 (Availability Heuristic)
특이성효과 (The Singularity Effect)
아하! 모먼트 (Aha! Moment)
스포트라이트 효과 (Spotlight Effect)
프레이밍 (Framing)
미끼효과 (Decoy Effect)
힉의 법칙 (Hick's Law)
몰입상태 (Flow State)
보답 기대 효과 (Reciprocity)
변동성 보상 (Variable Reward)
오컴의 면도날 (Occam's Razor)
인지적 불일치 (Cognitive Dissonance)
베버-페히너의 법칙 (Weber-Fechner's law)
유혹 번들링 (Temptation Bundling)
지식의 저주 (Curse of Knowledge)
목표 그라데이션 효과 (Goal Gradient Effect)
디드로 효과 (Diderot effect)
파노플리 효과 (Phenomenon of Panoply)
피크엔드 법칙 (Peak-End Rule)
선택적 주의 (Selective Attention)
시각적 계층 (Visual Hierarchy) 효과
인식 우선 원칙 (Recognition Over Recall)
상반된 위치 효과 (Juxtaposition)
무현금 효과 (Cashless Effect)
미적-실용성 효과 (Aesthetic-Usability Effect)
이케아 효과 (IKEA Effect)
시간 인식 (Chronoception)
스큐어모피즘 (Skeuomorphism)
파레토의 원칙 (Pareto principle)
시각적 안내 요소 (Visual Anchors)
폰 레스토프 효과 (Von Restorff Effect)
의사 집합 프레이밍 (Pseudo-Set Framing)
그룹 매력 효과 (Group Attractiveness Effect)
제이가르닉 효과 (Zeigarnik Effect)
간격 효과 (Spacing Effect)
일련 위치 효과 (Serial Position Effect)
대비 효과 (Contrast Effect)
쌍곡선 할인 (Hyperbolic Discounting)
내부 트리거 (Internal Trigger)
자체 트리거 (Self-Initiated Triggers)
피츠의 법칙 (Fitts's Law)
새 출발 효과 (Fresh Start Effect)
노력 인식 효과 (Labor Illusion)
투자 환원 (Investment Loops)
손실 회피 (Loss Aversion)
넛지 (Nudge)
테슬러의 법칙 (Tesler's Law)
지시자 효과 (Signifiers)
외부 트리거 효과 (External Trigger Effect)
배너 무시 현상 (Banner Blindness)
공감 간격 효과 (Empathy Gap)
점진적 노출(Progressive Exposure)
중앙 무대 효과 (Centre-Stage Effect)
스파크 효과 (Spark Effect)
사회적 증거 효과(Social Proof)
호기심의 틈 (Curiosity Gap)
피드백 루프 (Feedback Loop)
후광효과 (Halo Effect)
멘탈 모델 (Mental Model)
결핍 효과 (Scarcity Effect)
사회적 책임 효과 (Noble Edge Effect)
밀러의 법칙 (Miller's Law)
약속과 일관성 (Commitment & Consistency)
투자 손실 효과 (Sunk Cost Effect)
결정 피로 (Decision Fatigue)
반발감 효과 (Reactance)
생존 편향 (Survivorship Bias)
주의 편향 (Attentional Bias)
확증 편향 (Confirmation Bias)
기대 편향 (Expectations Bias)
인지 과부하(Cognitive Load)
프라이밍 (Priming)
가까움의 법칙 (Law of Proximity)
부정 편향 (Negativity Bias)
단위 편향 (Unit Bias)
권위 편향 (Authority Bias)
반발 효과 (Backfire Effect)
거짓 공감 효과 (False Consensus Effect)
2차 효과(Second-Order Effect)
탈출 경로 제공(Provide Exit Points)의 필요성
설문 편향(Survey Bias)
호손 효과(Hawthorne Effect)
사후 확신 편향 (Hindsight Bias)
기본 편향(Default Bias)
관찰자 기대 효과 (Observer-Expectancy Effect)
밴드웨건 효과(Bandwagon Effect)
바넘효과(Barnum-Forer Effect)
도구의 법칙(Law of the Instrument)
파킨슨의 법칙(Parkinson's Law)
감정 휴리스틱 (Affect Heuristic)
자기 고양적 편향(Self-serving Bias)
소유 효과 (Endowment Effect)
💡디자이너로 살기
Figma 실무 꿀팁
디자인 기본 지식
📝 Figma
기능별 플러그인 모음
피그마 한글 폰트 프리뷰 | Korean Font Preview
디자인 리소스
Subscribe
상반된 위치 효과 (Juxtaposition)
서로 비교해보면 확실히 알 수 있게 만드는 나란히 배치하기의 힘
따로 볼 때는 몰랐지만 두 대상을 나란히 붙여놓는 순간 선명히 보이는 효과
정의
서로 상반되거나 대조적인 요소 두가지를 같은 시각적 범위 안에 배치해 각각의 특성을 더 강조하거나 두 요소 사이의 관계에서 새로운 의미를 찾아내도록 유도하는 인지적 현상
유래
이 효과는 본래 문화·예술 분야에서 서로 어울리지 않는 단어나 이미지를 배치해 긴장감을 주는 기법에서 출발했다
현대에 이르러서는 인간의 뇌가 절대적 수치보다 상대적 차이에 더 민감하게 반응한다는 인지심리학의
대비 효과(Contrast Effect)
와 결합해 UX 디자인의 핵심 원칙으로 정착했다
예시
•
플랜 비교 :
무료(Free)와 유료(Pro) 플랜을 나란히 두어 결제 시 얻는 이득을 극적으로 강조한다
•
비포&애프터 :
변화의 효과를 극적으로 느끼게 하기위해 사용한다
•
명도 대비 :
어두운 배경에 밝은 텍스트를 배치해 가독성을 극대화하는 것도 시각적 병치의 일종이다
활용
디자이너는 사용자가 빠르게 판단하고 행동하게 만드는 비교의 기준점을 설계해야 한다
•
대비효과를 사용해 의사결정 보조 :
사용자가 고민할 때 두 옵션을 나란히 배치하면 정보 인출 과정 없이 그 자리에서 인식하고 선택할 수 있다
•
이미지 슬라이더 : 슬라이더 핸들을 좌우로 밀며 2개의 이미지를 실시간으로 비교하게 만드는 인터랙션
상반된 두 요소를 어디에, 얼마나 가까이 두느냐에 따라 사용자 인식이 완전히 달라질 수 있다
사용자의 시선과 마음을 사로잡는 강한 대비를 만들어내야한다
Made with Slashpage