| 14장 | | | 14:7 큰 이미지를 미리 보기 위한 작은 이미지(thumbnail)의 사용 |
|
14:7 큰 이미지를 미리 보기 위한 작은 이미지(thumbnail)의 사용
(상대적 중요도: 3, 증거의 강도: 2)
지침 : 전체 크기의 이미지를 보는 것이 중요한 문제가 아니면 썸네일를 제공하라.
주석 : 큰 이미지의 썸네일을 제공함으로써 사용자는 큰 이미지가 로드되게 할 것인지 아닌지를 정할 수 있다. 썸네일을 제공하면 큰 이미지가 불필요하거나 보고 싶지 않은 사용자들이 이미지 다운로드때문에 느려지는 것을 피할 수 있다. 썸네일 이미지는 전체 크기의 복사본에 링크한다. 역주 : 썸네일의 사용이 유용함에도 불구하고 만들기 귀찮다는 이유로 사용하지 않는다면 이는 전적으로 웹사이트 개발자의 책임이다. 이미 여러번 지적한 것처럼 사용자들의 "고속선" 환경이 만병통치약이 아니므로 더 이상 이를 핑계로 삼는 일은 없어야겠다. 썸네일은 단순히 다운로드 시간을 줄여줄 뿐만 아니라 페이지 공간 활용에도 큰 도움이 된다. 다음은 가이드에서 제시하는 썸네일 사례이다.
|
| 14장 | | | 14:8 배너 광고처럼 보이지 말아야 할 그래픽 |
|
14:8 배너 광고처럼 보이지 말아야 할 그래픽
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 중요한 이미지를 배너 광고나 불필요한 장식물처럼 보이게 하지 말라.
주석 : 최근 한 연구에 의하면 실시간 고객 지원에 관한 정보를 주기 위해 개발된 어떤 그래픽을 많은 사람들이 광고로 생각하여 클릭하지 않았다고 한다. 그 그래픽이 페이지상의 대부분의 다른 그래픽보다 컸지만 어떤 사용자들은 아예 쳐다보지도 않았는데 왜냐하면 너무 장식적으로 즉 배너 광고처럼 보였기 때문이었다. 역주 : 다음은 가이드에서 제시하는 배너 광고처럼 보이는 그래픽의 사례이다. 이 그래픽 안에는 화살표가 가리키는 것처럼 세개의 주요한 헤더(headers)가 있는데 결과적으로 사용자들이 간과하고 지나가게 된다.
|
| 14장 | | | 14:9 단순한 배경 이미지의 사용 |
|
14:9 단순한 배경 이미지의 사용
(상대적 중요도: 3, 증거의 강도: 5)
지침 : 배경 이미지는 가급적 사용을 자제하고 특히 텍스트 밑에 쓰일 때는 단순한 것을 사용하도록 하라.
주석 : 배경 이미지는 사용자가 전면의 텍스트를 읽는 것을 어렵게 만들 수 있다. 한 개의 크고 복잡한 배경 이미지(그림을 포함)는 페이지 다운로드 시간을 매우 느리게 만들 수 있다. 배경 이미지를 반드시 써야 할 경우에는 "타일형(tiling)"의 작고 단순한 이미지를 사용하고 이미지 해상도를 최대한 낮추도록 한다. 역주 : 다음은 가이드에서 제시하는 사례이다. 복잡한 그래픽은 텍스트를 불분명하게 만들 수 있으며 사용자가 사이트의 콘텐츠를 읽는 것을 어렵게 한다.
|
| 14장 | | | 14:10 데이터 그래픽에 실제 데이터 포함하기 |
|
14:10 데이터 그래픽에 실제 데이터 포함하기
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 데이터의 정확한 수치가 필요한 경우에는 데이터의 그래픽 표시에 실제 데이터 값을 포함시켜라.
주석 : 그래픽 옆에 다는 수치 주석은 바(bar) 그래프의 경우 바의 끝에 달거나 점을 이은 곡선의 경우 점에 표시할 수 있다. 어떤 그래픽은 데이터의 완전한 수치 주석이 필요할 수 있는 반면에 다른 것들은 선택된 데이터 요소에만 수치 주석이 필요할 수 있다. 역주 : 다음은 가이드에서 제시하는 사례이다. 왼쪽 아래 그래프의 경우 마우스 포인터를 점에 갖다 대면 상세한 정보가 담긴 박스(풍선 도움말)가 나타난다.
|
| 14장 | | | 14:11 모니터링 정보의 그래픽 표현 |
|
14:11 모니터링 정보의 그래픽 표현
(상대적 중요도: 2, 증거의 강도: 4)
지침 : 사용자들이 데이터 변화를 모니터해야 할 경우 데이터 표시를 위해 그래픽 형태를 사용하라.
주석 : 가능하다면 언제나 컴퓨터가 데이터 감시(monitoring)를 해야 하며 비정상적인 데이터는 사용자의 주의를 환기시켜 주어야 한다. 이것이 가능하지 않으나 사용자가 데이터 변화를 감시해야 하는 경우에는 그래픽 표현이 사용자가 중요한 변화나 정규 범위를 벗어나는 값을 발견하는데 도움을 준다. 역주 : 다음은 가이드에서 제시하는 사례들이다. 그래픽적으로 모니터링 정보를 표시하고 있다.
 |
