Rightbrain 사내 ux 세미나 202202

Copyright© All rights reserved 조성봉
4. 심리와 GUIDesign
Rightbrain UX Academy

Good Art Is Interpreted
Good Design IsUnderstood
— John O’Nolan

인간은 항상
대상에서 의미를 찾는다
주어진 결과 내에서 의미 연결(Association)을 추구한다

인간은 사물을 지각할 때
본인이 알던 형태를 재인하려 든다
본인이 원래 알고 있던 정보/지식을 지각하는 대상에 대입한다
지각항상성 (subjective constancy)

인간은 한번에 하나만
주의를 기울일 수 있다
선택적 주의 (selective attention)

인간은 생각하는 것을
달가워하지 않는다
우리의 일상생활 전반을 지배하는 것은
이성적 사고가 아닌, 직관이다

그러나 가벼운 이성적
자극에는 즐거움을 느낀다
우리의 일상생활 전반을 지배하는 것은
이성적 사고가 아닌, 직관이다

인간은 짧은 순간 인상을
통해 무언가를 떠올린다
원래는 하나의 '단어’, '순간적인 인상' 뿐이었던
대상이 여러가지 연상을 불러일으킨다.

인간은 인지적 편안함을
추구한다
단정한 서체나 깨끗하게 인쇄된 적절한 글씨,
미소는‘인지적 편안함’을 가져온다

인간은 결과에 대한
원인을 항상 찾는다
어떤 규칙을 가지고 함께 일어나는 환경,
사건, 행동, 결과들을 연결하려고 든다

인간은 믿고 싶은대로
믿으려고 든다
자신의 주관, 신념, 지식, 관점에 일치하는 것만
믿으려고 든다
확증 편향(conformation bias)

인간은 일관성을 갖기
위해 노력하고 유지한다
이미 생성된 대상에 대한 호감(또는 비호감)을 쉽게 바꾸지
않을 뿐만 아니라, 아직 확신할 수 없는 것들에게까지 그것을
확대하여 좋게(또는 나쁘게) 보려는 경향을 가지고 있다

인간은 제한된 증거만으로
성급하게 결론내린다
한쪽 증거만 본 배심원들이 양쪽 증거를 모두 본 배심원들에
비해서 더 자신있게 판결을 내린다
What you see is all there is

인간은 다른 범주의 정보를
짝지어서 생각한다
소리의 크기를 빛의 밝기나 색깔과 짝짓기 하고,
긍정적/부정적 이미지를 크기로 변환하기도 한다
강도(strength)의 짝짓기

인간은 초기 이해가 안되면
필요 이상으로 과잉계산한다
간단한 과제도 직관적이고 즉시적으로 이해하지 못하게 되면 필
요 이상으로 생각하고 갈등하면서 생각을 확산한다
정신적 산탄총

인간은 익숙한 방식으로
정보를 구분하려 든다
Chunking

인간은 복잡한 정보에서
패턴을 읽으려 든다
Pattern Recognition

Copyright© All rights reserved 조성봉 31
UX/UI Design
GUI
GUI
• AetheticPleasing
• UniqueIdentity
• Usability
• VisualHieararchy
GUI 작업에서의 고려요소
✓ 균형
✓ 구분
✓ 대비
✓ 강조
✓ 리듬

UX/UI Design
균형
GUI
기본적으로 대칭 형태의 정렬은 안정감을 부여한다
Source : Samantha Lile

UX/UI Design
균형
GUI
Symetrically balanced

UX/UI Design
균형
GUI
Horizontally balanced

UX/UI Design
균형
GUI
Diagonally balanced

UX/UI Design
균형
GUI
Asymetrically balanced

UX/UI Design
공간(여백)을 통해 심리적인 편안함 부여
균형
GUI

UX/UI Design
Visual Tension
균형
GUI

UX/UI Design
Gravity
균형
GUI

UX/UI Design
Perspective
균형
GUI

UX/UI Design
균형
GUI
의도적인 비대칭을 이용한 긴장감 부여

UX/UI Design
Source : 10 Basic Principles of Visual Design by José Torre
구분
GUI
정보와 정보를 서로 별개의 것으로 인식시키는 것
복수 개의 정보를 구분하는 가장 기본적인 방법은 간격이다. 두 정보의 거리가 떨어져 있을 경우, 사용자들은 근접성의 원리에 의해 그것을 따로 인식하기
때문이다. 그러나 목록 화면처럼 동일 속성의 정보가 연속해서 나열된 경우, 간격만으로는 구분이 불명확할 때가 있다. 이때는 구분선을 사용해 목록 간의
구분을 좀 더 명확하게 한다. 간격과 선을 같이 사용하면 이중 구분(선=1차 구분, 간격=2차 구분)이 가능해진다.

UX/UI Design
구분
GUI
선(line)이 아닌 면(face)으로 구분할 때도 있는데, 면은 선보다 좀 더 강하게 구분이 인식되기 때문에 맥락을 잘 고려해야 한다. 선과 면의 사용이 고민될 때
에는 UX의 맥락을 읽어야 한다

UX/UI Design
구분
GUI
면은 좀 더 극적인 구분을 만들어 낸다
Source : 10 Basic Principles of Visual Design by José Torre

