brunch

매거진 UX와 UI 제대로 소화시키기

라이킷 177 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 헤이민 HEYMIN Jan 14. 2019

[번역] 더 나은 상품페이지 디자인하기

이커머스 패션 웹사이트를 위한 디자인팁

실제 구매결정이 일어나는 '상품페이지'는 이커머스 서비스의 성패와 연결되는 중요한 페이지입니다. 컴포넌트의 위치, 사이즈 뿐만 아니라 인터렉션의 타이밍 하나하나가 구매결정으로 이어지는 고민거리가 상당한 곳입니다. 아마 이런 고민을 하고 있는 기획자, 디자이너분들이 있다면 상당히 도움될만한 글이라 생각됩니다. 특히 언급된 사이트들을 직접 확인해보면 좋을 듯 합니다.

더 나은 상품페이지 디자인하기

[원문] Designing better product pages

안녕하세요, 줄리아입니다. 저는 Clay agency에서 아트디렉터로 일하고 있습니다.

앞으로 몇 가지 아티클 시리즈로 여러분에게 저의 비전과 경험들을 공유할까합니다. 그 중 하나가 이커머스 패션 웹사이트의 더 나은 상품페이지를 디자인하는 것입니다.

상품페이지는 이커머스 웹사이트의 핵심입니다. 유저들이 상품을 구매할지 말지 결정하는 가장 중요한 곳입니다. 그래서 특히 더 주의를 기울여야 합니다. 제가 전하는 인사이트들이 여러분의 더 좋은 경험디자인을 위해 도움이 되었으면 합니다.

상품 말고 라이프스타일을 소개하세요.

상품이미지가 대부분 고객 입장에서 다뤄지긴 하지만, 당신은 디자이너로서 전체적인 컨셉을 제안하고 클라이언트(브랜드)의 상품 노출전략에도 영향을 줄만큼 파워를 가지고 있습니다.

최근에 브랜드들은 단순히 상품만 팔지 않고, 라이프스타일을 판매합니다. 그래서 인스타그램 판매가 크게 늘어났고, 규모가 있는 브랜드라면 다들 고객을 매장으로 이끌 수 있는 인스타그램 계정을 가지고 있습니다.

만약 당신이 모노브랜드 매장을 디자인한다면, 주변환경과 실제 일어나는 다양한 일들을 고려해야하고 고객과 브랜드, 전체 커뮤니티 사이의 끈끈한 관계를 만들도록 노력해야합니다. Mango와 Urban Outfitters가 상품을 강조한 착용샷으로 그들의 공식영상을 어떻게 보완하지는 주목하세요.

'Urban Outfitters'의 상품페이지

Smart Insights’ studies는 쇼핑고객의 77%가 상품구매를 결정하기 전에 전문적인 사진보다 다른 고객의 사진을 더 보고 싶어한다고 했습니다. 아마 그게 더 현실적이고 믿을만하고 판별하기 쉽기 때문입니다.

Baymard Institute는 사용자가 자신의 사진을 올리도록 유도하라고 제안합니다. 이를 통해 패션블로거, 매거진, 소매업자와 상호 이익을 주는 관계가 될 수 있습니다. 예를 들어, MADE.com은 웹페이지에 이미지를 게시하기 위해, 사용자들이 인스타그램 사진에 태그를 달 수 있도록 합니다. (사용자의 태그된 사진들을 웹페이지에 불러오는 방식)

‘MADE.com’에 게시된 사용자의 인스타이미지

사회화, 글로벌화, 셀럽, 스타일, 아이러니, 개방성, 투명성의 다양한 혼합이 서구 사회의 가치를 증가시키기 때문에 저는 고급브랜드들조차 진지하고 멀리 있는 것으로부터 고객과 살아있는 대화를 하는 것으로 옮겨갈 거라고 봅니다. Balenciaga & Vetitments의 최근 게시물들을 보십시오.

'Balenciaga'의 인스타그램

업계의 표준을 믿으세요.

이미 존재하는 시장의 새로운 상품을 디자인할 때, 인터페이스 패턴과 시스템을 고려하게 됩니다.

