| 7장 | | | 7:9 네비게이션 전용 페이지는 짧게 유지하기 |
|
7:9 네비게이션 전용 페이지는 짧게 유지하기
(상대적 중요도: 2, 증거의 강도: 4)
지침 : 사용자에게 네비게이션 전용 페이지를 스크롤하게 하지 말라.
주석 : 이상적으로는, 네비게이션 전용 페이지는 한 화면 이상의 정보를 담아서는 안된다. 아무리 작은 거리라도 사용자가 페이지를 스크롤하게 해서는 안된다. 한 연구에 의하면 사용자들은 네비게이션 전용 페이지 한 화면의 밑부분을 페이지의 마지막으로 간주하고 있으며 더 이상의 네비게이션 옵션을 찾아서 스크롤 하지 않는 것으로 밝혀졌다. 역주 : 네비게이션 전용 페이지라는게 따로 있는 것은 아니며 콘텐츠를 포함하지 않으면서 콘텐츠로 가는 링크들을 모아 놓은 페이지를 의미한다. 규모가 왠만큼 큰 웹사이트들의 홈페이지(메인페이지)나 서브 메인들이 그러하다. 지침에서 ''이상적으로는''이란 단서가 붙었기는 하나 연구 결과에 유의할 필요가 있다.
|
| 7장 | | | 7:10 네비게이션을 돕기 위한 풍선도움말의 사용 |
|
7:10 네비게이션을 돕기 위한 풍선도움말의 사용
(상대적 중요도: 1, 증거의 강도: 2)
지침 : 사용자가 올바른 링크를 선택하는 것을 돕기 위해 ''풍선 도움말(glosses)''을 제공하라.
주석 : 풍선도움말은 사용자가 마우스 포인터를 링크 가까이 갖다대면 튀어나오는 짧막한 문구로 된 정보이다. 이것은 링크 안에 있는 정보를 미리 볼 수 있게 해준다. 사용자는 링크 가까이에 이 사전 정보가 있는것을 선호한다. 위치를 잘못 정하면 기본 텍스트 읽는 것을 방해할 수도 있다. 단 디자이너는 애초에 잘못 이름 붙인 링크를 풍선도움말로 보완하려고 해서는 안된다. 역주 : 풍선도움말 또는 툴팁(tooltip)을 링크에서 제공하는 한 가지 사례는 www.coolcheck.co.kr의 진단보고서이다. 보고서가 난잡해지지 않고 마우스를 갖다 대면 필요한 정보를 간략하게 제공할 수 있다.
 |
