탭 탐색: 사용 시기 및 최적화 방법

제가 가장 좋아하는 UX 인용문 중 하나 는 Google의 스튜디오 및 디자인 시스템 책임자인 Chikezie Ejiasi의 말입니다.

그는 이렇게 썼습니다. “인생은 대화입니다. 웹 디자인도 같은 방식이어야 합니다. 웹에서는 한 번도 만난 적이 없는 사람과 이야기하고 있으므로 명확하고 정확하게 말하는 것이 중요합니다. 따라서 잘 구성된 내비게이션과 콘텐츠 구성은 좋은 대화를 나누는 것과 밀접한 관련이 있습니다.”

탭 탐색이 명확하고 정확할 수 있습니까? 물론 그렇게 할 수 있으므로 탐색 및 콘텐츠 구성의 유효한 형식이 됩니다.

UX와 관련된 대부분의 일과 마찬가지로 중요한 것은 구현 방법과 최적화 방법입니다.

탭 탐색이란 무엇입니까?

탭 탐색은 콘텐츠를 여러 섹션으로 구분하는 탭에 정보가 구성되는 탐색 및 UI 스타일입니다.

일반적으로 탭 탐색을 보면 다음과 같은 몇 가지 공통된 특징을 알 수 있습니다.

1. 둥근 탭 모서리;
2. 공백이든 한 줄이든 탭 분리;
3. 탭에 호버 효과;
4. 탭에 깊이와 치수를 추가하는 그라데이션.

탭 내비게이션은 사무실에서 일하거나 텔레비전을 보는 사람이라면 누구나 친숙할 폴더 메타포를 기반으로 합니다. UsabilityGeek의 Mifsud가 설명하는 것처럼…

Justin Mifsud, UsabilityGeek :

“UI 용어에서 은유는 사용자와 응용 프로그램 간의 친숙함을 촉진하는 데 사용되는 아이디어 또는 개체입니다.

UI에서 탭을 사용하는 것은 파일 서랍의 폴더 탭이나 파일의 실제 탭 구분선처럼 보이기 때문에 훌륭한 은유입니다.

따라서 사용자는 이러한 탭이 콘텐츠를 섹션으로 나누고 실제 생활과 마찬가지로 탭(탭을 클릭하여 웹에서 에뮬레이션됨)에 도달하면 해당 콘텐츠가 표시된다는 사실을 더 직관적으로 알 수 있습니다.” (UsabilityGeek를 통해)

은유는 매우 일반적이기 때문에 구현에 주의하는 것이 중요합니다. 탭 내비게이션은 강력한 프로토타입을 가지고 있으므로 예상한 대로 정확하게 보이고 작동해야 합니다.

좋은 내비게이션 시스템과 마찬가지로 탭을 사용하여 다음을 수행할 수 있습니다.

• 콘텐츠를 다른 섹션으로 의미 있게 분리합니다.
• 사람들에게 어떤 콘텐츠를 사용할 수 있고 어떻게 해당 콘텐츠를 얻을 수 있는지 보여줍니다.
• 사람들이 사이트 내에서 어디에 있는지 시각적으로 보여줍니다.

언제 탭 내비게이션을 사용하는 것이 좋은가요?

일반적으로 다음과 같은 경우 탭 탐색을 사용하는 것이 좋습니다.

• 2개에서 9개 사이의 서로 다른 콘텐츠 범주가 있습니다.
• 카테고리 이름은 상대적으로 짧고 위치와 카피 측면에서 예측 가능합니다(즉, 프로토타입과 일치함).
• 범주의 수는 정기적으로 변경되지 않을 것입니다.
• 범주는 본질적으로 유사합니다. 함께 탭되어 있다는 것이 논리적으로 이해됩니다.
• 범주는 단일 행에 맞습니다.

Nielsen Norman Group의 Jakob Nielsen이 설명했듯이 탭 탐색이 너무 복잡해져 여러 행이 필요하면 문제가 발생하기 시작합니다.

Jakob Nielsen, Nielsen Norman Group :

