| 10장 | | | 10:1 클릭가능성에 대한 일관된 실마리의 제공 |
|
10:1 클릭가능성에 대한 일관된 실마리의 제공 (상대적 중요도: 5, 증거의 강도: 4)
지침 : 항목이 클릭가능하다는 것을 사용자에게 명확히 인식시키는 충분한 실마리를 제공하라.
주석 : 어떤 것이 클릭가능한지를 알기 위해 사용자가 웹사이트에서 이리저리 마우서 포인터를 움직이도록 만들어서는(''지뢰찾기'') 안된다. ''지뢰찾기''보다는 눈으로 살펴보는 것이 훨씬 빠르다. 유사한 문제로 링크를 표시하기 위해 마우스오버(mousevoers)를 사용하는 것은 신규 방문자들에게 혼란을 일으킬 수 있고 어떤 아이템이 링크인지가 불확실하기 때문에 모든 사용자를 느리게 만들수 있다.
밑줄(underlines), 불릿(bullets), 화살표(arrows)나 다른 심볼들의 사용시, 그것들이 항상 클릭가능한지 아닌지에 대해 일관성이 있어야 한다. 예를 들어 이미지를 링크로서도 사용하고 장식으로도 사용하면 사용자들이 그것들의 클릭가능성을 식별해야 하기 때문에 속도를 느리게 만든다.
페이지의 상단 중앙이나 왼쪽과 오른쪽 구역에 있는 있는 항목들은 링크로 간주될 수 있는 가능성이 높다. 이런 것들은 링크된 요소가 실제 세계의 탭이나 누르는 버튼처럼 보일때 특히 가능성이 더 높아진다. 역주 : 링크의 과소 사용이나 과다 사용이 여러가지 문제를 일으키는 것과는 별개로, 어떤 경우라도 클릭가능성에 대한 일관된 실마리를 제공하여야 한다. 이미지, 특히 로고는 일관되게 클릭가능하게 만드는 것이 사용자의 기대에 부합한다.
|
| 10장 | | | 10:2 클릭할 수 있다는 오해를 불러일으키는 것들의 사용 금지 |
|
10:2 클릭할 수 있다는 오해를 불러일으키는 것들의 사용 금지 (상대적 중요도: 4, 증거의 강도: 2)
지침 : 클릭이 안되는 항목들은 클릭가능하다고 보이게 하는 특징들을 갖지 않도록 하라.
주석 : 심볼들은 대개 클릭가능성을 함축하는 적어도 하나 이상의 다른 실마리와 결합되어야 한다. 한 연구에 의하면 사용자들은 링크의 특징을 지닌 주요 헤딩을 클릭하는 것이 관찰되었다. 그러나 그 헤딩은 링크가 아니었다.
그런데 어떤 사용자들에겐 불릿(bullets)과 화살표(arrows)는 이것들이 다른 클릭가능성의 실마리(밑줄이나 파란색의 사용등)를 갖고 있지 않아도 클릭가능성을 의미할 수 있다. 이것은 사용자가 항목들이 링크인지 여부에 대해 알아봐야 하기 때문이다. 역주 : 다음은 동가이드에서 제시된 클릭가능성에 대한 혼동을 불러 일으키는 사례들이다.
[아래 항목들은 클릭가능해 보이지만 클릭이 안된다. 항목들이 밑줄이 그어져 있고 눈에 띄게 차이가 나서 사용자의 주의를 끌기 때문이다.]
 [아래 파란색 텍스트와 밑줄친 텍스트는 클릭가능하지 않다.]
 [아래 이미지들 중 화살표가 가리키는 것 포함 2개는 클릭가능하지 않다. 사용자가 클릭가능하지 않은 것 중 하나에 마우스오버 한다면 모든 이미지들이 클릭가능하지 않다고 생각할 수 있다. 따라서 하나가 클릭가능하다면 다른 것들도 클릭이 가능해야 사용자에게 일관성을 심어 준다.]