일반적인 상품 페이지는 2가지 줄기로 나누어집니다: 왼쪽에는 사진, 오른쪽에는 상품정보와 액션. 사용자들은 이런 레이아웃에 이미 익숙해져있고, 그들은 새로운 UI를 배울 필요 없이 바로 상품으로 향할 것입니다.

'COS & Farfetch'의 상품페이지

2단 레이아웃이 통용되고 있다고해서 모든 상품 페이지가 그래야한다는 건 아닙니다. 이러한 제한 속에서도 창의성을 발휘할 수 있는 여지는 충분히 있습니다. 예를 들어 Rick Owens 웹사이트는 브라우저 전체 창을 활용하여 스타일을 전달하면서도 전통적인 레이아웃을 깨는 신선한 노출방법을 선보이고 있습니다.

'Rick Owens'의 상품페이지

하나의 룩을 구매하도록 유도하세요.

고객들이 전체적인 코디를 구매하거나, 코디와 유사한 또는 보완할 수 있는 상품을 구매할 수 있도록 하세요. 사람들은 종종 전체적인 룩을 보여주는 이미지에서 영감을 얻기도 하고 그 룩의 상품을 사는 것이 쇼핑경험의 중요한 부분이 될 수도 있습니다.

상품을 이렇게 보여주세요.

라이프스타일 이미지를 사용하는 것 외에, 상품에 대한 정확하고 종합적인 설명을 주고 고객이 상품을 상상할 수 있게 도와주는 가장 의미있는 부분을 전달해야 합니다.

아래에는 여러분의 공식영상을 더욱 멋지게 만들 수 있는 팁을 정리해 놓았습니다.

1. 모델과 마네킹에 제품을 표시해주세요.

2. 모델의 신체사이즈와 상품 사이즈를 가능한 곳에 제공하세요.

3. 클로즈업한 상세이미지를 제공하세요. : 윤곽, 바느질, 재질, 태그, 지퍼, 단추 등을 보여주는

4. 동영상을 촬영하세요. : 모션과 함께 상품을 보여주면 이미지만 보는 것보다 훨씬 낫습니다.

5. 모든 상품이미지를 일관성 있게 다루세요. 당신의 상품이 모두 같은 사이즈로 보여야하고 각 이미지의 가운데에 위치하도록 합니다. 이미지의 줌, y포지션, 선명도, 화이트 밸런스 등을 동일하게 맞추세요.

6. 상품이 코트라면 지퍼나 단추가 ‘열렸을 때’와 ‘닫혔을 때’를 모두 보여주세요.

7. 상품의 스케일을 보여주세요. 만약 상품의 사이즈와 비율을 확실하게 알 수 없다면, 보통 알고 있는 사이즈의 물건(가방, 신발, 쥬얼리 등)과 가까이 두고 촬영하도록 합니다. + 모델컷은 최소 1장이라도 있어야 합니다.

8. 다양한 각도에서 촬영한 사진을 동시에 보여주세요. ASOS 웹사이트에서 사용자는 상품의 뒷모습을 볼 때 앞에서 어떻게 보이는지를 기억해야만 하고 그 반대도 마찬가지 입니다. 이것은 상품을 평가하고 상상하는 과정을 더욱 어렵고 길고 지루하게 만듭니다.

‘ASOS’ & ‘Farfetch’의 상품페이지

Farfetch는 동시에 2개의 이미지를 보여주고 Mango는 그 이상으로 잘하고 있습니다. 이미지 캐러셀(=이미지 슬라이더, 이미지 로테이터)을 없애고 그리드에 맞게 보여주고 있습니다.

‘Mango’의 상품페이지

9. 이미지 줌을 쉽게 제공하세요. 사진을 줌 할 때 모든 웹사이트가 다르게 반응하기 때문에 줌은 웹 상에서 일관성이 결여된 인터렉션 입니다. 당신이 선택한 줌 방식이 무엇이든, 그것이 어떻게 반응하는지 인터페이스에 표시해주세요. 사용자가 지정한 커서 모양을 사용하세요.

이미지 캐러셀을 사용하지 마세요.