| 14장 | | | 14:12 애니메이션 사용시 소개글 |
|
14:12 애니메이션 사용시 소개글
(상대적 중요도: 2, 증거의 강도: 3)
지침 : 애니메이션을 시작하기에 앞서 소개글을 제공하라.
주석 : 애니메이션을 시작하기에 앞서 이를 설명하는 글을 제공하면 사용자들이 애니메이션과 이에 관련된 콘텐츠를 더 잘 이해하는데 도움이 된다. 즉 사용자들이 애니메이션을 보기에 앞서 짧게 이를 설명해야 한다. 또한 애니메이션을 사용자가 조정하게 해야 한다. 사용자들은 잠시 멈춤(pause), 정지(stop), 다시 보기(replay), 또는 애니메이션이나 다른 멀티미디어 요소를 무시할 수 있어야 한다.
국내 개인 웹사이트나 블로그에서 볼 수 있는 ''무작정 음악, 동영상 틀기''는 최근 많이 자제하고 있는 추세다. 그러나 메인페이지에 들어서자 마자 뜨는, 주로 멀티미디어 요소 사용을 위한 액티브 엑스 콘트롤의 설치 "강요"는 여전히 안고쳐지고 있다. 이는 개인 뿐만 아니라 모든 종류의 웹사이트에서 겪는 매우 불쾌한 경험이다. 설치가 필수적이라면 왜 필수적인지 설명한 다음, 웹페이지에서 사용자가 설치여부를 선택할 수 있게 해야 함이 당연함에도 불구하고 거의 대부분의 사이트들이 이를 안지키고 있다. 이는 액티브 액스 콘트롤 뿐만 아니라 애플리케이션의 설치에도 해당된다. 역주 : 다음은 가이드에서 제시하고 있는 사례와 우리나라 전자정부 메인페이지의 인증서 설치 팝업창이다.특히 "전자정부(www.egov.go.kr)" 사이트의 경우 방문하자마자 메인 페이지 로딩 이전에 느닷없이 나타나는 인증서 설치 강요 화면은 설치 프로그램의 기본적인 설정조차 제대로 하지 못해 도대체 설치해도 되는 것인지 불안감조차 느끼게 만든다.
[아래 각각의 비디오 클립은 사용자가 무엇을 보게 될 것이지 설명하는 텍스트가 왼쪽에 있다. 또한 이 웹사이트는 비디오 클립 시작 시점을 사용자가 정하게 하고 있다] 
[아래는 전자정부 사이트를 방문하자마자 뜨는 인증서 설치 팝업창이다. "사이트 보안 인증서에 문제가 있다", "신뢰 여부를 결정한 적이 없는 회사"등의 경고 표시가 대한민국 전자 정부 사이트에서 나타난다는 것 자체가 수치다]  |
| 14장 | | | 14:13 웹사이트 이미지의 의도한 메시지 전달 |
|
14:13 웹사이트 이미지의 의도한 메시지 전달
(상대적 중요도: 2, 증거의 강도: 3)
지침 : 웹사이트의 이미지는 의도한 메시지를, 디자이너만이 아닌 사용자들에게 전달하도록 하라.
주석 : 사용자들과 디자이너는 메시지 전달을 위해 무엇이 적절한가에 대해 생각이 다르게 마련이다. 그래픽 묶음중 제일 좋은 그래픽을 선택하려 할 때, 사용자는 다른 사용자들이 선택하려고 할 것(즉 보기에 친숙한 것)을 선택하기 마련인 반면에 대부분의 개발자들은 더 예술적으로 보이는 것을 선호한다. 역주 : 다음은 가이드에서 제시하는 사례이다. 한 연구에 의하면 75%의 사용자가 위쪽의 "가벼운" 사이트에서 정보를 찾을 수 있었던 반면에 단지 17%의 사용자만이 동일한 정보를 아래쪽에 있는 그래픽 위주의 사이트에서 찾을 수 있었다.
|
| 14장 | | | 14:14 학습을 쉽게 하기 위한 이미지의 사용 |
|
14:14 학습을 쉽게 하기 위한 이미지의 사용
(상대적 중요도: 1, 증거의 강도: 5)
지침 : 학습을 쉽게 하기 위해 가능하다면 언제나 텍스트보다는 이미지를 사용하라.
주석 : 학습 상황에서 그림의 텍스트에 대한 우월성은 명백한 것으로 보인다. 예를 들어 동일한 대상에 대해 텍스트 이름보다는 그림이 인식이나 기억에 있어 보다 낫다. 단 예외적으로 아이템들이 개념적으로 매우 비슷할 때나(예컨데 모든 동물이나 도구들), 아이템들이 매우 빨리 제시되어 배우는 사람이 말로 레이블을 만들수 없을 때에는 그렇지 않은 것으로 보인다. 역주 : 다음은 가이드에서 제시하는 사례들로 이 그림과 삽화들은 핵심 개념의 학습을 더 빠르게 해준다.
 |
