[디자인 카타] 장바구니가 비었을 때 어떻게 보여주는 것이 좋을까?

 

1. 주제 선정

 

장바구니가 비었을 때 어떻게 보여주는 것이 좋을까?

 

2. 개인 의견

 

[왼쪽 A] 선택

 

왜 해당 UI가 더 좋은지?

• 바로 이동 가능한 버튼이 화면의 중앙에 위치해 있어 모바일에서 터치하기 쉬움
• 버튼의 형태가 크고 배경색과 대비되어서 눈에 띔
• 이동 버튼을 통해 쇼핑의 흐름을 자연스럽게 이어줌

 

나머지 하나는 왜 선택하지 않았는지?

• 장바구니가 비었을 경우 보통 상단의 이전으로 가기 버튼을 클릭해야 해야 하는 데 사용자의 손가락 위치와 멀어서 조작이 불편함 장바구니가 비었다는 상태만 전달하기 때문에 다음 행동을 유도하는 것이 없어 이탈할 가능성이 있음

 

의견을 뒷받침할 수 있는 사례

UI 공백을 콘텐츠로 채우는 방법 | 요즘IT

• 빈 화면을 마주한 사용자에게 짧지만 강한 경험을 선사하는 것: 사용자 한 명 한 명을 케어하고 있다라는 브랜드 가치를 보여주는 일이기도 함
• 공백을 그대로 두면 안되는 이유: 의미 있는 사용자 경험을 제공할 수 없음 + 사용자가 다음 맥락을 이해하는 데 도움을 줄 수 없음 + 맥락을 잇는 것이 없으면 사용자는 흥미를 잃고 탐색하기를 포기할 수 있음

 

실사례

• 오늘의 집, 29cm, 배달의 민족: 버튼 존재
• 컴포즈: 문구만 안내

순서대로 오늘의 집, 29cm, 컴포즈

 

3. 공통의견

✊ 팀원 3명  [왼쪽: CTA 버튼] 선택
✊ 팀원 1명  [오른쪽: 텍스트 문구와 그래픽] 선택

 

왼쪽: CTA 버튼을 선택한 이유

• 버튼이 크고 눈에 띄며 사용자의 다음 행동을 자연스럽게 유도함
• B에 비해 버튼이 있어 이탈 가능성을 낮춤

 

오른쪽: 텍스트 문구와 그래픽을 선택한 이유

• 시각적 + 형태가 더 매력적임
• 구조가 잘 되어 있어 시각적인 자연스러운 연결이 좋음

 

결론

• 사용자의 다음 행동을 자연스럽게 유도하려면 CTA(Call to Action)를 적극적으로 활용해 탐색 흐름을 끊기지 않게 설계해야 한다. A안의 버튼처럼 명확한 액션을 제공하고, B안의 시각적 그래픽 요소는 강약을 조절해 조화롭게 배치하면 더 나은 사용자 경험을 만들 수 있다.

 

---

기억에 남는 팀원들 의견

• 공백을 채우는 4가지 방법(안내만 이는 수동형 빈화면, 안내 + 행동 유도를 함께하는 액션형 빈화면, 정보를 제공하는 정보제공형 빈화면, 튜토리얼형)
• 이케아 장바구니 개선 결과: 참가자는 CTA 버튼 + 추천 상품이 있는 경우를 더 선호함
• 장바구니가 비어 있을 때 맞춤형 제품을 보러 가게 유도하는 A안의 방식은 긍정적이며, B안의 시각적 그래픽과 조화를 이루도록 적절히 섞으면 더 효과적인 UI를 만들 수 있다.