it-swarm-korea.com

서브 트리 복사를위한 인터랙션 디자인

UI에 다음과 같은 두 개의 데이터 트리 A와 B가 시각화되어 있다고 가정합니다.

enter image description here

사용자는 강조 표시된 하위 트리 노드를 A에서 B로 복사하려고합니다. 두 트리에는 id로 표시된 일부 공유 노드가 있습니다.

이 시나리오에 대한 상호 작용을 어떻게 설계 하시겠습니까? 가능한 방법 중 하나는 비공유 노드 옆에 확인란을 배치하고 두 트리 사이에 "실행"/ "복사"버튼을 배치하는 것이지만 드래그 앤 드롭을 사용하지 않을 때 이것이 가장 좋은 방법입니까?

대체 디자인에 대한 아이디어가 있습니까?

6
agib

나무가 자연스럽게 rearrange 노드로 드래그 앤 드롭 할 수있게하는 것은 당연합니다. 그러나 계층 구조를 유지하고 결과를 merge.

따라서 응용 프로그램이 차이점을 식별 한 후 사용자가 각 변경 사항 (삽입, 갱신 또는 삭제)을 선택/커밋하도록 허용하는 것이 도움이 될 수 있습니다.

1
Nescio

제약 조건이 없으면 드래그 앤 드롭을 사용합니다.

1
Hisham

당신이 제안하는 객체 선택 동작 구문은 복사 (예 : 삭제, 이동, 속성) 이외의 명령으로 확장 할 때 사용하는 일반적인 표준 GUI 접근 방식입니다. 이는 단순하고 일관된 강력한 UI를 만듭니다. 그러나 선택 확인란을 권장하지는 않습니다. 사용자가 일반적으로 한 번에 하나의 상위 노드 만 복사한다고 가정하면 Windows 탐색기와 같은 파일 관리자에서 동작을 모방하고 기본적으로 단일 선택되어 있지만 메타 키 (Shift 및 Ctrl)를 통한 다중 선택을 지원하는 아이콘을 사용합니다. 드래그 선택. 노드를 선택하면 해당 노드와 모든 하위 노드가 강조 표시되어 사용자가 무엇을 선택하는지 명확하게 알 수 있습니다. OTOH, 사용자가 보통 여러 개의 관련되지 않은 노드를 복사해야하는 경우, 특히 표준 다중 선택 방법에 익숙하지 않은 경우 확인란을 선택하는 것이 좋습니다.

Object-selection-action 구문의 대안은 각 노드에 대해 작은 복사 제어를 포함하는 오브젝트 전용 제어 방법입니다. 한 번의 클릭으로 복사됩니다. 복사가 사용자가 노드로 수행 할 수있는 유일한 작업 인 경우이 방법이 선호 될 수 있습니다. 반대로, 각 노드에 대해 별도의 복사, 이동, 삭제, 속성 등 제어 기능을 사용하면 너무 복잡 할 수 있습니다. 객체 전용 제어를 사용하는 경우 B에 공유 노드가있는 A의 노드에 대해서만 복사 제어를 제공하여 복사 할 수있는 항목을 명확하게 표시 할 수 있습니다.

예를 들어, 복사 기능이 트리 사이의 공유 노드로 복사하는 것으로 제한되어있는 것 같습니다. 실제로 허용되는 모든 것입니까? 항상 하나 이상의 대상 트리가 있습니까? 그렇다면 단일 복사 버튼이 가장 좋을 것이므로 드래그 앤 드롭을 사용하지 않는 것이 좋습니다. 끌어서 놓기는 검색 가능성이 낮으며 단순히 복사 버튼을 클릭하는 것보다 어렵습니다. 끌어서 놓기를 사용하면 임의 복사를 수행 할 수 있다고 생각할 수도 있습니다 (예 : 트리 A의 Node 4를 트리 B의 Node 18 아래에 두거나 노드를 within 트리 B).

그러나 임의 복사를 지원하는 것이 가능하고 유리한 경우, 복사 및 붙여 넣기 관용구를 사용하기 위해 두 개의 단추를 사용하는 것이 좋습니다 (이동을 지원하기 위해 세 번째 잘라 내기 단추 추가). 임의 복사를 지원하는 경우 드래그 앤 드롭을 복사하여 붙여 넣기에 대한 전문가 바로 가기로 간주하는 것이 좋습니다.

1
Michael Zuschlag