큰 계층 구조에서 웹 UI 디자인 지침을 선택하십시오.

Question

손쉬운 문제 : 지루한 응용 프로그램 양식을 작성하는 컴퓨터 사용자를 위해 웹 UI에 두 개의 큰 계층 구조를 제시하는 방법입니다.

유스 케이스 : 사용자가 계층 구조 "A"에서 항목 "a"를 선택한 다음 (완전히 관련없는) 계층 구조 "B"에서 항목 "b"를 선택하고 짧은 자유형 텍스트로 채워 선택을 보완합니다 .

두 계층 모두 10 단계 미만 (일반적으로 - 5 단계)이지만 각 단계는 매우 넓을 수 있습니다 (20,40,50,100 항목).

따라서 전체 "트리"를 그려 사용자가 "클릭"할 수있게하는 것은 의문의 여지가 있습니다. 나무를 통한 점진적인 하강이 가능하지만, : 1) 사용자가 길을 잃거나/어디에서 항해해야 할 지 모를 경우가 있습니다 -> 그는 그가 찾고있는 것을 발견 할 때까지 다른 지점을 통해 되돌아 갈 것입니다. 2) "넓은 하위 트리"문제입니다. 너무 넓은 경우 화면의 한 줄 또는 한 줄로 표시 할 수 없습니다.

컴퓨터 사용 능력이있는 사용자는 트리를 동적으로 트리밍하는 증분 검색으로 저장할 수 있습니다 (UI가 프로세스 중에 충분히 빠르다는 가정하에 제공됨).

지금 나는 마우스를 버리고 일부 키를 누르기를 꺼리는 사용자들과 힘들어하고 있습니다.

나를위한 아이디어가 있습니까?

Answer 1

Windows Vista 또는 Windows 7 메뉴의 작동 방식을 생각해보십시오. 그것을 연 다음 "모든 프로그램"메뉴 음성을 클릭하십시오. 새 콘텐츠로 항목의 전체 목록이 변경됩니다.

지금 생각해 보겠습니다. 레벨 1 아이템 목록을 제시합니다. 하나를 클릭하면 하위 레벨 -2 항목으로 전체 목록이 변경됩니다. 그런 다음 항목을 클릭하면 하위 수준 3 항목 등으로 전체 목록이 다시 변경됩니다. 같은 이동 경로 탐색과

보완을 -> 레벨 1 - 아이템 - 당신이 여기> 레벨 2 - 아이템 - 레벨 3 아이템 -> 그래서

에 어디에서 어떤 항목 빵 부스러기를 클릭하면 해당 레벨로 텔레포트 할 수 있습니다.

키워드로 빠른 검색을 추가하십시오.

나는 아주 기능적이라고 말할 수 있습니다. Jquery 및 Ajax json 호출을 기반으로이 구성 요소를 개발했으며 현재 작업중인 일부 웹 응용 프로그램에서이 구성 요소를 사용합니다.

관심이 있으시면 몇 가지 예를 들어 구성 요소를 보내 드리겠습니다. 나는 어쨌든 내 다가오는 블로그에서 오픈 소스로 만들 계획이다.

Answer 2

하나의 옵션은 iPhone/iPod 메뉴 스타일 스크롤 목록을 시도하는 것입니다. 메뉴로 표시되지만 this Filament Group example에는 탐색 경로가있는 경로가 표시되고 다시 탐색 경로가 표시됩니다. 일종의 수직 스크롤이 가능한 div에서 이것을 구현하고 싶을 것입니다. 왼쪽/오른쪽 슬라이딩 애니메이션과 탐색 경로는 사용자에게 상황 별 단서를 제공합니다. 어떤 선택이 가지이고 어느 것이 잎인지는 분명합니다. 깊이 제한이 없습니다. 또한이 탐색 체계는 iPhone/iPod/iPad를 사용하는 모든 사용자에게 친숙합니다.

어딘가에 구현되어있을 것입니다. 내가 하나를 파 내면 나는 적절하게 편집 할 것이다.