'공부/UX UI'에 해당되는 글 1건

  1. 2013.02.18 ux ui } 리치인터페이스 디자인

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

웹 인터렉션의 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. 페이지 내 편집 in-page Editing : 콘텐츠 직접 편집하기

페이지 내 편집의 형태는 페이지 맥락 내에서 편집하는 것으로  1.현재 페이지를 이탈하지 않는 것을 뜻하고, 2. 페이지내에서 즉각 편집하는 것을 뜻한다. 인라인 편집의 강점은 페이지의 현재 상태를 유지하는 것에 있다. 편집을 하는 동안 현재 페이지의 맥락을 유지해야 한다면 인라인 편집기능을 제공해라

발견가능성은 이 기능을 사용자가 발견하기 쉬운가에 대한 것이다. 사용자가 편집하도록 유도하는 요소들은 

1. 툴팁보여주기 - 편집하려면 클릭 2. 편집 영역의 배경을 노란색으로 강조하기 3. 마우스 커서를 입력커서로 변경하기

그러나 이러한 단서들은 모두 사용자가 제목 위에 마우스를 올렸을 때 나타난다. 발견의 가능성은 사용자가 제목위에 마우스를 올려놓는 행위와 그때 제공되는 유인 요소들을 인지하느냐에 달렸다. 사용자가 기능을 더욱 쉽게 발견하려면, 유인하기 위한 단서들을 페이지 내에 직접 제공해야 한다. 예를 들어, 편집 링크를 제목과 함께 보여줄 수도 있다. 편집 링크를 클릭하면 편집이 가능하다. 그러나 이러한 방법은 해당 페이지가 수용할 수 있는 시각적 잡음과 균형을 이루어야 한다. 이렇게 링크나 버튼이 각각 추가되면 페이지에서 일어나느 프로세스는 어려워지고, 페이지에 있는 기능과 단서들로 인해 페이지가 오히려 복잡하고 부담스러워 보인다. 편집 가능성보다 가독성이 더 중요하면, 사용자가 콘텐츠와 상호작용할 때까지 편집기능이 드러나지 않도록 하라

보기모드에서는 가독성이 가장 중요한 관심사이다. 이상적으로는 보기모드와 편집모드가 끊임없이 매끄러운 방식으로 서로 조화되는 것이 좋다
편집 전용 공간이 필요하고 편집하는데 페이지를 사용하는 정황(컨텍스트)가 중요하지 않는 경우라면 오버레이 편집을 쓰는 것이 좋다
편집 모드간의 전환은 순간적으로 일어나야 한다. 편집을 시작하기 전에 사용자를 애니메이션 효과가 끝날때까지 기다리게 하는 것은 의미가 없다

2. 드래그 앤 드롭
1984년 매킨토시가 세상에 내보인 대단한 혁신 중 하나는 바로 드래그 앤 드롭이다. 제록스 파크의 스타정보시스템GUI에서 영향을 받고 그후 애플 리사(최초 마우스 도입)에서 교훈을 얻어 매킨토시팀은 드래그 앤 드롭을 창안했다. 
언뜻보기에 드래그 앤 드롭은 대상을 잡아 어딘가에 놓기만 하면 되므로 아주 간단해 보이지만 상호작용이 일어나는 세세하고 개별적인 상황은 매우 많다. 이러한 미세한 상황을 상호작용순간interesting moments이라고 부른다
    1. 사용자는 무엇을 드래그 할 수 있는지 어떻게 알 수 있는가?
    2. 대상을 드래그 앤 드롭한다는 것은 과연 어떤 의미인가
    3. 대상을 드롭할 수 있는 곳은 어디고, 드롭할 수 없는 곳은 어디인가?
    4. 드래그 할 수 있음을 알리기 위해 어떤 행동 유발성 affordance을 시각적으로 사용할 것인가?
    5. 드래그 하는 도중에 드롭이 가능한 영역과 불가능한 영역을 어떻게 표시해야 하는가?
    6. 실제 대상을 드래그 하는가?
    7. 아니면 대상을 반투명하게 드래그 하는가?
    8. 아니면 드래그 되는 것이 썸네일 이미지 인가?
    9. 드래그 앤 드롭으로 상호작용하는 동안 어떤 시각적 피드백을 써야 하는가?
흥미로운 점은 드래그 앤 드롭 하는 동안 사용자에게 피드백을 제공할 기회가 되는 이벤트event가 많다는 것이다. 게다가 페이지에는 피드백 과정에서 액터actor 역할을 할 만한 요소가 많다


