Upload
greg-shin
View
1.484
Download
7
Embed Size (px)
Citation preview
원칙 원칙 3. 3. 이해의 용 이해의 용이성이성
201 1201 1 년 년 55 월 월 22 일일신승식신승식 , LG, LG 전자전자
2
이해의 용이성이란 이해의 용이성이란
Perc eption C ognitionUnders tanding
3
44 개의 지침 개의 지침
3. 1 가독성 3. 2 예측 가능성
3. 3 콘텐츠의 논리성 3. 4 입력 도움
4
66 개의 검사 항목 개의 검사 항목
3. 4. 2( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 .
3. 4. 1( 레이블 제공 ) 입력 서식에는 대응하는 레이블을 제공해야 한다 . 3. 4( 입력 도움 ) 입력 오
류를 방지하거나 정정할 수 있어야 한다 .
3. 3. 2( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 .
3. 3. 1( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서로 제공해야 한다 . 3. 3( 콘텐츠의 논리성 )
콘텐츠는 논리적으로 구성해야 한다 .
3. 2. 1( 사용자 요구에 따른 실행 ) 사용자가 의도하지 않은 기능 ( 새 창 , 초점 변화 등 )은 실행되지 않아야 한다 .
3. 2( 예측 가능성 ) 콘텐츠의 기능과 실행결과는 예측 가능해야 한다 .
3. 1. 1( 기본 언어 표시 ) 주로 사용하는 언어를 명시해야 한다 .
3. 1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 .
검사항목 ( 6 개 ) 지침 ( 4 개 )
5
3. 1. 1 3. 1. 1 기본 언어 표시 기본 언어 표시 주 사용 언어를 지정한다 주 사용 언어를 지정한다 ..
주로 사용되는 언어가 영어일 때 주로 사용되는 언어가 영어일 때<html lang="en"><html lang="en">
주로 사용되는 언어가 한국어일 때 주로 사용되는 언어가 한국어일 때<html lang="<html lang="koko">">
주로 사용되는 언어가 일본어일 때 주로 사용되는 언어가 일본어일 때<html lang="ja"><html lang="ja">
주로 사용되는 언어가 스페인어일 때 주로 사용되는 언어가 스페인어일 때<html lang="es"><html lang="es">
참고참고 : :
h ttp ://e n .wikip e d ia.o rg/wiki/Lis t_o f_IS O _639- 1 _c o d e shttp ://e n .wikip e d ia.o rg/wiki/Lis t_o f_IS O _639- 1 _c o d e s
3. 1 가독성
6
인코딩 방식 지정 인코딩 방식 지정<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd"> <head> <head> <meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; content="text/html; charset=UTF-8charset=UTF-8"> ">
<title><title> 페이지의 제목 페이지의 제목 </title></title>
<!doctype html><!doctype html><head> <head> <meta <meta charset="UTF-8">charset="UTF-8">
<title><title> 페이지의 제목 페이지의 제목 </title></title>
3. 1 가독성
7
언어 변환 언어 변환<p><p> 중국어로는 중국어로는 "" ” 안녕하세요 라고 인사할 때에” 안녕하세요 라고 인사할 때에 <span <span lang="zh">lang="zh"> 你好你好 </span></span> 라고 말합니다 라고 말합니다 . </p> . </p>
<p> 그는 한국어로 <q lang="ko"> 웹은 보편적으로 접근 가능한것입니다 .</q> 라고 말하였다 .</p> <p> 그는 프랑스어로 <q lang="fr">Web est accessible à tous</q> 이라고 말하였다 .</p>
그는 한국어로 “ 웹은 보편적으로 접근 가능한 것입니다 .” 라고 말하였다 .
그는 프랑스어로 « We b e s t ac c e s s ib le to u s à » 이라고 말하였다 .
중국어로는 " ” 안녕하세요 라고 인사할 때에 니하오 라고 말합니다 .
3. 1 가독성
8
3. 2. 1 3. 2. 1 사용자 요구에 따른 사용자 요구에 따른실행실행
3. 2 예측 가능성
마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례
초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .
9
서식 제출 서식 제출 ( s ubmit) ( s ubmit) 버튼 제 버튼 제공공
<form method="get" id="form1"> <form method="get" id="form1"> <input type="text" name="text1" size="3" <input type="text" name="text1" size="3"
maxlength="3"> - maxlength="3"> - <input type="text" name="text2" size="3" <input type="text" name="text2" size="3"
maxlength="3"> - maxlength="3"> - <input type="text" name="text3" size="4" <input type="text" name="text3" size="4"
maxlength="4" onchange="form1.submit();"> maxlength="4" onchange="form1.submit();"> </form> </form>
3. 2 예측 가능성
값을 입력하자마자 서식이 제출되는 잘못된 사례
그림 1). 전화 번호 입력 필드 예
10
제출제출 (( 이동이동 ) ) 버튼은 어디로 버튼은 어디로 ??
목록 선택 후 확인 목록 선택 후 확인 // 제출제출 // 이동 버튼이 없는 잘못된 이동 버튼이 없는 잘못된사례사례
3. 2 예측 가능성
??
11
자동으로 열리는 팝업 창 자동으로 열리는 팝업 창
페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘 페이지를 열자마자 자동으로 열리는 팝업 창이 있는 잘 못된 사례 못된 사례
3. 2 예측 가능성
12
제출 버튼이 없는 체크 상자 제출 버튼이 없는 체크 상자3. 2 예측 가능성
그림 4). 체크 상자를 선택하는 것만으로 페이지의 내용이 바뀌는 경우
잘못된 사례 잘못된 사례 : : 체크 상자를 선택하자마자 바로 상품 목 체크 상자를 선택하자마자 바로 상품 목 록이 바뀌는 쇼핑몰 록이 바뀌는 쇼핑몰
13
초점 위치를 알 수 있게 초점 위치를 알 수 있게 !!
초점을 일부러 감춘 잘못된 사례 초점을 일부러 감춘 잘못된 사례
3. 2 예측 가능성
<input type="submit" onFocus="this.blur();">
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif">
</a>
14
초점의 시각적 표현 초점의 시각적 표현3. 2 예측 가능성
초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저 초점을 받은 곳을 강조해 보여주는 윈도우즈용 브라우저 들 들 (( 왼쪽부터 오페라 왼쪽부터 오페라 , , 크롬크롬 , , 사파리사파리 ))
초점이 잘 안 보이는 브라우저들( 왼쪽부터 인터넷 익스플로러 , 파이어폭스 )
15
약시자를 위한 선명한 초점 약시자를 위한 선명한 초점
:focus {outline-width: 2px !important;outline-style: solid !important;-moz-outline-radius: 4px;
}
3. 2 예측 가능성
인터넷 익스플로러와 파이어폭스에 사용자 정의 스타 인터넷 익스플로러와 파이어폭스에 사용자 정의 스타 일을 넣어준다 일을 넣어준다 ..
참고 : http : //g regs hin. pe . kr/b log/arc hives /296
16
내용을 자동으로 업데이트 내용을 자동으로 업데이트 ??
잘못된 사례 잘못된 사례 : : 내용이 자동으로 바뀌고 내용이 자동으로 바뀌고 , , 중단할 수도 중단할 수도없다없다 ..
3. 2 예측 가능성
17
잠시 후 자동으로 페이지 이 잠시 후 자동으로 페이지 이동동 ??
잘못된 사례 잘못된 사례 : : 메타 리프레시로 시간 제한을 두고 페 메타 리프레시로 시간 제한을 두고 페 이지를 이동시키면 안 된다 이지를 이동시키면 안 된다 ..
<title> 유효하지 않은 페이지 </title> <meta http-equiv="refresh" content="10;URL='http://target-page.com/'" />
대신 서버측 리디렉션 기술을 이용한다 .http: //gregs hin. pe . kr/xe/? mid=board&c ategory=259&page=2&doc ument_s rl=505 참고
3. 2 예측 가능성
18
마크업 순서도 논리적으로 마크업 순서도 논리적으로 잘못된 사례 잘못된 사례 : : 시각적으로만 논리적이나 선형화하면 시각적으로만 논리적이나 선형화하면 순서가 어긋난다 순서가 어긋난다 ..
3. 3 콘텐츠의 논리성
겉보기
선형화해보면
19
레이블 붙이기 레이블 붙이기 : : 라디오 버튼 라디오 버튼3. 4 입력 도움
<input type="radio" name="show" value="0" id="show0" checked="checked“ /> <label for="show0">Threads</label> <input type="radio" name="show" value="1" id="show1" /> <label for="show1">Posts</label>
< input name=“ ” >< input name=“ ” > 은 버튼 공통으로 부여하고 각 버 은 버튼 공통으로 부여하고 각 버 튼 고유의 튼 고유의 < input id=“ ” >< input id=“ ” > 와 와 < label for=“ ” >< label for=“ ” > 를 넣 를 넣
어야 함에 주의한다 어야 함에 주의한다 ..
20
서식을 표 안에서 쓸 때 서식을 표 안에서 쓸 때3. 4 입력 도움
<td><input type="radio" name="no2" id="no2-2" value="2" title="2. 강사 실력 - 중립 "></td>
부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서 부득이하게 표 안에서 서식을 쓸 때에는 반드시 각 서 식 컨트롤마다 식 컨트롤마다 titletitle 을 넣어준다 을 넣어준다 ..
21
실시간 오류 검사 실시간 오류 검사 자바스크립트를 이용한 실시간 오류 검사 자바스크립트를 이용한 실시간 오류 검사
3. 4 입력 도움
실시간으로 호스트명이 적합한지 검사하는 예제
22
오류 메시지는 서식보다 위에 오류 메시지는 서식보다 위에3. 4 입력 도움
오류로 바로 가는 링크와 함께 !
23
1) 1) 경고창으로 오류 확인 경고창으로 오류 확인3. 4 입력 도움
24
2) 2) 오류간 난 곳으로 초점 이 오류간 난 곳으로 초점 이동동
3. 4 입력 도움
25
반드시 서버측 오류 검사를 병행 반드시 서버측 오류 검사를 병행!!
3. 4 입력 도움
<form action="javascript:validateform()">
<form action="#" onsubmit="validateform()">
<form action="submit.php" onsubmit="return validateform()">
잘못된 사례
바른 사례
26
지나친 친절은 독이 된다 지나친 친절은 독이 된다 !!3. 4 입력 도움
잘못된 사례 잘못된 사례 :: 주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로 주민등록번호 입력 앞자리 입력 후 자동으로 뒷자리로
이동하므로 이동하므로 (( 키보드로는키보드로는 ) ) 다시 앞자리로 돌아올 수 다시 앞자리로 돌아올 수없다없다 ..
27
처음부터 다시 하라고 처음부터 다시 하라고 ??3. 4 입력 도움
잘못된 사례 잘못된 사례 :: 서식 제출 후에 오류가 발생하면 아예 초기 화면으로 서식 제출 후에 오류가 발생하면 아예 초기 화면으로
가고가고 , , 서식은 처음부터 다시 입력해야 하는 경우 서식은 처음부터 다시 입력해야 하는 경우
28
최종 제출 전에 확인 최종 제출 전에 확인 !!3. 4 입력 도움
좋은 사례 좋은 사례 ::
중요한 서식을 제출하기 전에 다시 돌아가거나 중요한 서식을 제출하기 전에 다시 돌아가거나 , , 요약요약 된 결과를 확인할 수 있는 기회를 줘야 한다 된 결과를 확인할 수 있는 기회를 줘야 한다 ..