| 6장 | | | 6:4 중요한 항목은 페이지 상단 중앙에 위치 |
|
6:4 중요한 항목은 페이지 상단 중앙에 위치
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 가장 중요한 항목은 웹 페이지의 상단 중앙에 놓아 사용자가 그 정보를 찾기 쉽게 하라.
주석 : 사용자는 일반적으로 페이지의 상단 중앙을 먼저 바라보고 왼쪽, 오른쪽을 바라본다. 그런 다음에 전체 웹페이지를 체계적으로 내려가면서 보게 된다. 모든 중요한 콘텐츠와 네비게이션 선택 사항들은 페이지 상단에 가까워야 한다. 특히 네비게이션 페이지들의 경우 주요 선택사항들은 스크롤을 안하거나 거의 하지 않더라도 화면에서 볼 수 있어야 한다. 역주 : 시선 추적 연구(Eye-tracking studides)에 기반한 지침이다.
|
| 6장 | | | 6:5 중요한 항목들은 일관된 지점에 위치 |
|
6:5 중요한 항목들은 일관된 지점에 위치
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 중요하고 클릭가능한 항목들은 눈에 더 잘 띄는 장소인 페이지 상단에 가깝게, 그리고 동일한 지점에 놓아라.
주석 : 사용자들은 화면상의 (페이지마다) 같은 지점에는 동일한 항목들이 나올 것이라고 예상하기 마련이다. 숙련된 사용자는 눈으로 발견하기 전에 마우스를 목적 지점에 갖다놓기도 한다. 사용자는 페이지 상단의 항목들을 페이지 아래쪽의 것들보다 더 잘 찾아낼수도 있다. 역주 : 인지심리학적으로 일관성에 대한 기대의 형성 및 학습을 중시하여야 한다. 예컨데 매 페이지 상단에 위치하는 네비게이션 바상의 항목들이 지침이 가리키는 대표적인 경우라고 할 수 있다.
|
| 6장 | | | 6:6 쉽게 비교 가능하도록 페이지 구조의 설계 |
|
6:6 쉽게 비교 가능하도록 페이지 구조의 설계
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 사용자가 항목들의 유사성, 차이, 경향, 관계들을 식별하여 분석하여야 하는 경우 항목들의 비교가 쉽도록 페이지 구조를 설계하라.
주석 : 둘이나 그 이상의 항목들을 비교하는 경우에 사용자가 다른 항목을 보기 위하여 다른 페이지나 같은 페이지의 다른 지점에 가더라도 한 항목을 기억할 필요가 없도록 하여야 한다. 역주 : 항목들의 비교가 필요할 경우 잘 정리된 테이블을 사용하는 것도 지침을 지키는 좋은 방법이다.
|
| 6장 | | | 6:7 공백의 중간 정도의 사용 |
|
6:7 공백의 중간 정도의 사용
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 훑어보거나 검색(결과)에 쓰이는 페이지들에는 공백(텍스트나 그래픽등이 없는 영역)을 제한하라.
주석 : ''밀집도(density)''는 화면이 텍스트와 그래픽으로 채워진 비율이다. 한 연구에 의하면 밀집도가 높을수록 훑어보기가 빨라지며 사용자의 정확도나 선호도에 영향을 미치지 않는 것으로 밝혀졌다. 다른 연구에 의하면 사용자들은 중간 정도의 공백을 선호하나 공백의 정도는 검색 수행성에 영향을 미치지 않는 것으로 밝혀졌다. 콘텐츠(예컨데 텍스트) 페이지에는 문단을 구분하기 위하여 어느 정도의 공백을 사용하도록 한다. 웹페이지에서 항목 사이가 너무 떨어져 있으면 불필요한 스크롤이 발생한다. 역주 : 대강 훑어보는 페이지나 검색 결과들을 보여지는 경우에는 공백을 제한하더라도 부정적인 영향이 없다. 즉 분한 공백은 어느 페이지에나 필요하다는 일반적인 관념이 틀리다는 연구 결과에 근거한 지침이다.
|
| 6장 | | | 6:8 페이지상의 항목 배치 |
|
6:8 페이지상의 항목 배치
(상대적 중요도: 3, 증거의 강도: 5)
지침 : 페이지 요소들을 수직이나 수평으로 시각적으로 배치하라.
주석 : 사용자들은 텍스트 블록, 열, 행, 체크 박스, 라디오 버튼, 데이터 입력란등을 일관되게 배치한 것을 선호한다. 모든 웹페이지에 걸쳐 일관되게 배치하도록 한다. 역주 : 항목들의 일관된 배치가 디자인적으로 단조롭게 느껴질 수 있다. 그러나 단조로움을 극복하기 위해 사용성을 해쳐서는 안된다.
|
| 6장 | | | 6:9 적절한 라인 길이의 선택 |
|
6:9 적절한 라인 길이의 선택
(상대적 중요도: 2, 증거의 강도: 5)
지침 : 만일 글을 읽는 속도가 가장 중요하다면 좀 더 긴 라인 길이(라인당 영문 기준 75-100자)를 사용하라. 웹사이트의 외관(acceptance)이 가장 중요한 요소라면 좀 더 짧은 라인 길이(라인당 영문 기준 50자)를 사용하라.
주석 : 디자인시 먼저 수행성과 선호도중 어느 것이 가장 중요한 요소인지를 결정하여야 한다. 사용자들은 라인 길이가 길수록 빨리 읽는다. 그러나 사용자들은 전반적인 글 읽는 속도가 떨어짐에도 불구하고 좀 더 짧은 라인 길이를 선호하는 경향이 있다. 한 연구에 의하면 20여자로 된 라인 길이에서 글 읽는 속도가 눈에 띄게 떨어지는 것을 발견했다.
텍스트를 보여줄 공간이 제한되어 있을때 다수의 짧은 텍스트 라인보다는 차라리 소수의 긴 텍스트라인으로 보여주도록 하라. 연속되는 텍스트에 대해서는 라인당 적어도 50글자 이상으로 보여주도록 한다.
종이 문서를 사용한 연구에서는 중간 정도의 라인 길이에서 글 읽는 속도가 가장 빠른 것으로 밝혀졌다. 역주 : 지침대로 취사선택하기 바란다. |
| 6장 | | | 6:10 스크롤을 멈추게 만드는 요소 피하기 |
|
6:10 스크롤을 멈추게 만드는 요소 피하기
(상대적 중요도: 2, 증거의 강도: 4)
지침 : 헤딩(headings)의 위치나 다른 페이지 요소들때문에 사용자가 실제로 페이지의 상단이나 하단에 있지 않음에도 불구하고 그렇게 착각하게 만들지 말라.
주석 : 한 연구에서 세개의 헤딩들을 도입부 텍스트 섹션 아래에 페이지 한가운데쯤에 위치시켰다. 헤딩들은 네비게이션 탭의 약 1인치(2.54 센티미터) 아래에 있었다. 사용자들은 페이자 아래에서 위로 스크롤 하면서 이 헤딩들을 만나자 이 헤딩들이 페이지의 처음을 가리킨다고 생각하고 스크롤을 멈췄다.
비슷하게, 사용자들은 메우 작은 폰트 사이즈의 텍스트 문단을 만나자 링크를 찾기 위해 페이지 아래로 스크롤하는 것을 멈췄다. 이 작은 문단이 사용자들로 하여금 페이지의 최하단에 있다고 믿게 만든 것이다. 사용자의 스크롤을 멈추게 만들수 있는 다른 요소들은 수평 라인이나, 부적절한 위젯(widgets)의 사용, 배경 색상의 사용 중지등이다. 역주 : 말보다는 직접 보는 것이 실감날 것이다. 원문의 사례를 싣도록 하겠다.
[위쪽으로의 스크롤이 중단된 경우]
[아래쪽으로의 스크롤이 중단된 경우]
|
|
|
|
| 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 방식) 서브 메뉴가 나타난다.]
[''동시적'' 메뉴를 어떤 경우에 써야 하는지에 대한 사례이다. 사용자는 반복적으로 왼쪽 구역에 있는 많은 변수들을 조작할 수 있으며 뒤로 버튼을 누르지 않고서도 오른쪽 구역에 있는 지도에서 결과들을 볼 수 있다.]
|
