이커머스 서비스 디자인 베스트 예제 | 매거진에 참여하세요

최근에 온라인으로 선글라스를 구매했는데, 실제로 얼굴에 맞는지 아니면 스타일이 마음에 들지 않을지 확신하지 못했지만 망설이지 않고 구매했습니다.

구매를 시도하는 동안 여러 번 양식을 작성하고 다시 작성해야 했고, 혼란스러운 상호작용을 거쳐야 했지만 포기하지 않았습니다. 그 선글라스를 원했기 때문이죠!

이것은 데스크톱 웹사이트에서 본 가장 이상한 날짜 선택기입니다. 사용자들에게 이렇게 하지 마세요!

생각해보면, 꽤 이상한 일입니다. 우리는 회사들에게 돈을 주기 위해 많은 단계를 거치고 많은 장애물을 뛰어넘습니다.

분명히 이것이 우리가 구매를 멈추게 하지는 않지만, 디자이너를 꿈꾸는 사람으로서 온라인 쇼핑을 위한 UI 디자인에 대한 몇 가지 모범 사례를 검토해 봅시다.

제품 목록 페이지 디자인

대부분의 전자상거래 경험에서 사용자는 제품 목록 페이지(Product Listing Page)라는 페이지에서 시작합니다.

좋은 제품 목록 페이지의 디자인은 스캐너빌리티(scanability)에 관한 것입니다.

사용자가 상호작용해야 하는 3가지 주요 UI 요소는

• - 제품 카드(Product Cards)

• - 필터(Filters)

• - 검색(Search)입니다.

• 각 요소의 디자인에 많은 생각을 기울여야 합니다. 이들이 어떻게 함께 작동하는지가 사용자의 쇼핑 경험을 결정짓습니다.

제품 카드

성공적인 제품 카드는 몇 가지를 강조해야 합니다: 제품의 썸네일 이미지, 이름/제목, 가격.

색상 옵션과 같은 중요한 보조 정보도 있어야 하지만, 다른 요소를 가리지 않아야 합니다.

사용자는 주요 이미지에 집중하고 이름과 가격을 흘끗 보려고 할 것입니다. 마음에 든다면, 덜 두드러진(덜 스캐너블한) 세부 사항에 주의를 기울일 것입니다.

이러한 각 제품 카드에서 가장 중요한 정보는 나머지와 구별되어 쉽게 스캔할 수 있습니다.

필터

전자상거래 인터페이스에서 필터는 즐거운 경험을 위해 필수적입니다.

잘 설계된 필터는 사용자가 실제 매장처럼 카탈로그를 탐색하여 원하는 것을 찾을 수 있게 합니다.

좋은 필터링 프로세스를 설계하기 위한 팁은 시각적 계층 구조와 정렬에 대해 이 글에서 논의한 것과 동일한 원칙을 따릅니다.

카테고리 제목이 하위 카테고리 아래에서 두드러지게 표시되도록 하고, 사용자가 어떤 필터가 적용되었는지 쉽게 이해할 수 있도록 하세요.

가장 큰 디자인 실수는 사용자가 필터를 적용했음을 알리지 않는 것입니다. 또한 올바른 UI 요소를 사용하세요.

사용자가 여러 옵션을 선택할 수 있다면 체크박스를 사용하세요. 하나의 옵션만 선택할 수 있다면 라디오 버튼을 사용하세요.

일관성을 위해 이러한 규칙을 따르세요. 마지막으로 사용자가 언제든지 필터를 쉽게 제거할 수 있도록 하세요.

검색 상자

검색을 위한 디자인은 쉽지만, 종종 잘못 수행됩니다.

검색 상자가 두드러지게 표시되고 관련 검색 결과를 제공하는지 확인하세요. UI 측면에서 단순함이 핵심입니다.

적절한 검색 아이콘이 있는 입력 필드를 사용하고 "검색"이라는 레이블을 사용하세요.

검색 예시를 포함하는 것도 도움이 될 수 있습니다.

예를 들어, '골프 클럽'이나 '위티스'를 검색해 보세요.

많은 콘텐츠 vs 적은 콘텐츠

제품 목록 페이지의 콘텐츠 양은 대형 소매업체와 소규모 소매업체 간에 크게 다를 수 있습니다.

수천 가지 제품을 판매하는 회사는 더 광범위한 카테고리와 필터를 필요로 하며, 페이지에 더 많은 제품을 표시해야 합니다.

소규모 소매업체는 광범위한 카탈로그 문제가 없습니다. 그들의 필터링과 제품 목록은 판매할 제품이 적기 때문에 훨씬 깔끔합니다.

대형 소매업체가 왜 비슷한 방식으로 사이트를 디자인하지 않는지 묻는 것은 쉽습니다.

답은 단순히 그럴 수 없기 때문입니다. 하지만 제품 카드, 필터링, 검색 영역을 올바르게 디자인한다면 사용자 경험은 동등하게 좋을 것입니다.