이벤트 : 드래그 앤 드롭 상호작용하는 동안, 최소 15가지 이벤트로 사용자에게 단서를 제공할 수 있다
    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. 개체에 마우스 오버했을때 드래그 할 수 있음을 나타내라
    4. 마우스를 3픽셀이상 움직였거나 0.5초동안 클릭을 유지했을때 드래그를 시작하라
    5. 드래그 하는 개체와 마우스 포인터의 위치를 정확하게 같은 위치에 두어라. 마우스 포인터와 개체가 동떨어지면 드래그가 부자연스럽게 느껴진다
    6. 드래그가 가능한 개체에 마우스를 올리면 마우스 포인터를 드래그 할 수 있음을 나타내는 모양으로 바꾸어라
드래그를 시작할 때 가장 사용하기 좋은 방법은 애플의 휴먼 인터페이스 가이드라인에 나타나 있다
- 애플리케이션에서는 사용자가 최소 3픽셀 정도 대상을 움직였을 때 드래그 피드백을 제공해야 한다. 사용자가 대상이나 텍스트를 선택하여 마우스로 클릭하면 바로 드래그 할 수 있어야 하며, 마우스를 누르는 동안에는 움직일 수 있는 상태를 계속 유지해야 한다
별차이 업성보일 수 있지만 마우스를 3픽셀 움직인 다음 드래그가 시작되는 것과 4-5 픽셀 움직인 다음 시작되는 것에는 아주 큰 차이가 있다. 움직여야 하는 픽셀 값이 클수록 대상을 자리에서 끌어내어 드래그를 시작하기 어렵다고 느껴진다. 반면 픽셀값이 너무 작으면 우발적으로 드래그가 시작되어 사용자가 지나치게 주의해야 하는 인터페이스처럼 생각될 수 있다

마우스가 3픽셀이상 움직이거나 마우스 버튼을 0.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. 도구는 이해하기 쉽고 찾기쉽고 빠르게 실행 할 수 있게 만들어라. 그러면 사용자들이 가볍게 느낄것이다



3. 페이지에 머물게 하다

  • 브라우저 팝업을 사용하지 마라. 브라우저 팝업은 시스템리소스를 많이 소비하고 통제하기 어렵다. 또한 가벼운 오버레이보다 느리고 보기에도 매력이 없다
  • 조명효과는 사용자 인터렉션 순서를 제한하거나 특정 정보에 주의를 기울이게 할때 사용하라. 조명효과는 사용자가 분리된 모드에 있음을 강조해준다.


대화상자 오버레이 가이드

    1. 브라우저 팝업대신 항상 대화상자 오버레이를 사용하라
    2. 사용자가 지나쳐서는 안되는 중요한 정보가 있거나 대화상자와 인터렉션이 먼저 이루어져야 할때 조명효과를 사용하라
    3. 불필요한 대화상자 오버레이(바보상자)는 사용자 몰입을 방해하므로 사용을 피하라
    4. 페이지 내에서 간단하게 상호작용하는 것으로 충분할때는 오버레이의 사용을 피하라
    5. 모든 환경에서 동일한 사용자 경험을 제공하지 않으므로 자바스크립트 경고창은 사용을 피하라



4. 유인요소를 제공하라

유인요소는 상호작용 과정 내내 사용자를 이끄는 조언이며 단서이다. 유인요소는 적시의 팁 just in time tips과 시각적 어포던스 visual affordance를 담고 있는데 인터페이스에서 다음에 어떤 일이 일어날지 알린다. 사용자에게 유인요소를 제공하는 방식은 상호작용 인터페이스를 성공적으로 만드는 비결 중 하나다

  • 정적유인요소에는 1. 행위유인요소 - 사용자를 다음 태스크로 유도한다. 2. 둘러보기 유인요소 - 사용자가 새로운 기능을 탐색하도록 유도한다. 패턴이 있다

행위유인요소 가이드

    1. 가장 먼저 취해야 할 행위에는 행위유인요소를 사용하라
    2. 간단한 1-2-3 단계로 이루어진 행위를 유도하려면 행위 유인요소를 사용하라
    3. 행위 유인영역은 사용자의 주의를 끌 만큼 눈에 띄게 하라. 다른 시각적 요소와 충돌하여 난잡해지지 않게 하라
    4. 사용자 행위를 유도하기 위해 빈영역을 활용하라
    5. 사용자 행위를 유도하기 위해 미완성된 요소를 제공하라. 인간의 본능은 미완성된 부분을 다듬으려 한다
    6. 도서의 책 넘김 그래픽


