▪ 시간별 날씨 ▪ 일주일 날씨 ▪ 최저/최고 온도 ▪ 지역

▪ 음악 제목 ▪ 음악가 ▪ 음악 커버 ▪ 음악 타임라인 ▪ 재생 ▪ 랜덤 재생 ▪ 반복 재생 ▪ 뒤로가기 ▪ 앞으로가기

▪ 0~9 숫자 ▪ AC ▪ +/- ▪ % ▪ 더하기 빼기 곱하기 나누기 ▪ = ▪ .

▪ 환영하는 메시지 포함 ▪ ‘언제든 결제’ 내용 포함 ▪ ‘편하게 송금’ 내용 포함 ▪ ‘신중한 투자’ 내용 포함 ▪ 로그인 버튼 ▪ 회원가입 버튼 ▪ 넘어가기 버튼

▪ 컬러 #E8E8E8 #8E8E8E #2260DA ▪ 마진값 : 24 ▪ 폰트 스타일 : Bold, Semibold, Medium

✔ 포함돼야 하는 내용

▪ 이메일 ▪ 이름 ▪ 비밀번호 ▪ 비밀번호 확인

▪ 컬러 #F5F5F5 #4C4C4C #D6D6D6 #2260DA #42C248 #D64444 ▪ 마진값 : 24 ▪ 폰트 스타일 : Bold, Semibold, Regular

아좌잣 👊

웹사이트, 앱 등 소프트웨어 내의 정보를 조직화하고 구조화하는 방식을 말한다. 이는 사용자가 정보를 쉽게 찾을 수 있도록 도와주며, UX의 필수 요소 중 하나이다.

서비스에서 제공하는 정보 구성에 관여하여, 어떤 절차에 거쳐 서비스에 접근하는지 시각적으로 표현하는 것

IA는 일반적으로 네비게이션 시스템, 카테고리 분류, 사이트맵, 콘텐츠 흐름 등으로 표현된다.

IA 설계

정보구조 설계는 사용자 조사를 통해 사용자에게 적합한 정보구조를 파악하고, 계층구조에 따라 기능이 배치되는 위치와 레이블링(메뉴명)을 지정하고 도식화하는 것이다.

IA 설계 패턴

• 웹사이트가 제공하는 콘텐츠가 텍스트 중심인 경우

• F 패턴

• 웹사이트가 제공하는 콘텐츠가 텍스트 중심이 아닌 경우

• Z 패턴

모달은 사용자의 이목을 끌기 위해 사용하는 대화형 UI 요소 / 화면 전환 기법이다. 사용자가 모달 내의 정보를 주시하거나, 요구되는 작업을 완료하도록 강제하는 역할을 수행한다.

• 모달 창은 별도의 페이지가 아니라, 사용자가 기존에 하고 있던 작업창에서 오버레이 형태로 나타난다.

모달과 팝업의 차이점

모달과 팝업은 기본적으로 같은 기능을 지니고 있다. (부모 화면 위에 표현되고, 사용자가 작업을 계속하기 전에 모달/팝업과 상호작용하도록 함)

1. 팝업

• 시작과 동시에 공지, 프로모션, 주의사항, 안내문 등을 띄우는 용도로 사용됨
• 현재 의도하는 목적과 상관없이 뜨는 창

2. 모달

• 사용자에게 요구되는 사항에 맞게 띄움
• 다음 스텝으로 넘어가기 위해 필요한 창 ex) 로그인, 동의하기 등

모달뷰 종류

1. Fullscreen

• 전체 화면을 덮는 방식
• 사용자의 이목을 최대로 이끌어 내야 하는 경우 Fullscreen을 사용한다.

2. Sheet

• 새로운 자식 창을 띄우고, 뒷 부분은 background blur로 날려버리는 방식
• 기존 화면의 맥락을 잃지 않고 과업을 진행해야하는 경우 Sheet를 사용한다.