“여러 행은 공간 메모리를 파괴하는 점핑 UI 요소를 생성하므로 사용자가 이미 방문한 탭을 기억할 수 없습니다.

또한 여러 행은 과도한 복잡성의 확실한 증상입니다. 단일 행에 맞는 것보다 더 많은 탭이 필요한 경우 디자인을 단순화해야 합니다.” (NN/g를 통해)

여러 행은 또한 시각적 계층 구조 문제를 만듭니다. 두 번째 행이 있는 경우 사용자에게 두 번째 행의 탭이 하위 범주이거나 적어도 첫 번째 행의 탭보다 덜 중요하다는 신호를 보낼 수 있습니다.

일반적으로 다음과 같은 경우 탭 탐색을 사용하는 것은 좋지 않습니다.

• 사람들이 동시에 콘텐츠를 비교하기를 원합니다. 이것은 기억력을 저하시키고 인지 부하를 상당히 증가시킵니다.
• "자세히..." 스타일 링크를 추가하는 것을 고려하고 있습니다.

물론 이것은 기본적인 지침일 뿐입니다. 모든 "사용해야 합니다" 규칙과 일치시킬 수 있으며 청중에게 적합하지 않음을 알 수 있습니다. 궁극적으로 테스트해야 할 것입니다.

디지털 분석을 사용하여 탭 탐색이 방문자에게 문제를 일으키는지 파악할 수 있습니다. 여기에서 문제를 수정하기 위해 변경하거나 새로운 유형의 탐색을 실험할 수 있습니다.

논란

현대적인 디자인 관행에는 이와 같은 사이트가 많이 있지만…

… 어떤 사람들은 탭 탐색을 기본 탐색으로 사용합니다.

Google의 Luke Wroblewski가 수년 전에 기록했듯이 Amazon은 실제로 이러한 추세를 개척했습니다.

루크 Wroblewski, 구글 :

“1998년에 이 사이트에는 책과 음악이라는 두 개의 최상위 카테고리가 있었습니다.

추가 범주(예: 비디오 및 선물)가 추가됨에 따라 가로 탭 시스템이 상당히 잘 확장되었고 색상을 통해 제품 범주를 차별화할 수 있는 좋은 기회를 만들었습니다.” (LukeW를 통해)

다음은 Amazon이 초기에 탭 탐색을 어떻게 사용했는지 살펴봅니다.

사이트의 인기가 높아짐에 따라 Amazon이 필요로 하는 탭의 수도…

1999년에 Jakob은 이것을 "나쁜 디자인과 탭 은유의 남용"이라고 불렀습니다.

관련 없는 위치로 이동하는 것보다 대체(그러나 관련된) 보기 사이를 전환하는 데 탭이 더 잘 사용된다고 주장합니다.

탭을 사용하여 다른 영역으로 이동하는 것이 아니라 동일한 컨텍스트 내에서 보기를 번갈아 사용해야 합니다. 번갈아 보는 동안 제자리에 머무르는 것이 처음에 탭이 있는 이유이기 때문에 이것이 가장 중요한 단일 포인트입니다.

제이콥 닐슨

그럼에도 불구하고 많은 사이트가 Amazon의 리드를 따랐고 탭 탐색의 정의가 Nielsen의 "대체 보기 간 전환"에서 바뀌기 시작했습니다.

기본 내비게이션 시스템으로 탭 내비게이션을 사용하는 것은 스타일에서 약간 벗어났지만 작동할 수 있습니다. 대부분의 경우와 마찬가지로 주요 관심사는 Nielsen이 탭 탐색에 대해 말하는 것이 아니라 청중이 말하는 것입니다.

그들은 사용하기 어렵다고 생각합니까? 그들이 귀하의 사이트를 제대로 탐색하고 있습니까? 사이트의 가장 중요한 요소를 찾을 수 있습니까? 확실하게 사용성 테스트를 수행하십시오.

탭 탐색을 구현하는 방법

에어캐나다는 대부분의 주요 항공사와 함께 탭 탐색을 잘 사용합니다…

모든 수준에서 탭 탐색을 직접 구현할 때 다음 사항을 염두에 두어야 합니다.