둘러보기 유인 요소 가이드

    1. 새로 디자인한 사이트를 열거나 새로운 사이트를 출시하면서 사용자에게 일련의 기능들을 보여줄 필요가 있을때 둘러보기 유인요소를 사용하라
    2. 둘러보기 유인요소는 가능한 한 실제 서비스 되고 있는 사이트와 함께 제공하라
    3. 둘려보기 유인요소는 간단하고 기분 좋게 빠져나오거나 다시 시작하기 쉽게 만들어라
    4. 인터페이스 문제를 해결하는데 둘러보기 기능에 의존하지 마라
    5. 둘러보기 과정은 간단하게 유지하라

  • 동적 유인요소에는 1. 마우스오버 유인요소 - 마우스를 올렸을때 제공하는 유인요소 2. 어포던스 유인요소 - 친숙한 것을 이용해 새로운 것을 연결짓는 유인요소 3. 드래그 앤 드롭 유인요소 - 드래그 앤 드롭을 위한 유인요소 4. 추측 유인요소 - 상호작용하는 동안 제공하는 유인요소 5. 콘텐츠 더보기 유인요소 - 더 많은 콘텐츠를 노출하기 위한 유인요소 가 있다

마우스 오버 유인요소 강화하기
    1. 마우스를 올린 영역의 배경을 강조하라
    2. 클릭했을 때 실행될 일을 설명하는 툴팁을 제공하라
    3. 조작방식을 보여주기 위해 마우스 포인터를 바꿔라
    4. 마우스를 올리면 페이지 내에 미리보기를 제공하라

마우스 오버 유인요소 가이드
    1. 사용자가 취해야 할 액션이 콘텐츠에는 부수적인 기능이며, 이로 인해 시각적 스타일이 혼란스러워지지 않길 원한다면 마우스 오버 유인요소를 사용하라
    2. 마우스 오버 유인요소를 사용할 때는 마우스 포인터와 배경을 바꾸고 툴팁을 제공하여 유도한 행위가 무엇인지 명확히 알수 있게 하라
    3. 마우스 오버 유인 요소를 제공할때 가능한 한 사용자가 클릭할 때 일어날 변화에 대해 미리 확인 할 수 있도록 하라
    4. 상호작용의 여러 단계에서 사용자에게 친숙한 형식들을 사용하라. 익숙한 형식으로 새로운 형식을 소개하면 새로운 것을 더 빠르게 받아들일 수 있다. 가장 친숙한 형식은 버튼, 링크, 드롭다운 화살표, 친숙한 아이콘이다.
    5. 유인요소가 어느 대상에 속하는지 명백히 밝힐 때는 가까운 위치를 잘 활용하라. 마우스를 올렸을때 마우스 포인터가 바뀌면, 마우스를 올린 대상에 유인요소가 적용된다는 것을 나타낸다.

어포던스 유인요소
도널드 노먼 <디자인과 인간심리> 에서 어포던스라는 단어를 사용했다. 이 용어를 최초로 사용한 사람은 인지심리학자 깁슨이다. 깁슨은 물건의 실행 가능한 특성을 설명하기 위해 이 단어를 사용했다. 가장 고전적인 예는 문고리이다. 문고리가 사람에게 제공하는 어포던스는 작고 돌리고 당길 수 있다는 가능성이다. 깁슨의 관점에서는 그 특성이 반드시 눈에 보이는 것이어야 할 필요는 없다. 행위자가 대상과 상호작용할 방법을 인지할 수 있는 그 무엇이 필요할 뿐이다. 노먼은 사용자 인터페이스 요소에서 인지된 어포던스라는 개념을 설명하기 위해 이 용어를 차용했다. 그는 화면 요소에서 인지되는 어포던스는 물리적 특성을 지니지 않았지만 사용자는 대개 관습 용어 메타포 일관성 때문에 무의식 적으로 그 요소와 상호작용할 수 있음을 인지한다고 설명을 덧붙였다

새로운 상호작용 방식은 사용자에게 친숙한 형식으로 연결지어라

어포던스 유인요소 가이드

    1. 새롭고 낯선 상호작용은 고전적이며 친숙한 형식과 연결지어라(예를 들어, 문백도구 실행을 위해 하이퍼링크를 노출하는 것)
    2. 유인요소에 대한 단서를 제공하려면 인지된 어포던스를 사용하라(예를 들어, 드롭다운이 열렸을때, 화살표가 반대방향으로 바뀌어 메뉴를 닫을 수 있다는 단서를 제공하는 것)
    3. 유인요소는 현재 처한 상황안에서 그리고 상호작용이 일어난 곳에 가깝게 제공하라