기본적으로 화면의 스크림 영역(background blur 처리된 곳)을 터치하여 기존 페이지로 돌아갈 수 있다. 하지만 blur 처리되지 않고, 기존 콘텐츠가 그대로 남아있을시 이 액션은 수행할 수 없다. 대신 기존 화면을 스크롤하고 터치하여 상세 페이지를 확인할 수 있는데, 이를 Non-modal 방식이라고 한다.

모달에 포함시켜야하는 요소

• 헤더 텍스트
• 본문 텍스트
• 그래픽
• CTA 버튼
• Call To Action Button 목표를 달성하기 위해 사용자의 특정 행동을 유도하는 것을 의미한다.
• X 버튼
• 배경

• User flow는 제품을 통한 사용자의 움직임을 설명하고, 진입에서 최종 상호작용에 이르기까지 사용자가 수행하는 모든 단계를 의미한다.
• 사용자가 의미 있는 목표를 달성하기 위해 거쳐야하는 단계들

User Flow 짜는 방법

1. User Goal 작성하기

User Goal : 사용자가 이루고자하는 목표 사용자의 시나리오로부터 목표와 작업을 추출해내는 작업

2. Task Flow 작성하기

사용자가 목표를 달성하기 위해 실행해야하는 각 단계 작업 흐름을 설계하는 작업

3. Wire Flow 작성하기

Wire flow : 와이어프레임과 플로우차트가 섞인 개념 Task Flow에서 수행하는 단계들을 와이어프레임으로 그린 뒤, 플로우를 추가하는 형태 화면 흐름을 설계하는 작업

4. User Flow 작성하기

UI 설계 과정에서 최종적인 이용 흐름을 완성하는 작업 기본적으로는 Task Flow와 비슷한데,

서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 차이점이 있음

Flow Chart (플로우 차트)

• 프로세스를 수행하기 위해 필요한 일련의 단계와 결정을 다이어그램 (시각적 자료) 으로 표현한 자료
• = 순서도

Flow Chart 플러그인

피그마 - "Flow Chart"

Flow Chart 도형

행위자와 환경 간의 관계, 혹은 이 둘 사이의 관계 속에서 존재하는 행위의 가능성 같은 행위라도 마주하고 있는 행위자에 따라 다른 어포던스를 제공하며, 행위자의 능력에 따라 무한히 제공

• 행동 유발성이 아니라, 행동 가능성이라는 것이 중요함

• 환경에 내제된 속성이 아니라, 행위자와 환경 사이에 존재한다

• 이 말인 즉슨, 물리적 특성이 아니다.

• 행위자가 어포던스를 자각하건 자각하지 않건, 행위자가 원하건 원하지 않건 간에 어포던스는 존재한다.

• 디자이너의 의도대로 사용자의 행동을 유도하는 것

2. 어포던스의 4원칙

1. 사용자의 다음 행위를 유도하는 버튼에는 어포던스 효과를 주어야하고, 그렇지 않은 버튼은 효과를 주지 않는다

좌측의 경우, 사용자가 특정 어떤 정보를 입력하지 않았음에도 불구하고 로그인 버튼이 액션버튼처럼 보여진다. 마이페이지에서 아이디와 비밀번호 입력을 요구하지 않는다면, 로그인 버튼은 최소화된 크기로 설정해야한다.

우측의 경우, 로그인 버튼이 더 강조되어야함에도 불구하고, 지문 로그인 부분이 강조되어있어 어포던스 효과를 잘못 부여한 사례에 해당한다.

이후 개편된 로그인 화면 : 로그인 버튼이 작은 크기로 구성되어 있으며 (좌) 로그인 버튼이 주기능, 페이스/터치 아이디로 로그인은 부기능으로 어포던스 형성이 잘 되었다 (우)

2. 기능을 조작할 때 버튼에 어포던스 효과를 주어 사용자의 다음 행동을 유도해야한다

편집 목록에서 아무 것도 선택하지 않았을 때는 삭제 버튼을 비활성화하고, 목록에서 선택이 되면 삭제 버튼을 활성화하는 방식으로 어포던스를 줄 수 있다.