• 먼저 사이트의 정보 아키텍처(IA)를 설계하여 탭과 관련된 더 현명한 결정을 내릴 수 있습니다.
• 카테고리 이름(텍스트)뿐만 아니라 전체 탭을 클릭할 수 있어야 합니다.
• 전체 사이트에 대해 탭 탐색을 사용하는 경우에도 "홈" 탭을 사용하지 마십시오. 대신 로고로 방문자를 홈페이지로 안내하세요.
• 탭은 제어하는 ​​콘텐츠 영역에 연결되어야 탭의 범위가 명확해집니다.
• 범주 이름은 1~2단어 길이로 평이한 영어로 작성해야 합니다. 모두 대문자를 사용하면 탭을 읽기가 더 어려워지므로 사용하지 마십시오.
• 여러 행의 탭을 쌓지 마십시오. 필요한 경우 대신 하위 범주(예: 탭 아래에 있는 두 번째 가로 막대)를 사용하십시오. 하위 범주를 사용하는 경우 선택한 탭과 아래 하위 범주 막대 사이에 시각적 연결이 있는지 확인하십시오. 사용하는 하위 카테고리의 양이 너무 많지 않은지 확인하세요. 압축하고 단순화합니다.
• 선택한 탭은 현재 위치를 나타내기 위해 눈에 띄게 표시되어야 합니다. 그러나 선택하지 않은 탭은 너무 음소거되어 잊혀지거나 간과되어서는 안 됩니다.
• 사용자가 탭이 서로 어떻게 관련되어 있는지 완전히 이해할 수 있도록 페이지마다 일관된 탭 순서를 유지해야 합니다.

Jakob은 이러한 유형의 일관성이 중요한 이유를 설명합니다.

1. 인식 가능성. 어떤 것이 항상 똑같아 보이면 무엇을 찾아야 하는지, 찾았을 때 그것이 무엇인지 알게 됩니다.

2. 예측 가능성. 어떤 것이 항상 같은 방식으로 작동한다면 그에 따라 행동할 때 무슨 일이 일어날지 알 수 있습니다.

3. 권한 부여. 사용 가능한 모든 기능에 대한 과거 지식에 의존할 수 있으면 목표를 달성하기 위한 일련의 작업을 쉽게 구성할 수 있습니다.

4. 효율성. 새로운 것을 배우거나 일관성 없는 기능의 영향에 대해 걱정하는 데 시간을 들일 필요가 없습니다.

제이콥 닐슨

올바른 탭 탐색의 예

탭 탐색을 이해하는 가장 좋은 방법은 특히 매우 다양한 방식으로 사용될 수 있기 때문에 몇 가지 예를 살펴보는 것입니다.

1. 앨범 아트 컬렉션

앨범 아트 컬렉션은 탭 탐색의 다소 인기 있는 예입니다…

여기서 흥미로운 두 가지…

1. 내비게이션은 수평이 아닌 수직입니다.
2. 탐색에는 아이콘이 포함됩니다.

일반적으로 가로로 표시된 탭 탐색을 찾을 수 있습니다. 이것은 부분적으로 디자인 프로토타입 때문입니다. 흔하기 때문에 사람들은 로고 아래의 가로 공간에서 내비게이션을 찾는 경향이 있습니다.

물론 탐색을 위해 해당 공간을 사용하도록 제한된다는 의미는 아닙니다. 사용자 테스트를 사용하십시오. 사이트 사용 편의성에 영향을 미치는 문체상의 이유로 탐색을 이동하는 것을 원하지 않습니다.

앨범 아트 컬렉션은 탐색 아이콘을 사용하지만 텍스트 기반 설명을 포기하지 않습니다. 아이콘 사용성 테스트는 그 자체의 기사이지만 텍스트 기반 설명이 아이콘만 사용하는 것보다 더 사용하기 쉬운 경우가 많습니다. Six Revisions의 Jacob Gube는 다음과 같이 설명합니다.

Jacob Gube, 6개 개정판 :

