Tuesday, January 23, 2007

하나. Jakob Nielsen의 웹 usability - 디자인 정보 구조

하나. Jakob Nielsen의 웹 usability - 디자인 정보 구조

via~ 야곱 닐슨: http://www.useit.com/

디자인 레이아웃
1. 웹 디자인을 광고처럼 해선 안된다. 
2. 디자인의 일반 관습을 지킨다.
3. 프레임은 가능한 사용하지 않는다. 
4. 사이트명과 로고는 모든 페이지에 배치하고 TOP 페이지로 링크를 한다. 
5. 가능한 페이지 가로는 고정시키지 않는다. 
6. 사이트 전체 디자인의 일관성을 갖는다. 
7. 비슷한 정보는 한 덩어리로 하고 공백을 충분히 준다. (기업 정보 등은 하나의 영역으로 정리한다.)
8. 의미가 있는 그래픽이나 사진을 이용한다. (사이트내 컨텐츠와 관계있는 것을 사용한다.)

화면의 세로(스크롤 관련)
1. 사용자는 사이트 정보를 보려고 일부러 스크롤하지 않는다.
(사이트 로고는 화면 좌측 상단에 있지만 그 위치에 없다고 해도 일부러 화면을 스크롤해 찾지 않는다.)
2. 브라우저가 보여주는 공간 중 아래에 여백이 있으면 페이지의 마지막으로 인식해 버린다.
(처음 로딩된 브라우저가 표시하는 하단 바로 위에 타이틀이나 컨텐츠를 두면 페이지의 다음이 있다고 생각 할 수 있다.)
3. 브라우저가 표시하는 공간 주변에 광고가 있으면 사용자는 페이지의 마지막으로 인식한다.
(광고는 통상적으로 페이지의 주변에 위치한다.)


네비게이션
1. 모든 페이지에 통일성이 있어야 한다. 
2. 이동이나 글을 읽을때 시간이 오래 걸려서는 안된다. 
3. 은폐 네비게이션을 사용하지 않는다.
(마우스에 네비게이션을 주거나 네비게이션이 슬라이드로 메뉴가 표시되는 등)
4. 하나의 페이지에서 동일한 페이지로 가는 다른 링크를 만들지 않는다.
(사용자가 두가지 링크에서 동일한 페이지에 가 버리는 경험을 주지 않는다.) 
5. 가능한 페이지 폭은 고정하지 않는다. 
6. 언뜻 보기에도 알기 쉽고 간결한 명칭을 붙인다.
(명칭의 의미 전달을 생각하는 이름보다 간단 명료한 이름을 중요 시 할것)
7. 디자인의 정교함에 너무 열중하면 사용자의 사용성이 나빠진다.


드롭 다운
1. 드롭다운 메뉴의 내용을 변경시키지 않는다.
2. 세로가 너무 긴 메뉴는 사용하지 않는다. 
3. 드롭 다운 메뉴를 사용하는 경우도 최대 2단까지만 사용하며 충분히 표시 시간을 준다.
( 많은 단이나 메뉴 계층이 있거나 마우스가 어긋날 만큼 사라져 버리는 메뉴는 사용하기 어렵다.)

TOP 페이지
1. 한 문장의 태그 라인을 넣는다.
(그 사이트를 한마디로 표현할 수 있는 설명)
2. 사이트의 최대 중요 태스크를 강조해 직접 링크를 붙인다.
( Firefox의 영문 다운로드 페이지가 좋은 사례: http://www.mozilla.com/en-US/firefox/)
3 실제의 컨텐츠의 일부를 소개한다.
(단순한 링크가 아니고, 컨텐츠의 요약 등을 게재한다.)
4 최신 기사, 정보를 액세스 하기 쉽게 한다.
(인기가 있는 항목은 눈에 띄도록 해 둔다.)

폰트
1. CSS로 font size를 절대크기를  지정하지 않는다.
2. 가능한 사진안에 텍스트를 넣지 않는다.
3. CSS를 읽어들이기 위한 버튼 설치를 검토한다.
4. 텍스트와 배경색 콘트라스트를 최대로 한다.

Labels: , , , , ,

0 Comments:

Post a Comment

<< Home