|
| 10장 | | | 10:3 링크에는 텍스트 사용 |
|
10:3 링크에는 텍스트 사용 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 이미지 링크보다는 텍스트 링크를 사용하라.
주석 : 일반적으로 텍스트 링크는 더 쉽게 링크가능한 것으로 인식된다. 텍스트 링크는 다운로드가 빠르며 사용자가 선호하고 선택된 후에 색을 바꿀 수 있다. 텍스트로 링크의 목적지를 전달하는 것이 이미지를 사용하는 것보다 일반적으로 쉽다.
한 연구에 의하면 어떤 이미지들이 클릭가능한지 여부에 대해 사용자들이 상당한 정도의 혼동이 있었다고 한다. 이는 단어가 들어있는 이미지들에 대해서도 해당되었다. 사용자들은 마우스 포인터를 이미지 위에 올려놓지 않고서는(''지뢰찾기'') 해당 이미지가 클릭가능한지 여부를 구분하지 못했다. 사용자에게 무엇이 클릭가능한지 ''지뢰찾기'' 하기를 요구하는 것은 속도를 느리게 만든다.
텍스트 링크를 사용할 때 생기는 또다른 잇점은 이미지를 비활성화 시켜 놓은 텍스트 전용 브라우저를 사용하는 사용자들도 네비게이션 옵션을 볼 수 있다는 것이다. 역주 : 다음은 가이드에서 제시하고 있는 사례이다. 왼쪽 화살표들이 가리키는 세 개의 이미지들은 부연 텍스트가 없더라도 상대적으로 의미를 파악하기 쉽다. 반면에 오른쪽 화살표들이 가리키는 두개의 이미지들은 첫눈에 보기에 무슨 의미인지 파악하기 어렵다. 참고로 국내 모 신생 대형 포털이 이미지 메뉴(마우스 오버시 텍스트를 나타냈었음)로 사이트를 구축하였다가 얼마 못가고 사이트를 개편한 헤프닝은 유명하다.