| 14장 | | | 14:15 실제 세계의 사물의 모방 |
|
14:15 실제 세계의 사물의 모방
(상대적 중요도: 1, 증거의 강도: 4)
지침 : 적절한 경우에 이미지는 실제 세계의 사물처럼 보이게 하라.
주석 : 이미지(예컨데 누르기 버튼이나 네비게이션 탭)는 실제 세계의 유사물을 모방해서 디자인되었다면 링크로 간주되기 마련이다. 만일 디자이너가 이미지를 실제 세계의 사물처럼 모방하지 못하면 그 이미지는 적어도 하나 이상의 클릭가능성에 대한 실마리("홈"이나 "다음"과 같은 설명하는 레이블이나 페이지상에 놓이는 위치)를 제공하여야 할 수도 있다. 텍스트 레이블은 사용자에게 링크의 목적지에 대해 알려주는데 도움을 줄 수 있다. 그러나 한 연구에 의하면 어떤 사용자들은 단어들이 들어 있는 이런 종류의 이미지 링크를 간과했는데 이유는 그 단어들이 밑줄이 안 그어져 있기 때문이었다. 역주 : 다음은 가이드에서 제시하는 사례들이다. 위쪽의 이미지는 웹사이트의 비디오 콘트롤 이미지이다. 이것은 실제 VCR이나 DVD 플레이어의 콘트롤처럼 만들어졌다. 아래쪽의 버튼은 예를 들자면 현금지급기의 버튼처럼 만들어졌다.
[VCR 플레이어 버튼처럼 보이는 이미지] 
[현금지급기 버튼처럼 보이는 이미지들]   |
| 15장 | | | 15:1 두문자어(Acronyms)와 축약어(Abbreviations) 정의의 명확화 |
|
15:1 두문자어(Acronyms)와 축약어(Abbreviations) 정의의 명확화
(상대적 중요도: 4, 증거의 강도: 2)
지침 : 웹사이트에서 낯설거나 정의되지 않은 두문자어 또는 축약어는 사용하지 말라.
주석 : 두문자어나 축약어는 가급적 사용하지 않아야 하며, 사용할 경우 모든 사용자들이 이해할 수 있도록 정의하여야 한다. 어떤 주제(topic)를 새로 접하는 사용자들은 그 주제에 관련된 두문자어와 축약어에도 친숙하지 않을 수 있다는 것을 명심하여야 한다. 두문자어나 축약어를 정의할 때는 다음 형태를 사용한다. 예: Physician Data Query(PDQ). 두문자어와 축약어는 일반적으로 첫번째 언급에서 정의된다. 그러나 명심할 것은 사용자들이 스크롤을 빨리 하거나 두문자어나 축약어가 정의된 곳 이전에 다른 페이지로 갈 경우 그 정의를 놓치기 쉽다는 사실이다. 역주 : 두문자어는 한글에서는 활용을 거의 안하며 축약어는 영어보다 상대적으로 적게 쓰는 편이다. 그러나 일단 사용시에는 위의 지침은 유효하게 활용될 수 있다. 다음은 가이드에서 제시하는 사례들이다.
[아래 사례처럼 홈페이지(메인 페이지)에서 정의되지 않은 두문자어를 사용하면 사용자가 사이트의 콘텐츠나 목적에 대해 혼동을 일으킬 수 있다] 
[아래 사례처럼 상세하고 고도로 기술적인 콘텐츠 페이지는 초보자가 아닌 전문가들을 대상으로 디자인된 것이다. 그럼에도 디자이너는 여전히 페이지에 있는 각 두문자어와 축약어를 정의해 주고 있다]  |
| 15장 | | | 15:2 축약어의 사용 자제 |
|
15:2 축약어의 사용 자제
(상대적 중요도: 4, 증거의 강도: 2)
지침 : 가능하다면 언제나 축약어보다는 용어를 완전히 풀어 써라.
주석 : 축약어를 사용하는 유일한 경우는 축약어가 매우 짧고, 필요한 공간을 절약해 주며, 일반 사용자들이 쉽게 이해가 가능할 때이다. 사용자들이 축약어를 읽어야 한다면 일반적으로 쓰이는 축약어만 선택하도록 한다. 역주 : 다음은 가이드에서 제시하는 미국의 사례이다. 축약어가 흔히 사용되는 경우라면(FBI, DEA) 이를 사용하는 것은 수용가능하다. 그러나 흔히 사용되지 않는 경우라면(USPIS, USPP) 완전히 풀어 쓴 용어를 사용해야 한다.
|
| 15장 | | | 15:3 친숙한 단어의 사용 |
|
15:3 친숙한 단어의 사용
(상대적 중요도: 4, 증거의 강도: 3)
지침 : 일상적으로 볼 수 있고 들을 수 있는 단어들을 사용하라.
주석 : 일반 사용자들에게 친숙하고 자주 사용되는 단어들을 사용해야 한다. 더 자주 볼 수 있고 들을 수 있는 단어들이 더 빨리 인식된다. 흔히 사용되는 단어들에 대한 여러가지 소스들이 있다(참조 문헌 생략).
친숙한 단어들은 사용자가 해당 사이트나 관계된 사이트에 입력한 검색어를 보거나 다른 형태의 시장 조사등을 이용한 개방형 조사(open-ended surveys)를 이용하여 수집할 수 있다. 역주 : 별다른 수정 없이 국내 웹사이트에 적용 가능한 지침이다.
|
| 15장 | | | 15:4 산문 사용시 대소문자의 혼용 |
|
15:4 산문 사용시 대소문자의 혼용
(상대적 중요도:4, 증거의 강도: 5)
지침 : 연속되는 산문(prose) 텍스트는 대소문자를 혼용하여 써라.
주석 : (영어) 텍스트는 관례적으로 문장을 시작할 때와 적당한 명사, 두문자어에서 대문자를 사용하면 읽기가 쉬워진다. 항목이 사용자의 주의를 끌어야 할 때는 그 항목을 모두 대문자로 쓰거나 강조체(bold), 이탤릭체(italics)로 표현하면 된다. 강조를 표시하기 위한 이런 방법들은 두 단어나 짧은 문구 이상은 안되는데 긴 산문 문장을 읽을 때 읽는 속도를 느리게 만들기 때문이다. 역주 : 영문 홈페이지를 위한 콘텐츠 작성 지침이다.
|
| 15장 | | | 15:5 전문 용어(jargon)의 자제 |
|
15:5 전문 용어(jargon)의 자제
(상대적 중요도: 4, 증거의 강도: 4)
지침 : 일반 사용자들이 알아듣지 못할 수 있는 단어들은 사용하지 말라.
주석 : 용어(terminology)는 사용자의 정보 발견과 이해 능력에서 결정적인 역할을 한다. 많은 용어들이 디자이너와 콘텐츠 작성자에게는 친숙하나 사용자들에게는 친숙하지 못하다. 한 연구에 의하면 일부 사용자들은 "cancer screening"이라는 용어를 이해하지 못했다. 그러나 이 용어를 "testing for cancer"라고 바꾸자 사용자의 이해를 매우 크게 개선시켰다.
전문 용어를 사용하는데 익숙한 사용자들의 이해를 돕기 위해 그 용어를 괄호로 처리하는 것도 유용하다. 해당 주제에 초보자인 사용자를 위해 사전이나 용어집을 제공하는 것도 유용하지만 이것이 일반 사용자들이 이해하지 못하는 용어를 자주 사용해도 좋다는 의미로 간주되어서는 안된다. 역주 : 전문 용어의 남발과 사용성과는 항상 상충관계(trade-off)에 있다는 것을 콘텐츠 작성자는 명심하여야 한다. 국내 현실에서는 국적 불명의 영어 사용이 오히려 더 문제되는듯 싶다. |
| 15장 | | | 15:6 첫 문장을 설명력 있게 작성하기 |
|
15:6 첫 문장을 설명력 있게 작성하기
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 각 문단의 첫번째 문장은 그 문단의 기본 주제와 문단이 포괄하고 있는 범위를 포함시키도록 하라.
주석 : 사용자들은 텍스트를 훑어 볼 때 각 문단의 첫번째 한 개 내지 두 개의 문장들만 훑어보는 경향이 있다. 역주 : 웹페이지의 콘텐츠는 일반적으로 훑어보는 경향이 있다. 이는 아직까지 종이 문서보다도 모니터 화면이 더 보기 불편하기 때문이다. 따라서 문단 작성시 미괄식 표현보다는 두괄식 표현이 사용자를 배려하는 것이다.
|
