| 11장 | | | 11:1 무늬 없는 고대비의 배경 위에 검은 색 텍스트의 사용 | | 11:1 무늬 없는 고대비의 배경 위에 검은 색 텍스트의 사용 (상대적 중요도: 5, 증거의 강도: 5)
지침 : 사용자들이 산문(prose) 문장을 빠르게 읽고 이해하기를 바란다면 무늬 없고 고대비(high-contrast)이며 패턴을 사용안한 배경 위에 검은 색 텍스트를 사용하라.
주석 : 무늬 없는 배경위의 검은 색 텍스트는 medium-textured 배경위보다 확실히 읽는 속도가 빠르다는 것이 판명되었다. 어두운 배경위의 밝은 텍스트에 비교했을 때 휜색 배경위의 검은색 텍스트에서 사람들은 32%까지 빨리 읽는다. 일반적으로 텍스트와 배경의 대비가 크면 클수록 텍스트는 더 읽기 쉬워진다. 역주 : 국내 대형 웹 에이전시들이 만든 웹사이트들의 많은 수가 텍스트와 배경간의 고대비를 안지키고 있는 것은 주지의 사실이다. 배경보다는 주로 텍스트의 색상이 가독성이 떨어지는 것이 문제다. 편하게 읽지 못하는 텍스트는 짜증을 불러 일으킨다. 예컨데 www.rankey.com의 호텔 순위정보의 거의 ''모든'' 호텔 웹사이트들에서 이 문제가 나타나고 있다.
| | 11장 | | | 11:2 시각적 일관성의 확보 | | 11:2 시각적 일관성의 확보 (상대적 중요도: 5, 증거의 강도: 5)
지침 : 웹사이트 요소들이 웹페이지안과 웹페이지간에서 시각적 일관성을 확보하도록 하라.
주석 : 두 개의 연구에 의해 시각적으로 비일관적인 사이트에서 발견되는 오류의 수가 시각적으로 일관적인 사이트에서 발견되는 수보다 월등히 높다는 것이 발견되었다. 시각적 일관성에는 글자의 크기와 자간, 레이블들에 사용된 색상, 폰트와 배경, 레이블들의 위치, 텍스트와 그림들이 포함된다. 초기 연구들에 의하면 일관된 인터페이스상에서 수행된 작업들은 (1)작업 완료 시간의 감소, (2)오류의 감소, (3)사용자 만족도의 증가, (4)학습 시간의 감소를 가져옴이 밝혀졌다.
그러나 사용자들은 어떤 종류의 비일관성은 빠르게 극복하는 경향을 보인다. 예를 들어 한 연구에 의하면 서로 다른 사이즈의 위젯(widgets, 누르기 버튼이나 입력란, 리스트 박스등)은 사용자의 수행성이나 선호도에 부정적인 영향을 미치지는 않는 것으로 밝혀졌다. 역주 : 다음은 가이드에서 제시하고 있는 좋은 시각적 일관성의 사례이다. 그림의 위치와 사이즈, 타이틀 바, 폰트등이 모두 시각적 일관성을 유지시켜주고 있다.