*참고 : 이미지 캐러셀 = 이미지 슬라이더, 이미지 로테이터

많은 연구가들은 캐러셀이 먹히지 않는다고 말합니다. 사실 아무도 눌러보지 않기 때문입니다. 프로모션 캐러셀에 대한 이야기이긴 하지만 상품이미지 캐러셀도 이런 단점은 마찬가지입니다.

캐러셀은 한번에 단 1-2개의 사진만 보여줍니다.

캐러셀은 너무 짧은 시간 안에 커서의 반응을 요구합니다.

“자동조정"일 때는 클릭할 수 없고, 클릭할 때마다 제품에서 탐색으로 주의를 빼앗깁니다.

점점 더 진보하고 있는 브랜드 웹사이트는 전체 페이지의 왼쪽을 모두 차지하는 큰 이미지와 여유있는 레이아웃으로 변화하고 있습니다. 사용자는 거의 자동적으로 이루어지는 스크롤링을 통해 이미지들을 탐색하며, 그 과정에서 큰 주의력이 요구되지도 않습니다.

이제 캐러셀은 사라지는 추세이며 2단 레이아웃이 유지되고 있습니다. 어떤 경우에는 오른쪽 단이 화면에 고정되어 있고, 사진이 포함된 왼쪽 열만 스크롤되기도 합니다.

'COS'의 2단 레이아웃

Acne Studios, Ambush 와 몇 가지 다른 브랜드들은 페이지에 커다란 이미지를 보여주고, 고객들이 추가 클릭 없이 상품을 가까이에서 볼 수 있도록 해줍니다. 풀사이즈 이미지는 종종 브라우저 높이에 맞지 않아 넘어가는 경우가 있어 사용자가 그 부분을 보기위해 스크롤해야할 때가 있습니다. 저는 이런 방식이 조금은 잘못된 방향으로 흘러간 것 같습니다. 왜냐하면 클로즈업한 디테일을 보는 것보다, 제품을 이해하고 상상하고 결정하는 것이 더 중요하기 때문입니다. 클로즈업을 보는 건 일반적으로 사용자가 제품에 관심이 있다고 결정한 후의 두번째 평가 단계입니다.

아쉬운 사례 : 'Acne Studios'의 상품페이지

썸네일을 자르지 마세요.

Baymard studies는 공간 절약을 이유로 미리보기 섹션에서 썸네일을 자르면, 사용자 중 50-80%가 사진을 전혀 볼 수 없다고 말합니다.

상품페이지의 미리보기 섹션과 썸네일 이미지

초기에 모든 썸네일이 보이도록 레이아웃을 디자인하세요. 그리고 사용자가 원하는 각도와 클로즈업을 빠르게 볼 수 있도록, 빠르고 직관적으로 사진을 탐색할 수 있도록 해야합니다.

Edge Case를 먼저 디자인하세요.

*참고 : Edge Case = 극한(최대 또는 최소) 상태에서 발생된 문제나 이슈

왜냐하면 전자상거래에서 드문 케이스가 아니기 때문입니다.

상품정보를 극도로 최소화하고 깔끔하게 하고싶은 유혹이 항상 따르기 때문에 자칫 상품이 왕이 될 수 있습니다. 그러나 사용자는 결정을 위해 많은 정보를 필요로 하고, 가게는 보통 사용자의 흥미를 끌려고 합니다.

이전에 그 제품이 세일 중이거나 특별 할인을 한다고 상상해봅시다. 당신에게 세일 타이머가 있습니다. "품절" 또는 "품절임박" 라벨일 수도 있고, 재고가 부족해서 M사이즈만 남았다고 보여주는 것일 수도 있습니다. 긴 제품명, 브랜드명, ID, VAT 포함 및 매장 정보는 페이지 첫 부분에 있어야 합니다. 단지 깨끗한 디자인을 위해 "더보기▾" 링크 아래 몰아 넣을 수 없는 것들입니다.

