깊게 생각하는 앱 크리틱-
지그재그 2
https://brunch.co.kr/@qhana/14
위 글과 이어지는 지그재그 앱 크리틱 글입니다.
3-1. 디자인 시스템 및 인터페이스
디자인 일관성
BI
이미지 : 발랄한, 개성 있는, 현대적인
주 사용자 군인 Z세대 여성에게 어필할 수 있으며 타 앱과 차별화된 브랜드 컬러를 사용했다.
마이크로 인터렉션을 곳곳에 삽입하여 동적이고 발랄한 느낌을 더했다. 브랜드 톤 앤 매너와 사용성이 일치하는 긍정적 경험을 준다.
컬러
메인 컬러
핑크 : 구매행동 관련 선택지
결제 관련 (z페이, 구매하기 버튼, 결제 페이지 약관 동의버튼, 할인율 등) 구매 행동에 긍정적 영향을 줄 수 있는 곳에 적절한 사용 했다.
블랙 (다크 모드 시 화이트) : 구매행동 외의 선택지
마케팅 수신동의, 옵션 선택, 쇼핑몰 연결, 주문 취소, 장바구니 상품 취소 등에 사용했다.
서브 컬러
그린 : 확정, 안전 = 구매확정
레드 : 경고, 불가, 취소 = 비밀번호 변경
블루 : 일시적 안내 = 툴팁, 신상품 안내, 쿠폰팩 아이콘
→ 컬러 비주얼 구조는 잘 잡혀있는 편이다.
일러스트, 아이콘
일러스트는 BI와 일관성 있는 핑크톤과 블랙 라인을 사용했다.
하단 네비 아이콘은 라인 두께와 크기가 일정하며 선택 시 블랙 풀컬러로 강조된다.
버튼
버튼 종류 :핑크 솔리드&라인, 그레이 솔리드&라인, 블랙 솔리드
필터와 상세 옵션의 미선택시 둘 다 그레이 라인 버튼이나, 필터의 선택 상태를 핑크 라인, 상세 옵션의 선택 상태는 블랙 솔리드로 처리하여 일관성이 떨어지는 느낌을 받았다.
구매 관련 선택지는 버튼에서도 핑크 색상으로 나타내고 있다.
가독성
그리드
다양한 쇼핑몰의 각 상품 사진들이 동일한 비율(1:1.2)로 통일했다. 앱 기본 설정은 홈 화면 2단 그리드 외 나머지 페이지 3단 그리드이다. 설정에서 변경 가능하다.
2단 그리드를 적용한 화면에서는 비교적 정보가 안정적으로 파악 가능하다. 하지만 3단 그리드 화면에서는 다소 정보가 밀집되어 보인다. 또한 무료배송 상품의 경우 상품 사진과 겹쳐져 더 복잡해 보인다. 기본 설정으로 찜한 아이템, 최근 본 아이템 카테고리 확인 시에만 3단 그리드를 활용하여 이미 탐색한 정보를 다시 보는 사용자 경험을 빠른 속도로 제공할 때 사용하면 좋을 것 같다.
계층구조
쇼핑몰을 강조해야 할 쇼핑몰, 모아보기_무료배송_쇼핑몰 화면에서는 쇼핑몰명을 볼드로 강조하고, 제품을 강조해야 할 탭인 메인 홈, 모아보기, 찜한 아이템에서는 가격을 볼드로 강조하여 정보의 위계를 잘 살렸다.
개선이 필요한 부분
버튼 체계
핑크 솔리드에 대한 Disable 버튼 필요성
핑크 솔리드의 Disable 체계가 없어 사용성이 일관되지 못하는 상황들이 발생한다.
토스트 안내
필수 구매 옵션을 선택하지 않은 상황에서 버튼은 Disable 상태가 아니며, 옵션 미선택 상황에서 버튼 클릭 시 토스트로 옵션을 선택할 것을 권장한다.
팝업 안내
이미 쿠폰을 받은 사용자의 화면이지만 버튼은 Disable 상태가 아니며, 클릭 시 팝업으로 발급 여부를 안내하고 쿠폰 확인으로 유도한다. 쿠폰 보유 현황을 한번 더 상기시켜주는 점은 좋으나, 팝업 없이 바로 버튼에서 보유 쿠폰 확인하기 페이지로 넘어가는 것은 어떨까 생각했다.
회색 솔리드
장바구니 전체 구매 Disable 상황에서는 회색 솔리드 버튼이 나타난다. 쇼핑몰별 구매 버튼을 클릭하면 토스트로 불가능을 안내한다.
한 화면에서 두 가지 사용성이 한 번에 나타나 혼란을 준다.
구매 버튼 클릭 시, 라디오 버튼에 마이크로 인터렉션을 추가하여 현재 미선택 상태임을 상기시켜주는 방향으로 개선하면 좋을 것 같다. 일관성 있는 Disable 버튼 체계가 필요해 보인다.
카테고리 보기
핑크 텍스트 버튼 : 모아보기 카테고리 안에서 선택 시
블랙 텍스트 버튼 : 홈(베스트)
아이콘 : 모아보기 카테고리
선택 상태 표시가 세 가지 방식으로 제공되어 통일성이 저하된다. 또한 카테고리 좌우 스와이프 선택에서 화면을 벗어나 지나치게 길어지는 사례를 찾아볼 수 있다.
인터페이스 전체 평
좋은 부분
지그재그의 BI(여성 쇼핑몰, 핫핑크)가 잘 드러나도록 설계되어 일관성이 있고, 보기 쉽도록 가독성이 좋은 디자인 시스템을 갖추고 있다.
개선해야 할 부분
가독성이 떨어지는 3단 그리드 사용, 일관성이 떨어지는 버튼 체계가 아쉽다.
3-2 인터렉션
좋은 인터렉션 사례
마이크로 인터렉션이 거의 모든 곳에 존재하여 지그재그의 타겟층에 맞게 발랄하고 통통 튀는 느낌을 준다.
아쉬운 인터렉션 사례
쇼핑몰 바로가기 버튼
현재는 하단 플로팅 버튼으로 배치되어 스크롤이 길어지는 경우 쇼핑몰 정보가 콘텐츠와 함께 스크롤 업 되면서 사라진다. 또한 쇼핑몰 바로가기는 플로팅 버튼으로 배치되어 탐색 시 정보를 가린다.
이를 쇼핑몰 썸네일과 이름이 있는 상단 정보 구역을 스크롤 시에도 고정되어 보이도록 하여 사용자로 하여금 탐색 중인 쇼핑몰을 파악할 수 있도록 개선하면 좋을 것 같다. 또한 쇼핑몰 바로가기는 상단 정보 부분(썸네일, 이름)을 터치하여 이동하게 하는 것이 사용자에게 인지된 안정성을 부여할 것이라 생각한다.
찜한 아이템_Z결제 라디오 버튼
'Z결제' 라디오 버튼을 눌렀을 때, 아무런 인터랙션 없이 단순하게 Z결제가 불가능한 아이템들만 사라지는 것을 볼 수 있다. 폴더 안에 Z결제가 가능한 아이템들만 있을 경우에는 반응이 없이 적용되기 때문에 사용자로 하여금 동작에 관한 피드백이 부족하다는 느낌을 줄 수 있다. UI박스에 'bounce'나 'tada' 모션을 넣어서 사용자에게 피드백하는 방향으로 개선하거나, 짧게 새로고침을 알리는 스피닝 휠 넣으면 좋을 것 같다.
4. 시장 위치 및 경쟁사
경쟁사 (브랜드, 에이블리) 대비 2019년 기준 다운로드 수와 이용자 수가 많아 여성 쇼핑몰 어플 업계 1위임을 확인할 수 있었다.
경쟁사 대비 지그재그의 핵심 강점 3가지
1. 개인화를 위한 빅데이터
연결에 집중하기 위한 개인화 데이터
직접 물류를 하기보다는 여러 쇼핑몰의 사용자 경험을 데이터를 통해 잘 연결하는 데 집중했다. 더 나은 연결을 위해서 ‘데이터’를 활용한 16개의 사용자 맞춤형 클러스터를 사용한다.
경매가 아닌 AI 엔진 기반의 균형 있는 좋은 광고
광고비는 ‘노출 건당 고정비’로 평등하게 과금된다. 그러니까 지그재그는 앱 메인화면의 일정 구간을 슬롯으로 경매하듯 판매하는 방식을 사용하지 않는다. AI 엔진의 광고를 통해 여러 가지 사용자의 빅데이터로 유저 개인 맞춤형 상품을 첫 페이지 전체에 노출한다.
2. 3000여 개 쇼핑몰 탐색을 더욱 쉽게, UI/UX
아쉬운 부분들은 존재하지만 지그재그는 3,700개의 쇼핑몰을 보유했지만 깔끔한 사용감을 자랑한다. 사진 비율 또한 모두 다른 쇼핑몰들을 고려해 최적의 비율로 조정하는 등, 인터뷰에서 지그재그의 UX에 대한 고민을 엿볼 수 있다. 디자인 시스템 부분에서 정리했던, 카테고리 통일성과 어지러운 사진 레이아웃 정도를 정리하면 사용자가 앱을 사용하는 데 있어서 큰 혼잡함을 느낄 수 없을 것이라고 생각한다.
3. 편리한 통합 아이디와 Z결제
2019년 10월 통합 결제 서비스인 'Z결제'를 도입했다. 각각의 쇼핑몰에 가입할 필요 없이 통합 로그인 후 Z장바구니에 담고 Z결제 서비스로 한 번에 결제를 하면 된다. 실제로 Z결제를 이용하는 쇼핑몰 중 세 곳 중 하나가 평균 2.8배 이상 매출이 증가한 것으로 나타났다. 많게는 22배 이상 매출이 증가한 쇼핑몰, 월 최고 매출로는 20억 원을 달성한 쇼핑몰도 있다.
분석 기간 : 2020. 06
꼼꼼한 분석 함께 해 주신 혜송님, 보경님께 다시 한번 감사드리며, 두 분의 시각에서 쓴 블로그 글은 추후 링크하도록 하겠습니다.
UXUI 분석 프로젝트 팀 Depth의 또 다른 앱 분석이 궁금하시다면 아래 링크 글을 읽어주세요!
윤아, 혜민 - '29CM' 앱 크리틱
https://brunch.co.kr/@rainalee0329/4