"기호는 사람마다 다른 것을 의미할 수 있으므로 아이콘을 사용하여 탭 제어 텍스트를 대체하지 마십시오. 가장 안전한 방법은 일반 텍스트를 사용하여 창 정보를 설명하는 것입니다." (스매싱 매거진을 통해)

2. 인보이스 기계

Invoice Machine은 기본 탐색 예제로서 기본 탭 탐색입니다…

그러나 중복되는 "홈" 탭이 포함되어 있습니다. 선택한 탭이 어떻게 앞으로 가져오고 탭이 콘텐츠 영역에 연결되는지 확인하십시오.

3. 버퍼

Buffer는 내가 가장 좋아하는 탭 탐색의 예 중 하나였습니다. 과거에는 개인용 오퍼링과 비즈니스용 오퍼링이 있었기 때문에 탭을 사용하여 접은 부분 아래에 콘텐츠를 구분했습니다.

개인 콘텐츠의 시작은 여기였습니다…

그리고 기업을 위한 콘텐츠의 시작은…

이를 통해 완전히 분리된 사이트나 경험을 만들지 않고도 서로 다른 두 청중에게 말할 수 있었습니다.

나중에 Buffer의 제품 페이지는 다른 제품 중에서 Publish, Reply 및 Analyze와 함께 크게 변경되었습니다(모두 자명함). 페이지에 사용한 탭 탐색은 다음과 같습니다.

다양한 요금제 외에도 이러한 제품 기반 탭에는 탭의 제품과 관련된 다른 사용 후기가 표시되었습니다.

UX Booth의 David Leggett가 설명했듯이 탭 탐색은 기본 및 보조 수준의 탐색과 관련이 있습니다. Buffer의 경우처럼 접은 부분 아래에서도 사용할 수 있습니다.

David Leggett, UX 부스 :

“탭은 기본 및 보조 탐색 수준으로 제한될 필요가 없습니다. 사용자에게 동일한 콘텐츠의 영역 간에 전환할 수 있는 기능을 제공한다면 매우 유용할 수 있습니다.

페이지를 다시 로드하지 않고 콘텐츠를 전환하는 기술과 결합하면 페이지를 탐색하는 최종 사용자에게 실질적인 느낌을 줄 수 있습니다.” (UX부스 경유)

기억해야 할 3가지 모범 사례

탭 탐색을 실험하거나 작동하지 않는다고 판단하기 전에 접근성, 청킹 및 속도라는 세 가지 요소를 고려하십시오.

1. 접근성 문제

장애가 있거나 제한이 있는 사용자가 사이트에 액세스할 수 있기를 원합니다. 탭 탐색으로 그렇게 하려면 다음을 수행해야 합니다.

• 사람들이 키보드의 "Tab" 키를 사용하여 탭을 탐색하도록 허용합니다.
• 사람들이 키보드의 "Enter" 키를 사용하여 탭을 선택하도록 허용합니다.
• 대체 방법을 사용하여 어떤 탭이 선택되어 있는지 나타냅니다. 예를 들어 "활성"이라는 단어가 있는 제목 속성을 포함할 수 있습니다.

더 많은 사람들이 사이트를 더 쉽게 사용할 수 있도록 하면 전환율이 저하되지 않습니다.

2. 청킹 문제

탭 탐색을 사용하면 콘텐츠를 구성하고 청크하는 방법이 매우 중요합니다. 그렇기 때문에 위의 첫 번째 구현 권장 사항은 사이트의 정보 아키텍처와 관련이 있습니다.

Justin은 적절한 조직이 중요한 이유를 설명합니다…

Justin Mifsud, UsabilityGeek :

“탭은 화면 공간을 덜 차지하는 의미 있는 섹션으로 콘텐츠를 나눕니다. 이 점에서 사용자는 (단락에 모든 콘텐츠가 있는 것이 아니라) 관심 있는 콘텐츠에 쉽게 접근할 수 있습니다.” (UsabilityGeek를 통해)

귀하의 사이트에서 원하는 모든 콘텐츠를 고려하십시오. 그런 다음 해당 콘텐츠를 4~5개의 버킷으로 그룹화합니다. 아마도 이 연습을 반복하여 2~3개의 다른 버킷으로 끝낼 수 있을 것입니다. 좋아요. 사용자 테스트를 수행하여 어떤 사람들이 더 잘 반응하고 탐색하는지 확인합니다.

