| 13장 | | | 13:17 커서를 첫번째 데이터 입력란에 놓기 |
|
13:17 커서를 첫번째 데이터 입력란에 놓기
(상대적 중요도: 3, 증거의 강도: 2)
지침 : 데이터 입력 폼이 페이지위에 표시될 때, (자동으로) 깜박이는 커서를 첫번째 데이터 입력란의 시작부에 놓도록 하라.
주석 : 사용자로 하여금 마우스 포인터를 첫번째 데이터 입력란으로 옮기고 그 입력란을 활성화시키기 위해 마우스 클릭을 하게 만들어서는 안된다. 그러나 디자이너는 이 자동 커서 이동 프로그래밍이 스크린 리더 소프트웨어의 수행성에 부정적인 영향을 미칠수 있음을 염두에 두어야 한다.
역주 : 동 지침은 지침 13:14와도 관련된다. 즉 사용자가 입력방식을 마우스에서 키보드로 또는 키보드에서 마우스로 이리 저리 옮기게 하는 것을 피하도록 하라는 것이다. 이는 매우 번거로울 뿐더러 입력 속도를 느리게 만든다. 사용성 증진은 어찌 보면 이런 섬세한 부분에 대한 배려가 누적되어 이루어지는 것이다. 다음은 가이드에서 제시하는 사례들로 둘 다 커서를 첫번째 데이터 입력란에 자동으로 위치시켜 놓고 있다.
|
| 13장 | | | 13:18 자동 탭 이동 기능의 제공 |
|
13:18 자동 탭 이동 기능의 제공
(상대적 중요도: 3, 증거의 강도: 3)
지침 : 숙련된 웹 상호작용 경험을 가진 자주 사용하는 사용자들을 위해 자동 탭 이동 기능을 제공하라.
주석 : 자동 탭 이동 기능은 자주 사용하는 사용자들에게 입력란에서 다음 입력란으로 이동시 일일이 탭을 쓰지 않아도 되게 하기 때문에 데이터 입력 시간을 상당히 줄여줄 수 있다. 역주 : 입력란을 다 채웠을 때 자동으로 다음 입력란으로 커서를 옮겨주는 자동 탭 이동 기능은 입력속도를 매우 빠르게 해 줄 수 있다. 예컨데 온라인 증권 거래 사이트 이용시 이 기능은 매우 유용하게 사용될 수 있다. 또한 자동 탭 이동은 입력란 뿐만 아니라 버튼으로 이동시에도 응용할 수 있다. 예컨데 로그인할 때 아이디 비밀 번호 입력 후, 확인을 위해 엔터키만 치면 되는 것과 확인 버튼을 마우스로 눌러야 하는 경우를 비교해보면 어느 것이 편리한지 바로 알 수 있다.
|
| 13장 | | | 13:19 측정 단위에 레이블 붙이기 |
|
13:19 측정 단위에 레이블 붙이기
(상대적 중요도: 3, 증거의 강도: 3)
지침 : 데이터 입력 폼을 사용할 때 사용자에게 측정 단위를 입력하게 할 것이 아니라 레이블을 붙이도록 하라.
주석 : 디자이너는 데이터 입력란의 레이블의 일부분으로 분(minutes), 온스(ounces), 센티미터(centimeters)등의 단위를 포함시켜야 한다. 이는 사용자의 키보드 입력 횟수(입력과정의 속도)를 줄여줄 뿐 만 아니라 오류 발생을 줄여준다. 역주 : 다음은 가이드에서 제시하는 사례이다. 파운드와 피트, 인치까지 단위를 붙여주고 있다.
|
| 13장 | | | 13:20 더블 클릭이 문제를 일으키지 않게 하기 |
|
13:20 더블 클릭이 문제를 일으키지 않게 하기
(상대적 중요도: 3, 증거의 강도: 2)
지침 : 링크를 더블 클릭하더라도 바람직하지 않거나 난처한 결과를 일으키게 하지 말라.
주석 : 많은 사용자들이 한 번 클릭만 필요한 링크에 더블 클릭을 하고 있다. 개발자가 사용자의 더블 클릭을 막을 수는 없으나 이런 행위로 인해 부정적인 결과가 초래되는 것은 줄일 수 있다. 사용성 테스트에 의하면 사용자가 빠른 더블 클릭으로 테스트를 시작하면 테스트의 대부분 동안 이를 계속 행하는 경향이 있음이 밝혀졌다. 가끔, 컴퓨터가 이 두개의 클릭을 인식했을 때 첫번째 클릭은 해당 링크를 클릭한 것으로 보고 두번째 클릭은 두번째 링크를 선택한 것으로 간주하여 예상치 못한 결과를 야기한다. 역주 : 예컨데 앵커 태그(<a>)를 사용할때, onClick 이벤트를 써서 결과값을 리턴해주는 경우 더블 클릭을 하면 두번 이벤트가 실행될 수 있어 예기치 못한 결과가 발생할 수 있다.
|
| 13장 | | | 13:21 리스트 박스 옵션들의 보기 제한 피하기 |
|
13:21 리스트 박스 옵션들의 보기 제한 피하기
(상대적 중요도: 2, 증거의 강도: 3)
지침 : 오픈 리스트를 쓸 경우 최대한 많은 옵션들을 표시하라.
주석 : 리스트 박스안에서 항목을 찾기 위해 스크롤 할려면 시간이 낭비된다. 한 연구에서 5개의 옵션중 3개만 보이게 해서 안보이는 두개를 찾으려면 사용자가 스크롤을 하도록 했다. 그러자 리스트 박스에 익숙하지 않은 사용자는 스크롤을 해야 하는지 망설였고 리스트 박스에 익숙한 사용자는 속도가 느려지는 것이 발견됐다. 역주 : 다음은 가이드에서 제시하고 있는 사례들이다. 뒤의 큰 리스트 박스는 주어진 화면 크기에서 최대한 많은 옵션들을 보여주고 있으나 앞의 작은 리스트 박스는 화면 크기가 큰데도 불구하고 6개 항목중 단지 4개만 보이고 나머지는 스크롤을 해야 볼 수 있게 만들었다.
|
| 13장 | | | 13:22 많은 선택중 하나를 고를 때 오픈 리스트의 사용 |
|
13:22 많은 선택중 하나를 고를 때 오픈 리스트의 사용
(상대적 중요도: 2, 증거의 강도: 2)
지침 : 많은 선택 사항들중에 하나를 고르는 때에는 드롭 다운(풀 다운) 리스트보다는 오픈 리스트를 사용하라.
주석 : 일반적으로 사용자가 리스트에서 (스크롤 없이)더 많은 항목을 볼 수 있을수록 선택을 빨리 할 수 있으며 빼먹는 오류를 범하지 않게 된다. 이상적으로는 사용자가 스크롤 없이 모든 항목을 볼 수 있어야 한다.
드롭 다운 리스트와 비교해 볼 때 오픈 리스트가 빠른 수행성을 이끌어내는데 왜냐 하면 드롭 다운 리스트는 열기 위해 한 번 더 클릭을 해야 하기 때문이다. 그러나 목록(list)이 극단적으로 긴 경우에는 드롭 다운 리스트가 나을 수 있다. 현재까지의 연구 결과로는 목록에서 표시되어야 하는 최대 항목수가 얼마인지는 안 밝혀졌다. 역주 : 다음은 가이드에서 제시하는 사례이다. 이 사례에서 디자이너는 화면 크기에 맞추기 위해 드롭 다운 리스트를 사용했는데 사용성과는 상충관계(trade-off)를 이룬다.
|
| 13장 | | | 13:23 누르기 버튼의 순위 |
|
13:23 누르기 버튼의 순위
(상대적 중요도: 2, 증거의 강도: 2)
지침 : 누르기 버튼의 우선 순위를 정하기 위해 위치와 강조를 활용하라.
주석 : 여러개의 누르기 버튼 그룹중에 한 버튼이 다른 것들보다 더 자주 사용되면 그 버튼을 첫번째 위치에 놓아야 한다. 또한 가장 많이 쓰이는 버튼에 기본 액션을 적용해야 한다. 즉 사용자가 엔터키를 눌렀을 때 그 버튼이 반응해야 한다. 역주 : 다음은 가이드에서 제시하는 사례이다. "검색(Search)" 버튼이 첫번째 위치에 놓여 있다.
|
| 13장 | | | 13:24 쉬프트 키 사용의 최소화 |
|
13:24 쉬프트 키 사용의 최소화
(상대적 중요도: 1, 증거의 강도: 4)
지침 : 쉬프트 키의 사용을 최소화하도록 데이터 입력 처리를 디자인하라.
주석 : 가능하다면 디자이너는 사용자에게 쉬프트(Shift) 키를 필요로 하는 글자를 입력할 것을 요구해서는 안된다. 쉬프트 키의 사용은 사용자에게 별도의 주의와 집중을 부과한다. 예를 들어 디자이너는 $나 % 부호를 데이터 입력란 옆에 레이블로 씀으로써 이런 기호를 사용자가 입력하지 않게 할 수 있다. 또한 디자이너는 사용자가 입력한 대/소 문자를 동등하게 처리해주어 편의를 도모할 수 있다. 역주 : 키보드 두번째 줄의 쉬프트를 같이 눌러 입력하는 특수 문자 입력키들은 프로그래머등이 아닌 이상 일반 사용자들이 자주 사용하지 않는 것들이다. 앞의 지침들과 결합해서 사용성 증진을 도모할 수 있다.
|
| 13장 | | | 13:25 수행 속도를 높이기 위한 데이터 입력란의 사용 |
|
13:25 수행 속도를 높이기 위한 데이터 입력란의 사용
(상대적 중요도: 1, 증거의 강도: 5)
지침 : 사용자의 수행 속도를 높이기 위해 디자인한다면 (리스트 박스에서 고르는 것 대신에) 데이터 입력란을 이용하여 사용자가 정보를 입력하도록 하라.
주석 : 날짜 입력과 비행기 예약에서, 텍스트 입력과 리스트 박스에서의 선택중 어느 것이 효율적인가를 알기 위해 적어도 두 개의 연구가 이루어졌다. 두 연구 모두에서 텍스트 입력이 다른 모든 방법보다 빠르고 선호된다는 것이 밝혀졌다. 그렇지만 텍스트 입력 방식은 더 많은 오류를 발생시키는 경향이 있다. 역주 : 다음은 가이드에서 제시하는 사례이다. 예컨데 거리 주소(street adress)나 특정 검색어와 같이 사용자가 입력할 것이 쉽게 정의될 수 없거나 제약되어 있으면 텍스트 입력 방식을 사용한다. 그러나 주(State)나 국가(Country)처럼 입력 사항이 쉽게 정의되거나 에러를 줄일 수 있으면 리스트 박스를 사용하는 것이 좋다. 양자를 혼용할 경우 마우스와 키보드를 번갈아 사용해야 하기 때문에 입력 속도가 느려질 수 있다는 것을 유의해야 한다.
 |
| 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를 기재 안할 경우 리사이징 과정에서 웹페이지의 모양이 일시적으로 변하는 부작용이 있으므로 반드시 기재하도록 한다.
|