채팅할 때 아무 것도 입력하지 않으면 전송 버튼이 비활성화, 텍스트나 이모지를 입력하면 채팅을 보낼 수 있도록 전송이 활성화되는 예시 또한 있다.

3. 과업 행위가 연속성이 있다면 다음 행위에 어포던스를 주어야한다

사용자가 해야할 행위가 끝나지 않았다면, 다음 행위를 수행할 수 없도록 미연에 방지한다. 개인정보 수집 동의를 하지 않으면 결제하기 버튼이 활성화되지 않다 사용자가 자신이 해야할 다음 행위를 인지하고 수행할 수 있도록 하는 예시가 있다.

4. 기능은 그 상태를 명확하게 보여주어 사용자의 다음 행위를 유도해야한다

다음 곡으로 넘어가는 버튼을 클릭할 수 있도록 재생버튼과 같은 색으로 설정한 것을 볼 수 있다.

이 경우, 다음 곡으로 넘어가는 버튼이 회색으로 처리되어 비활성화 상태인 것처럼 보인다.

작동할 수 있는 컴포넌트와 작동할 수 없는 컴포넌트의 (색) 구분을 명확하게 해야한다.

• 탭바는 스크린의 맨 아래에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 도움
• 사용자가 앱의 다른 부분 사이를 쉽게 이동할 수 있도록 돕는 하단 바
• 주로 앱의 주요 기능, 화면 사이를 이동하는데 도움이 됨

iOS에서는 Tab bar이라 하고, Material Design에서는 Navigation bar, Bottom Navigation 이라고 하는 등 명칭이 조금씩 다르다

2. 탭바의 기본적인 규칙

By default, a tab bar is translucent: It uses a background material only when content appears behind it, removing the material when the view scrolls to the bottom. A keyboard covers the tab bar when it’s onscreen.

기본적으로 탭바는 반투명하다 뒤에 콘텐츠가 있을 시에는 - 반투명한 탭바에 콘텐츠를 배경으로 한다. 뒤에 콘텐츠가 없을 시에는 - 콘텐츠가 배경으로 사용되지 않는다.

탭바는 화면의 하단에 위치한다

스마트폰은 한 손으로 사용하는 경우가 많다. 터치스크린은 특히 엄지손가락에 맞게 구성되었기 때문에, 탭바도 이 원칙을 따른다. 엄지손가락으로 가장 좋은 접근성을 가지는 곳이 화면의 하단이기 때문에, 대부분의 주요 인터페이스들은 화면의 하단에 위치한다.

데스크톱 경험을 위해 설계된 인터페이스는 주로 탐색 인터페이스 요소 (메뉴)들을 화면의 상단(Global Navigation Bar)이나 화면의 왼쪽에 배치하는 규칙을 따른다.

데스크톱 경험과는 다르게, 모바일 환경의 주요 컨트롤은 엄지손가락만 사용하여 탐색할 수 있는 영역인 Thumb zone에 있어야 한다.

사진과 같이 대부분의 화면을 Thumb zone에 위치시키고, 모바일의 주요 컨트롤은 화면의 하단에 위치시킨다.

3. 탭바의 구조

탭바는 최대 5개의 항목 탭으로 구성된다. 구성요소가 너무 많을 시, 사용자를 혼란에 빠뜨릴 수 있다.

여기에는 밀러의 법칙이 쓰인다.

밀러의 법칙 사용자가 작업 중인 기억에 5+2, 5-2 개의 항목만 유지할 수 있는 이론 한 번에 처리할 수 있는 정보의 한계를 제시

1. Icon

아이콘은 탭의 주요 기능과 콘텐츠를 상징적으로 표현한다. 일반적인 형태의 아이콘보다는 브랜드의 아이덴티티를 가진 아이콘을 사용한다. 의미가 명확하게 전달되지 않는다면, 레이블을 함께 사용한다

2. Label text

레이블 텍스트는 간결하게 작성하여 탭이 무엇을 할 수 있는지 직관적으로 전달한다. 작은 모바일 화면에서 긴 레이블은 피하도록 하자. 탭의 레이블은 앱 계층 구조의 최상위 콘텐츠, 기능을 의미한다. ex) profile(상위) - 프로필 편집 / 개인정보 / 주문내역 / 쿠폰 / 포인트 ...