드래그 앤 드롭 유인요소 가이드 

    1. 드래그 앤 드롭을 하는 동안 사용자가 계속해서 주의를 기울 일 수 있도록 최대한 많은 순간을 활용하여 유인요소를 제공하라
    2. 드래그 할 수 있는 영역에서는 마우스 포인터를 바꾸어라
    3. 드래그 할 때 대상을 잡을 수 있는 명료한 공간을 제공하라

추측 유인요소

    1. 상호작용이 일어나는 동안 시스템이 추측한 사용자의 의도를 시각적 암시를 사용하여 표시하라
    2. 더 많은 콘텐츠가 있음을 알려주기 위해 적절한 애니메이션을 이용하라
    3. 더 많은 콘텐츠가 있다면 마우스를 올렸을때 노출하거나 일부를 미리 보여주어라


유인요소의 장점

유인요소는 잘 디자인한 애플리케이션이 나타내는 미묘한 의미를 표현하는 필수적인 부분인다. 자연스러운 어포던스를 사용하는 것, 좋은 정적 유인요소를 제공하는 것, 상호작용하는 동안 유인요소를 더 노출하는것, 새롭게 디자인한 사이트를 둘러보기 유인요소를 사용하는 것, 드래그 앤 드롭에서 발생하는 모든 상호작용 순간을 활용하는것, 그리고 콘텐츠를 더 노출하기 위해 유인요소를 사용하는 것, 이 모든 것이 사용자를 다음 단계의 상호작용으로 자연스럽게 유도하는 효과적인 방법이다




5. 전환효과를 사용하라

<마인트해킹> 

-2차 시각처리 과정 덕분에 갑작스러운 움직임이나 불빛은 우리의 주의를 끈다. 

뇌에는 시각을 처리하는 뇌 영역(참고로 당신은 지금 이책을 읽는 순간에 후두엽을 사용하고 있다) 외에도 주의 집중에 작용하는 2차 영역이 있다. 공원에서 친구와 얘기하는 순간 누군가 플라스틱 원반을 던졌다고 가정하면, 당신은 바로 보고 있지 않아도 이 움직임을 알아챌 수 밖에 없다. 우리 뇌의 상소구라는 영역에서 주의력을 분산시키는 작용이 일어난다. 뇌의 영역에서 그 물체가 무엇인지는 정확히 알지 못해도 조심해야 한다는 사실은 안다. 이런 반응은 뇌의 화학작용에 의해 자동적으로 발생한다. 의식적인 사고 과정없이도 자연스럽게 일어난다. 이런 움직임은 사용자의 주의를 끈다


    • 사용자의 주의를 끌기 위해 밝게 하기와 흐리게 하기를 사용하라


    • 콘텐츠를 확장하거나 축소할때 이유없이 애니메이션을 사용하지 말라. 
    1. 확장하기와 축소하기는 다음과 같은 목적으로 사용할 수 있다
    2. 많은 콘텐츠와 모듈을 다룰때
    3. 화면의 마우스 오버한 대상을 강조할때
    4. 목록내의 한 항목에 대해 상세정보를 제공해야 할때
    5. 콘텐츠 편집 기능을 제공해야 할때 보고 있는 콘텐츠가 여러 콘텐츠 중 하나이며 상세정보를 다른 항목들과 함께보는 것이 좋을때 팝업창 대신 쓴다


스포트라이트

    1. 스포트라이트는 인터페이스에서 변화가 막 일어났을때 유용하다. 대상을 잠깐 강조하는 방법으로 사용자에게 인터페이스의 변화를 넌지시 알려줄 수 있다. 스포트 라이트는 흔히 처음에는 대상의 배경을 하이라이트로 하고 점점 희미하게 만드는 방법으로 적용한다
    2. 인터페이스 변화에 일시적으로 주의를 끌고 싶다면 스포트라이트를 사용하라
    3. 대상의 상태가 바뀌었거나 새로운 정보로 업데이트 되었음을 보여줄때
    4. 평소에는 주목하지 않을 인터페이스 일부분에 일시적으로 주의를 끌 때


전환효과의 목적

우리의 눈은 움직임에 반응한다. 세상은 흔들리지 않는다. 또 갑자 사라지거나 바뀌엇 항산 변화에 신경을 곤두세우도록 하지도 않는다. 실제 세계에서 사물들은 부드럽고 자연스럽게 움직인다. 불쑥 튀어나오지도 않는다. 전환효과는 웹에서 일어나는 부자연스러운 움직임을 부드럽게 하고 자연스러워 보이도록 한다. 전환효과의 주 목적은 매력적인 인터페이스를 제공하고 커뮤니케이션을 강화하는 것이다