|
| 10장 | | | 10:4 유의미한 링크 레이블 붙이기 |
|
10:4 유의미한 링크 레이블 붙이기 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 유의미하고 이해하기 쉬우며 디자이너가 아닌 사용자가 쉽게 차이를 확인할 수 있는 레이블 및 개념을 사용하라.
주석 : 사용자의 혼동을 피하기 위해 서로 분명하게 구분되는 링크 레이블을 사용하여야 한다. 사용자는 링크를 보고 링크의 목적지에 관해 알 수 있어야 한다. "여기를 누르세요(Click Here)" 같은 용어를 사용하는 것은 나쁜 결과(counterproductive)를 가져올 수 있다.
명확한 레이블링은 사용자가 이용가능한 링크를 통해 네비게이션해 내려갈 때 특히 중요하다. 사용자가 링크에 관해 더 많은 판단을 해야 한다면 잘못된 결정을 내릴 가능성은 더 높아지기 마련이다. 역주 : 링크의 의미가 불분명하거나 오해를 불러 일으키는 일은 모든 사이트에서 필연적으로 발생하는 일이다. 관건은 이를 얼마나 최소화할 수 있는가이다. 기획자 내지 정보 설계자의 책임 영역이다.
|
| 10장 | | | 10:5 링크 이름과 목적 페이지와의 대응 |
|
10:5 링크 이름과 목적 페이지와의 대응 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 링크 텍스트와 목적지(즉 타겟) 페이지상의 타이틀이나 헤딩을 대응시켜라.
주석 : 링크와 목적지 페이지가 밀접하게 대응하게 되면 사용자에게 의도한 페이지에 왔음을 알려주는 피드백을 제공할 수 있게 해준다.
사용자가 특정 목적 페이지에 도달하기 위해 두 번 이상 클릭하여야 할 경우 완전히 동일한 링크 이름을 반복해서 사용하는 것을 피해야 한다. 왜냐하면 사용자는 각 레벨의 링크 이름이 동일하거나 아주 유사할 경우 혼동을 일으킬 수 있기 때문이다.
한 연구에 의하면 사용자들이 "응급 처치(First Aid)"라고 이름 붙여진 링크를 클릭하고 난 다음 세 개의 선택 링크가 있는 다음 페이지로 가게 했는데 그것들 중 하나는 다시 "응급 처치"라고 이름이 붙여져 있었다. 이 두 개의 "응급 처치" 링크는 서로 다른 목적지 페이지로 가는 것이었다. 사용자들은 두 번째 페이지에서 "응급 처치"를 선택하지 않고 다른 선택 링크들을 클릭했는데 왜냐하면 사용자들은 이미 그들이 "응급 처치" 페이지에 와 있다고 생각했기 때문이었다. 역주 : 페이지 타이틀을 제대로 적지도 않는 한국 현실에서는 무의미한 지침일수도 있겠다. 다시 한 번 타이틀 기재의 중요성을 강조하고자 한다. 동 가이드의 지침 9:5를 참조하기 바란다.
|
| 10장 | | | 10:6 설명력 있는 임베디드 링크 |
|
10:6 설명력 있는 임베디드 링크 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 임베디드 링크를 사용할 때 링크 텍스트가 링크의 목적지를 정확하게 설명하도록 하라.
주석 : 사용자들은 각 임베디드 링크(embedded link, 본문 텍스트상의 링크) 앞 뒤의 텍스트들을 무시하는 경향이 있다. 그러므로 링크의 목적지에 대한 실마리를 더해주는 텍스트를 앞 뒤에 가진 임베디드 링크는 만들지 말아야 한다. 역주 : 본문중에 하이퍼 링크를 사용할 때 링크 그 자체가 링크의 목적지를 잘 설명하고 있어야 한다. 웹페이지는 정독보다는 훑어보는 경향이 강할 뿐 더러 사용자들이 링크를 클릭하려고 할 때 다시 한 번 의미를 생각할 수 있기 때문이다.
|
| 10장 | | | 10:7 중요한 링크의 반복 |
|
10:7 중요한 링크의 반복 (상대적 중요도: 4, 증거의 강도: 4)
지침 : 중요한 콘텐츠는 둘 이상의 링크로부터 접근이 가능하도록 하라.
주석 : 완전히 동일한 정보에 대해 둘 이상의 접근 방법을 구축하는 것은 사용자들에게 그들이 원하는 정보를 찾는데 도움을 줄 수 있다. 특정 정보가 웹사이트의 성공에 있어 결정적일 때 그 정보에 대해 두 개 이상의 링크를 제공하여야 한다. 서로 다른 사용자는 각자의 문제 해석과 페이지의 레이아웃에 따라 정보를 찾는 방법이 다를 수 있기 때문이다. 어떤 사용자들은 링크에 특정 레이블이 있을 때 중요한 링크를 쉽게 찾아내는 반면에 다른 사용자들은 또 다른 레이블일때 링크를 잘 인식할 수 있기 때문이다. 역주 : 다음은 가이드에서 제시하고 있는 사례들이다. [아래 사례에서는 폐암(lung cancer)를 타원으로 표시한 세가지 다른 링크로 찾을 수 있게 해주고 있다.]
 [아래 사례에서는 왼 쪽 패널에서 "시간(Hours)" 정보를 발견하지 못한 사용자들이 오른쪽 콘텐츠 헤더를 통해 발견할 수 있게 해주고 있다.]
 |