UX/UI Design
구분
GUI
아래 왼쪽 예시는 선을 통해서 내비게이션 영역(FOOD, DRINKS)과 음식 목록을 구분하고 음식은 간격으로 가볍게 구분하고 있다. 선만으로는 내비게이션
영역과 하단 목록 영역이 뚜렷하게 구분되지 않아 보이는데, 그렇다고 이러한 시각적인 가벼움이 UX를 크게 저해하는 것은 아니다. 아래 오른쪽의 2개 예시
는 배경 이미지가 들어간 상단과 흰색 배경의 하단 콘텐츠 영역이 뚜렷하게 구분된다. 상단은 화면에서 가장 중요한 요약 정보를 서비스 분위기에 맞게 강조
하고, 하단은 정보의 세부적인 내용을 차분하게 전달하고 있다

UX/UI Design
구분
GUI
면과 점, 선을 같이 활용하면 사용자에게 각 정보의 계층을 좀 더 직관적으로(=무의식적으로) 구분시킬 수 있다. 어떤 약속없이도 우리는 UX의 의도를 사용
자에게 명쾌하게 전달할 수 있다

UX/UI Design
대비
GUI
정보나 기능적 요소들이 ‘그것이 서로 다르다, 반대다’라는 것을 인식시키는 것
대비는 구분만큼 GUI 디자인에서 중요하다. 대비를 잘못 적용할 경우 사용자는 버튼을 잘못 누르거나 옵션을 잘못 선택하는 것처럼 같은 실수를 반복할 수
있다. ‘왠지 모르게 껄끄러운 경험’이 만들어질 수 있는 것이다

UX/UI Design
대비
GUI
뛰어난 GUI 디자인은 대비를 교묘하게 이용한다

UX/UI Design
대비
GUI
여러 화면에 걸쳐 있는 대비 효과는 예측가능성을 높이고, 서비스 전체에 걸쳐 일관된 경험을 만든다

UX/UI Design
대비
GUI
뛰어나지 않은 GUI 디자인은 대비가 UX를 저해한다

UX/UI Design
대비
GUI
UI 요소들간의 서로 다른 시각적 대비 필요성
Source : Marc Andrew

UX/UI Design
강조
GUI
서비스나 UI상의 어느 하나를 나머지 대비 더 두드러지게 보이게 하는 것. 강조는 여백, 크기, 컬러, 배경 등에서 주변과는 다른 디자인 언어를 사용하거나
크기나 시각적 효과를 과장하는 방식으로 구현된다

UX/UI Design
강조
GUI
'이미지’는 시각적 인상을 강렬하고 통일감 있게 유지하는데 효과적인 방법이다

UX/UI Design
강조
GUI
사용자 행동에 따라서 특정 요소를 강조하고자 할 때에는 현재의 행위에만 집중할 지, 행위와 더불어 맥락까지 유지시킬 지에 대한 판단이 필요하다

UX/UI Design
강조
GUI
전경/배경의 원리를 활용하는 것은 특정 요소를 강조하는 데 효과적인 방법이다. 아래 왼쪽 예시는 파란 배경색이 전체 UI를 감싸는 프레이밍(Framing) 기
법을 활용하여 상단 제목과 지도 영역을 강조하고 있다. 그 옆의 구글 피트니스나 스카이스캐너도 배경을 이용해서 상단 또는 메시지 영역에 시선을 주목시
키고 있다

UX/UI Design
강조
GUI
사이즈를 이용한 강조

UX/UI Design
강조
GUI
칼러를 이용한 강조

UX/UI Design
강조
GUI
공간 / 거리감을 이용한 강조

UX/UI Design
강조
GUI
Negative Space를 이용한 강조

UX/UI Design
강조
GUI
주 활동 버튼을 강조하는 것은 항상 중요하다. 주 활동 버튼은 다른 UI 요소보다 더 눈에 두드러져야 한다. 강조를 위해서는 여백, 크기, 배경 등을 사용할 수
도 있으나, 좁은 모바일 화면에서는 그렇게 하는 게 어려울 때가 많으므로 보통 컬러를 이용해서 강조한다

UX/UI Design
강조
GUI
강조는 선택사항이 아니다. 적절한 강조가 이뤄지지 않으면 사용자는 혼란에 빠진다

UX/UI Design
리듬
GUI
리듬감을 주는 가장 좋은 방법은 동일한 디자인 요소(컬러, 이미지, 폰트, 그래픽, 메타포)들
을 서비스 이용 시 계속해서 만날 수 있게 하는 것이다. 아래 Kenno 앱은 파란색 배경 박스
가 화면 상단이나 그래프, 주요 정보 표시에 시선을 주목시키고 폰트나 콘텐츠 배치, 구분선
이 적절하게 반복되면서 정보 조회 시 리듬감이 자연스럽게 이어진다

UX/UI Design
리듬
GUI
상태변화(Transition)를 통해서 리듬감을 부여하는 것은 최근 많이 등장하는 트렌드다. 서비스 전체적으로 일관된 상태변화를 적용하여 그 움직임을 통해서
리듬감을 느끼게 하는 것이다

UX/UI Design
리듬
GUI
리듬감은 동일한 시각적 요소를 반복적으로 사용해서 만들어질 수 있다

Rightbrain 사내 ux 세미나 202202

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Rightbrain 사내 ux 세미나 202202

Similar to Rightbrain 사내 ux 세미나 202202 (20)

Rightbrain 사내 ux 세미나 202202