리치 인터페이스 디자인.. 인사이트 발췌..

웹 인터렉션의 75가지 패턴 |  빌 스콧. 테레사 닐 지음 | 윤지혜. 구신애. 김기형. 이은아 옮김

참고.사이트.

http://designingwebinterfaces.com/ 

http://www.flickr.com/photos/designingwebinterfaces/

디자인 패턴?

크리스토퍼 알렉산더는 인간의 활동을 일반적인 건축학적 해법으로 분류한 그의 주요저작물인 <a pattern language: towns, builings, construction>에서 패턴이라는 단어를 사용했다.

- 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대한 핵심적인 해결책을 설명하는

패턴은 이후 네명의 일당(Erich gamma, richard helm, ralph johnson, john m.vblissides)에 의해 발간된 <design pattern : elements of reusable object oriented software>라는 책을 통해 소프트웨어에 적용되었다. 그리고 몇년 후 디자인 패턴은 사용자 인터페이스 디자인의 범위까지 그 영역을 확장했다. 

1. 제1원칙 : 다이렉트하게 만들어라.

앨랜쿠퍼는 출력이 있는 곳에 입력이 있게 하라고 이야기 했다. 이것은 직접조작 direct manipulation의 원칙이다. 예를 들면, 어떤 콘텐츠를 다른 페이지에서 편집하는 대신에 그 상황에서 내용을 보면서 즉시 수정할 수 있어야 한다. 

WYSIWIG(당신이 보는 것이 당신이 얻는 것)의 원리는 지난 25년간 몇 차례에 걸쳐 거듭 증병되었다. 사용자가 컨텍스트 내에서 바로 콘텐츠를 편집할 수 있게 하고(페이지 내 편집), 인터페이스를 드래그 앤 드롭으로 제어하고(드래그 앤 드롭), 직접 오브젝트를 조작(직접조작) 가능하게 하는 것은 모두 지능적인 인터페이스를 만들기 위한 작업이다

2. 제 2원칙: 가볍게 유지하라. 

야후 360을 재디자인하면서 에릭슨 디지저스는 가벼운 발자국이라는 문구를 사용해 사이트와 상호작용할 때 드는 수고를 줄일 필요가 있다고 했다. 가벼운 발자국을 만드는 주요한 방법은 문맥도구 contextual tools를 사용하는 것이다

사용자가 얼마나 노력을 들이는지 존중해야 한다. 그것이 노력이 필요하지 않는 쉬운 인터페이스를 만드는 열쇠다. 현재 맥락context안에서 사용자의 의도를 이해하고 그에 알맞는 인터페이스(문백도구)를 만드는 일은 가벼운 경험을 제공하는데 결정적이다

3. 제 3원칙 : 화면에 머물러라.

페이지의 새로고침현상은 사용자의 멘탈흐름 mental flow을 파괴한다. 우리는 사용자가 취하는 모든 액션마다 새로고침이 발생할 것으로 생각하는 대신에, 사용자의 프로세스를 다시 모델링 할 수 있다 또한 언제 사용자들을 페이지에 머물게 할지 지능적으로 결정할 수 있다.

반복되는 페이지 새로고침으로 사용자의 정상적인 작업흐름을 깨지 않고도, 이제 우리는 사용 흐름에 더 가까운 경험을 만들 수 있다. 거거에 사용자의 작업을 강요하던 것과는 달리 사용자가 원하는 방법으로 작업하게 하려면 오버레이, 인레이, 가상공간, 프로세스 흐름을 적절하게 사용할 필요하가 있다 

4. 제 4원칙 : 유인요소를 제공하라. 

발견가능성은 웹에 적용하는 리치 인터랙션의 중요한 도전 과제중 하나다. 사용자가 발견할 수 없는 기능은 아무런 쓸모가 없다. 발견 가능성을 높이는 핵심방법이 유인요소를 제공하는 것이다. 유인요소는 다음단계에 일어날 상호작용에 대한 단서를 사용자에게 제공한다.  페이지에 고정적으로 제공하는 <정적유인요소>와 사용자 반응에 따라 작동하는 <동적 유인요소>가 있다.

우리가 제안한 여러 상호작용으로는 기능 대부분을 눈에 띄지 않게 제공하기 쉬울 것이다. 대문 앞에 환영이라고 쓰인 매트를 깔아놓듯 페이지 내에서 정적 또는 동적으로 사용자를 유인할 수 있는 요소(어포던스, 유인요소, 행위 유인요소, 빈공간 유인요소, 둘러보기 유인요소, 마우스 오버 유인요소, 드래그 앤 드롭 유인요소, 추측 유인요소, 콘텐츠 더 보기 유인요소)를 배치하면, 사용자가 새로운 인터페이스 형식을 사용하고 사용자의 총체적 경험이 향상될 수 있다

