[디자인 카타] 에이블리와 지그재그의 배송 현황 화면 어떤 이유로 보여주는 형태가 다를까?

 

1. 주제 선정

 

PC에서 상세 정보 보기, 어떤 방식이 다량의 정보를 탐색할 때 편한가요?

 

2. 개인 의견

 

[A 에이블리] 선택

 

왜 해당 UI가 더 좋은지?

• 프로그래스바가 상단에 위치해 있어서 현재 배송 단계를 한눈에 파악 가능함 + 사용자가 궁금해 하는 단계(출고, 배송중, 도착)가 바로 드러남
• 텍스트를 읽어 해석하는 과정 없이 바로 상태를 이해할 수 있음

 

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

• 텍스트 중심이라 진행 상황이 와 닿지 않음
• 각 단계를 일일이 읽어야 해서 확인 과정이 번거로움
• 텍스트가 많아질수록 핵심 정보가 흐려짐

 

실사례 조사

• 2024년 전자상거래 주문 추적 페이지 디자인 10가지
  • 많은 인기 디자인이 진행률 표시줄 같은 시각적 요소를 사용함 (자라, 베스트 바이, 펫스마트, … )
    → 시각적 진행률 표시기는 주문 진행 상황을 정확히 보여줌으로써 사용자 경험을 향상시킨다고 함

Top 10 Order Tracking Page Designs to Inspire Your E-commerce Store 2024

 

3. 공통의견 및 정리

✊ 팀원 모두  [A 에이블리] 선택

 

📖 A 에이블리 선택 이유 정리

• 한눈에 현재 위치 파악
  • 상단 프로그레스바로 배송 단계(출고, 배송중, 도착 등)를 직관적으로 확인 가능
  • 사용자가 텍스트를 읽지 않아도 현재 상태를 즉시 이해
  • 재방문 시에도 빠르게 현황 확인 가능
• 인지부하 최소화
  • 숫자나 표를 해석할 필요 없이 시각적 신호 중심으로 정보 제공
  • 모바일 환경이나 초보 사용자에게 친화적
• 감정 케어
  • “배송중” / “도착” 등 상태를 크게 보여 불안 감소
  • 고객 문의(CS) 발생 가능성을 낮춤
• 주문 상품 식별 용이
  • 각 상품 사진을 함께 보여주어 어떤 상품의 배송인지 쉽게 확인
  • 여러 상품 주문 시, 개별 배송 상태 파악 가능
• 과거 기록 대비
  • 지난 배송 기록은 회색으로 표시 → 현재 배송 단계가 더 명확하게 대비됨
• 핵심 목표와 정합성
  • 화면의 1차 목적은 “배송 상태를 빠르게 알기”
  • 사건 기록 열람이 아닌 정보 전달 중심 설계

 

기억에 남는 팀원들 의견

• 네이버 쇼핑 사례: A안과 B안의 하이브리드 형
• 색 대비가 낮으면 정보가 배경에 묻혀 찾기 어려움.
  따라서 폰트 컬러 대비는 사용자의 집중력과 정보 인지 속도에 큰 영향을 미침

 

 

결론

• 프로그레스바 기반 배송 현황 UI는 사용자가 현재 배송 상태를 직관적이고 빠르게 이해할 수 있도록 돕고, 인지 부담을 줄인다