한성규

'지금 써보러 갑니다' '팁스터 뉴스레터' 운영자

팔로우

🌟 디테일의 간격 시리즈! [✏️ 리스트가 주는 불편을 해결할 수 있는 4가지 방법] (👀간단 요약) 📌 기존의 리스트에서 느끼는 불편함 ✓ 상세 화면에서 볼 수 있는 상품 관련 주요 정보를 리스트에서 볼 순 없을까? ✓ 동일한 구조의 화면을 계속 봐야 하고, 상세 화면에서만 상세 정보가 제공되어 비교가 어려운 등의 불편이 존재하기 때문 ✓ 내가 원하는 컬러가 있을까?, 내가 구매하고 싶은 사이즈가 있을까? 등에 대한 답 역시 상세화면에서 주로 확인 가능 ✓ 이런 불편을 화면 간 이동을 줄이면서 해결할 수 있는 방법에는 어떤 것들이 있을까?  ✓ 리스트에서 원하는 정보를 더 빠르게 확인할 수 있는 방법을 제공하는 4가지 문제 해결 방법 📌 방법1 : 리스트 내 컬러 별 이미지 정보 제공 ✓ [Belk] 리스트 내 컬러칩 UI를 노출, 상세페이지를 접하지 않고 색상 별 상품 이미지를 볼 수 있는 경우 ✓ [Nordstrom] 컬러칩을 탭 하면, 썸네일 상에서 해당 상품에 선택한 칩의 색상이 입혀진 모습 확인 가능 ✓ [크록스] 색상 칩 옆 + 혹은 + 숫자 표기, 상품별 컬러를 확인은 물론 다양한 옵션이 있다는 정보까지 빠르게 확인 📌 방법2 : 리스트 내 이미지 스와이프로 상세 정보 제공 ✓ [멜리즈] 스와이프를 통해 썸네일에서 각도별 상품 모습을 확인할 수 있도록 제공 ✓ 인디케이터를 두어 뒤에 몇 개의 이미지까지 스와이프 하여 볼 수 있는지 안내 ✓ [Warby parker] 리스트에서 스와이프만으로 디자인에 어떤 색상 옵션들이 입혀지는지 빠르게 확인 ✓ [Hollister] 썸네일을 길게 눌러 상품 상세 정보 제공 (상세 페이지 진입과 별개) 📌 방법3 : 리스트 내 상품 옵션 관련 정보 제공 ✓ [무신사] 상품 별 사이즈와 컬러 옵션을 리스트에서 제공, 원하는 사이즈와 컬러에 대한 재고 정보도 확인 가능 ✓ [다나와] 기본 모델을 리스트를 통해 보여주되 달라지는 세부 사양에 따른 가격을 화면 전환없이 볼 수 있음 ✓ [미트박스] 상품별 ‘더보기' 버튼을 통해 중량에 따른 가격 정보는 물론, 재고 현황을 한눈에 볼 수 있도록 제공 ✓ [제주지니] 장애인의 접근성에 대한 정보를 리스트에 아이콘으로 구분, 제공 📌 방법4 : 리스트 내 상품 관련 추가 정보 제공 ✓ [11번가] 상품 하단, 해당 상품이 속한 카테고리 베스트 아이템 10개 노출 ✓ [Macy’s] 모든 리스트에 포함된 상품에 ‘More Like This’ 버튼을 제공, 유사 상품 확인 가능 ✓ [네이버페이] 리스트를 통해 매장명과 해당 매장의 대표 메뉴를 함께 보여줌 ✓ [네이버쇼핑] 리스트 내 키워드 리뷰, 상품정보, 이미지 확인 가능

💡 불편함이 낳은 UX : 리스트 편

팝콘레터