5. 제 5원칙: 전환효과를 사용하라. 

애니메이션, 영상효과, 그리고 다양한 형태의 시각적 화면 전화 효과는 매우 강력한 기술이다.

전환효과는 귀찮은 대출광고 외에도 사용자와 커뮤니케이션하고 사용자의 접속을 유지하는데 필요하다. 책에서 언급한 다양한 영상효과(밝게 하기와 흐리게 하기, 확장과 축소하기, 희미하게 사라지기, 애니메이션, 스포트라이드, 조명효과 , 표면판, 튕기기, 컨베이어 방식, 아코디언 슬라이드 하여 들어오고 나가기, 줌)로 우리는 사용자를 질리게 할 수도 있다. 반대로 일어나는 일을 설명하고, 어떤 관계인지도 보여주고, 주의를 집중시키고, 효율을 향상시키고, 가상공간을 만들어 낼 수도 있다 

6. 제 6원칙: 즉각적으로 반응하라

반응하는 인터페이스는 똑똑한 인터페이스이다. 이 원칙은 활발한 방응을 사용하여 풍부한 경험을 만드는 방법을 보여준다. 

사용자가 취하는 모든 행위에는 그에 대응하는 반응이 있어야 한다. 이것은 인터페이스의 물리적 특성이다. 자동완성, 실시간  추천, 실시간 검색, 실시간 상세검색, 실시간 미리보기, 단계적 공개, 진행률 표시기, 주기적 새로고침을 제공하면 기능을 실시간으로 반응하는 인터페이스로 만들어 낼 수 있다;

1. 다이렉트하게 만들어라.

앨랜쿠퍼는 자신의 책 <about face3>에서 잘못된 이분법에 대해 기술했다

- 많은 프로그램들이 출력하는 공간과 입력하는 공간을 따로 제공하고, 이 둘을 분리된 프로세스로 다루고 있다. 사용자의 멘탈모델은 그 차이를 인식하지 않는다.

쿠퍼는 출력이 있는 곳에서 입력이 가능하게 하라는 간단한 법칙으로 요약한다. 더 나아가서 인터페이스는 다이렉트하게 만들어라는 법칙처럼 사용자의 상호작용에 즉시 반응할 수 있도록 만들어야 한다

• 페이지 내 편집 in-page Editing : 콘텐츠 직접 편집하기
• 드래그 앤 드롭 drag and drop : 마우스로 직접 대상을 움직이기
• 직접 선택 direct selection : 직접 선택된 대상에 액션가하기

1. 사용자는 무엇을 드래그 할 수 있는지 어떻게 알 수 있는가?
2. 대상을 드래그 앤 드롭한다는 것은 과연 어떤 의미인가
3. 대상을 드롭할 수 있는 곳은 어디고, 드롭할 수 없는 곳은 어디인가?
4. 드래그 할 수 있음을 알리기 위해 어떤 행동 유발성 affordance을 시각적으로 사용할 것인가?
5. 드래그 하는 도중에 드롭이 가능한 영역과 불가능한 영역을 어떻게 표시해야 하는가?
6. 실제 대상을 드래그 하는가?
7. 아니면 대상을 반투명하게 드래그 하는가?
8. 아니면 드래그 되는 것이 썸네일 이미지 인가?
9. 드래그 앤 드롭으로 상호작용하는 동안 어떤 시각적 피드백을 써야 하는가?

1. 페이지 로드: 어떤 상호작용이든 일어나기 전에 드래그 앤 드롭이 가능하다는 사실을 먼저 나타낼 수 잇다. 예를 들어 드래그 기능을 안내하는 내용을 페이지에 노출 할 수 있다
2. 마우스 오버: 마우스 포인터를 드래그 할 수 있는 대상 위에서 움직인다
3. 마우스 누름: 사용자가 드래그 할 수 있는 대상 위에 마우스 버튼을 누르고 있다
4. 드래그 시작: 마우스 드래그를 시작한 직후(보통 3픽셀정도 움직였을 때부터 사용자가 드래그를 인지한다)
5. 드래그 하여 원래 위치를 떠남: 드래그 대상 또는 대상을 포함하는 영역이 원래 위치에서 움직인 다음
6. 원래 위치에 다시 드래그 하여 돌아감: 대상이 다시 원래 위치에 돌아갈때
7. 유효영역으로 들어감: 대상을 드롭가능한 목표지점 위로 드래그 할때
8. 특정 무효 영역으로 들어감: 드롭이 불가능한 영역으로 드래그 할때
9. 불특정 영역에 드래그함 : 유효하지도 무효하지도 않은 영역에 드래그 할때. 유효하지 않은 영역 외에는 모두 무효한 영역으로 처리하고 있는가?
10. 유효 영역위에서 드래그가 멈춤: 사용자가 드롭할 수 있는 영역에서 대상을 드롭하지 않는채 멈추어 있다. 이 이벤트는 보통 스프링처럼 탄성을 자긴 드롭 영역이 열리는 경우에 발생한다. 뎨를 들어 폴더 위로 드래그 한 다음 멈추면, 폴더가 열리면서 드롭할 수 있는 새로운 영역이 나타난다
11. 무효영역위에서 드래그를 멈춤 : 사용자가 드롭할 수 없는 영역에서 대상을 드롭하지 않은 채 멈춰있다. 이러한 상황에 신경이 쓰이는가? 당신이라면 그 영역에 왜 드롭할 수 없는지 알리는 추가 피드백을 바라겠는가?
12. 드롭 성공: 유요한 영역에 대상을 드롭했고, 드롭이 성공했다
13. 드롭 실패: 무효한 영역에 대상을 드롭했고, 드롭이 실패했다. 이때 대상을 원래 자리로 다시 되돌리는가?
14. 상위컨테이너에 드롭함: 드래그한 대상의 원래 위치가 특별할가? 일반적인 경우는 아니지만 어떤 상황에서는 이 사실이 특별한 의미를 가질 수 있다

