리치 인터페이스 디자인의 75가지 패턴-두 번째 패턴 '문맥 도구'

By | 2010년 4월 15일

웹 페이지 역할에 맞게 필요한 기능을 노출시키는 것. 그래서 사용자가 자연스러운 흐름 안에서 그 기능을 발견하고 사용하게 하는 것. 
‘드래그 앤 드롭’이라는 행위 못지 않게 중요한 인터페이스 디자인 고려사항이겠지요. ^^
문맥 도구는 웹 페이지의 흐름에 맞게 디자인된 기능을 뜻합니다. 사용자 입장에서 항상 보여야 편한 기능(상시 노출 도구), 마우스 오버 했을 때 노출해야 가장 적합한 기능(마우스 오버 노출 도구) 등일 텐데, 상시 노출 도구에는 대표적으로 디그 사이트의 추천 기능이 있고, 마우스 오버 노출 도구에는 플리커의 프로필 보기 기능이 있습니다.
백문이 불여일견! 웹 인터랙션 패턴 공개 그 2탄! 책에 담긴 문맥 도구 가운데서 ‘상시 노출 도구’ 패턴과 ‘마우스 오버 노출 도구’를 PDF에 담아 소개합니다. 🙂
함께 등장하는 ‘안티패턴’도 놓치지 말고 꼭 살피시길 권합니다. 백배 공감 하실 겁니다^^;
다음은 PDF에 담긴 내용 중 일부입니다. 
상시 노출 도구
문맥 도구의 가장 간단한 형태는 상시 노출 도구(Always-Visible Tools)다. 디그는 문맥도구를 상시로 노출하는 대표적인 예다(그림4-3).
눈에 보이는 도구
각 게시물 옆에는 디그 득점표가 있고, 그 아래에는 ‘추천(digg it)’ 버튼이 있다. 추천 버튼은 모든 게시물에있다. 다른 기능은 눈에 덜 띈다.
유인 요소
디그 버튼에 마우스를 올리면 테두리가 어두운 색으로 바뀌고, 버튼의 글씨도 검은색으로 바뀐다. 하이라이트는 인터랙션이 가능하다는 신호로 사용하기에 아주 효과적이다.
   
추천 완료
사용자가‘추천(digg it)’버튼을클릭하면, 추천수가집계된다. 현
재까지의 득표수는 희미해지고, 방금 클릭한 추천이 포함된 새로운
숫자가즉시나타난다. 추천(digg) 버튼은‘추천됨(dugg)’으로바
뀌고, 글씨가회색으로바뀌어이제는클릭할수없음을나타낸다.
그림4-3. 디그의 ‘추천(digg it)’ 버튼은 상시 노출되는 간단한 문맥도구다.
고려사항
‘추천(digg it)’ 버튼과 디그의 득점표는 각 게시물 옆에 제공되는 상시 노출 도구다.
명확한 유인 요소
도구를 감춰두었다가 게시물 위에 마우스를 올렸을 때만 보여주는 방식을 택하지 않은 이유는 무엇일까? 게시물 추천이 디그(Digg)에서 중심 태스크이기 때문에 추천 기능을 상시 노출하여 사용자 행위를 확실하게 유인하기 위함이다. 새 게시물에 적용할 수 있는 다른 기능(댓글, 공유, 반대 등)들도 있지만, 디그의 디자이너들은 이런 기능을 상시 노출하는 대신 눈에 덜 띄게 표현하였다. 기능을 보여주지 않다가 마우스를 올렸을 때나타나게 하는 방법도 있다. 이 방법에 대해서는 다음 ‘상대적 중요성’  부분에서 다룰 것이다.
도구를 상시 노출하는 방법은 투표와 순위 시스템에서 가장 많이 사용되는 것처럼 보인다. 넷플릭스는 클릭한 번으로 이루어지는 순위 시스템을 처음으로 선보인 사이트다(그림4-4).
그림4-4.넷플릭스의 별점 기능은 항상 노출되어 있다.

.

5 thoughts on “리치 인터페이스 디자인의 75가지 패턴-두 번째 패턴 '문맥 도구'

    1. JOE;

      재밌게 읽으셨다니 다행입니다. ^^ 오늘 4월 하순 날씨 가운데 역대 최저라는데, 건강 유의하세요~

      Reply
  1. Pingback: keizie's me2DAY

  2. 이광우

    ‘웹 폼 디자인’에서 느꼈던 감동[?]이 다시 느껴지는 듯 합니다. ^^
    소중한 자료의 공개 감사합니다~~

    Reply
    1. JOE;

      안녕하세요, 이광우 님. 그간 잘 지내셨나요~?^^
      앞으로도 좋은 책, 좋은 자료 많이 보실 수 있도록 노력하겠습닏 🙂

      Reply

댓글 남기기