3. Container

탭 아이템들을 감싸는 바 형태의 영역이다. iOS에서는 탭바 영역을 백그라운드 블러로 반투명처리하여 탭 아래에 콘텐츠가 있음을 암시한다.

4. Badge area

탭 아이템의 아이콘 오른쪽 상단에 새로운 콘텐츠가 있을 경우 배지를 표시한다.

4. Usage guidelines

모달 상태에서는 탭바를 노출하지 않는다

사용자가 직접 텍스트를 입력하는 등의 작업이 필요한 모달 상태에서는 탭바를 노출하지 않는다. 사용자가 작업을 완료하는데 집중할 수 있도록, 작업과 관련 없는 컨트롤은 숨긴다.

탭바의 항목을 5개 이상으로 하지 않는다

모바일에서 탭바는 3~5개를 권장한다. 6개일 경우, 화면의 복잡도가 높아지고, 터치 타깃의 크기가 작아져 잘못 터치할 수도 있기 때문이다.

탭바에 지나친 그래픽 요소는 사용하지 않는다

최근 인터페이스 요소의 그래픽은 단순해지고 있는 추세이다. 콘텐츠의 가독성을 높이기 위해서는 내비게이션 요소의 그래픽은 최대한 단순화한다.

또한, 탭바의 영역은 지나치게 강조하지 않도록 주의한다. 탭바 영역에는 포인트 컬러만 주어 사용자의 위치를 확인할 수 있도록 한다. 탭바 영역 전체가 포인트 컬러가 되어서는 안된다.

• 동일한 화면에서 다양한 버튼 유형을 사용하여 사용자의 주의를 끌 수 있음
• 총 9가지 유형
• 각각의 버튼에 high, medium, low emphasis가 있음
• 각 버튼마다 집중도가 다르다

High emphasis

• 페이지의 목적에 맞는 주요 기능들에 부여한다.
• 9. Extended FAB*
• 작성, 새 스레드, 새 파일 만들기 등
• 8. FAB*
• 작성하기
• 2. Filled button*
• 저장, 확인, 완료

Medium emphasis

• 페이지의 주요 기능은 아니지만 눈에 띄어야하는 요소
• 3. Filled tonal button*
• 저장, 확인, 완료
• 1. Elevated button*
• 답변, 전체보기, 장바구니 담기, 휴지통에서 꺼내기
• 4. Outlined button*
• 답변, 전체보기, 장바구니 담기, 휴지통에서 꺼내기

Low emphasis

• 추가적으로 필요한 정보, 기능
• 5. Text button*
• 자세히 알아보기, 모두 보기, 계정 변경, 켜기
• 7. Segmented button*
• 왼쪽 정렬/ 가운데 정렬/ 오른쪽 정렬
• 6. Icon button* 즐겨찾기에 추가, 인쇄

버튼 계층

• 기본 작업 버튼 각 화면에는 주요 동작을 위한 눈에 띄는 버튼이 하나 있어야 한다. 다른 버튼보다 가장 많은 주의를 끌어야 함.

• 기타 버튼 레이아웃 내에서 한 번에 두 개 이상의 버튼을 나타낼 수 있다.

• 여러 버튼을 사용할 때, 한 버튼의 사용 가능 상태가 다른 버튼의 비활성화 상태와 유사하지 않도록 디자인해야한다.*

배치

1 - Filled button / High emphasis 2 - Text Button / Low emphasis 3 - Extended floating action button / High emphasis

1. 동시에 두 작업을 해야할 시

• 버튼의 위계를 고려하여 주요 작업 버튼에 강조를 주고, 옆에 있는 버튼은 낮은 위계 처리를 하여 덜 강조한다.

2. 동시에 두 작업 (2) + 한 페이지 내에서의 액션

• 어떤 버튼을 사용하는가는 상관 없다. 다만 버튼 사이의 위계가 있어야한다
• 한 페이지에서의 주요 액션 시, Filled button을 사용할 것