액터 : 각이벤트가 일어나는 동안 여러 행위자에 시각적 장치를 할 수 있는데. 액터로 사용할 수 있는 페이지 요소는 다음과 같다

1. 페이지, 
2. 마우스포인터
3. 도움말
4. 드래그 할 수 있는 대상(또는 드래그 할 수 있는 대상의 일부분, 예를 들어 해당 영역의 제목)
5. 드래그 할 수 있는 대상을 포함하는 컨테이너
6. 드롭할 수 있는 영역

드래그 앤 드롭의 용도

1. 드래그 앤 드롭은 올바르게 사용하면 강력한 방법이 될 수 있다. 특히 이런 상황은 유용하다
2. 모듈 드래그 앤 드롭하기 : 페이지에 있는 모듈을 재배열한다
3. 목록 드래그 앤 드롭하기 : 목록 순서를 재정렬한다
4. 개체 드래그 앤 드롭하기 : 개체끼리 서로 관계를 바꾼다
5. 실행 드래그 앤 드롭하기 : 드롭한 대상에 어떤 행동 취하기
6. 수집 드래그 앤 드롭하기 : 드래그 앤 드롭으로 집단을 유지하고 관리한다

드래그 하는 동안 사용자가 대상을 드롭할 때 어떤 결과가 일어날지 분명히 보여주는 것이 중요하다. 드롭영역을 표적으로 나타내는 방법에는 크게 1.빈칸생성방식과 2.삽입방식이 있다.

1. 빈칸생성방식(점선으로 빈칸을 표시하는 방식)을 사용한다. 기본은 드롭이 발생할 자리에 항상 빈킨을 드러나는 것이다. 생성된 빈칸은 모듈을 드롭할 수 있음을 알리고, 또 언제든 드롭할 수 있는 영역이다. 이 방식은 빈칸이 드롭했을때 화면이 어떻게 표현될지, 다른 모듈과 어떻게 배치될지 미리 보여주는 역할도 한다. 이때 다른 모듈은 상하로 움직이며 공간을 만들어 준다

빈칸 생성 방식의 문제는 드래그 하는 동안 페이지의 콘텐츠들이 이리저리 많이 움직인다는 점이다. 이러면 상호작용이 실제보다 복잡해 보이고 실제 일어나는 일을 이해하기 어려워진다. 특히 각 모듈의 생김새가 비슷한 경우에 더하다. 이런 경우 사용자는 모듈이 움직이기 시작한 뒤 얼마 지나지 않아 어떤 모듈이 움직였는지 혼돈한다. 이를 해결하는 한가지 방법은 모듈이 움직일때 애니메이션 전환효과를 제공하는 것이다. 하지만 어떤 애니메이션 효과도 일반적인 상호작용에 방해되어서는 안된다. 

2. 삽입방식은 드래그 앤 드롭에서 빈칸생성방식이 가장 일반적이기는 하지만, 유일한 방법은 아니다. 또다른 방식은 화면 구성과 배열을 최대한 유지하면서 모듈을 삽입할 수 있다는 표시(주로 삽입 표시선)만 움직이는 것이다. 모듈을 드래그 하는 동안 다른 모듈은 전혀 움직이지 않고 페이지가 그래도 유지된다. 대신 드롭할 때 모듈이 배치될 자리에 삽입표시선이 나타난다. 이후 이동애니니메이션 효과. 일반적으로 드래그한 모듈은 반유명상태(유령상태)가 된다

드래그 앤 드롭할 때는 마우스 조작이 많이 일어난다는 것을 기억하라. 가능한 한 드래그 할때 필요한 이동거리를 짧게 하라

모듈 드래그 앤 드롭에서는 모듈의 중간지점을 이용하여 드롭위치를 제어하라

