[UI / UX] UI / UX 분석

분석대상 : 마켓컬리

 

1. UI 분석

1-1. 사용중인 UI 디자인 패턴

• 탭(Tab) → ‘홈'메뉴의 헤더에서 메뉴 선택 시
• 캐러셀 → ‘홈’ 메뉴
• 무한스크롤 → ‘홈’ 메뉴
• 자동완성 → ‘검색'메뉴
• 모달 → ‘홈' 메뉴
• 아코디언 → ‘카테고리' 메뉴
• 드롭다운 → 장바구니 담기 시 확인 가능.
• 토글 → ‘찜'기능
• 태그 → ‘kurly only’ 기능
• GNB & LNB :
  • GNB : 하단의 ‘홈', ‘카테고리', ‘검색', ‘마이컬리' 메뉴바
  • LNB : 카테고리 내 하위 카테고리

---

1-2. 컬럼 그리드 시스템 사용 여부

• 스마트폰 버전: 4개 적용 확인.

• PC 버전 : 12 개 적용 확인.

---

 

2. UX 분석

2-1. 피터 모빌의 UX 7요소 충족 여부

1. 유용성 : 사용 가능한가?
   1. 마켓컬리는 쇼핑몰로서, 쇼핑몰의 기능을 수행하는지 확인이 필요.
      1. 상품을 확인할 수 있는가 → YES
      2. 내가 원하는 상품을 담을 수 있는가 → YES
      3. 담은 상품을 구매(결제)할 수 있는가 → YES
      따라서, 마켓컬리는 유용성 기준을 충족시킨다고 볼 수 있다.
2. 사용성 : 사용하기 쉬운가?
   1. 사용자에게 이미 친숙한 UI 디자인 패턴들을 사용 → 어려움없이 익숙하게 사용 가능.
   2. 직관적으로 제품을 알아볼 수 있도록 함.
3. 매력성
   1. 마켓컬리의 이미지 개성, 독자성, 브랜드 명성을 지님 : 예) 보라색 컬러
   2. 사진, 이미지의 통일성 : 모든 이미지 사진이 깨끗하고 깔끔하며 먹음직한 이미지를 제공 → 소비자들의 구매 욕구를 자극.
   3. 새벽 배송 시스템
4. 신뢰성
   1. 허위/과장 광고, 사기 등의 논란이 있긴 하였으나, 그럼에도 많은 소비자들이 믿고 구매.
   2. 업계 1위의 새벽 배송 시스템
5. 접근성
   1. 제품 사진은 직관적으로 한 눈에 상품을 알아볼 수 있게 되어있어 사진만 보고 구매 시 접근성은 높다고 할 수 있으나, 글자 키우기 기능이나 돋보기 기능을 제공하지 않다는 점에서는 고연령자나 장애인이 이용하기에는 접근성이 떨어진다고도 할 수 있다.
6. 검색 가능성
   1. 검색메뉴가 상단에 있고, 자동 완성 기능이나 카테고리별로 구분이 되어 있어서 검색 가능성이 높다.
   2. 아이콘의 활용 : 아이콘을 통해 제품의 카테고리를 직관적으로 알 수 있어 검색 가능성을 높여 준다.
7. 가치성
   1. 1~6 고르게 적용이 되어있다는 점에서 가치성이 있다고 봄.
   2. 새벽 배송 시스템 : 사용자들이 공통적으로 중요하게 생각하는 요소로서, 마켓컬리가 집중하고 있는 요소 → 마켓컬리 만의 독자적이고 차별적인 가치를 제공.

 

---

2-2. User flow 그려보기

https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMRsopXNyn9HDOndhfKW9Lx%2FUntitled%3Fnode-id%3D0%253A1

 

Figma

 

---

3. 사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부

1. 시스템 상태의 가시성 (Visibility of system status)

• 피드백이 존재 :
  • 장바구니 버튼 : 장바구니 추가 시, 아이템이 장바구니에 담긴 것이 확인 가능(장바구니 아이콘 숫자 변경 및 알림 멘트 표시).
  • ‘찜' 하트 버튼 : 클릭 시, 하트 색깔이 바뀌면서 찜 목록에 아이템이 담긴 것이 확인 가능.

 

2. 시스템과 현실 세계의 일치 (Match between system and the real world)

• 카테고리 내 아이콘 : 현실 세계와 일치하는 친숙한 그림으로 표시.
• 장바구니 아이콘 : 현실 세계에서 사용하는 요소를 적용.

 

3. 사용자 제어 및 자유 (User control and freedom)

• 장바구니 내 아이템 삭제 기능 : 실수로 아이템을 장바구니에 추가해도, 장바구니에서 ‘x’ 버튼을 클릭함으로써, 취소가 가능하다.

 

4. 일관성 및 표준 (Consistency and standards)

• 외부 일관성 : 사용자에게 익숙한 일반적인 쇼핑몰 앱의 구조 및 디자인 패턴을 사용하고 있다.
• 내부 일관성 : ‘상품의 회사명-상품명-가격-가격한줄설명’의 구조로 모든 아이템이 일관적이인 정보 제공 방식으로 정보를 제공하고 있다.

 

5. 오류 방지 (Error prevention)

• 장바구니 삭제 버튼 : 삭제 버튼 클릭 시, 삭제 여부를 재확인 하는 창이 표시.

 

6. 기억보다는 직관 (Recognition rather than recall)

• ‘최근 본 상품’, ‘최근 검색어’ 등의 기능을 제공하여 사용자가 기억해야 하는 정보를 줄여줌.

 

7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)

• ‘배송지 관리', ‘찜' 기능이 이에 해당.

 

8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)

• 중요한 메뉴만 선정하여 상단의 메뉴바로 구성 : 세부 항목은 상위 항목의 카테고리로서 필요할 때만 볼 수 있게 숨김처리.

 

9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)

• 회원가입 시, 아이디 및 패스워드에 올바른 형식을 입력하도록 사용자에게 알려주는 기능 제공.

 

10. 도움말 및 설명 문서 (Help and documentation)

• 배송지 등록 : 배송 아이콘 호버 시, 배송지를 등록하면 간편하게 이용할 수 있음을 알려줌.
• 검색창 : 검색어를 입력 시, 원하는 아이템 검색이 가능함을 알려줌.
• 옵션 선택 : 옵션 미선택 시, 옵션을 선택해야 장바구니에 추가할 수 있음을 알려줌.

 

---

 

Advanced Challenge

만약 개선할 수 있는 부분을 찾았다면, 클론한 피그마 상에서 개선해보세요.

• 제품 상세 페이지에서 상단 제품 이미지에 ‘돋보기’ 기능 추가 필요해보임.

 

---

#느낀점

이번 챕터 공부를 하면서 어떠한 기준으로 application을 제작해야하는지 알 수 있어서 유익했다.

향후 프로젝트 진행 시, 적용해보고자 한다.