3. (Don't) 여백이 충분할 시

• 가로로 배치 할 수 있는 여백이 충분할 시, 버튼을 세로로 배치하는 것을 지양할 것
• 공간이 충분하면 가로로 배치해도 된다.

• 레이아웃을 사용하여 사용자가 수행하려는 작업에 집중할 것
• GMD 에서는 총 5가지 레이아웃 사이즈
• -compact* 화면 너비가 600dp 언더 ex) 핸드폰
• -medium* 화면 너비가 600dp 이상 839dp 이하 ex) 태블릿, 폴더블 폰
• -expanded* 화면 너비가 840dp 이상 1199dp 이하 ex) 태블릿, 폴더블 폰, 데스크탑
• -large* 화면 너비가 1200dp 이상 1599dp 이하 ex) 데스크탑
• -extra-large* 화면 너비가 1600dp 위 일 때 ex) ultra-wide 모니터

2. 레이아웃 구성

1. Column (열) 수직 콘텐츠 블록
2. Fold
3. Margin

-화면 가장자리 ~ 화면 내부의 요소 사이의 공간 4. Pane 5. Drag handle -창 크기를 조정하는 요소 -폴더블 기기에서 여러 개의 콘텐츠 창이 있을 시 Drag handle로 크기 조정 가능 6. Spacer 7. Window

• 구성 요소 또는 UI 요소의 상호 작용 상태를 보여줌
• selection, hover 두 가지가 있는데 이 둘이 결합될 수 있음

1) Enabled / Disabled

• 사용자가 작동시킬 수 있는 버튼과 작동시킬 수 없는 버튼을 구분할 것
• Enabled는 다음과 같은 states에 적용시킬 수 있다

1. Button
2. FAB (Floating Action Button)
3. Switch
4. Text field

• Disabled는 구성 요소나 요소가 상호작용하지 않을 때 작동한다.

1. Checkbox
2. Icon Button
3. Radio Button
4. Segmented button 에 쓰일 수 있으며, Enabled와 색상의 차이와 대비를 주어 구분할 수 있다.

Disabled 쓰일 수 없는 곳

1. App bars
2. Badges
3. Dialogs
4. FAB
5. Menus
6. Navigation bar, drawer, rail
7. Sheets
8. Tabs
9. Tooltips

Disabled 컴포넌트는 drag, focus 될 수 없으며, 마우스를 올려도 상태가 변하지 않을 것

2) Hover / Focused

1. Hover

• 호버는 사용자가 커서를 대화형 요소 위에 멈춰 놓을 시 작동한다.
• Drop shadow, 색상 변경 등을 통해 hover을 표시할 수 있음
• 호버는 Focused, Activated, selected, pressed 와 함께 쓰일 수 있다
• 레이아웃 내에서는 한 번에 하나의 호버 상태만 존재할 수 있음
• Hover는 다음과 같은 states에 적용시킬 수 있다

1. FAB (or Buttons)
2. Icon Button
3. Chips
4. Segmented buttons
5. Checkbox
6. Text fields

• Hover 사용될 수 없는 곳

1. App bars
2. Badges
3. Dialogs
4. Menus
5. Navigation bar, drawer, rail
6. Sheets
7. Tabs

2. Focused

• 클릭해서 선택하거나, 키보드 Tab 키로 접근 가능
• Hover와 비슷하지만, 다른 단축키에서 작동할 수 있다는 차이점
• 레이아웃 내에서 한 번에 하나의 포커스 상태만 존재할 수 있음
• 사용될 수 없는 곳은 Hover와 같나, 포커스는 Tabs 가능*

3) Pressed / Dragged

1. Pressed

• 커서, 키보드, 음성 입력 등을 통해 사용자가 시작한 탭, 클릭을 전달함
• 눌린 상태는 변화를 유발 : 강조되어야함
• 누를 시 색상 변화 애니메이션, 색상 변화 등을 주어 강조해야함
• 레이아웃 내에서는 한 번에 하나의 Pressed 상태만 존재할 수 있음
• Pressed 사용할 수 있는 곳

