Searchbox

Searchbox는 사람들이 정보에 쉽게 접근하게 해 주는 요소로, 검색을 지우고 필터링할 수 있는 유연성과 기능을 제공해요. 검색이라는 익숙한 패턴을 통해 원하는 정보를 빠르게 찾을 수 있게 돕는 요소예요.

출처: Searchbox 문서

본문

Behavior (동작)

Focus animation (포커스 애니메이션)

정지(rest) 상태와 포커스 상태 사이의 애니메이션은 input 필드 애니메이션과 동일해요. searchbox가 포커스를 받으면 나타나죠.

Searchbox behavior

Layout (레이아웃)

검색 폼에서 일관된 레이아웃은 학습된 패턴을 만들고 사용자에게 편안함을 줘요. Close 버튼은 searchbox에 콘텐츠가 있을 때만 나타나요. 필터 아이콘과 필터 드롭다운은 앱의 요구사항과 기술 역량에 따라 선택 사항이에요.

Searchbox layout

Accessibility (접근성)

Responsiveness (반응성) — searchbox는 그것이 위치한 컨테이너에 완전히 반응형이에요. 확대 수준과 페이지 크기가 searchbox가 차지하는 공간에 영향을 주지만, 기능은 동일하게 유지돼요. 페이지를 400% 확대 수준으로 설계할 때, searchbox가 어디에 위치할지 얼마나 자주 사용되는지 고려하세요. 더 작은 뷰포트 크기에서는 searchbox를 돋보기(Magnifying glass) 아이콘으로 다시 그려서, 클릭하면 더 나은 사용성을 위해 전체 너비의 searchbox를 활성화할 수 있어요.

Searchbox accessibility

Content (콘텐츠)

Results ordering (결과 순서)

Searchbox는 사용자가 익숙한 주제에 빠르게 직접 접근하게 하면서, 동시에 낯선 주제로 가는 유용한 경로가 되어 줘요. 사용자는 결과가 정확하고, 자동 완성되고, 지능적이며, 예측 가능하길 기대해요. 그래서 순서 지정 지침을 설정하는 것이 결과에 대한 신뢰를 쌓는 데 도움이 돼요.

일부 검색 명령은 결과를 가져오는 데 시간이 걸리기 때문에, 그러한 경우에는 순서 전략이 유연해요.

최근 주제(Recent topics)는 searchbox가 포커스를 받는 즉시 표시돼요. 검색어가 입력되고 검색 질의가 결과를 모으기 시작하면 제안 결과(suggested results)로 대체되죠. 많은 앱이 결과 뒤에 관련 주제와 제안을 표시해요.

항상 사용자가 찾고자 하는 것에 가장 가까운 가장 관련성 높은 옵션을 먼저 보여주세요.

Searchbox content

더 알아보기 (Learn more)

Searchbox 스토리북 및 React 가이드: react.fluentui.dev
검색 결과의 신뢰도를 높이려면 정확·자동완성·지능형·예측형 결과를 우선 순위로 정렬하세요
400% 확대 환경과 작은 뷰포트에서의 반응형 동작을 고려하세요