큰 정보 트리의 접근 가능한 탐색

Question

의학적 상태에 대한 정보의 최전선 인 공개 웹 사이트를 개발하고 있습니다.

사용자가 검색 (설문지 기반)을 수행 한 후 섹션 및 하위 섹션으로 분류 된 결과가 표시됩니다.

정보 항목은 섹션과 하위 섹션 모두에 할당 할 수 있습니다.

현재 섹션은 상단의 탭으로 표시되고 화면 및 하위 섹션은 사이드 바의 링크로 표시됩니다. 어떤 섹션이 선택되었는지에 따라 사이드 바의 링크가 변경됩니다.

문제는 섹션 이름이 상당히 길다는 것입니다 (여러 단어). 결과적으로 탭의 결합 된 길이가 표준 화면 해상도 (1024 x 768)에 비해 너무 넓습니다. 따라서 그들은 페이지 레이아웃을 감싸고 끊습니다. 앞으로 추가 탭을 추가해야합니다.

이 문제를 염두에두고 우리의 대상 고객이 매우 넓다는 사실에 따라, 이것은 공개 의료 웹 사이트입니다. 이런 종류의 정보를 평범한 사용자를 위해 쉽게 탐색 할 수있는 방식으로 이러한 종류의 정보를 제시하기위한 옵션이 무엇입니까?

Answer 1

하위 섹션 이름은 얼마나 걸립니까? 할 것이다 그들 탭 공간에 맞습니까? 사이드 바 메뉴에 섹션 링크를 넣고 다른 방법이 아닌 탭의 하위 섹션 링크를 넣으면 더 나은 사용자 성능을 얻을 수 있습니다. 보다 http://www.usability.gov/pubs/040106news.html.

다른 대안은 모든 것을 사이드 바 메뉴에 놓는 것입니다. 하위 섹션 링크는 섹션 링크 아래에 들여 쓰기 될 수 있습니다. 또한 섹션 열의 오른쪽에 자체 열에 하위 섹션 링크를 넣는 것을 고려할 수도 있습니다. 이것은 섹션 메뉴를 안정적으로 만들지 만 콘텐츠에 더 잘 사용되는 수평 공간이 많이 필요합니다. 두 경우 모두 시각적 디자인에 대한 적절한주의는 현재 섹션, 하위 섹션 및 이들 사이의 연결을 보여줍니다.

각 섹션/하위 섹션으로 이동하기 위해 링크를 사용하는 한 접근성에 문제가되지 않아야합니다 (아마도 페이지에 대한 링크와 관련된 데이터베이스를 기반으로 각 페이지에 대해 프로그래밍 방식으로 생성 될 수 있음).

Answer 2

몇 가지 아이디어를 브레인 스토밍하기 만하면됩니다.

• 콤보 상자를 사용하여 사용자가 (서브) 섹션을 선택한 다음 적절한 정보 항목을 표시 할 수 있습니다.
• 각 섹션 수준에 대한 별도의 페이지를 만들고 빵 크럼 컨트롤 컨트롤을 제공하여 사용자가 페이지 계층에있는 위치를 보여줍니다.
• 사용자가 정보 항목을 읽을 때 자동으로 숨기는 일종의 접이식 메뉴를 만듭니다.

SO에 대한 또 다른 질문에서 나는 링크를 발견했다. 멕스, 아마도 당신은 거기에서도 약간의 영감을 찾을 수 있습니다.

Answer 3

당신은 시도 할 수 있습니다 :

• iPod 스타일 메뉴 (하위 섹션에서 오른쪽에서 날아가는 숨겨진 페이지) : http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

또는 Daan이 말했듯이 :

• 계단식 드롭 다운 상자 : http://www.asp.net/ajax/ajaxcontroltoolkit/samples/cascadingdropdown/cascadingdropdown.aspx

이 두 가지 (전통적인 트리 뷰에서)의 단점은 섹션을 선택할 때까지 하위 섹션이 보이지 않는다는 것입니다. 사용자가 그 후 하위 섹션의 이름을 모른다면, 이들 중 하나가 적합 할 것입니다.

반면에, 그들이 후에 하위 섹션의 이름을 알고 있다면, 그들에게 자동 완성 된 텍스트 상자를 제공하여 몇 문자를 입력하고 직접 갈 수있는 것이 좋습니다.