[UXUI] 패션브랜드는 상품을 어떻게 보여주는가
같은 패션 브랜드여도 저마다의 화면 구조는 조금씩 다르다. 단순해 보이는 상품 리스트 화면에서도 브랜드별로 특징이 다른데, 몇 가지 브랜드에서 각각 어떤 UX특징들이 있는지 살펴보았다.
마르떼 프랑소와 저버
마우스 오버 시 다른 이미지가 보이며, 옵션 선택 시 사이즈 별 보유 수량을 알 수 있다.
같은 상품이어도 색상이 다른 경우 리스트를 중복으로 보여주고 있다.
이러한 형태의 경우 한 번에 다양한 제품들을 보여줄 수 없고, 스크롤이 길어지는 단점이 있다.
마우스 오버 시 이미지 변경 및 사이즈 선택뉴발란스
좌측의 필터링을 통해 원하는 상품 조건을 설정할 수 있다.
마르디와 동일하게 같은 상품이어도 색상이 다른 경우 리스트를 중복으로 보여주고 있다.
마우스 오버 시 퀵 뷰를 통해 사이즈와 디테일 컷을 볼 수 있으며, 색상 역시 선택하여 변경할 수 있다.
로그인 시 바로 좋아요 기능을 추가할 수 있다.
상세페이지 내에서 변경 가능한 색상 및 디테일 컷 확인 기능나이키
뉴발란스와 동일하게 좌측 필터링을 통해 상품 조건을 설정할 수 있다.
마우스 오버 시 여러 색상이 있는 경우 다른 색상 제품을 확인할 수 있다. 다만 마우스 오버 시 나오는 색상의 리스트업은 최대 4개이며 초과하는 경우 +N으로 표기되어 상세페이지로 들어가지 않는 한 어떤 색깔이 더 있는지 알 수 없다.
마우스 오버 시 색상 안내 및 선택이 가능하다.
색상이 4개 이상의 제품은 +N으로 표기되는 모습
상세 페이지로 들어가야 다른 색상이 무엇인지 알 수 있다.루이비통
위 브랜드들은 색상이 여러 개인 경우 마우스 오버를 통해 알 수 있거나, 모든 리스트를 확인해야 하는 반면
루이비통은 첫 화면 표시해 주고 있으며 클릭으로 색상 변경이 가능하다.
마우스 오버 시 좌우 아이콘이 생성되며 다음 페이지로 넘어가지 않고 상세 이미지를 볼 수 있다.
마우스 오버를 한 상태에서 색상 변경 및 이미지 변경보테가베네타
마우스 오버 시 다른 이미지가 나오고, 여러 색상이 있음을 인지 및 선택이 가능하다.
루이비통과 동일하게 색상과 상세컷 또한 다음 페이지로 넘어가지 않고 볼 수 있는데, 하단 스크롤바를 더해 몇 장의 사진들이 있는지 자세히 알 수 있다. 나이키와 비슷하게 최대 3가지 색상만 알 수 있으며 그 이상은 +N으로 표기되고 있다.
기능에 맞는 구조
마우스 오버 시 다양한 색상이 나오는 것은 해당 제품의 다른 색상이 어떤 게 있는지 인지할 수 있게 도와주기 위한 목적을 가지고 있다. 하지만 일정 수 이상의 색상이 +N으로 표기되는 구조는 이러한 목적에 부합하지 않는다. 형태는 기능을 따라야 하는데, 이러한 구조를 취할 때 모든 색상을 표시해 주는 기능을 통해 목적을 달성하는 방식의 구조가 어땠을까 생각한다.
구독과 라이킷은 글 작성에 많은 힘이 됩니다.
