우리는 종종 고정 헤더 에 의존하여 중요한 기능이나 클릭 유도문안으로 사용자의 주의를 집중시킵니다. 사이드바 탐색, CTA, 고정 머리글 및 바닥글, 표의 "고정된" 행 또는 열, 플로팅 버튼을 생각해 보십시오. 우리는 이미 Smart Interface Design Patterns 에서 모바일 내비게이션 패턴을 살펴보았지만 고정 메뉴는 자세히 살펴볼 가치가 있습니다.
사용자가 스크롤할 때 고정 메뉴가 항상 표시됩니다. 그리고 일반적으로 특히 메뉴가 자주 사용되는 경우, 특히 탐색 속도를 높이 려는 경우 좋은 기능으로 간주됩니다 .
왼쪽에 Sverigesradio가 있고 오른쪽에 TV Gids가 있는 고정 메뉴의 두 가지 예
사용 중인 여러 고정 메뉴: Sverigesradio 및 TV Gids 에서 여러 연결된 고정 메뉴가 있습니다. ( 큰 미리보기 )
그러나 고정 메뉴에는 몇 가지 단점도 있습니다. Sticky Menus Are Problematic, And What To Do Alternative 에 대한 그의 최근 기사에서 Adam Silver는 고정 메뉴의 몇 가지 일반적인 사용성 문제와 이를 해결하는 방법에 대해 논쟁합니다. 자세히 살펴보겠습니다.
고정 메뉴가 유용한 경우 #
메뉴가 고정되어야 하는지 여부를 어떻게 결정합니까? 이는 페이지의 기본 작업 에 따라 다릅니다. 기본적으로 정보를 전달하도록 설계되었고 많은 탐색이 필요하지 않은 경우 고정 메뉴는 별로 도움이 되지 않습니다.
프랑스 TV의 끈끈한 막대
France TV 의 채널을 탐색하는 데 도움이 되는 끈적끈적한 음유시인 . ( 큰 미리보기 )
그러나 사용자가 페이지의 여러 보기 사이를 많이 탐색하고 그렇게 하는 동안 페이지에 머문다면(종종 긴 랜딩 페이지, 제품 페이지 및 필터 에서 그렇듯이) 탐색에 액세스할 수 있는 경우 AZ 또는 탭 은 매우 도움이 됩니다 .
또한 사용자가 데이터 테이블의 기능을 비교할 때 고정 헤더는 사용자가 항상 올바른 데이터를 보는지 확인하는 데 도움이 됩니다. 고정 헤더 또는 열이 도움이 되고 이해를 도울 수 있는 곳입니다. 그렇기 때문에 고정 막대가 전자 상거래에서 자주 사용되며 내 경험상 콘텐츠의 검색 가능성과 상호 작용 속도를 향상시킵니다.
끈적끈적한 머리글은 작게 유지하되 분노 탭을 피할 수 있을 만큼 충분히 크게 유지하세요. #
고정 메뉴의 단점은 일반적으로 콘텐츠를 가리기 때문에 사용자가 페이지를 탐색하기 더 어렵게 만든다는 것입니다 . 모바일 및 데스크톱의 전체 너비 막대는 일반적이지만 특히 좁은 화면에서는 크기가 작아야 합니다. 그리고 레이지 탭과 레이지 클릭을 방지하기 위해 액세스 가능한 탭 크기를 수용해야 합니다 .
우편 서비스의 고정 막대 탐색
고정 막대 탐색에 4개의 항목이 있는 아이슬란드의 우편 서비스(현재 변경됨). (출처: Posturinn ) ( 큰 미리 보기 )
일반적으로 이는 고정 막대 탐색에 5개 이상의 항목을 포함할 수 없음을 의미합니다. 고정 메뉴에 표시되는 항목의 선택은 사용자가 웹사이트에서 수행해야 하는 가장 중요한 작업에 의해 알려져야 합니다. 5개 이상의 항목이 있는 경우 Samsung 에 표시되는 일종의 오버플로 메뉴를 살펴봐야 할 수 있습니다 .
Samsung의 스티커 오버플로 메뉴
Samsung 의 스티커 오버플로 메뉴 . ( 큰 미리보기 )
사용자가 모바일 페이지의 양식을 처리해야 할 때마다 고정 메뉴를 아코디언으로 바꾸는 것을 고려하십시오. 가상 키보드는 일반적으로 화면의 최대 60%를 차지하며 고정 막대가 표시되면 양식을 빠르게 채우는 것이 거의 불가능해집니다.
점프 후 더! 아래 계속 읽기 ↓
Vitaly Friedman의 9시간 비디오 라이브러리인 Smart Interface Design Patterns 로 UX 기술을 향상시키십시오 . 100 가지 의 실제 사례 , 디자인 지침 및 친근한 실시간 UX 교육을 제공합니다. 무료 미리보기를 확인하세요 .
UX 비디오 코스 바로가기 ↬
기능 패널
고정 메뉴의 접근성 문제 #
본질적으로 고정 메뉴는 항상 콘텐츠 위에 위치하며 종종 접근성 문제를 일으킵니다 . 사용자가 확대하면 중단됩니다. 콘텐츠를 탭하는 키보드 사용자의 콘텐츠를 차단하는 경우가 많습니다. 링크 및 기타 포커스 가능한 요소를 가립니다. 그리고 메뉴와 콘텐츠 영역 사이에 대비가 충분 하지 않은 경우가 많습니다 .
고정 하위 메뉴 탐색과 콘텐츠 영역 간의 대비가 좋지 않은 예
고정 하위 메뉴 탐색과 콘텐츠 영역 간의 대비가 좋지 않으면 접근성 문제가 발생할 수 있습니다. NN/Group 을 통해 검색되었습니다 . ( 큰 미리보기 )
스티키 메뉴를 구현할 때마다 스티키 메뉴가 작동하는 동안 포커스 가능한 요소가 계속 표시되는지 확인해야 합니다. 또한 이것은 CSS의 scroll-padding 속성 이 있는 고정 막대를 고려해야 하는 내부 페이지 앵커에도 적용됩니다 .
긴 고정 메뉴의 여러 스크롤바 피하기 #
고정 메뉴가 길어지면 목록의 마지막 항목에 액세스하기 어려워집니다 . 일종의 오버플로 메뉴를 사용하여 표시할 수 있지만 종종 스크롤 가능한 창으로 표시되어 여러 스크롤 막대가 발생합니다.
호주 통계청의 큰 고정 사이드바 탐색
큰 고정 사이드바 탐색이 있는 호주 통계청 . ( 큰 미리보기 )
이 동작은 검색 가능성 문제를 일으킬 뿐만 아니라 종종 페이지에서 실수 및 반복 작업의 원인이 되기도 합니다. 이상적으로는 항목 수를 짧게 유지하여 방지하지만 종종 불가능하거나 제대로 관리할 수 없습니다.
Smashing Magazine의 아코디언 메뉴 예
필요할 때 카트 세부 정보를 표시하고 숨깁니다. 스매싱 매거진에서. ( 큰 미리보기 )
탈출구는 특히 모바일 장치에서 공간이 제한된 상황에서 대신 아코디언으로 메뉴를 표시하는 것입니다. 필요할 때 장바구니의 내용물을 표시하거나 숨기는 버튼을 사용하여 계산대에서 Smashing Magazine에서 하는 일입니다.
하루 만에 Data Grid를 준비하는 것이 그 어느 때보다 쉬워졌습니다.
우리의 그리드를 사용해보십시오
부분적으로 지속되는 메뉴 #
고정 메뉴는 종종 너무 많은 공간을 차지하기 때문에 필요할 때 표시 하고 사용자가 콘텐츠에 집중할 때 숨길 수 있습니다. 이것이 부분적으로 지속되는 헤더의 기본 아이디어입니다. 사용자가 아래로 스크롤하기 시작하면 메뉴가 사라지지만 위로 스크롤하면 메뉴가 다시 표시됩니다.
부분적으로 지속되는 메뉴
CB2 의 부분적으로 지속되는 메뉴 , 필요할 때 나타나고 필요하지 않을 때 사라집니다. ( 큰 미리보기 )
이 패턴의 문제는 때때로 사용자가 페이지의 이전 섹션으로 돌아가거나 이전 단락의 일부 세부 정보를 다시 확인하기를 원할 때 메뉴가 종종 방해가 된다는 것입니다. NN/Group의 Page Laubheimer는 약 300~400ms 길이의 슬라이드 인 애니메이션을 사용하여 주의를 산만하게 하지 않고 자연스러운 느낌을 유지할 것을 권장합니다.
고정 메뉴의 대안 #
어떤 상황에서는 스티커 메뉴가 결국 필요하지 않을 수도 있습니다. 짧은 페이지 또는 관련 클릭 유도 문안 또는 페이지 내 탐색을 반복하는 긴 페이지 로 단점을 피할 수 있습니다 .
영국 정부 및 뉴질랜드 정부 웹사이트에 표시되는 목차
영국 정부 및 뉴질랜드 정부 웹사이트 에 표시되는 목차 . ( 큰 미리보기 )
페이지 상단에 목차를 표시 하고 페이지 하단에 위로 가기 링크를 사용하여 목차에 대한 사용자의 주의를 끌 수 있습니다.
Smashing Magazine으로 광고하기
마무리 #
페이지의 역할이 사용자의 행동, 저장, 비교를 돕는 것이거나 사용자가 내비게이션에 많이 의존할 것으로 예상되는 경우 고정 내비게이션 표시를 고려할 수 있습니다. 어쨌든 공간이 충분하지 않을 때 가장 해롭습니다. 모바일 장치의 양식에서 자주 발생합니다.
고정 메뉴는 사용성 및 접근성 문제, 특히 확대/축소, 키보드 탐색 및 앵커 점프를 고려해야 하므로 비용이 듭니다 . 필요한 경우 추가하되 기본적으로 연결하는 데 주의하십시오.
중요한 것의 우선순위를 정하고 그렇지 않은 것은 제거해야 합니다. 너무 자주 초점은 탐색이 아닌 콘텐츠에 전적으로 있어야 합니다.
Smart Interface Design Patterns ???? 의 비디오 라이브러리 에서 내비게이션 UX 에 대한 자세한 내용을 확인할 수 있습니다 . 올해 9월에 라이브 UX 교육이 제공됩니다.