| | 11장 | | | 11:3 일반적인 항목의 일관된 구성 | | 11:3 일반적인 항목의 일관된 구성 (상대적 중요도: 4, 증거의 강도: 2)
지침 : 일반적인 항목의 구성은 페이지마다 일관되게 하라.
주석 : 선택한 구성은 관례적으로 사용자에게 익숙한 것이어야 한다. 예를 들어 전화번호는 일관된 구두점 형식이어야 하고(800-555-1212) 시간 표시는 일관되게 콜론등으로 구두점 표시를 하여야 한다(HH:MM:SS). 역주 : 국내 전화번호나 시간 표시등도 표현 방법은 큰 차이는 없을 듯 하다. 그러나 예컨데 날짜 표시에서 ''년/월/일''의 순서를 안 지키고 서양식으로 ''월/일/년''으로 표시한다면 이는 기획자의 무식이나 프로그래머의 무능을 드러내는 것으로밖에는 보이지 않음을 주의하여야 한다. 특히 불필요한 영어의 사용(3월을 March등으로)은 오히려 사이트의 품위를 떨어뜨린다.
| | 11장 | | | 11:4 최소 12 포인트 폰트의 사용 | | 11:4 최소 12 포인트 폰트의 사용 (상대적 중요도: 4, 증거의 강도: 5)
지침 : 모든 웹페이지에 적어도 12 포인트 이상의 폰트(예컨데 서체, 영문 기준)를 사용하라.
주석 : 연구 결과에 의하면 12 포인트보다 작은 폰트는 사용자의 읽기 수행성을 느리게 만든다. 65세 이상의 사용자를 위해선 적어도 14 포인트 이상의 폰트를 사용하는 것이 낫다. 웹사이트에 6포인트보다 작은 폰트는 결코 사용해서는 안된다.
전통적인 종이 기반의 폰트 사이즈는 웹사이트 디자인에는 잘 적용되지 않는다. 예를 들어 동일한 폰트를 보여줄 때 윈도우 브라우저들은 맥킨토시보다 2에서 3포인트 크게 보인다. 사용자가 브라우저의 설정을 변경하여 디자이너가 정한 폰트 사이즈를 크게 하거나 작게 할 수 있다. 픽셀을 이용하여 텍스트 사이즈를 정하면 모니터 픽셀의 물리적인 크기와 해상도에 따라 서로 다른 문자 크기로 보여지며 큰 폰트 설정을 사용해야만 하는 사용자들에게 접근성 문제를 야기시키게 된다. 역주 : 기본 폰트 크기는 한글의 경우 10포인트 이상이어야 한다. 폰트 크기에 관해 현재 문제가 되는 중요한 문제는 사용자가 폰트 크기를 변경하더라도 레이아웃이 크게 깨지지 않고 볼 수 있도록 크기 가변성을 부여하는 것이다. 그러나 가장 많이 쓰이는 MS사의 인터넷 익스플로러의 경우(6.0기준), 넷스케이프등 강제로 폰트 사이즈를 변경해주는 기능을 가진 다른 브라우저에 비해 폰트 크기 변경 지원이 상당히 제한되어 있다. 따라서 포인트 단위로 폰트 크기를 지정하는 대다수의 사이트에서는 사용자가 인터넷 익스플로러를 사용하는 이상, 텍스트 크기 변경이 사실상 불가능한 실정이다. 이의 해결을 위해서는 포인트 대신에 퍼센트나 폰트 크기의 절대값(medium, small, large등)을 사용하여 폰트 크기를 정하여야 한다. 단 절대값 크기는 브라우저마다 다르게 보이는게 문제다. | | 11장 | | | 11:5 친숙한 폰트의 사용 | | 11:5 친숙한 폰트의 사용 (상대적 중요도: 3, 증거의 강도: 5)
지침 : 가능한 최고 읽기 속도를 달성하려면 친숙한 폰트를 사용하라.
주석 : 연구 결과에 따르면 12 포인트 Times New Roman이나 Georgia(serif fonts), Arial, Helvetica, Verdana(sans serif fonts)등 어느 것을 사용하더라도 읽기 속도에 있어 유의미한 차이는 발견되지 않는다. 역주 : 영어와 달리 현재 웹브라우저에서 쓸 수 있는 한글 기본 폰트는 상당히 제한되어 있다. 돋움,굴림, 바탕체가 친숙한 폰트이자 가장 많이 쓰이고 있으며 그외 궁서체등이 있으나 특별한 경우외에는 잘 쓰이지 않는다. 윈도우 기본 폰트는 어느 것을 써도 무방하나 사용자의 읽기 속도를 고려한다면 문서등에서 돋움이나 굴림등의 폰트가 제일 무난하다고 본다. 기본 폰트 이외의 것들은 사용자의 컴퓨터에 해당 서체가 없을 경우 문제가 발생하므로 쓰지 않는 것이 좋다. 이 문제를 극복하기 위해 웹폰트를 써서 서체를 표현할 수도 있으나 쓸만한 것들은 대부분 상용 제품이라는 것에 유의하여야 한다.
| | 11장 | | | 11:6 중요한 단어등의 강조 | | 11:6 중요한 단어등의 강조 (상대적 중요도: 3, 증거의 강도: 5)
지침 : 단어나 짧은 문구의 중요성을 강조하기 위해서는 폰트 특성을 변화시켜라.
주석 : 텍스트 안의 단어에 대해, 둘러싸고 있는 텍스트들과 다른 폰트 특성을 쓸 경우 돋보이게 된다. 중요한 폰트 특성은 강조(bolding), 이태리체(italics), 폰트 스타일(serif, sans serif), 폰트 크기(클수록 주의집중 효과가 있다), 대/소문자가 있다. 잘만 쓰면 폰트 스타일을 이용해 중요 단어에 주의를 집중시킬 수 있다.
색다른 폰트 특성을 사용하게 되면 부정적인 결과도 같이 가져오는데 읽기 속도가 거의 20%까지 느려질 수 있으며 따라서 산문으로 된 큰 문단에서는 사용을 자제해야 한다. 강조를 위해 색다른 폰트 특성을 쓸 경우 한 두 단어나 짧은 문구에서만 써야 한다. 강조를 위해 밑줄을 긋는 것은 피해야 하는데 왜냐하면 밑줄 친 단어는 웹에서 일반적으로 링크로 간주되기 때문이다. 역주 : 다음은 가이드에서 제시하는 제한된 강조(bolding)를 사용한 효과적인 사례이다.