1. FAB(or Buttons)
2. Icon Button
3. Chips
4. Segmented button
5. Checkbox
6. List items
7. Text fields

• Pressed 사용할 수 없는 곳

1. App bars
2. Badges
3. Botton navigation
4. Dialogs
5. Menus
6. Sheets
7. Tabs

2. Dragged

• 드래그 상태는 사용자가 요소를 눌러 움직일 때 발생
• 드래그는 사용자의 작업에서 주의를 산만하게 하지 않도록 강조가 낮아야함
• 드래그된 상태는 낮은 강조 오버레이를 사용함
• 레이아웃 내에서 한 번에 하나의 드래그 상태만 존재할 수 있음
• Dragged 사용할 수 있는 곳

1. Chips
2. Card
3. List items
4. Slider

• Dragged 사용할 수 없는 곳

1. App bars
2. Badges
3. Buttons
4. Menus
5. Navigation bar, drawer, rails

1. 호기심의 틈 (Curiosity Gap)

사용자가 누락된 정보를 찾아보려는 욕구

• 사용자가 어떤 정보를 알고 있고, 어떤 정보를 모르는지에 대한 궁금증을 자극한다.

이런 식으로 스포티파이에서 wrapped가 업데이트되면 알림이 온다.

You listened to 5,652 songs in 2022 What will it be this year? Keep your eyes peeled for Wrapped 2023

두 알림창 중 무엇을 더 누르고 싶은가? 당연히 궁금증을 유발하는 아래 알림창일 것이다.

