| 14장 | | | 14:1 비디오, 애니메이션, 오디오의 유의미한 사용 |
|
14:1 비디오, 애니메이션, 오디오의 유의미한 사용
(상대적 중요도: 4, 증거의 강도: 5)
지침 : 비디오, 애니메이션, 오디오는 웹사이트의 메시지나 다른 콘텐츠를 전달하거나 도움이 될 때에만 사용하라.
주석 : 멀티미디어 요소(비디오, 애니메이션, 오디오등)는 사용자의 주의를 쉽게 끌 수 있다. 그러므로 불필요하게 사용자의 주의를 분산시키지 않기 위해 멀티미디어 사용에는 분명하고 유용한 이유가 있어야 한다. 어떤 멀티미디어 요소는 다운로드에 시간이 많이 걸릴 수 있으며 따라서 기다릴만한 가치가 있는 것이 중요하다.
생산적으로 사용된다면 멀티미디어는 사이트의 콘텐츠에 커다란 가치를 더해줄 수 있으며 사용자의 주의를 가장 중요한 정보 및 유용한 순서로 이끌 수 있다. 역주 : 국내 웹사이트에서 가장 많이 쓰이는 멀티미디어 요소는 플래시(flash) 애니메이션인바 비용/편익 분석상 손익을 감안하여 채택 여부를 결정하여야 할 것이다.
|
| 14장 | | | 14:2 로고의 포함 |
|
14:2 로고의 포함
(상대적 중요도: 4, 증거의 강도: 4)
지침 : 조직의 로고를 모든 페이지의 일관된 장소에 위치시켜라.
주석 : 사용자들은 종종 클릭을 통해 다른 사이트로 빠져나가더라도 이를 의식하지 못한다. 각 페이지에 로고가 있으면 웹사이트 전체에 걸쳐 참조가 가능하므로 사용자가 해당 사이트를 벗어나지 않았다는 것을 쉽게 확인할 수 있다. 이상적으로는 로고는 각 페이지의 동일한 위치에 존재해야 한다. 많은 디자이너들이 왼쪽 상단 구석에 로고를 놓고 있다. 역주 : 레이아웃의 일관성중 가장 근본이 되는 요소가 웹사이트의 로고이다. 다음은 가이드에서 제시하는 사례이다. 원 부분이 로고로서 매 페이지의 왼 쪽 상단에 일관되게 위치하고 있다.
|
| 14장 | | | 14:3 웹페이지의 최상단(Above the Fold)에서의 큰 이미지의 제한 |
|
14:3 웹페이지의 최상단(Above the Fold)에서의 큰 이미지의 제한
(상대적 중요도: 4, 증거의 강도: 3)
지침 : 웹페이지를 스크롤 했을 때 아래쪽에 텍스트 정보가 있을 경우, 웹페이지의 최상단 첫 화면을 한 개의 이미지로 채우지 말라.
주석 : 페이지 최상단의 첫 화면의 대부분을 큰 그래픽이 차지하고 있을 경우 사용자들은 그 그래픽 아래에 더 이상 정보가 없을 것이라고 생각하게 된다. 한 연구에 의하면 한 개의 그래픽이 화면을 채우는 바람에 어떤 사용자들은 콘텐츠를 더 찾아보기 위해 스크롤하는 것을 하지 않았다고 한다. 실상은 어떤 사용자들은 더 많은 정보가 화면 아래에 있을 것이라는 생각조차 하지 못했다는 것이다. 역주 : 가이드에서 제시하는 사례를 보면 지침이 바로 이해될 것이다. 이 사례의 경우 사용자들이 스크롤 바를 안 보고 페이지를 다 보았다고 착각할 가능성이 농후하다.
|
| 14장 | | | 14:4 이미지 사용의 제한 |
|
14:4 이미지 사용의 제한
(상대적 중요도: 3, 증거의 강도: 3)
지침 : 웹사이트의 성공을 위해서 이미지의 사용이 중요할 때만 이미지를 사용하라.
주석 : 웹사이트의 그래픽은 사이트의 가치를 높이고 사이트상의 정보의 명료성을 증가시킬수 있도록 해야 한다. 특정 그래픽은 사용자에게 어떤 웹사이트를 훨씬 더 흥미롭게 만들 수 있고 사용자 역시 그래픽이 로드되는 동안 기꺼이 몇 초 더 기다려 줄 수 있다. 사용자들은 한참동안 기다려서 다운로드 받은 이미지가 쓸데없는 것임을 발견할 때 가장 실망하게 된다. 일부 장식적인 그래픽은 사용자의 주의를 분산시키지만 않으면 수용가능하다. 역주 : 그래픽의 남발은 사용자의 주의를 분산시킨다는 점에서 시각적 공해일 뿐만 아니라 사이트를 저급하게 만드는 주요한 요소이다. 국내 현실에서 더 문제가 되는 것은 남의 그래픽을 함부로 도용하여 발생하는 저작권 문제이다. 대부분의 그래픽은 엄연히 저작권이 있으며 당연히 소송 및 손해배상의 대상이 된다.
|
| 14장 | | | 14:5 클릭가능한 이미지에 레이블 붙이기 |
|
14:5 클릭가능한 이미지에 레이블 붙이기
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 모든 클릭가능한 이미지들은 레이블을 붙이거나 일반 사용자들이 쉽게 이해할 수 있도록 하라.
주석 : 어쩌다 혹은 가끔 방문하는 사용자들은 이미지를 충분히 이해하지 못하거나 그 의미를 기억하지 못할 수 있다. 이미지들과 관련 텍스트들은 가까이 붙여 써서 사용자들이 효과적으로 사용할 수 있게 해야 한다. 덧붙여 모든 클릭가능한 이미지들은 대체 텍스트(alt text)를 기재하여야 한다. 역주 : 가이드에서 제시하는 다음 사례처럼 이미지에 설명이 붙어 있을 때와 없을 때 이해의 차이는 크다. 또한 접근성 보장을 위해 대체 텍스트를 써야 함은 물론이다. 추측컨데 웹페이지에서 쓰이는 클릭가능한 이미지(특히 메뉴)에 설명을 빼 먹는 것은 일반 애플리케이션에서 공간 절약을 위해 설명을 생략하는 것을 흉내내는 것으로 보인다. 애플리케이션과 웹페이지는 전혀 다른 것일 뿐더러 웹페이지에 설명을 적을 공간이 없다는 것은 있을 수 없는 일이다.
|
| 14장 | | | 14:6 다운로드가 느린 이미지의 사용 금지 |
|
14:6 다운로드가 느린 이미지의 사용 금지
(상대적 중요도: 3, 증거의 강도: 5)
지침 : 웹사이트의 이미지가 다운로드 시간을 불필요하게 느리게 하지 않도록 조치를 취하라.
주석 : 시스템과 웹사이트의 상호작용 시간이 증가할수록 사용자의 불만도 커지게 된다. 사용자는 진행되는 작업이 클라이언트 컴퓨터가 수행하기 쉬운 작업이라고 믿을수록 시간 지체에 대해 참지 못한다. 한 연구에 의하면 사용자들은 5초까지의 시간 지연은 "긍정적"라고 평가했으나 10초가 넘어가게 되면 "부정적"으로 평가하였다. 사용자들은 시간 지체가 긴 페이지들이 관심을 덜 끌며 훑어보기도 더 어렵다고 평가하였다.
다운로드 시간을 빠르게 하기 위해서는 페이지상에 단일의 큰 이미지보다는 여러개의 작은 이미지들을 사용하며, 인터레이싱 또는 프로그레시브(interlacing or progressive) 이미지를 사용하고, 동일 이미지를 여러번 사용한다. 디자이너는 또한 이미지안의 색상수를 최대한 줄여야 하며 이미지 태그 내에 HEIGHT와 WIDTH 속성을 써야 한다. 전화 모뎀을 이용하는 사용자들을 위해서는 페이지 사이즈는 30kb보다 작아야 한다. 역주 : 이미지의 다운로드 시간을 줄이기 위한 각종 방법을 제시한 지침이다. 이 방법들은 서버측의 데이터 분할 전송이나 브라우저에서의 디스플레이 방식, 캐쉬, 리사이징 연산 감소등을 이용한 것이다. 그 밖에 운영체제에 따라 height/width를 기재 안할 경우 리사이징 과정에서 웹페이지의 모양이 일시적으로 변하는 부작용이 있으므로 반드시 기재하도록 한다.
|
| 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 플레이어 버튼처럼 보이는 이미지] 
[현금지급기 버튼처럼 보이는 이미지들]   |
