2014 년에 모델 커피숍의 레이아웃을 스케치했을 때, 헤더, 홈페이지, 카테고리와 상품 상세 페이지를 로고는 왼쪽, 장바구니는 오른쪽, 필터는 여기, 구매 버튼은 저기처럼 블록을 조립하듯 설명하는 것이 자연스러웠습니다.
사람들의 기본적인 기대는 크게 달라지지 않았습니다. 달라진 것은 맥락입니다. 이제 대부분의 디자인은 모바일에서 작동해야 하고, 상품 제안은 더 복잡해졌으며, 추가되는 모든 스크립트가 속도와 주의력을 놓고 경쟁합니다. 따라서 저는 더 이상 레이아웃을 무작정 따라 하라고 권하지 않습니다. 고객의 과업을 직접 따라가 보라고 권합니다.
헤더는 모든 선택지를 보여 주기보다 방향을 알려야 합니다
사람들은 헤더에서 브랜드, 내비게이션, 검색, 계정과 장바구니를 찾습니다. 이 요소들이 모두 같은 비중을 차지할 필요는 없습니다. 우선순위는 카탈로그와 구매 단계에 따라 달라집니다.
- 로고를 누르면 홈으로 이동하고, 이해하기 쉬운 텍스트 이름이 함께 표시됩니다.
- 제품이나 매개변수를 알고 있는 사람이 익숙한 위치에서 검색에 쉽게 접근할 수 있습니다.
- 장바구니는 현재 상태를 보여 주며, 상품을 추가한 뒤에도 사라지지 않습니다.
- 구매를 방해하지 않으면서 문의나 도움말을 쉽게 찾을 수 있습니다.
- 메뉴는 터치와 키보드로 사용할 수 있고, 마우스를 정확히 조준하지 않아도 작동합니다.
서랍형 메뉴는 카탈로그가 광범위할 때 도움이 될 수 있습니다. 카테고리가 열 개라면 그저 인상적인 장애물에 그치는 경우가 많습니다. Google은 일반적인 내비게이션 링크를 통해 카테고리와 상품에 접근할 수 있도록 하라고 권장합니다. 검색만으로는 로봇이 전체 카탈로그를 발견하지 못할 수 있습니다. 원칙은 전자상거래 사이트 구조 문서에 설명되어 있습니다.
홈페이지는 전체 카탈로그를 설명하기보다 트래픽을 분배해야 합니다
홈페이지에서는 이 숍이 무엇을 판매하는지, 누구를 위한 것인지, 어디로 이동하면 되는지를 빠르게 이해할 수 있어야 합니다. 저는 자동 슬라이더 대신 명확한 우선순위 하나와 주요 구매 상황으로 이어지는 안정적인 진입점 몇 가지를 선호합니다.
베스트셀러, 계절별 카테고리, 조언 또는 숍을 신뢰할 이유가 도움이 될 수 있습니다. 모든 블록에는 역할이 있어야 합니다. “페이지가 비어 보이지 않게 하기 위해서”는 역할이 아닙니다.
카테고리는 선택의 범위를 좁혀 줍니다
카테고리는 상품 그리드 위에 붙여 넣은 SEO 문구가 아닙니다. 카테고리는 의사결정을 돕는 도구입니다. 이름과 짧은 소개가 상품 제안을 정의하고, 필터가 범위를 좁히며, 정렬이 고객의 상황에 맞는 선택을 돕습니다.
- 필터 이름은 내부 데이터베이스 필드가 아니라 고객의 언어로 작성합니다.
- 필터링 후 활성화된 선택 항목을 보여 주고 쉽게 제거할 수 있도록 합니다.
- 중요한 하위 카테고리는 스크립트 값으로만 제공하지 말고 링크로 노출합니다.
- 비교에 필요한 목록 데이터를 보여 주고, 나머지는 상세 페이지에 배치합니다.
- 결과가 없을 때는 막다른 길이 아니라 돌아갈 방법을 제시해야 합니다.
브레드크럼은 카탈로그에서 현재 위치를 이해하는 데 도움을 주며, 검색 엔진이 계층 구조를 파악하는 데도 도움이 될 수 있습니다. 구조화된 데이터를 사용한다면 Google의 최신 브레드크럼 문서를 따르세요.
상품 상세 페이지는 버튼을 누르기 전과 후의 질문에 답해야 합니다
눈에 잘 띄는 장바구니 담기 버튼은 기본 요소일 뿐, 상세 페이지의 전부가 아닙니다. 결정하기 전에 고객은 이름, 가격, 옵션, 재고 여부, 배송, 반품, 사진과 구매 위험에 맞는 정보를 확인해야 합니다.
커피라면 원산지, 풍미, 로스팅, 중량과 추출 방식이 중요합니다. 드릴이라면 사양, 호환성과 서비스가 더 중요합니다. 보편적인 순서는 없습니다. 하지만 보편적인 질문은 있습니다. 고객이 올바른 옵션을 구매하고 나중에 반품하지 않으려면 무엇을 알아야 할까요?
리뷰는 신뢰할 수 있어야 하며 특정 상품과 관련되어야 합니다. 추천 상품은 선택을 뒷받침해야지, 거의 완료된 구매에서 고객의 관심을 돌려서는 안 됩니다. 상품 상세 페이지의 소셜 버튼은 여전히 우선순위가 아닙니다. 좋아요 버튼이 모든 질문의 답이던 시기는 이제 지나갔어야 합니다.
장바구니와 결제 과정에서는 예상하지 못한 일을 없애야 합니다
장바구니에서는 수량과 옵션을 변경하고 상품을 삭제할 수 있어야 합니다. 총액, 배송비와 배송 예정일은 세 번째 단계나 회원가입 후가 아니라 가능한 한 일찍 보여 주세요.
비회원 결제는 대체로 합리적인 기본값입니다. 계정이 실질적인 가치를 제공한다면 주문 후에 계정 생성을 제안하세요. 양식에는 올바른 레이블과 자동 완성이 필요하며, 오류 메시지는 무엇을 수정해야 하는지 설명해야 합니다. 터치 영역은 충분히 커야 합니다. 현재 기준은 WCAG 2.2 의 Target Size에 설명되어 있습니다.
버튼 색상이 아니라 과업을 측정해야 합니다
A/B 테스트는 충분한 트래픽과 하나의 가설, 결정적인 지표가 있을 때 도움이 될 수 있습니다. 충분한 표본 없이 매주 배너를 바꾸는 것은 놀이터일 뿐, 신뢰할 수 있는 결론이 아닙니다.
저는 검색과 필터 사용, 장바구니 담기, 양식 오류, 각 단계의 이탈, 반품과 지원 문의를 추적합니다. 수치에 더해 사람들의 행동과 질문을 관찰합니다. 분석은 어디에서 문제가 발생하는지 보여 주고, 사람은 그 이유를 설명해 주는 경우가 많습니다.
측정의 기반은 Google Analytics 4에 있습니다. 성능 점검은 웹사이트 속도를 높이는 방법에서 설명합니다.
온라인 숍은 장바구니의 위치가 독창적일 필요가 없습니다. 고객이 왜 이곳에서 이 상품을 구매해야 하는지를 설득력 있게 보여 주면 됩니다.
상품 및 판매 페이지의 논거에 대해서는 중요한 판매 페이지 요소를 계속 읽어 보세요. 웹사이트의 전체적인 기반은 웹 프로젝트를 시작하는 방법에서 확인할 수 있습니다.