Nick Nelson의 Breadcrumbs For Web Sites: What, When and How를 소개하고자 합니다.
브레드크럼(빵부스러기)은 핸젤과 그레텔에서 유래한 용어로, 사이트나 웹 앱에서 사용자의 위치를 보여주는 보조 내비게이션 시스템을 의미합니다. 브레드크럼을 웹사이트에 어떻게 활용할 수 있는지와 좋은 사례를 살펴보겠습니다.
브레드크럼 내비게이션은 더 유용하다
브레드크럼 내비게이션은 사용자에게 '맥락 정보'를 제공하는 좋은 방법이며, 사용자가 다음 질문에 대한 답을 찾는 데 도움을 줍니다.
- 지금 어디에 있는가? 사용자가 사이트 전체 구조 안에서 자신의 위치를 알 수 있도록 해야 합니다.
- 어디로 갈 수 있는가? 사이트의 검색 가능성을 높여주고, 메뉴를 펼쳐 보여줌으로써 사이트 구조를 더 쉽게 이해할 수 있도록 해야 합니다.
- 거기로 가야 하는가? 콘텐츠의 가치를 명확히 전달하고 브라우징을 유도해야 합니다. 예를 들어, 사용자가 상품을 검색한 후 마음에 들지 않을 경우, 쉽게 상위 카테고리로 돌아가서 다른 상품을 살펴볼 수 있도록 해 사이트 이탈률을 줄여야 합니다.
브레드크럼 내비게이션의 장점
첫째, 사용자가 상위 페이지로 가기 위해 필요한 행동의 수를 줄여야 합니다. 뒤로 가기 버튼이나 전체 내비게이션을 사용하지 않고도 한 번에 이동할 수 있어야 합니다.
둘째, 최소한의 공간을 차지해야 합니다. 링크가 걸린 텍스트를 가로로 펼쳐 보여주기 때문에 콘텐츠가 너무 많아지지 않도록 해야 합니다.
셋째, 사용자가 잘못 이해하거나 조작할 수 있는 상황이 없어야 합니다.
언제 브레드크럼을 이용해야 하는가?
브레드크럼 내비게이션이 사이트에 도움이 되는지 판단하기 위해서는 사용자가 카테고리 내에서 또는 카테고리 사이에서 필요한 정보를 더 잘 찾는지 직접 테스트해봐야 합니다.
- 많은 양의 콘텐츠가 수직형 구조나 계층 구조로 되어 있으면 반드시 브레드크럼 내비게이션을 사용해야 합니다. (예: 이커머스 사이트)
- 반면, 논리적 계층 구조나 그룹핑이 없는 단일 레벨 웹사이트에서는 브레드크럼을 사용하지 않는 것이 좋습니다.
브레드스크럼 유형 1. 위치 기반(location based)
위치 기반 브레드크럼은 사이트 구조를 보여줘 사용자가 여러 레벨의 구조를 쉽게 이해할 수 있도록 도와줍니다. 특히, 검색 엔진 결과와 같은 외부 소스를 통해 사이트 내부 정보에 접근한 방문자에게 매우 유용합니다.
브레드크럼 유형 2. 경로 기반(path based)
경로 기반 브레드크럼은 사용자가 특정 페이지에 도달하기까지 지나온 전체 경로를 보여줍니다. 이 방법이 유용할 때도 있지만, 대부분의 경우 혼란을 줄 수 있습니다. 방문자가 여러 페이지를 오가며 탐색하기 때문에 경로 정보를 제공하는 것이 큰 의미가 없을 때가 많습니다. 특히 외부에서 직접 내부 페이지로 들어온 경우에는 전혀 도움이 되지 않습니다.
경로 기반 브레드크럼이 혼란을 줄 수 있는 이유는 다음과 같습니다.
1) 비일관성
사용자가 여러 페이지를 오가면, 경로 정보가 일관되지 않아 혼란을 초래할 수 있습니다. 각 방문자가 다른 경로를 거쳐 왔기 때문에, 보여지는 경로가 실제 탐색과 맞지 않을 수 있습니다.
2) 직접 접근
외부 링크나 검색 엔진을 통해 특정 페이지에 직접 접근한 경우, 이전 경로가 없기 때문에 경로 정보가 의미가 없어집니다. 사용자는 자신이 어떤 경로를 통해 왔는지 알지 못하게 됩니다.
3) 복잡한 구조
사이트 구조가 복잡할수록, 경로 기반 브레드크럼은 오히려 사용자가 필요한 정보를 찾는 데 방해가 될 수 있습니다. 경로가 길어질수록 정보가 과도하게 제공되어 이해하기 어려워질 수 있습니다.
따라서 경로 기반 브레드크럼이 모든 상황에서 유용하지 않을 수 있습니다.
브레드크럼 유형 3. 속성 기반(attribute based)
속성 기반 브레드크럼은 특정 페이지나 제품의 카테고리를 보여줘 이커머스 사이트에서 유용합니다. 예를 들어, TM Lewin 사이트의 두 번째 이미지에서는 보이는 아이템들의 속성을 페이지에서 확인할 수 있습니다.
속성 기반 브레드크럼이 이커머스 사이트에서 유용한 이유는 다음과 같습니다.
1) 명확한 카테고리 표시
사용자가 어떤 제품이나 페이지에 있는지를 명확하게 보여줍니다. 이를 통해 소비자는 쉽게 원하는 제품을 찾을 수 있습니다.
2) 속성 정보 제공
제품의 속성(예: 색상, 사이즈 등)을 한눈에 확인할 수 있어, 구매 결정을 내리는 데 도움이 됩니다. 사용자는 다양한 옵션을 비교하며 선택할 수 있습니다.
3) 탐색 용이성
사용자가 현재 위치를 이해하고, 관련된 카테고리로 쉽게 이동할 수 있도록 도와줍니다. 이는 사이트 탐색의 편의성을 높입니다.
4) 구매 경험 향상
속성 기반 브레드크럼은 소비자가 제품을 더욱 쉽게 탐색하고, 원하는 상품을 빠르게 찾을 수 있도록 도와줍니다. 이는 고객의 만족도를 높이고, 구매 전환율을 증가 시킬 수 있습니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요