| | 11장 | | | 11:7 적절하게 주의를 끄는 특색의 사용 | | 11:7 적절하게 주의를 끄는 특색의 사용 (상대적 중요도: 2, 증거의 강도: 5)
지침 : 적절하게(그러나 남용하지 말고) 웹의 특색을 사용하여 웹페이지의 특정 부분에 대해 주의를 집중시켜라. 이러한 특색에는 움직이는(moving or animating) 오브젝트, 항목간 서로 다른 크기, 이미지, 밝은 색의 항목, 다양한 폰트 특색들이 있다.
주석 : 주의를 끄는 특색들은 조심해서 그리고 매우 적절하다고 생각하는 경우에만 사용하여야 한다. 웹사이트의 모든 특색들이 사용자의 주의를 동일하게 끄는 것은 아니다. 다음 특색들은 사용자에게 미치는 영향의 강도순으로 제시된 것이다.
* 움직임(예컨데 애니메이션이나 ''숨겼다가 보여주기'')은 가장 효율적으로 주의를 끄는 아이템이다. 연구조사에 의하면 사용자들은 페이지에서 움직이는 아이템에 제일 먼저 주목하게 된다고 한다. 그러나 움직임이 적절하거나 유용한 경우가 아니면 사용자에게 짜증을 유발시킬수 있다. 움직임이 일단 주의를 끈 다음에도 계속되면 웹사이트의 정보로부터 오히려 주의를 분산시키게 된다. * 큰 오브젝트, 특히 이미지들은 작은 것들보다 우선적으로 사용자의 주의를 끈다. 사용자들은 우선 큰 아이템들을 오랫동안 응시하게 된다. 그러나 어떤 종류의 이미지들에 대해선 광고나 장식물로 알고 건너뛰는 경향이 있다. * 사용자들은 이미지들을 1,2초 바라본다음 연결되어 있는 캡션을 읽게 된다. 많은 경우에 이미지의 의미를 이해하기 위해 텍스트 캡션을 읽는 것은 마지막 순서이다. 더 밝은 색상을 가진 이미지의 부분이나 텍스트가 먼저 주의를 끄는듯 하다.
특정 텍스트와 그래픽 아이템을 더 밝은 색상으로 표시하고 다른 것들은 어두운 색으로 표시하면 사용자들이 요소들의 상대적 중요도를 판단하는데 도움을 준다. 주의를 끄는 폰트의 특색은 모두 대문자로 쓰는 것, 강조(bolding), 이탤리체(italics), 밑줄, 폰트 사이즈의 증가등이다. 역주 : 다음은 가이드에서 제시하는 주의를 끄는 특색들을 사용한 사례이다.
 |
|