1주차 UI_UX 케이스스터디를 듣고 앱 비교 분석을 해보겠다
소개
주요화면
홈 화면
홈 화면을 봤을 때 크림의 경우 ‘SHOP’이라 명확하게 표시를 해줬다
반면 솔드아웃은 ‘검색’이라는 표현을 써서 ‘검색’ 탭을 눌러야 어떤 검색이 나오는지 알 수 있다.
Header의 메뉴 탭을 보게 되면 iOS 기준으로 DarkMode는 두개의 앱 지원을 하지 않는다.
이때 UI 관점에서 봤을 때 솔드아웃은 하나의 뷰 위에 컨테이너 뷰를 올리는 UI를 추구했다. 하지만 뒤에 있는 뷰에 덧댄 모양으로 이질감이 들 수 있다 생각한다. 반대로 크림은 정확하게 아래의 컨테이너 뷰와 메뉴에 해당하는 컨테이너 뷰를 동일한 색상으로 표현 했을 뿐만 아니라 명확하게 구분을 지어서 솔드아웃 보다 상대적으로 깔끔한 느낌이 들었다
이커머스 도메인은 소비자에게 판매를 목적으로 한다.
크림의 경우 헤더의 메뉴가 명확하다 추천, 랭킹, 남성 여성, 브랜드, 발매정보 등 들어가지 않아도 User의 입장에서 ‘어떤 메뉴’인지 명확하게 인지하고 버튼을 누르게 된다
반면 솔드아웃 같은 경우 블랙박스, 드롭, 바로배송, 언더리테일, 혜택으로 Header Menu가 구성된다. 솔드아웃을 처음쓰는 User의 입장에서 블랙박스? 드롭? 바로배송? 언더리테일? 단어의 의미를 모르기 때문에 흥미를 느끼지 못 한다면 버튼을 누를 필요성을 느끼지 못한다.
또한 앱에 User가 입장 했을 때 대부분의 User는 Menu 부터 보는 습성이 있다. 이 때문에 Header Menu가 중요하다 생각하는데 크림은 명확하게 User의 입장에서 그들이 판매하는 ‘상품’의 접근성을 높인다
반면 솔드아웃은 상품이 아닌 '그들만의 이벤트'를 User에게 홍보 목적으로 접근한다. 이는 이커머스가 추구하는 판매라는 목적 보다는 홍보에 중점을 둔 인상을 받았다
또한 솔드아웃의 헤더메뉴 뒷부분에 있는 컨테이너 뷰가 크림의 컨테이너뷰 보다 크다 이 때문에 User 입장에서 앱에 들어왔을 때 원형 버튼 전체가 보이지 않는 현상이 발생한다
크림은 홈 화면에 User가 입장하면 한눈에 이벤트를 나타내는 컨테이너뷰와 상품으로 유도하는 모든 버튼이 한눈에 들어온다 반면 솔드아웃은 이벤트에 해당하는 컨테이너 뷰의 크기가 전체 핸드폰의 뷰에 차지하는 비율이 커서 원형 버튼 전체를 보려면 User가 Scroll을 아래로 한번 해야한다 이는 User로 하여금 Action을 한번 더 취하는 결과를 낳는다
솔드아웃의 경우 실시간 랭킹을 홈 화면에서 스크롤을 내리면 보인다. 하지만 크림은 Header Menu로 랭킹을 올리는 대신 홈 화면에 나타내지 않았다. 이는 솔드아웃이 랭킹순으로 보기 더 쉬웠다. 하지만 처음 홈 화면이 나타났을 때 스크롤을 안할 수 있는 가능성이 있기 때문에 Header Menu에 랭킹의 접근성이 개인적으로 더 좋다
맨위의 메뉴를 보게 되면 크림의 경우 종모양의 아이콘만 있다 반면 솔드아웃의 경우 돋보기 아이콘과 종모양의 아이콘이 존재한다
하나의 메뉴를 들어갔을 때 멀티테스킹이 안되는 앱이기 때문에 솔드아웃의 돋보기 아이콘을 통한 검색기능이 좋았다
'랭킹'의 경우 솔드아웃은 9개의 버튼으로 구성했고 크림은 테이블뷰와 컨테이너뷰의 결합으로 해놨다. 한눈에 보기에는 솔드아웃이 더 좋았다
솔드아웃의 경우 홍보를 하고 싶은 목록을 유저가 슬라이드를 하면 품목이 바뀌는 기능을 넣어서 한눈에 보기 좋았다
솔드아웃은 상하 스크롤을 통해 자신들의 모든 컨텐츠를 보여주려 했다
반면 크림은 Header Menu 탭에 자신들의 모든 컨텐츠의 키워드를 넣고 User에게 버튼을 누르도록 유도했다 솔드아웃의 컨텐츠가 많아서 스크롤을 내리면서 다 확인하는 것 보단 User 입장에서 크림의 UI가 더 명확하다고 생각한다
남자와 여자 메뉴는 구성이 동일하다
성별 버튼을 눌렀을 때 가장 큰 차이점은 '멀티태스킹의 유무'이다
솔드아웃의 경우 버튼을 누르면 화면전환이 발생한다 이는 화면 관점에서 뷰 위에 뷰를 쌓은 상태이다.
즉 처음 뷰로 돌아가려면 왼쪽 상단에 보이는 Back Arrow 버튼을 눌러주어야 한다
이는 처음 뷰에서 보여준 다른 기능은 현재 뷰에서 수행하지 못한다. 앞서 말한 멀티태스킹이 불가능 하다
1주차 강의에서 말했듯 Hub&Spoke 관점으로 멀티태스킹이 되지 않는 단점이 명확하게 보이는 순간이다
반면 크림은 위에 Header Menu에서 여성탭으로 옮기면 홈화면에서 뷰 위에 뷰가 쌓이는 구조가 아닌 화면 전환이 발생한다
즉 뷰가 쌓이지 않았기 때문에 이전에 홈화면에서 하던 작업을 계속 할 수 있다(불필요한 작업 필요 없이 User의 입장에서 화면의 전환이 더 쉽다
단, 크림에서 버튼으로 여성탭을 눌렀을 경우 솔드아웃과 똑같은 형식의 뷰가 나타난다
뷰의 구성을 봤을 때
솔드아웃의 경우 상단 버튼을 누르면 메뉴가 구성하는 분류에 따른 상품이 나오기 때문에 찾아보기 편하다
하지만 크림의 경우 원형의 버튼을 눌러서 화면 전환이 발생하기 때문에 하나의 분류인 버튼을 눌렀을 때 멀티태스킹이 안된다
홈 화면에서 가장 중요한 메뉴를 중간에 놓는다 생각했는데 솔드아웃은 특이하게 자사의 콘텐츠를 Footer Menu 중간에 놓았다
검색 화면
우선 제일 위에 SearchBar를 보게 되면 Search PlaceHolder에 크림은 명확하게 User로 하여금 검색의 방식을 제시한다
User에게 어떤 방식으로 검색어를 설정할지 제시 해주어서 편하게 느껴졌다
크림의 버튼은 2열로 설정하여 더 많은 정보를 솔드아웃 보다 얻을 수 있었다
Sort Button의 경우에도 종류가 크림이 솔드아웃 보다 더 많아서 상세 검색이 더 편했다
이는 검색에서 성별로 본다면 남성과 여성의 모든 제품을 다 분류해서 볼 수 있지만 솔드아웃의 경우는 최근 인기순 여성의 제품을 찾으려면 오른쪽 중간 버튼에 있는 필터 버튼을 눌러야하는데 '직관성'이 크림의 앱 보다 현저히 떨어졌다
User가 생각하기에 '여성의 제품을 찾고 있는데 어떻게 해야하지?'라는 의문이 들게되며 경험에 의해 다시 홈 화면으로 가서 여성의 신발을 찾거나 현재 뷰에서 상단의 SearchBar를 눌러서 여성의 신발을 찾아야하는 불편함이 느껴진다
또한 제품이 아닌 랭킹순으로 보고 싶은 User가 버튼을 찾지 못 한다면 홈화면으로 다시 가는 것은 필연적이라 생각된다
크림의 경우 상품의 버튼 왼쪽 상단을 보면 상품의 갯수가 보인다 필터를 자세하게 할 경우 전체 상품의 갯수를 알 수 있는 것은 User 입장에서 도움이 된다
솔드아웃의 경우는 자사의 강점인 빠른배송과 98점 합격을 중시하여 분류가 될 수 있도록 버튼을 배치했다 단 버튼을 누르지 않는 경우 비활성화 상태로 되어 있어서 User가 누르지 않을 경우 그들이 바라는 결과를 가져오지 않을 수 있다.
상위의 원형 버튼은 크림은 19개 솔드아웃은 17개로 비슷한 테마로 분류되어 있다
하지만 크림의 경우 그들이 분류한 테마가 User의 Needs를 충족하지 못 할 경우를 대비하여 더보기 버튼을 만들었고 User로 하여금 더 많은 폭의 테마를 선택하도록 유도했다. 보다 더 '유저 친화적'이다.
솔드아웃은 크림과 다르게 원형 버튼을 줄이는 대신 배너를 넣어서 홍보를 했다
크림의 Watch Tap은 단순히 Youtube API의 나열뿐이다.
반면 솔드아웃은 솔드아웃의 강점인 자체 콘텐츠를 콘텐츠 텝에서 볼 수 있는데 크림과 다르게 비디오, 뉴스, 이벤트, 에디터가 쓴 컬럼 등을 볼 수 있어서 패션에 관심이 많은 User의 경우 양질의 정보를 얻을 수 있는 탭이었다
또한 배너를 활용하여 다양한 컬럼을 소개하면서 흥미를 이끌었다
크림만의 특별한 탭은 스타일 탭으로 해쉬테그 이벤트를 자주한다
상단의 카테고리 메뉴를 설정하여 카테고리에 해당하는 상품을 입고있는 사람들을 볼 수 있다
많은 유저들의 참여 보단 개인 SNS 홍보 용도로 많이 사용된다
솔드아웃의 릴리즈 탭은 User의 만족도가 높은 탭이라 생각한다
User가 리셀 중개 플랫폼을 쓰는 목적은 2가지로 뚜렷하다
'리셀을 하거나 리셀되는 제품을 구매하기 위해', '한정품인 상품의 발매일을 알고 링크를 통해 드로우를 하는 목적
솔드아웃은 2가지의 목적을 5가지의 탭에 포함시켜서 User가 찾아보기 쉽게 만들었다
반면 크림 같은 경우 발매정보의 탭은 Header Menu에서 슬라이드를 한번해야 보인다
접근성은 솔드아웃이 더 좋다
상품 검색 화면
사이즈 버튼과 저장 버튼의 위치의 차이를 둔다
크림의 경우 판매 거래 주의사항을 버튼으로 처리하여서 경각심을 한번 더 User에게 주었다
큰 차이점은 크림의 경우 자체 스타일 탭에서 볼 수 있듯이 SNS 기능이 활성화되어 있어서 User들이 올린 상품 사진을 볼 수 있어서 솔드아웃에 비해 구매를 하기 전에 실물 사진을 볼 수 있다
이 두 앱은 구매화면은 똑같았지만 크림의 경우 구매 전 검수사항을 User에게 각인시키는 차이점이 있었다