전환효과는 사용자의 접속을 더욱 지속적으로 유지시킨다. 화면에 보이는 영역이 살짝커지면서 상호작용에 반응하거나 아코디언 영역이 찰칵하고 열리는 효과는 사용자에게 훌룡하고 설득력 있는 경험을 제공한다. 인터페이스는 자극에 반응하면서 살아있는 것처럼 보인다. 특정 컨텍스트에서 커뮤니케이션 보다 사용자 접속 유지에 더 중점을 둔다. 그러나 대부분의 전환효과의 가장 중요한 목적은 커뮤니케이션이고, 접속유지는 부수적인 문제다

전환효과에서 중요한 것은 첫째도 둘째도 커뮤니케이션이다. 방송디자이너 해리마크스는 

- 이야기가 없다면 어떤 그래픽 기술도 흥미를 줄 수 없다

핵심은 이야기다. 전환 효과는 이야기를 더 설득력있게 하고 어려운 맥락을 자연스럽게 이어주어 사용자의 행위를 더 구체적이고 현실감 있게 만든다. 


전환 효과가 사용자와 커뮤니케이션 하는 방법은 다음과 같다

    1. 대상이 서서히 사라지면, 사용자는 주시하지 않았어도 대상이 보였다가 이제는 보이지 않는 상태가 되었음을 안다.
    2. 대상이 빠르게 나타나거나 사라지면, 그 변화가 중요하다는 것을 알 수 있다. 그 변화 속도가 느리면 상대적으로 중요성이 적음을 알 수 있다.
    3. 대상이 사용자를 향해 다가오면 (크기가 커지거나 사용자 앞을 지나가면) 사용자는 그 변화가 중요하거나 위험하다고 생각한다
    4. 대상의 크기가 빠르게 작아지다가 사라지면 즉시 사용자의 주의를 끌 수 있다

그렇다면 전환 효과는 무엇을 전달하는가?

    1. 화면이 바뀌는 동안 컨텍스트 유지하기 
    2. 방금 일어난 일 설명하기
    3. 대상 간의 관계 설명하기
    4. 주의 집중시키기
    5. 인지되는 성과 향상시키기
    6. 가상공간에 대한 착시현상만들기 


전환효과 가이드

    1. 전환효과는 사용자와 커뮤니케이션하고, 사용자의 접속을 유지할 수 있는 강력한 방법 이다. 이 효과는 남용될 우려가 있지만 유익하다
    2. 변화의 속도가 빠를수록 해당 이벤트는 더 중요하다
    3. 빠른 움직임은 빠른 생상변화보다 더 중요해 보인다
    4. 사용자에게 가까워지는 움직임은 사용자에게 멀어지는 움직임보다 중요해 보인다
    5. 변화가 매우 느리다면 사용자의 주의를 흐트러뜨리지 안흥면서도 인터렉션을 진행 할 수 있다
    6. 움직임은 대상의 새로운 위치 알리기 위해 사용할 수 있다. 대상이 한 곳에서 다른 곳으로 이동하는 것을 보면 사용자는 대상이 어디로 이동하여 어느 곳에 위치할지 쉽게 이해할 수 있다
    7. 전환 효과는 보통 쌍방향으로 만들어져야 한다. 어떤 대상이 닫힐 수 있는 영역으로 이동했다면 사용자는 그 영역을 다시 열어 대상을 확인 할 수 있어야 한다. 다시 대상을 확인할때는 전환효과가 거꾸로 나타나야 한다. 사용자가 대상을 삭제할 때 희미하게 사라진다면 새로 만들때는 서서히 뚜렷해지는 효과를 내야 한다. 상호작용의 대칭성 개념을 반영하는 것이다
    8. 효과가 잘못 사용된 것을 볼때 전환효과를 남용하지 않아야 한다는 사실을 상기해야 한다
    9. 인터페이스의 변화를 알릴때 전환 효과에만 의지하지 않아야 한다
    10. 사용자가 보고 있는 곳 부근에서 전환 효과를 제공하라. 그러면 전환 효과를 더 쉽게 발견할 수 있으며 광고같은 느낌이 덜해진다
    11. 단지 보이기 위한 효과는 커뮤니케이션을 돕기보다는 사용자를 짜증나고 혼란스럽게 한다


Posted by uuulike :