모듈 드래그 앤 드롭가이드

1. 드래그를 하고 있을 때도 드래그 앤 드롭의 결과를 분명하게 예측할 수 있어야 한다면, 빈칸 생성방식을 사용하라
2. 화면이 복잡해지는 거싱 싫다면 삽입방식을 선택하라
3. 드롭위치를 결정할 때는 드래그 하고 있는 대상의 중간지점을 활용하라
4. 실제 모듈을 드래그 하는 대신 모듈을 반투명하게 연출하라
5. 이동하고 있는 모듈을 썸네일로 표시하는 경우에는 드롭할때 삽입방식을 사용하라

목록 드래그 앤 드롭가이드

1. 가능하다면 목록에서는 빈칸 생성방식을 사용하여 실시간으로 항목을 드래그 앤 드롭할 수 있도록하라
2. 마우스포인터 위치로 드롭 위치를 결정하라
3. 드래그 속도가 빨라야 하거나 드래그 하는 대상의 크기가 클수록 삽입방식을 사용하라. 목록자체가 움직이기 보다 삽입표시선이 움직이는 편이 경제적이다
4. 목록에서는 드래그 앤 드롭 기능을 발견하기 어려우므로 목록을 재배열하는 다른 방법도 함께 제공하라
5. 사용자가 드래그 앤 드롭 외의 방식으로 목록을 재배열했을 때는 드래그 앤 드롭이 가능하다는 안내를 제공하여 기능을 알리도록 하라

1. 대상을 드래그 하는 동안 발생하는 화면의 움직임과 변화는 최소화하라
2. 마우스를 클릭한 다음 마우스를 3픽셀 이상 움직이거나 최소 0.5초 이상 길게 누르고 있을때 드래그가 시작되게 하라
3. 인터페이스에 제공되는 여러방법중 드래그 앤 드롭은 직접적인 인터렉션을 위한 하나의 보조수단으로 사용할 수 있게 하라
4. 사용자가 대안으로 제공되는 기능을 사용할 때 같은 행위를 드래그 앤 드롭으로도 할 수 있는 단내를 제공하라
5. 드래그 앤 드롭 과정에서 일어나는 모든 상호작용순간을 눈여겨 보라. 모든 순간을 거치니는 과정에서 사용자에게 지속적으로 필요한 정보를 제공해야 한다
6. 드래그 앤 드롭이 가능하다는 것을 알 수 있는 유인요소를 제공하라

1. 콘텐츠가 곧 인터페이스다. 기능을 별도로 제공하기보다 콘텐츠 자체에 인터렉션을 가하게 되면 콘텐츠 행위가 더 밀접하게 느껴진다
2. 중요한 기능은 인터페이스 상에 직접적으로 노출해야 한다
3. 시각적 혼잡을 줄이기 위해서 주요하지 않은 기능은 필요할 때까지 숨겨두어라
4. 사용자에게 익숙한 방식으로 도구를 나타내 사용법을 이해하기 쉽게 하라. 예를 들어 기능을 실행하는 하이퍼링크, 추가적인 기능을 노출하기 위한 드롭다운등. 플리커는 사용자가 콘텐츠에 마우스를 올릴때 드롭다운 메뉴를 제공한다

1. 문맥도구는 사용자의 캐스크 수행에 필요한 경로를 단축하는데 유용하다. 활성화된 영역부근에 도구를 배치하고 도구를 쉽게 실행할 수 있게 하면 가벼운 인터랙션을 제공할 수 있다. 
2. 여러개 선택한 대상 전체에 한번에 기능을 실행할 방법이 없다면 문맥도구를 사용하라
3. 사용자가 페이지의 어떤 대상에 대해 태스크를 수행하고자 할때 거쳐야 하는 경로를 줄이고 싶다면 문맥도구를 사용하라
4. 할수 있다면 추가적인 단계없이 즉각적으로 기능이 실행되게 하라
5. 예상 밖의 장소에서 기능을 제공할 때는 하이퍼링크, 드롭다운, 버튼등과 같이 사용자에게 친숙한 사용방식을 제공하라
6. 기능은 명확하게 제공하고 즉각적으로 실행하도록 하라 버튼, 휴지통 등과 같이 누구나 알아보기 쉬운 것이 아닌 이상 아이콘을 사용하지 마라
7. 사용자 조작을 명확히 요구할 때는 버튼을 그보다 덜 중요한 기능일때는 링크를 사용하라
8. 메뉴를 노출하거나 정보를 더 펼치는데 사용하는 기능은 반드시 알맞은 크기로 제공하라 8*8픽셀 크리고 만드는 것은 금물이다
9. 도구는 이해하기 쉽고 찾기쉽고 빠르게 실행 할 수 있게 만들어라. 그러면 사용자들이 가볍게 느낄것이다