브레드 크럼의 6가지 중요한 측면 (후편)
Breadcrumb
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
3. 브레드 크럼 경로 구현 방법
테스트 결과 계층 및 범주 레이블을 검토하고 필요에 따라 수정한 후에도 상품 상세 페이지의 브레드 크럼의 길이가 여전히 문제인지, 홈페이지 및 상품 페이지 레이어가 제외된 후에도 문제인지에 대한 디자인 패턴이 발견되었습니다.
⭕️ OverStock에서는, 상품 상세 페이지에서 브레드 크럼을 스와이프 하고 새로운 카테고리 링크를 탭 했을 때, “이러한 나열이나 각 상품에 도달하는데 경로를 확인할 수 있기에 웹 사이트에서 편리하다고 생각합니다"라는 코멘트가 있었습니다. 모든 카테고리 계층을 브레드 크럼으로 표시하고 브레드 크럼이 너무 길어 화면에 다 들어가지 않을 경우는 스와이프를 통해 사용자는 완전한 계층을 확인하고 액세스 할 수 있게 됩니다.
가로로 스와이프 할 수 있도록 브레드 크럼을 구현하면 공간을 절약하면서도 표준 모바일 제스처를 통해 사용자가 전체 또는 거의 완전한 계층구조에 액세스 할 수 있습니다.
스와이프 가능한 요소로 브레드 크럼을 구현하는 경우 의도된 상호 작용이 사용자에게 확실히 전달되도록 하는 것이 중요합니다.
⭕️ Haynedle의 상품 상세 페이지 상단에 표시되는 스와이프 가능한 브레드 크럼은 사용자가 전체 사이트 구조 내에서 현재 위치에 대한 인식을 높이고 공간을 추가로 사용하지 않고도 모든 계층 수준에 대한 원탭 액세스를 제공합니다.
특히, 브레드 크럼의 시작 또는 끝을 가리면 사용자는 왼쪽 또는 오른쪽으로 스와이프 하여 추가 계층 계층을 보고 액세스 할 수 있는지 즉시 확인할 수 있습니다. 특히, 스와이프 가능한 브레드 크럼으로 구성된 사이트는 테스트 중 태스크가 잘 수행되었습니다.
4. 브레드 크럼의 구성 및 생략에 주의하십시오
완전한 계층 경로를 포함하는 브레드 크럼 구현을 위한 두 가지 추가 디자인 패턴도 고려할 수 있습니다. 그러나 이 사항은 계층구조가 얕은 곳에서만 고려되어야 하며 신중하게 구현되어야 합니다.
1. 브레드 크럼을 두 줄로 구성
2. 중간 계층 구조를 생략
1. 브레드 크럼을 두 줄로 구성. 상품 페이지 계층의 항목 이름을 짧은 항목 번호로 바꾼 후에도 전체 계층 구조를 나타내는 브레드 크럼이 TigerDirect 및 Northern Tool의 두 번째 줄로 줄 바꿈 됩니다. 이 접근법에서는 개별 브레드 크럼 요소의 크기와 간격을 충분히 유지할 수 있도록 주의를 기울여야 합니다.
1. 브레드 크럼을 두 줄로 구성하는 것. 얕은 계층을 가진 사이트의 경우, 완전한 계층을 가진 브레드 크럼이 두 줄로 발생할 가능성은 낮기 때문에 유효한 선택라고 할 수 있습니다.
또한 브레드 크럼을 두 줄로 구성할 경우, 각 브레드 크럼 요소의 크기와 간격이 충분하지 않으면 탭의 미스가 발생할 수 있는 리스크가 생깁니다. 일반적인 모바일의 히트 영역의 최소 사이즈는 7x7mm, 요소 간의 간격은 2mm인데 이 스펙에 맞추는 것은 어려울 수 있습니다(불가능한 것은 아니지만).
게다가 브레드 크럼을 두 줄로 구성하면 페이지 상부 표시가 혼잡하게 되고 사용자가 다른 요소와 구별에 어려움을 겪거나 정보를 놓치게 되는 가능성도 높아집니다.
따라서 브레드 크럼을 두 줄로 구성하는 것은, 두 줄로 표시되는 가능성이 낮은 사이트나 계층이 얕은 사이트에서만 검토하는 것이 좋습니다.
2. 중간 계층 구조를 생략. REI에서는 계층의 중간층이 생략되어 생략 기호로 대체하고 있습니다(첫 번째 이미지). 이것을 탭 하면 숨겨져 있던 계층이 표시됩니다(두 번째 사진). 현재 상품의 부모가 되는 카테고리에 대응하는 톱 레벨의 카테고리를 표시하는 것으로 사용자는 브레드 크럼을 인식하고 사이트 전체 구조를 인식할 수 있게 됩니다. 이런 접근방법은 사용자의 상호 작용에 심각한 지장을 줄 수 있습니다.
2. 중간 계층 구조를 생략하는 것. 중간 계층의 브레드 크럼 링크를 생략 기호로 표시하는 것으로 사용자에게 추가 계층의 존재를 알리고 화면의 불필요한 이용을 억제할 수 있습니다.
동시에 이 접근 방법은 1) 사용자가 작은 사이즈의 생략 기호를 발견한다는 것에 의존하고, 2) 숨겨진 중간 계층을 노출시키기 위해 기대되는 상호작용을 사용자가 이해한다는 것이 전제이며, 3) 계층의 깊이와 자신의 현재 위치를 이해한다는 것을 사용자에게 요구합니다.
즉, 중간 계층을 생략하는 것은 사용자에게 많은 노력을 요구하게 되므로 일부 사용자는 브레드 크럼을 놓치거나 무시할 가능성이 높아집니다.
게다가 생략된 브레드 크럼은 노출된 브레드 크럼 링크를 탭 하면 대상 페이지로 이동하는 것이 아니라 중간 계층이 표시되는 것으로 사용자의 기대에 벗어나는 위험성이 있습니다.
또한, 기본적으로 표시되는 브레드 크럼에 대응하는 상품을 보고자 하는 사용자는 상품 페이지에 도달하는데 2번 탭을 해야 하기에 사용자의 수고가 2배가 됩니다.
5. 2 가지 구현 방법
브레드 크럼이 어느 형태로 구현된다고 해도 독자의 적절한 스타일, 충분한 사이즈, 다른 요소와의 간격이 적절하지 않다면 모바일 화면에서는 쉽게 상실될 수 있습니다.
테스트에서 일부 사용자가 상품 상세 페이지의 브레드 크럼을 인식하지 못해 다른 항목으로 이동하기 위한 시간과 노력이 늘어났습니다. 사용자가 브레드 크럼을 간과하면 전체적으로 직관적이지 않고 탭을 많이 사용하게 되는 탐색 경험이 됩니다.
브레드 크럼을 간과하지 않기 위해 2 가지의 구현 방법이 중요합니다.
1. 상품 상세 페이지 상단에 브레드 크럼이 다른 요소와 섞이지 않도록 한다
2. 접근성을 전달하기 위한 충분한 시각적 단서를 제공한다
❌ 1. 상품 상세 페이지 상단에 다른 요소와 브레드 크럼이 섞이지 않도록 합니다. 이 사용자는 Macy's의 상품 상세 페이지를 15~20초 정도 스크롤하여 상품 목록을 표시하는 방법을 찾았고 최종적으로 '모든 스킨케어'의 브레드 크럼 링크를 찾아 탭 하였습니다. 브레드 크럼이 같은 색으로 표시되는 다양한 텍스트 요소 등 비슷한 스타일의 요소 속에 파묻혀 있거나 적절한 간격으로 배치되지 않으면 사용자가 인식하기 어려워집니다(브레드 크럼이 상품 타이틀의 거의 바로 위에 배치되어 있습니다).
1. 상품 상세 페이지 상단에 다른 요소와 브레드 크럼이 섞이지 않도록 합니다. 상품 상세 페이지에서는 브레드 크럼 근처에 비슷한 스타일의 요소가 많이 표시되어 있으면 브레드 크럼을 식별하기가 어렵습니다.
난잡하게 표시되어 있으면 사용자가 독특한 요소를 효과적으로 구분하지 못하고 간과해 버릴 가능성이 높아집니다.
따라서 브레드 크럼을 놓치지 않으려면 다른 요소들과는 다른 독자적인 스타일을 가지고 주위에 충분한 여백을 마련해야 합니다.
❌ 2. 탭 가능성을 전하기 위한 충분한 시각적 단서를 제공합니다. B&H의 해당 사용자는 외부 링크를 통해 상품 상세 페이지에 직접 접속한 후 다른 헤드폰을 보고 싶어 했습니다. 이 유저는 브레드 크럼(첫 번째 이미지)을 간과하고 대신에 메인 메뉴(두 번째 이미지)를 사용해 헤드폰의 카테고리 제품 리스트로 이동했기 때문에 같은 페이지에 도착할 때까지의 탭 회수가 증가했습니다. 브레드 크럼에는 밑줄이 그어져 있지 않으며 구분도 아주 조심스러운 느낌입니다. 모바일 사용자는 브레드 크럼 등의 요소를 명확하게 탭할 수 있는 것처럼 보이지 않으면 간과하기 쉽습니다.
2. 탭 가능성을 전하기 위한 충분한 시각적 단서를 제공합니다. 데스크톱 사용자는 클릭 가능한 요소에 마우스 커서를 맞추면 밑줄이나 색상이 변화하지만 모바일 사용자는 페이지 상의 무엇인가가 인터랙티브 한 지 여부를 식별하기 위해 시각적인 피드백을 이용할 수 없습니다.
시각적인 단서가 약하면 모바일 사용자는 액션 가능한 요소인지 아닌지를 알기 위해서만 탭을 낭비하거나 불만의 원인이 됩니다. 사용자 중에는 택할 수 없을 것 같은 링크를 무시하는 버릇이 생겨 귀중한 정보를 놓치거나 흥미 있는 상품이나 콘텐츠에 도달할 때까지의 탭 횟수가 늘어날 수도 있습니다.
따라서 모바일 사용자에게 브레드 크럼 리스트가 탭 가능하다는 것을 명확히 하는 것이 중요합니다.
기본적으로는 브레드 크럼에 밑줄을 치고 링크된 각 계층 사이에 ">", "/"등 기존 구분을 넣어 모바일 사용자에게 브레드 크럼이나 탭 가능한 요소임을 강조하며 페이지 상의 다른 텍스트와 시각적으로 구분하여 인지도를 높일 수 있습니다.
6. 사용자가 사이트 계층을 이해하고 접근할 수 있도록 지원
⭕️ Target사의 유저는 남성용 스니커즈의 상품 상세 페이지에 있는 브레드 크럼 링크를 곧바로 찾아내(첫 번째 이미지), 사이트의 계층을 이동하고 형제 카테고리인 ‘여성용 슈즈’로 전환했습니다(두 번째 이미지). 브레드 크럼 링크를 다른 페이지 요소와 다른 스타일로 표시하고 브레드 크럼 링크 주위에 충분한 여백을 마련하여 브레드 크럼 링크를 놓치지 않도록 합니다. 또한 모바일에서는 기본적으로 브레드 크럼에 밑줄을 표시하여 시각적으로 탭 하기 쉽게 합니다.
브레드 크럼이 찾기 어렵거나 완전한 계층 경로에 접근할 수 없게 되면 모바일 사용자에게 현재 위치를 즉시 알리고 원 탭으로 더 높은 계층에 접근하여 관련된 다른 아이템을 조사하거나 형제 카테고리로 점프할 수 있다는 브레드 크럼의 본래 목적이 훼손됩니다.
테스트에서는 완전하거나 거의 완전한 '계층형'의 브레드 크럼을 제공하는 사이트가 일반적으로 사용자들은 브레드 크럼을 더 잘 이용할 수 있었습니다. 그러나 당사의 모바일 벤치마크 데이터에 따르면 브레드 크럼 표시가 있는 사이트의 36%는 완전한 계층을 표시하지 않습니다.(또 65% 사이트에서는 모바일용 브레드 크럼이 전혀 표시되지 않았습니다.)
또한 브레드 크럼의 패스가 너무 길어지지 않도록 하기 위해서는 다음과 같은 것이 중요합니다.
1) 과도한 카테고리화를 피한다.
2) 홈페이지와 상품 페이지의 계층을 억제한다.
브레드 크럼 경로가 너무 길 경우에는 수평 방향으로 스와이프 가능한 요소로 구현하고, 브레드 크럼의 두 줄 표시나 생략은 신중하게 해야 합니다.
마지막으로 브레드 크럼을 쉽게 발견하고 식별할 수 있도록 하기 위해서는 다음 사항이 필요합니다.
3) 다른 텍스트의 페이지 요소와 다른 스타일로 한다.
4) 주위에 충분한 여백을 확보한다.
5) 시각적인 구분을 포함한다.
6) 기본적으로 밑줄을 긋는다.
찾기 쉬운 브레드 크럼 요소는 카테고리의 전체 경로를 나타내 모바일 사용자가 사이트 계층의 어디에 있는지를 파악하고 찾고 있는 경로에 빠르게 접근할 수 있도록 합니다.
번역 : Hyunmin Kim
UX DAYS SEOUL설문 조사
항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.
예상 소요 시간 : 30초
설문조사 URL
