직접 조작하기
직접 조작하기 (Make it Direct)
앨런 쿠퍼(Alan Cooper)가 말했듯이, 「output이 있는 곳에는 input이 있어야 한다」고요. 이것이 직접 조작(direct manipulation)의 원칙이에요. 예를 들어, 별도의 페이지에서 내용을 편집하는 대신 바로 맥락 안에서 편집하는 것이죠.
출처: 문서
본문
페이지 내 편집 (In-Page Editing)
단일 필드 인라인 편집 (Single-Field Inline Edit)
상태 1: 일반 브라우징 모드로, 편집 가능한 줄과 불가능한 줄을 구분하지 않아요. 상태 2: 마우스를 올리면 배경이 노란색으로 백라이트되고, 툴팁이 '클릭하여 편집'을 안내해요. 상태 3: 사용자가 제목을 클릭하면 「입력 상자」, 「OK」, 「Cancel」 같은 폼 요소가 나타나고 커서가 「입력 상자」에 위치해요.
「읽기 용이성(readability)」이 「편집 용이성(editability)」보다 중요하다면, 「클릭하여 편집」을 사용할 수 있어요.
텍스트 링크/아이콘 편집 (Text link/Icon Edit)
상태 1: 편집 가능한 줄 근처에 텍스트 링크/아이콘이 나타나요. 상태 2: 마우스로 「edit」을 클릭하면 「입력 상자」, 「Ok」, 「Cancel」 같은 폼 요소가 나타나고 커서가 「입력 상자」에 위치해요.
「읽기 용이성」이 우선이면서 동시에 조작 줄의 「편집 용이성」을 강조해야 한다면, 「텍스트 링크/아이콘 편집」을 사용할 수 있어요.
다중 필드 인라인 편집 (Multi-Field Inline Edit)
무결성을 해치지 않는 편집 모드는 공간을 넓혀 「입력 상자」 등 폼 요소를 놓을 수 있게 해요. 또한 테이블에서 편집 모드를 전환할 때는 각 컬럼이 흔들리지 않도록 해야 해요.
참고: 「다중 필드 인라인 편집」에서는 내용과 필수 필드 사이에 큰 차이가 있어서, 「Use Transition」의 「방금 일어난 일 설명하기」를 사용해 이런 시각적 효과를 보완하는 것이 더 필요해요.
드래그 앤 드롭 (Drag and Drop)
드래그 앤 드롭 리스트 (Drag and Drop List)
상태 1: 마우스를 올리면 이동 가능한 「아이콘」이 나타나요. 상태 2: 「아이콘」 위에 마우스를 올리면 포인터가 「손」으로 바뀌고 클릭-드래그 조작을 사용할 수 있어요. 상태 3: 대상을 놓을 수 있는 블록으로 드래그해요. 파란색 테두리(blue stroke)가 나타나면 그 블록에 객체를 놓을 수 있다는 걸 알려 줘요.
드래그 앤 드롭은 한 차원(위/아래 또는 왼쪽/오른쪽)으로만 제한할 수 있어요.
드래그 앤 드롭 그림/파일 (Drag and Drop picture/file)