| 10장 | | | 10:8 클릭한 링크의 표시 |
|
10:8 클릭한 링크의 표시 (상대적 중요도: 4, 증거의 강도: 2)
지침 : 방문한 링크에 대해서는 사용자에게 링크색의 변화를 표시해 주도록 하라.
주석 : 일반적으로 텍스트 링크 색의 초기값(방문 안 한 링크/장소는 파란색, 방문한 링크/장소는 보라색)을 사용하는 것이 최선이다. 링크색은 사용자들이 방문한 웹사이트의 부분을 이해하는데 도움을 준다. 한 연구에 의하면 이런 유형의 피드백은 사용자의 정보 찾기 속도를 개선시키는 유일한 변수였다고 한다. 만일 사용자가 한 링크를 선택했는데 동일한 타겟에 대해 다른 링크들이 있다면 그 타겟에 이르는 모든 링크들은 모두 색상이 변하도록 해야 한다. 역주 : 이 지침은 무조건 적용하기에는 논란의 소지가 있다. 우선 사용자가 해당 사이트를 다시 방문할 경우 브라우저의 임시 파일이 남아 있지 않으면 방문 링크를 알 수 없다는 일반적인 전제와 업데이트등으로 콘텐츠가 변경될 경우 해당 링크의 재방문을 유도하는 문제, 그리고 시각적으로 방문한 링크의 색상을 변화시키는 것이 네비게이션에 별 도움이 안된다고 판단되는 경우등이 있기 때문이다. 그럼에도 불구하고 ''일반적으로'' 고전적인 링크 색상의 변경 지침은 유효하다고 본다.
|
| 10장 | | | 10:9 관련된 콘텐츠로의 링크 |
|
10:9 관련된 콘텐츠로의 링크 (상대적 중요도: 4, 증거의 강도: 2)
지침 : 관련된 콘텐츠를 갖고 있는 웹사이트의 다른 페이지로의 링크를 제공하라.
주석 : 사용자들은 디자이너가 웹사이트를 충분히 알려줄 것을 기대한다. 즉 관련된 콘텐츠가 있는 모든 링크들의 리스트를 제공해주리라 기대한다. 역주 : 가이드에서는 디자이너라고 되어 있으나 사이트 구축팀이 분화되어 있을 경우 기획 내지 정보설계자가 책임져야 할 지침이다.
|
| 10장 | | | 10:10 부연 정보에 대한 링크 |
|
10:10 부연 정보에 대한 링크 (상대적 중요도: 3, 증거의 강도: 2)
지침 : 부연 정보에 대한 링크를 제공하라.
주석 : 기술적 개념이나 전문 용어를 명확히 하는 정의나 설명에 대한 링크를 제공해서 지식이 부족한 사용자들도 웹사이트를 성공적으로 사용할 수 있도록 한다. 예컨데 사전, 용어집, 더 많은 정보를 제공하도록 만들어진 섹션에 링크를 제공하도록 한다. 역주 : 웹사이트중에는 타겟 사용자층을 전제하더라도 용어집이나 사전등을 제공하지 않으면 기술적 문제에 생소하거나 모르는 사용자들이 사이트를 이용할 수 없는 사이트들이 있다. 링크 뿐만 아니라 툴팁등도 사용이 가능하며 오히려 더 편리할 수도 있다. 그럼에도 불구하고 여기서 그쳐서는 안 되며 최종적으로는 사용자의 피드백을 받아 사이트를 계속 개선하는 노력이 필요하다.
|
| 10장 | | | 10:11 적절한 텍스트 링크 길이의 사용 |
|
10:11 적절한 텍스트 링크 길이의 사용 (상대적 중요도: 3, 증거의 강도: 3)
지침 : 텍스트 링크는 이해하기에 충분할만큼 길게 하라. 그러나 문장 전체를 링크하지는 마라.
주석 : 한 단어로 된 텍스트 링크는 링크의 목적지에 대해 충분한 정보를 주지 못할 수도 있다. 여러개의 단어로 된 링크는 빨리 읽기에는 곤란할 수 있다. 특히 다음 줄까지 링크가 이어질 때에는 더욱 그렇다. 일반적으로 텍스트 링크는 한 줄이 넘지 않을 때 제일 좋다. 그런데 한 연구에 의하면 사용자들이 산문 텍스트(prose text)를 훑어 볼 때 9에서 10단어로 된 링크가 그보다 짧거나 긴 링크보다 더 효과가 좋다는 것이 발견되었다. 링크가 모든 사용자에게 같게 보이게 하는 것이 항상 가능하지는 않다는 것을 유의하여야 한다. 왜냐하면 브라우저 설정이나 화면 해상도가 달라질 수 있기 때문이다. 역주 : 한글에서도 영어와 같이 9~10단어가 최적 링크 길이인지는 의문이다. 그러나 링크가 두 줄 이상이 되는 것은 삼가해야 한다.
|
| 10장 | | | 10.12 내부 또는 외부 링크의 표시 |
|
10.12 내부 또는 외부 링크의 표시 (상대적 중요도: 3, 증거의 강도: 2)
지침 : 사용자가 링크를 눌렀을 때 같은 사이트의 다른 장소로 이동하는지 아니면 다른 사이트의 새로운 페이지로 이동하는지에 대해 표시해주도록 하라.
주석 : 한 연구에 의하면 사용자는 링크를 눌렀을 때 같은 사이트 안에 있는 다른 페이지로 이동할 것이라고 믿는 경향이 있다고 한다. 이런 믿음에 반해 다른 사이트로 옮겨졌을때 사용자는 당황할 수 있다. 디자이너는 사용자에게 단순한 페이지 이동인지 아니면 사이트를 완전히 떠나는 것인지 알려주어야 한다. 역주 : 국내 현실에서는 공공기관들이 비교적 내부/외부 사이트 링크 구분을 잘 지키고 있는 실정이다. 마케팅적으로는 사용자가 중요 콘텐츠까지 경로 이동 과정에서 다른 사이트로 벗어나지 않도록 외부 링크를 처리하는 것이 중요하다. 외부 링크시는 링크옆이나 밑에 반드시 해당 URL을 명시하도록 한다.
|
| 10장 | | | 10:13 포인트-클릭의 사용 |
|
10:13 포인트-클릭의 사용 (상대적 중요도: 3, 증거의 강도: 3)
지침 : 계단식 메뉴 구조에서 메뉴를 선택할 때 마우스오버보다는 포인트-클릭을 사용하라.
주석 : 한 연구에 의하면 ''마우스오버(mousing-over)'' 방식과 비교했을 때 ''포인트-클릭(pointing-and-clicking)'' 방식이 18%의 시간이 절약되며 에러 발생율도 적고 사용자에 의해 선호되는 것으로 밝혀졌다. 역주 : 운영체제와 애플리케이션들의 계단식(cascading) 메뉴 구조에서 널리 쓰이는 마우스오버 방식은 웹사이트에서도 현재 광범위하게 도입되고 있다. 그러나 실험에 의하면 효율면이나 선호도 면에서 현저히 수행성이 떨어지는게 사실이다. 특히 웹사이트의 메뉴가 작을 경우에는 종종 마우스오버 과정에서 실수가 발생하게 된다.
|
| 10장 | | | 10:14 이미지의 클릭가능한 영역의 명료화 |
|
10:14 이미지의 클릭가능한 영역의 명료화 (상대적 중요도: 3, 증거의 강도: 3)
지침 : 이미지의 특정 부분이 클릭가능하게 만들었다면 전체 이미지가 클릭가능하게 하든지 클릭가능한 영역을 분명하게 만들도록 하라.
주석 : 사용자들이 이미지의 클릭가능한 부분을 발견하기 위해 마우스 포인터를 움직이게 해서는 안된다. 예를 들어 미국 지도에서 개별 주들이 클릭가능하다면 클릭가능한 주들을 표시하는 충분한 실마리를 제공하여야 한다. 역주 : 다음 사례는 주석에서 언급한 미국 지도이다. 현저한 색상 대비를 통해 클릭가능한 지역을 표시하고 있다.
 |