제품 상세 페이지 디자인

좋은 제품 상세 페이지의 디자인은 상당히 간단합니다.

제품의 고품질 이미지를 페이지에 두드러지게 표시하고, 명확한 가격과 기본적인 "장바구니에 추가" 버튼을 포함하세요.

레이아웃

대부분의 제품 상세 페이지 레이아웃은 동일합니다.

이미지 영역이 페이지 너비의 약 절반을 차지하고, 제품 세부 정보와 "장바구니에 추가" 버튼(때로는 "구매 영역"이라고도 함)이 나머지를 차지합니다.

흥미롭게도, 이 특정 레이아웃은 전자상거래 외부에서는 거의 찾아볼 수 없습니다.

하지만 이 컨텍스트에서는 합리적입니다. 우리는 콘텐츠를 왼쪽에서 오른쪽으로, 아래로, 다시 왼쪽에서 오른쪽으로 스캔합니다.

이를 Z-패턴 스캐닝이라고 하며, 쇼핑할 때 이 진행을 따르는 것이 합리적으로 보입니다.

먼저 페이지에서 가장 두드러진 요소인 이미지를 보고, 오른쪽으로 진행하여 제품 제목과 가격(그 외 세부 정보)을 보고, 아래로 이동하여 기본 액션 버튼을 봅니다.

제품 설명 세부 정보

탭이나 드롭다운을 사용하여 제품의 세부 정보를 구성하면 사용자가 이를 보지 못하고 페이지에서 검색할 수 없게 됩니다.

이는 사용자를 좌절하게 하고 사이트를 떠나게 할 수 있습니다. 숨길 필요가 없는 콘텐츠를 숨기는 것이 아니라 더 잘 디자인해야 합니다.

구성된 콘텐츠는 숨바꼭질을 하는 것보다 훨씬 더 사용하기 쉽습니다!

긴 페이지는 사용자에게 완전히 허용됩니다. 디자인이 복잡하고 어수선하지 않는 한, 사용자는 페이지 길이를 거의 눈치채지 못합니다.

제품의 세부 정보를 찾기 위해 스크롤해야 하는 것은 예상된 일입니다.

온라인에서 판매되는 다양한 제품을 생각해보세요. 거의 모든 것을 온라인에서 판매하죠?

이제 모든 가능성에 맞는 페이지를 디자인하려고 해보세요. 불가능합니다! 하지만 할 수 있는 것은 모든 콘텐츠를 쉽게 읽을 수 있는 섹션으로 구성하는 것입니다.

콘텐츠가 조직적이고 필수적이라면 끝없이 계속될 수 있습니다.

장바구니 디자인

효과적인 장바구니 디자인은 스캐너빌리티와 적절한 입력 및 버튼 사용의 조합에 달려 있습니다. 올바르게 디자인된 장바구니의 가장 중요한 요소는 무엇이라고 생각하시나요?

아마도 각 제품의 내용과 가격을 검토하고 싶을 것입니다. 또한 총 비용과 결제 옵션을 알고 싶을 것입니다.

각 항목의 제품 제목과 가격, 수량을 두드러지게 표시하세요. 그런 다음 총 비용과 결제 버튼을 분리하세요.

결제 버튼

결제 버튼을 표시할 때, 이미 기본 버튼에 대한 패턴이 있다면 그것을 사용하세요! 다른 결제 옵션은 시각적으로 경쟁할 수 있으므로,

혼란을 피하기 위해 각 옵션에 브랜드를 연관시키세요. 버튼은 브랜드와 연관되어 있습니다. 사용자는 이를 이해하고 자신에게 가장 적합한 옵션을 선택할 수 있습니다.

쿠폰 코드

쿠폰 코드 입력 필드의 디자인은 사용자 행동에 영향을 미칩니다.

사이트에 매일 프로모션이 진행된다면, 두드러진 쿠폰 코드 입력 필드를 사용하는 것이 괜찮습니다.

하지만 가끔씩만 프로모션이 있다면, 사용자가 사이트를 떠나 "<회사 이름> + 쿠폰 코드"를 검색하도록 유도할 수 있습니다.

그들은 놓치고 있다고 생각하는 어떤 할인을 찾기 위해 끊임없이 노력할 것입니다! 분명히 하나는 있을 것입니다! 그들은 단지 그것을 찾아야 합니다.

사이트에 모든 방문자가 쉽게 접근할 수 있는 지속적인 프로모션이 있는 경우에만 쿠폰 코드 필드를 강조하세요.

쿠폰은 장바구니의 중요한 요소이지만, 계층적 우위를 가질 필요는 없습니다.

텍스트 링크나 보조 액션 버튼이 있는 미묘한 입력 필드로 낮출 수 있습니다. 배치, 색상 및 텍스트를 사용하여 눈에 띄게 하지만 두드러지지 않게 하세요.

위으 글은 아래 원문을 번역 및 재가공한 글입니다.원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/e-commerce-design-best-practices/