| 8장 | | | 8:1 가로 스크롤의 제거 |
|
8:1 가로 스크롤의 제거
(상대적 중요도: 5, 증거의 강도: 4)
지침 : 사용자들이 가로로 스크롤 할 필요가 없도록 적절하게 페이지 레이아웃을 하라.
주석 : 가로 스크롤은 전체 화면을 보기 위한 느리고 지루한 방법이다. 가변폭(fluid)과 고정폭 중 좌측 정렬(left-justified)을 포함한 일반적인 페이지 레이아웃은 사용자의 모니터 해상도나 크기가 디자이너에 의해 사용된 것보다 작을 경우 가로 스크롤이 생기게 된다. 역주 : 가로 스크롤을 예상하고 디자인을 하는 경우는 특수한 경우를 제외하고는 거의 없을 것이다. 그럼에도 불구하고 이 지침이 중요한 이유는 주로 해상도 문제와 관련이 있다. 이미 지적했지만 이 문제는 실제 사용자의 행태 통계(특히 800*600 해상도 사용자)를 기반으로 논의되어야 할 문제이다. 가로 스크롤 문제는 ''활동 기억(working memory)''과도 관련이 있으므로 절대 피해야 한다.
|
| 8장 | | | 8:2 읽을 때 이해가 필요한 페이지는 길게 만들기 |
|
8:2 읽을 때 이해가 필요한 페이지는 길게 만들기
(상대적 중요도: 3, 증거의 강도: 4)
지침 : 사용자들이 읽을 때 이해가 필요한 페이지는 더 길게 하고 스크롤할 수 있게 하라.
주석 : 짧게 만든 페이지에 새로 페이지들를 링크시키면 사용자의 사고 과정을 방해하는 지연을 가져올 수 있다는 것을 고려하여 긴페이지와 짧은 페이지간의 상충관계(trade-off)를 결정하여야 한다. 긴 페이지는 읽는 사람이 링크들을 따라가다가 맥락을 잃어버리는 일이 없이 글을 읽어나갈수 있게 해준다.
그렇지만 페이지 로딩 타임이 빠르기만 하다면 사용자가 글을 읽고 이해하는데 긴 페이지나 짧은 페이지간에 뚜렷한 차이는 없다. 예컨데 한 연구에 의하면 짧은 페이지에서 전반적으로 텍스트의 심성 표상(mental representation)을 더 잘 형성하였고, 주요 아이디어를 기억해서 나중에 페이지 안에서 관련된 정보를 찾는데도 더 나았다. 다른 연구에 의하면 짧은 페이지는 숙련되지 않은 사용자들이 선호하는 것으로 밝혀졌다. 역주 : 긴 페이지와 짧은 페이지간의 상충 관계는 결국 경험적인 것이므로 기획자의 판단이 중요하다.
|
| 8장 | | | 8:3 긴 페이지보다는 짧은 페이지로 |
|
8:3 긴 페이지보다는 짧은 페이지로
(상대적 중요도: 2, 증거의 강도: 4)
지침 : 사용자 시스템의 응답 시간이 어느 정도 빠른 경우 긴 페이지보다는 짧은 페이지를 사용하라.
주석 :사용자는 중요한 정보를 찾기 위해 스크롤 할 필요 없이, 링크를 선택하면서 페이지에서 페이지로 옮겨다닐수 있어야 한다. 역주 : 웹사이트의 콘텐츠가 어떤 종류이냐에 따라 빠른 응답시간을 위한 시스템 요구사향은 다르다. 멀티미디어류를 많이 쓴다면 당연히 시스템 요구 사양이 높겠지만 텍스트 위주라면 그 반대이다. 사용자 시스템 사양에 대해서는 예컨데 로그 분석을 통하여 대부분의 사용자의 운영체제(OS)가 어떠한가를 통해 간접적으로 파악할 수도 있을 것이다. 가장 바람직한 것은 네이버나 다음같이 표준 샘플링이 가능한 대형 포털에서 구글의 ''차이트가이스트(www.google.com/press/zeitgeist.html)''와 같은 통계를 발표하는 것이다.
|
| 8장 | | | 8:4 스크롤은 짧게 |
|
8:4 스크롤은 짧게
(상대적 중요도: 2, 증거의 강도: 2)
지침 : 사용자들이 특정 정보를 찾는다면 정보를 여러 부분(짧은 페이지)으로 나눠라.
주석 : 많은 웹사이트의 경우 사용자들은 긴 페이지보다는 짧고 정보가 잘 조직된 페이지를 잘 다룬다. 왜냐하면 스크롤은 시간을 많이 잡아 먹을수 있기 때문이다. 나이든 사용자들은 젊은 사용자들보다 스크롤을 훨씬 느리게 하는 경향이 있다. 한 연구에 의하면 인터넷 사용자들은 페이지내에서 스크롤하는데 약 13%의 시간을 소모하는 것으로 알려졌다. 각 페이지의 스크롤 시간은 아주 짧지만 이것이 축적되면 유의미한 시간이 되는 것이다.
역주 : 웹사이트를 단지 젊고 인터넷에 익숙한 매니아들만 사용하던 시대는 이미 지난지 한참되었다. 2003년 말 현재 40대 인구의 51.6%가 인터넷을 사용하고 있다(http://isis.nic.or.kr 통계). 즉 중노년층과 이른바 넷맹 세대에 대한 고려 없이 사이트를 구축하던 시기는 지난 것이다. 동 지침 그리고 가이드 전체의 가장 큰 의미는 여기에 있다. |
| 8장 | | | 8:5 빠르게 스크롤 할 수 있게 만들기 |
|
8:5 빠르게 스크롤 할 수 있게 만들기
(상대적 중요도: 1, 증거의 강도: 3)
지침 : 주요 항목들을 강조하여 스크롤을 빠르게 할 수 있게 하라.
주석 : 웹페이지는 사용자들이 스크롤하는 것에 따라 빠르게 혹은 느리게 움직인다. 어떤 사용자들은 오른쪽 스크롤바의 끝에 있는 검은 삼각형을 눌러 스크롤하는데 이 방법은 느리지만 스크롤하는 동안에 대부분의 정보를 읽을수 있다. 다른 사용자들은 스크롤 박스를 끌면서 하는데 훨씬 빠르게 스크롤 하게 된다. 스크롤 박스를 끌면 사용자들이 산문(prose text)을 읽기에는 화면에서 정보가 너무 빨리 지나가게 된다. 그러나 디자인이 잘 되고 자리를 잘 잡은 주요 헤딩(headings)들은 읽을 수 있다. 역주 : 예컨데 강조체이면서 크기가 크고 그래픽이 받쳐주는 헤딩들은 스크롤을 좀 빠르게 하더라도 사용자들이 읽을 수 있다.
|
| 9장 | | | 9:1 명확한 카테고리 레이블의 사용 |
|
9:1 명확한 카테고리 레이블의 사용
(상대적 중요도: 5, 증거의 강도: 4)
지침 : 링크를 포함하여 카테고리 레이블은 그 카테고리안에 있는 정보와 항목을 명확하게 반영하도록 하라.
주석 : 카테고리 제목은 전형적인 사용자층이 이해할 수 있어야 한다. 모호하고 일반적인 링크 레이블을 쓰면 이해하기 힘들다. 그러므로 이해하기 쉽게 특정되고 구체적인 링크와 식별어(descriptors)를 써야 한다. 역주 : 레이블링(labeling)은 사실상 정보 설계에 있어 휴리스틱한 부분이므로 설계자의 능력에 전적으로 의존한다고 보아야 한다. 개념 설명에 대해서는 번역서가 나와 있는 ''웹사이트 구축을 위한 인포메이션 아키텍쳐''(한빛미디어) 5장 "레이블링 시스템"을 참조하기 바란다. |
| 9장 | | | 9:2 구별되고 설명력 있는 헤딩의 사용 |
|
9:2 구별되고 설명력 있는 헤딩의 사용
(상대적 중요도: 5, 증거의 강도: 3)
지침 : 서로 잘 구별되고 표현하고자 하는 콘텐츠에 개념적으로 연관이 있는 헤딩(headings)을 사용하라.
주석 : 잘못된 헤딩(사용자가 예상했던 것과 찾아낸 것이 불일치)의 사용은 웹사이트에서 흔한 문제이다. 헤딩은 설명력이 있으며 소개하고자 하는 콘텐츠와 연관이 있어야 한다. 헤딩이 서로 너무 비슷하면 사용자는 망설이다가 차이점을 확인하기 위해 다시 읽어야 할 수도 있다. 제일 좋은 헤딩을 확인하려면 광범위한 사용성 테스트와 다른 방법들이 필요할 수도 있다. 역주 : 다음은 네이버의 디렉토리 서비스이다. 구별되고 설명력 있는 헤딩의 사용례이다.
 |
| 9장 | | | 9:3 설명력 있는 열과 행 헤딩들의 사용 |
|
9:3 설명력 있는 열과 행 헤딩들의 사용
(상대적 중요도: 3, 증거의 강도: 3)
지침 : 데이터 테이블은 명확하고 간결하며 정확한 열과 행(row and column) 헤딩을 갖고 있어야 한다.
주석 : 유니크한 셀(cell) 콘텐츠를 알려주는 열과 행 헤딩을 사용하여야 한다. 사용자는 효율적이고 효과적으로 테이블 정보를 사용하기 위해 명확하고 간결한 헤딩을 요구한다. 열과 행의 헤딩들은 데이터들이 어떻게 이름붙여졌거나 구별되는지를 스크린 리더에게 알려주며 따라서 이를 이용하는 장애인등의 사용자들은 테이블의 전반적인 구조속에서 셀이 지니는 의미를 이해할 수 있게 된다. 역주 : 설명력 있는 데이터 테이블 헤딩은 장애인 뿐만 아니라 비장애인에게도 테이블의 이해를 도와준다. 공간 부족으로 인해 테이블 헤딩에 약어를 쓰는 경우가 종종 있는데 다른 사람이 못 알아보는 약어를 쓰는 것은 곤란하다. 동 블로그 웹사이트의 접근성 메뉴의 ''접근성 문제의 이해(14)''를 참조바란다.
|
| 9장 | | | 9:4 설명력 있는 헤딩의 충분한 사용 |
|
9:4 설명력 있는 헤딩의 충분한 사용
(상대적 중요도: 3, 증거의 강도: 5)
지침 : 웹사이트 전반에 걸쳐 설명력 있는 헤딩을 충분히 사용하라.
주석 : 잘 쓰여진 헤딩(headings)은 사용자가 빠르게 훑어볼 수 있게 도와주는 중요한 수단이다. 헤딩은 따라 나오는 정보나 기능에 개념적으로 연관이 있어야 한다.
헤딩은 페이지의 구성이나 구조에 관해 정보를 전해주며 사용자를 이끄는 중요한 실마리를 제공한다. 헤딩은 페이지상의 정보를 분류하는 데도 도움을 준다. 각각의 헤딩은 원하는 목적물을 찾는데 유용해야 한다.
빠르게 훑어보는 능력은 나이든 성인에게 특히 중요한데 왜냐하면 이들은 젊은 사람보다 자주 훑어보는 것을 멈추고 읽기 시작하기 때문이다. 헤딩이 설명력이 없거나 많지 않으면 사용자는 찾고자 하는 정보가 없는 곳에서 읽기를 시작하게 만들어 불필요하게 느려지게 만들수 있다. 역주 : 제목이나 중간 제목등으로 쓰이는 헤딩은 포함하고 있는 콘텐츠에 대해 설명력이 있어야 할 뿐만 아니라 풍부하게 사용하는게 유익할 수 있다는 근거를 제시하고 있다.
|
| 9장 | | | 9:5 설명력 있는 페이지 타이틀의 제공 |
|
9:5 설명력 있는 페이지 타이틀의 제공
(상대적 중요도: 3, 증거의 강도: 2)
지침 : 각 웹 페이지에 대해 설명력 있고 유니크하며 간결하고 유의미하게 차별화된 타이틀을 써라.
주석 : 타이틀(title)은 브라우저의 타이틀 바(브라우저 제일 꼭대기에 있는 바)에 있는 텍스트를 지칭한다. 타이틀은 검색 엔진에 의해 페이지를 확인하는데 쓰인다. 둘이나 그 이상의 페이지가 동일할 경우 사용자가 구별할 수 없거나 브라우저의 즐겨찾기 기능을 활용할 수 없다. 사용자가 페이지를 북마크할 때 타이틀을 편집하지 않으면 안되는 상황이 되고 만다.
어떤 검색 엔진들은 검색 결과 페이지에 페이지 타이틀만 나열한다는 것을 명심하라. 모든 페이지에 간결하고 유의미한 페이지 타이틀이 사용되면 사용자들이 페이지를 찾아보거나 특정 URL에 관한 핫 리스트나 히스토리 리스트(둘 다 브라우저의 기능)을 훑어볼 때 유용하다. 또한 다른 사람들이 페이지에 링크를 걸 때도 유용하다.
사용자를 혼란시키지 않기 위해선 타이틀 바의 타이틀과 페이지의 콘텐츠의 타이틀을 일치시키도록 하여야 한다. 역주 : 페이지 타이틀에 관한 지침이다. 국내 웹사이트의 타이틀 관리 실태는 한마디로 엉망이다(www.coolcheck.co.kr의 사이트 진단 통계를 따른 것임). 중복 타이틀은 말할것도 없거니와 아예 타이틀을 안 적는 경우가 부지기수이다. 웹이 정보 공유나 마케팅, 홍보를 위한 가장 중요한 매체라고 한다면 검색 엔진에서 해당 정보를 찾기 위한 결정적인 기초 자료가 페이지 타이틀임에도 불구하고 전혀 관리가 안 되고 있다. 특히 중복 타이틀의 경우 대부분의 검색엔진 알고리즘에서 노출 중요도에 있어 낮은 가중치를 부여받게 된다. 시급한 인식 전환이 요구된다.
|
| 9장 | | | 9:6 중요 데이터의 부각 |
|
9:6 중요 데이터의 부각
(상대적 중요도: 3, 증거의 강도: 3)
지침 : 사용자의 주의를 끌어야 할 그리고 자주 표시되지 않는 중요한 항목들에 대해서는 시각적으로 차별화(부각)시켜야 한다.
주석 : (데이터 테이블에서) 부각시켜야 할 항목들은 최근에 변경된 데이터거나 한계치를 초과한 데이터거나 그 밖에 정해진 기준을 만족시키지 못하는 데이터를 포함할 수 있다. 여기서 사용된 부각(highlight)이란 말은 말 그대로 강조의 의미이다. 부각은 드물게 쓰일 때 가장 효과적이다. 즉 페이지상에서 다른 것들은 상대적으로 보이는 모습이 동일하면서 몇 개의 항목들만 눈에 띌 때 효과적이다. 역주 : 다음 그림은 동 가이드에서 제시된 부각(highlight)의 사례이다. 오른쪽 위의 빨간색으로 표시한 데이터가 부각된 것을 확인할 수 있다.
 |
| 9장 | | | 9:7 선택을 줄일수 있는 좋은 방법의 제공 |
|
9:7 선택을 줄일수 있는 좋은 방법의 제공
(상대적 중요도: 2, 증거의 강도: 2)
지침 : 사용자에게 최대한 효율적으로 여러 선택사항들을 줄일 수 있는 좋은 방법을 제공하라.
주석 : 사용자들은 선택할 것을 줄이기를 원하는 것으로 보인다. 모든 선택사항들을 명확하게 제공하여 사용자들이 가장 중요한 선택사항으로 여기는 것에 우선 집중할 수 있도록 해야 한다. 역주 : 다음은 동 가이드에서 제공하는 사례이다. 암 정보를 찾는데 있어 암 종류를 모두 보여주면서도 흔한 암(Common Cancers), 아동/소아암(Childhood/Pediatric Cancers), 신체위치/조직(Cancers by Body Location/System)에 따른 암의 3가지 대분류를 제공하여 효율적으로 선택을 줄이면서 접근할 수 있게 해주고 있다.
|
| 9장 | | | 9:8 적절한 HTML 순서에 따른 헤딩의 사용 |
|
9:8 적절한 HTML 순서에 따른 헤딩의 사용
(상대적 중요도: 1, 증거의 강도: 2)
지침 : 헤딩은 적절한 HTML 순서에 따라서 사용하라.
주석 : 적절한 HTML 순서에 따른 헤딩(heading)을 사용하는 것은 사용자가 페이지상의 정보의 위계구조를 이해하는데 도움을 준다. 또한 H1-H3 헤딩 태그의 적절한 사용은 보조 장치를 사용하는 장애인들이 정보의 위계구조를 이해할 수 있도록 해준다. 역주 : 다음 역시 동 가이드에서 보여주는 사례이다. 헤딩 H1과 H2가 정보의 위계에 따라 적절히 사용되고 있는 웹페이지와 그 소스 코드이다.
 |