이처럼 사용자가 아는 정보 (Your #1 song in 2022 was ~) 와 모르는 정보 (이번 년도의 #1 song)를 제공함으로써 사용자로 하여금 궁금증을 유발하는 방법이다.

2. 변동성 보상 ( Variable Reward)

예상치 못한, 불규칙한 보상이 이루어질 때 사용자를 더욱 흥미를 느낀다.

• 이는 사용자가 계속 어떤 행동을 계속 하도록 동기를 부여하는 역할을 한다.

Wrapped를 열면 이런 식으로 지금까지 사용자가 들었던 아티스트의 인원이 제시되면서 사용자가 가장 많이 들었던 아티스트는 제공하지 않는다.

이는 사용자가 다음 행동을 하도록 유도하는 장치이다.

호기심을 유발한 후, 사용자가 다음 행동을 넘어가면

이런 식으로 사용자가 보상 (자신이 많이 들었던 아티스트의 이름을 제시해주는) 을 얻게 된다.

3. 스토리텔링 (The impact or Story Telling)

사용자가 했던 경험을 이야기처럼 풀어나가면, 단순한 사실보다 사용자가 자신이 했던 경험을 기억하기 쉽다

사용자가 음악을 들었던 시간대 등을 측정하여 "함께 했던 추억" 이라는 이름 하에 Wrapped를 구성하였다.

4. 딜라이터 (Delighters)

사용자가 생각하지 못하였던 요소지만, 존재함으로써 사용자에게 감동을 주고 좋은 경험 또한 제공해주어, 사용자가 다음에도 서비스를 찾게 한다.

화려한 그래픽적 요소와 애니메이션은 사용자들이 기억하기에도 쉽고, 보기에도 좋다.

5. 프레이밍 (Framing)

정보의 제시 방식이 어떻냐에 따라, 사용자의 결정에 어떻게 영향을 미치는지에 대한 원리

식품의 영양성분을 볼 때,

"지방 20% 함유" "지방 함유량 80% 낮춤"

이라면 무엇을 구매하겠는가? 당연히 전 제품에 비해 지방 함유량을 80% 낮춘 후자를 택하겠지만, 사실 두 상품은 같은 상품이다. (지방을 20% 함유한!)

스포티파이에서는 Framing 방식을 차용하여 유의미한 숫자를 통해 사용자와 스포티파이라는 브랜드와의 관계, 스포티파이라는 브랜드가 사용자의 삶에서 얼마나 큰 부분을 차지하는지는 보여주는 역할을 한다.

6. 밴드웨건 효과 (Bandwagon Effect)

이미 많은 사람들이 신념, 제품, 또는 행동 등을 받아들였기 때문에 다른 사람들도 이를 따르려는 경향

스포티파이의 Wrapped를 인스타그램 스토리에서 본 적이 있다. 사실 친구들이 올린 것을 보고 스포티파이에 접속하여 나의 Wrapped를 확인하였다.

이처럼 스포티파이는 주변 사람들의 유행에 편승하여 자신의 Wrapped를 SNS에 공유할 수 있도록 한다.

7. 마무리

Wrapped의 마지막 화면은, 사용자에게 정보를 추천해주는데, 이곳에서도 심리학 법칙들이 쓰였다.

1. 개인화 (Personalization)

*After crunching all this data, we realized you missed out on one of the top hits in your favorite genre .. : *

-사용자의 취향에 맞는 곡을 추천해주는 역할

2. 포모 FOMO (Fear Of Missing Out)

• 무언가를 놓치거나, 다른 사람들에 비해 뒤쳐지는 것에 대한 두려움, 세상의 흐름에 자신만 소외된 것 같은 공포감
• "You missed out" => 사용자가 놓친 것을 알려줌 (노래 추천)

3. 특이성 효과 (Singularity Effect)

• 사용자가 그룹보다 개별 개체에 불균형하게 관심을 가지는 현상
• 그룹(플레이리스트 추천) 보다는 개별적인 것(노래 한 곡)을 추천해주어 관심을 끎

• 한 페이지에 하나의 액션 사용자로 하여금 해당 페이지에서 어떤 액션을 할지 고민하는 시간을 단축해준다. (목적 달성을 위한 시간을 줄여줌) - 좋은 사용자 경험 예시

반면, 한 페이지에 지나치게 많은 정보를 지니고 있으면, 페이지 당 체류 시간이 길어져 좋지 않은 사용자 경험을 불러일으킬 수 있으므로 한 페이지 당 contain 하고 있는 정보는 되도록이면 많지 않게.

• 명확하고 즉각적인 피드백 사용자가 특정 액션을 취했을 때, 그리고 해당 페이지에서 오류가 발생할 때 즉각적인 피드백이 있어야 함.

사용자가 어떤 행동을 취하고, 그에 따른 오류가 발생하거나 로딩이 있을 때 다음과 같은 피드백 화면이 존재해야 사용자가 심리적인 안정감을 느낄 수 있다.

2. 넷플릭스

• 무한 재생 기능 넷플릭스를 시청해보면, 영상이 끝날 때 자동적으로 다음 영상으로 넘어간다. 이는 틱톡과 핀터레스트 등과 같이 무한으로 새로운 콘텐츠를 추천 받는 것과 같은 매커니즘.
• 무한 재생 기능 => 굳이 소비할 필요 없는 콘텐츠를 소비하게 하는 기능 수행*

• 흥미로운 섬네일 넷플릭스에서 사용자가 섬네일을 선택하는 것에는 평균적으로 1.8초가 소비된다고 한다. 섬네일에 등장인물의 표정을 활용하는 것은 좋은 전략이 될 수 있음 => 표정에서 복잡한 감정, 뉘앙스를 밀도 있게 담아낼 수 있기도 함.

• 추천시스템 사용자의 취향에 맞는 영상을 추천함으로써 접속 시간을 늘리는 전략

3. 틴더

• 게이미피케이션 전략

게이미피케이션 : 게임이 아닌 상황에서 게임의 원리를 녹이는 UX 형식 중 하나.

1) 좌우 스와이프 -간단한 액션이지만 빠른 피드백을 제공해줌 2) 슈퍼 라이크 -스와이프보다 강력한 기능. 3) 부스트 -30분 동안 주변 사람에게 내 프로필이 가장 먼저 보이는 기능 4) 프로필 점수 -프로필 완성도에 따라 부여되는 점수가 다름

이런 게이미피케이션 요소들은 사용자가 앱을 더 자주 이용하게 만드는 요소로 작동한다.