무엇보다 다음을 확인하고 싶을 것입니다.

1. 귀하의 콘텐츠는 논리적이고 예상 가능하며 방문자에게 명확한 방식으로 청크됩니다.
2. 탭의 순서는 의미 있고 논리적입니다.
3. 탭은 기존 프로토타입을 따릅니다. 예를 들어 SaaS 사이트는 종종 특정 방식으로 청크되고 전자 상거래 사이트는 종종 다른 방식으로 청크됩니다.

3. 속도가 중요하다

우리는 속도의 중요성에 대해 몇 번이고 썼습니다. 따라서 속도가 탭 탐색의 효율성에도 중요한 역할을 한다는 것은 놀라운 일이 아닙니다.

Jacob은 그것을 아주 잘 설명합니다…

Jacob Gube, 6개 개정판 :

“모듈 탭을 사용하는 목적은 콘텐츠를 빠르고 대화식으로 표시할 수 있도록 하는 것입니다. 이를 위해 HTML 문서에 인라인으로 작성된 비활성 창 콘텐츠를 만든 다음 CSS 및 JavaScript를 사용하여 창을 시각적으로 스타일 지정하고 숨길 수 있습니다. 이는 페이지를 다시 로드하거나 원격 소스 데이터를 요청하는 것보다 빠릅니다.

창 사이를 전환할 때 페이지를 새로고침하면 창 사이의 탐색이 상당히 지연되므로 페이지를 새로고침하지 마세요. Ajax를 사용하여 원격으로 로드된 콘텐츠는 동적이고 원격에 위치한 창 정보에 대한 옵션이 될 수 있지만 문서 트리에서 DOM이 비동기적으로 삽입된 노드를 인식하지 못하는 스크린 리더 사용자에게는 문제가 될 수 있습니다.” (스매싱 매거진을 통해)

이 조언은 탭 내비게이션을 기본 내비게이션으로 사용하는 사용자에게는 적용되지 않지만 Air Canada 및 Buffer와 같은 방식으로 탭 내비게이션을 사용하는 사용자는 유의해야 합니다.

결론

탭 내비게이션은 방문자와 절대적으로 "좋은 대화"를 이끌어낼 수 있습니다 . 제대로 구현된 경우 방문자에게 정확히 어디에 있는지, 정확히 무엇을 사용할 수 있는지, 정확히 어떻게 액세스할 수 있는지 등을 방문자에게 알릴 수 있을 만큼 명확하고 정확합니다.

사용성 테스트 및 최적화의 도움으로 대화가 더욱 향상됩니다.

그러나 모든 것과 마찬가지로 연구(이 경우 정보 아키텍처 연구)를 수행하고 테스트, 테스트, 테스트를 수행해야 합니다.

요약하자면…

1. 탭 내비게이션은 주 내비게이션 시스템으로 사용할 수 있을 뿐만 아니라 기본 또는 보조 내비게이션 수준을 넘어 사용할 수 있습니다.
2. 단일 행에 맞는 짧은 이름이 있는 2~9개의 견고하고 유사한 카테고리가 있는 경우 탭 탐색을 시도하십시오.
3. 사람들이 콘텐츠를 비교하기를 원하거나 "자세히…
4. 구현 모범 사례를 따를 수 있지만…
5. 중요한 것은 데이터입니다. 방문자가 탭 탐색으로 사이트를 탐색하는 데 어려움을 겪고 있습니까? 확인하기 위해 사용성 테스트를 수행합니다.
6. 나타나는 문제를 수정합니다. 또는 비용이 많이 드는 문제가 많은 경우 다른 내비게이션 시스템을 고려하십시오.
7. 탭 내비게이션의 경우 접근성, 청킹 및 속도가 모두 중요하므로 세심한 주의를 기울여야 합니다.

이것과 관련된 일을 하고 계십니까? CXL 커뮤니티 에 댓글을 달아주세요!