| 7장 | | | 7:1 사용자의 위치를 알려줄 수 있는 피드백의 제공 |
|
7:1 사용자의 위치를 알려줄 수 있는 피드백의 제공 (상대적 중요도: 5, 증거의 강도: 2)
지침 : 사용자가 웹사이트에서 어디에 있는지 알려주는 피드백을 제공하라.
주석 : 피드백은 사용자에게 자신들이 어디에 있는지 이해하고 다음 행동으로 나아가는데 필요한 정보를 제공한다. 피드백의 사례들을 보면 경로와 위계 구조 정보를 포함하며(예컨데 ''현재 위치''), 목적 페이지의 헤딩(heading)에 링크를 대응시키고 사이트상에서 사용자의 위치와 관련된 URL을 만들어 낸다. 다른 형태의 피드백을 보면 이미 클릭한 링크의 색상을 변화시키거나 화면상의 활성화된 부분을 지시하는 시각적인 실마리를 사용하기도 한다. 역주 : 이미 언급했던 ''현재 위치(breadcrumbs)''의 활용에 대한 지침이다. 규모가 크고 복잡한 사이트의 설계시 필수적으로 반영되어야 할 지침이다.
|
| 7장 | | | 7:2 긴 페이지에 클릭가능한 목차의 사용 |
|
7:2 긴 페이지에 클릭가능한 목차의 사용 (상대적 중요도: 4, 증거의 강도: 3)
지침 : 긴 페이지에서는 사용자를 페이지 훨씬 아래에 있는 콘텐츠로 이동시킬수 있는 링크로 된 ''목차 리스트''를 제공하여야 한다.
주석 : 한 화면에서 볼 수 없는 여러개의 구별되는 섹션으로 이루어진 긴 페이지에서는 페이지 최상단에 짧고 클릭가능한 섹션 리스트(''앵커''나 ''페이지내'' 링크라고 불리기도 함)를 덧붙이도록 한다. ''앵커 링크(Anchor links)''는 두가지 목적이 있다. 첫째, 페이지의 개요를 보여줌으로써 사용자들이 원하는 정보가 섹션 속에 있는지 빠르게 확인할 수 있고 둘째, 사용자들이 특정 정보에 대해 빠르게 탐색할 수 있도록 해준다.
''앵커 링크''는 첫 화면 아래에 있는 콘텐츠에 직접 링크되기 때문에 사용자들이 완전히 다른 페이지에서 오더라도 특정 정보를 빠르게 얻는데도 유용하다. 역주 : 웹사이트의 FAQ등에서 문항과 내용이 많을 때 주로 쓰이는 기법에 관한 지침이다. 동 지침에서 언급되지는 않았으나 앵커 링크에서 콘텐츠로 내려왔을때 다시 목차로 돌아갈 수 있는 링크(예컨데 ''위로''나 ''Top''등. 블로그처럼 스크롤이 많은 경우에도 유용하다. 예컨데 네이버 블로그(http://blog.naver.com)에서도 제공되는데 페이지 제일 아래에 있다. 그러나 너무 작아서 찾기 힘든게 흠이다)가 반드시 제공되어야 사용자의 불필요한 스크롤을 없애줄 수 있다.
|
| 7장 | | | 7:3 네비게이션 옵션이 없는 페이지 만들지 않기 |
|
7:3 네비게이션 옵션이 없는 페이지 만들지 않기 (상대적 중요도: 4, 증거의 강도: 2)
지침 : 네비게이션 옵션이 없는 페이지를 만들거나 사용자를 그런 페이지로 보내지 말라.
주석 : 많은 웹페이지들이 새 브라우저 창을 여는 링크들을 포함하고 있다. 새 브라우저가 열리게 되면 ''뒤로'' 버튼이 비활성화된다(본질적으로 새 브라우저 창은 사용자의 과거 네비게이션을 전혀 모른다. 그래서 비활성화되는 것이다.). 새 창이 전체 화면 크기로 열리면 사용자들은 다른 창으로 보내졌다는 것을 깨닫지 못할 수 있으며 이전 페이지로 돌아가기 위해 ''뒤로'' 버튼을 누를수 없으므로 좌절할 수 있다. 만일 그런 링크가 웹사이트에 있으면 새로 열리는 창에 창을 닫고 사용자를 원래 브라우저 창으로 돌아갈수 있도록 눈에 잘 띄는 장치를 해놓아야 한다.
덧붙여서, 디자이너는 브라우저의 ''뒤로'' 버튼을 비활성화시키는 웹페이지를 만들어서는 안된다. ''뒤로'' 버튼의 비활성화는 사용자들에게 혼란과 좌절을 야기시킬수 있으며 네비게이션을 심각하게 방해한다. 역주 : 동 지침의 내용뿐만 아니라 자바스크립트를 잘못 만들어 ''뒤로'' 버튼을 눌러도 뒤로 가지 못하는 문제도 조심해야 한다. 예컨데 지침 7:2에서 언급한 네이버 블로그에서 어떤 블로그(주로 내용이 없는 새로 만든 블로그들)에 갔다가 ''뒤로'' 버튼을 누르면 반응을 하지 않아 사용자를 당황하게 만든다. 이 문제는 무수한 사이트에서 발견되고 있다.
|
| 7장 | | | 7:4 네비게이션 요소의 차별화 및 그룹화 |
|
7:4 네비게이션 요소의 차별화 및 그룹화 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 네비게이션 요소들은 서로 명확하게 차별화하여야 한다. 그러나 이것들은 그룹화하여 각 페이지상에 일관되고 찾기 쉽게 배치하여야 한다.
주석 : 사용자들이 웹사이트의 구조를 배우고 이해할 수 있도록 웹사이트 전반에 걸친 공통된 네비게이션 체계을 만들도록 한다. 일관된 위치 탭(locating tabs), 헤딩(headings), 리스트, 검색, 사이트맵등을 사용하여 모든 페이지에 동일한 네비게이션 체계를 사용한다. 중요한 네비게이션 요소들은 클릭가능할 것이라고 사용자들이 추측하는 위치에 놓는다(일반적으로 왼쪽이나 오른쪽 구역[panel]에 있는 단어들은 링크라고 간주되고 있다).
네비게이션 요소들은 서로 명확하게 차별화하여 사용자들이 각각의 의미와 목적지를 이해할 수 있도록 하여야 한다. 그룹화는 사용자들이 네비게이션 요소들을 찾고 확인하는 시간을 줄여주게 된다. 역주 : 차별화와 그룹화는 일견 모순되는 것처럼 보이나 네비게이션 설계시에는 둘 다 동시에 필요하다.
|
| 7장 | | | 7:5 설명이 잘 된 탭 레이블의 사용 |
|
7:5 설명이 잘 된 탭 레이블의 사용 (상대적 중요도: 4, 증거의 강도: 3)
지침 : 탭 레이블들은 그것들의 기능이나 목적지를 명확하게 설명하도록 하라.
주석 : 사용자들은 설명이 잘 되어 있어 잘못된 선택을 하지 않도록 하는 레이블이 있으면 탭 형식을 선호한다. 공간이 부족하여 레이블을 만들수 없을 때에는 탭을 사용하지 않도록 한다. 역주 : 미국인들의 고유한 성향인지는 알 수 없으나 탭 형식의 서류철등에 익숙한 경우 탭 형식을 선호하는 듯하다. 이는 컴퓨터 바탕화면(desktop)의 사무용 책상에 대한 메타포와 같은 맥락이다. 즉 오프라인에서 익숙한 구조나 형태를 컴퓨터상에서 구현할 수 있다면 인지심리학적으로 사용성이 높아지는 것과 같다. 다음은 사용례이다. [다음 탭 레이블들은 사용자가 목적지 페이지에서 찾기를 기대하는 정보의 유형을 명확하게 설명하고 있다.]
 [다음 탭 레이블들은 설명이 충분하지 않아 사용자가 목적지 페이지에서 이용할 수 있는 정보의 유형에 대해 의심하게끔 만든다.]
 |
| 7장 | | | 7:6 효과적인 탭의 표현 |
|
7:6 효과적인 탭의 표현 (상대적 중요도: 3, 증거의 강도: 3)
지침 : 네비게이션 탭들은 페이지의 최상단에 위치시켜라. 그리고 현실 세계의 탭의 클릭가능한 버전처럼 보이게 하라.
주석 : 사용자들은 탭이 실생활에서 볼 수 있는 탭처럼 보이지 않으면 탭의 사용에 대해 혼란을 일으킨다. 실생활에서의 탭은 파일철에서 볼 수 있는 것과 같은 것이다. 한 연구에 의하면 사용자들은 현실세계의 탭처럼 보이는 것들에 대해 더 잘 찾고 적절하게 클릭했다고 한다. 역주 : 탭의 디자인에 관한 지침이다. 다음은 사무실의 파일 캐비넷에서 발견할 수 있는 탭처럼 보이는 클릭가능한 탭들이다.

 |
| 7장 | | | 7:7 사이트맵의 사용 |
|
7:7 사이트맵의 사용 (상대적 중요도: 3, 증거의 강도: 4)
지침 : 페이지가 많은 사이트에서는 사이트맵을 사용하라.
주석 : 사이트맵은 웹사이트의 개요를 제공한다. 웹사이트의 위계구조를 보여줄수도 있으며 전통적인 목차를 흉내내서 디자인할수도 있으며 단순한 색인일수도 있다.
몇 몇 연구들에 의하면 사이트맵이 반드시 사용자의 웹사이트에 대한 관념적 표상(mental representations)을 향상시키는 것은 아니다. 또한 한 연구에 의하면 사이트맵이 사용자의(또는 도메인의) 개념적 구조(conceptual structure)를 반영하지 못하면 그 효용이 줄어드는 것으로 보고되었다. 역주 : 웹사이트가 복잡해질수록 이를 반영하는 사이트맵을 만드는게 힘들어지게 된다. 더군다나 웹의 상호작용성(interactivity)을 2차원 평면 위에 일대일 대응시키는 것이 반드시 가능한 것은 아니다. 따라서 사이트맵의 이러한 한계를 인정한 선상에서 적정선의 전체 구조를 표시하는 것이 오히려 사용성을 높이는 길이 될 수 있다고 본다.
|
| 7장 | | | 7:8 적절한 메뉴 유형의 사용 |
|
7:8 적절한 메뉴 유형의 사용 (상대적 중요도: 3, 증거의 강도: 4)
지침 : 단순한 전방위(forward-moving) 작업에는 ''순차적(sequential)'' 메뉴를 사용하라. 뒤로 버튼을 여러번 누르지 않으면 안되는 작업들에 대해서는 ''동시적(simultaneous)'' 메뉴를 사용하라.
주석 : 대부분의 웹사이트들은 어느 정도 미리 순서가 정해진 일련의 메뉴로부터 항목들을 선택하게 하는 ''순차적'' 메뉴를 사용한다. 각 선택이 이뤄지고 나면 다른 메뉴가 열리는 것이다. 메뉴에서의 마지막 선택은 사전에 선택한 것들의 총합이다.
동시적 메뉴는 메뉴 위계의 여러 레벨에서의 선택을 보여준다. 즉 사용자에게 순서에 상관없이 메뉴에서 선택할 수 있게 해주는 것이다. 동시적 메뉴는 종종 프레임 형태로 제공되며 만일 순차적 메뉴로 제공되었으면 사용자가 여러번 뒤로 버튼을 눌렀어야 할 상황에서 가장 적합하다. 역주 : 이 지침의 미국 사례는 다음과 같다. [''순차적'' 메뉴의 사례이다. "Deputates"위에 마우스를 놓으면(mouse-over 방식) 서브 메뉴가 나타난다.]
 [''동시적'' 메뉴를 어떤 경우에 써야 하는지에 대한 사례이다. 사용자는 반복적으로 왼쪽 구역에 있는 많은 변수들을 조작할 수 있으며 뒤로 버튼을 누르지 않고서도 오른쪽 구역에 있는 지도에서 결과들을 볼 수 있다.]

|
| 7장 | | | 7:9 네비게이션 전용 페이지는 짧게 유지하기 |
|
7:9 네비게이션 전용 페이지는 짧게 유지하기 (상대적 중요도: 2, 증거의 강도: 4)
지침 : 사용자에게 네비게이션 전용 페이지를 스크롤하게 하지 말라.
주석 : 이상적으로는, 네비게이션 전용 페이지는 한 화면 이상의 정보를 담아서는 안된다. 아무리 작은 거리라도 사용자가 페이지를 스크롤하게 해서는 안된다. 한 연구에 의하면 사용자들은 네비게이션 전용 페이지 한 화면의 밑부분을 페이지의 마지막으로 간주하고 있으며 더 이상의 네비게이션 옵션을 찾아서 스크롤 하지 않는 것으로 밝혀졌다. 역주 : 네비게이션 전용 페이지라는게 따로 있는 것은 아니며 콘텐츠를 포함하지 않으면서 콘텐츠로 가는 링크들을 모아 놓은 페이지를 의미한다. 규모가 왠만큼 큰 웹사이트들의 홈페이지(메인페이지)나 서브 메인들이 그러하다. 지침에서 ''이상적으로는''이란 단서가 붙었기는 하나 연구 결과에 유의할 필요가 있다.
|
| 7장 | | | 7:10 네비게이션을 돕기 위한 풍선도움말의 사용 |
|
7:10 네비게이션을 돕기 위한 풍선도움말의 사용 (상대적 중요도: 1, 증거의 강도: 2)
지침 : 사용자가 올바른 링크를 선택하는 것을 돕기 위해 ''풍선 도움말(glosses)''을 제공하라.
주석 : 풍선도움말은 사용자가 마우스 포인터를 링크 가까이 갖다대면 튀어나오는 짧막한 문구로 된 정보이다. 이것은 링크 안에 있는 정보를 미리 볼 수 있게 해준다. 사용자는 링크 가까이에 이 사전 정보가 있는것을 선호한다. 위치를 잘못 정하면 기본 텍스트 읽는 것을 방해할 수도 있다. 단 디자이너는 애초에 잘못 이름 붙인 링크를 풍선도움말로 보완하려고 해서는 안된다. 역주 : 풍선도움말 또는 툴팁(tooltip)을 링크에서 제공하는 한 가지 사례는 www.coolcheck.co.kr의 진단보고서이다. 보고서가 난잡해지지 않고 마우스를 갖다 대면 필요한 정보를 간략하게 제공할 수 있다.
 |