이미 고객들에게 매끈하고 깔끔한 목업을 제공하고 있다면, 이 모든 요소들을 함께 맞추는 건 고통스러운 일이 될 수 있습니다. 자칫 엉망이 될 수 있기 때문입니다. 무언가를 더 추가하는 것보다 제거하는 것이 더 쉽기 때문에, 처음부터 모든 것이 “ON”인 상태로 디자인 하면 보기 쉽고 조화로울 것입니다. 그 다음에 최소의 경우, 평균의 경우를 디자인하면 됩니다. 콘텐츠의 위치가 변경되지 않는다면 페이지 간에 “점프"를 하는 것이 가장 좋습니다. 사용자가 공간습관을 형성하는데에 도움되기 때문입니다.

상품정보과 구매방법을 제공하세요.

상품 정보를 적절하게 그룹화하고, 도움이 될 수 있는 추가 정보를 생각해보세요.

1. 사이즈 옵션 셀렉터 근처에 사이즈 정보를 보여주세요.

2. 모델 사진 근처에 모델 신체사이즈를 보여주세요.

3. 모델/제품 측정값 근처에 단위 환산값을 제공하세요.

4. 제품구성 정보 근처에 주의사항을 나타내주세요.

5. 품절되거나 누락된 사이즈에 대한 내용을 제공하세요.

6. 배송비를 나타내주세요. Baymard studies에 따르면 사용자 중 64%가 상품페이지에서 바로 배송비를 찾으며, 24%는 배송비를 찾을 수 없어 구매를 포기했다고 합니다. 배송비가 물건 자체 가격보다 두 배나 비쌀 때, 특히 국제 배송일 때 중요합니다.

페이지를 미니멀리즘으로 유지하고 싶다면, 점진적인 공개 방식을 따르세요. 처음부터 많은 정보로 고객을 압도하지 않도록 합니다. 사용자가 원하는대로 세부 정보를 살펴볼 수 있도록 해줍니다. 접을 수 있는/펼칠 수 있는 리스트 또는 탭을 사용하면 더 많은 정보를 제공할 수 있습니다. 이 때, 발견하기 쉽고 사용하기 간단한, 설명이 드러나는 명칭을 써야 합니다. 예를 들어 "추가 정보"보다 "구성 및 관리"가 훨씬 배려있는 명칭입니다.

정중하게 그리고 도움될 수 있게

UX의 정중함(예의)과 사용자 관리는 사용자가 직면할만한 어려움과 문제를 예상하고 이를 피하거나 예방할 수 있도록 노력하는 것을 의미합니다. 당신은 발생할만한 질문을 상상하고, 사전에 종합적인 정보를 미리 제공해야 합니다.

인터페이스는 사용자의 행동에 반응해야하고 한 시각적인 피드백을 제공해야 합니다. 장바구니나 위시리스트에 상품을 담는 것과 같이 표시된 내용이 변화하지 않는 경우 특히 신경써야 합니다.

많은 디자이너들이 음성 UI를 저평가하고 있는데, 디자이너들은 주로 브랜드이미지를 보여주거나 다양한 장식기법을 통해 제품을 선보입니다. 대담한 디자인과 멋진 사진은 흥미, 욕망 등의 감정들을 불러일으키는 반면에, 세심한 UI는 사용자가 사이트와 사랑하고 신뢰하는 관계를 만들고 그들이 다시 돌아오게 만들 것입니다.

멋진 UI 환경을 만들 수 있는 몇 가지 팁이 있습니다.

1. 연락처&도움말 링크는 찾기 쉽도록 합니다.

2. 유용한 정보의 반복을 주저하지 마세요. 모든 상품페이지와 결제 플로우 전반에 배송 및 환불에 대한 정보를 제공하세요. 유저가 정보가 필요할 때마다 FAQ를 거치지 않도록 하세요.

3. 상품 ID는 필요한 곳에 있어야 합니다.

4. 사용자가 실수를 한 적이 없는데도 나무라서는 안됩니다. 예를 들어, 사용자가 사이즈를 선택하지 않고 장바구니에 상품을 추가하려고 한다면, 애니메이션 또는 툴팁으로 잊어버린 선택을 할 수 있도록 자연스럽게 알려야 합니다. 이 때 빨간색, 경고 표시, 실수와 관련된 소리나 애니메이션은 피하도록 합니다.