UI디자인 가이드라인 - 사이트 구성하기

링크의 품질을 높이는 방법
사용자에게 자신감을 부추기고 자신이 찾고자 하는 정보의 향기를 전달하는 방법의 반은 링크에 의해 만들어진다.
또한 자신감은 링크 타입, 커뮤니케이트된 정보의 양, 링크가 생긴 모양에 의해 부추겨지는 수가 많다.

링크의 분류는 다음과 같이 나눌 수 있다.

- 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다.
- 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다.
- 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다.
- 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다.

위의 분류 중에서 컨텐츠 링크가 가장 좋은 방법이다. 사용자들은 카테고리 링크가 아니라 컨텐츠 링크를 사용할 때 더 성공할 가능성이 높다. (현재 국내의 사이트는 카테고리 링크가 더 많다.) 백, 홈 링크는 문제의 징조이기도 하다. 사용자가 향기를 놓쳤을 경우 많이 사용하기 때문이다.
링크들은 사용자들을 끌기 위해 올바른 단어들을 가지고 있어야 한다.(링크를 신호로 만드는 방법)


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 Alert Box 1997. 10.1 'How users Read on the Web)가 있다.
컨텐츠의 문장을 읽어가는(Scanning) 사용자는 그것을 신호와 잡음으로 구분하는데, 자신이 원하는 정보와 관련된 단어의 링크를 신호로, 그 밖의 내용은 그저 잉크인 잡음으로 보는 것이다. 보통 20개의 단어 중 4-5단어들(20%)은 신호, 나머지는 잡음이라고 간주 한다.
따라서 링크 안의 큰 잡음들은 관련 텍스트를 숨긴다.

링크는 커뮤니케이트 하기 위해 충분한 단어들을 가지는 것이 필요하다.
같은 목적을 가진 사용자들 이라도 사용자가 다르면 다른 단어를 찾을 수 있다.
예를 들어 취업을 원하는 사용자가 찾는 단어들을 살펴보면 어떤 이는 '이력서 올리기', 또 다른 사람은 'Job찾기', '구직', '일자리' 등… 사용자들은 동의어를 핸들 할 수 있지만 그것은 문맥 안에서 만 가능한 것이다.
그러므로 링크는 밑줄 쳐진 단어들과 그와 관련된 텍스트 둘 다 라고 할 수 있다.

그러므로 카테고리 링크가 더 어려운 일이다.
그 이유는 복수 링크들을 설명(묘사)해야만 하고, 보통 컨텐츠 링크 사이즈의 3분의 1정도 밖에 되지 않기 때문이다.

그렇다고 링크의 길이가 길어야 좋은 것은 아니다. 사용자의 선택을 도울 의도로 된 텍스트(제목들도 어떤 때는 포함)를 올바르게 디자이너가 결정해야 한다.


스캐닝(훑어 보기)를 도울 수 있는 방법
이 때 우리는 게슈탈트 심리이론이나 기억에 관한 인지 심리학 이론의 단기 기억 (의미덩이 만들기: chunking)을 이용한다.

1. 링크의 그룹핑 : 사용자들은 비슷한 아이템들을 서로 관련된 것으로 인식한다. 링크 그룹이 많은 웹 페이지가 능률적이다.(컨텐츠 링크 그룹이 잘 되어 있는 사이트는 CNN.com이다.)
2. 구조화된 목록 : 사용자에 따라 공통의 분류나 친숙한 영역들을 구조화 한다. (달력이 좋은 예이다.)
3. 링크의 차별화 : 다른 컨텐츠로 이끄는 링크는 그 차이점을 명확하게 차별화하는 것이 필요하다.(좋은 예 HP사이트)
4. 여분 링크를 이용한다. : 여분 링크란 사용자에게 복수의 향기를 제공하는 것, 즉 다른 문맥과 다른 목표로 다른 아이디어를 가지고 있는 다른 사용자들을 지원한다.
5. 괄호와 뷸렛을 이용한다. : 사용자들이 링크 그룹들을 다발 짖는 것을 도와 준다. 특히 복수 라인에 걸쳐 링크들이 묶여 있을 때 뷸렛은 사용자가 링크들을 서로 구분하는데 도움이 된다. 

배너처럼 보여서 간과되는 중요한 정보들
사용자들은 화면을 훑고 지나간 다음 중요한 내용이나 시선을 끄는 이미지에 관심을 보이지만 배너 같은 정보는 무시한다.
사용성 테스트 결과, 사용자들은 배너처럼 생긴 그래픽이 중요한 정보이더라도 무시해 버린다는 것을 발견할 수 있었다.
그러므로 사이트의 중요한 정보나 네비게이션을 광고처럼 이미지로 만들거나 배너 영역에 두어서 배너와 혼돈을 일으켜, 사용자들이 이를 간과해 버리도록 만들어서는 안된다.

여러 개의 이미지들이 오른쪽 밑 부분의 배너 광고 영역에 있으며, 그 형태 또한 배너 광고 형식을 띠고 있어 사용자들은 배너로 생각하고 무시하지만 사실은 내부의 주요한 정보들로 연결되는 중요한 링크이다. 그 중 ‘봄나들이’를 클릭하면 ‘봄 나들이 특집 주요 기사 모음’으로 화면이 전환된다.

링크 가능한 영역의 크기와 거리
웹페이지에서 버튼이 너무 작아서 클릭하기 원하는 것을 제대로 클릭하지 못하거나, text 주위의 background를 클릭했으나 클릭되지 않는 경우가 종종있다.
이러한 현상을 Fitts' Law (피츠의 법칙)로 설명할 수 있다. 피츠의 법칙은 속도와 정확성간 접합점의 기본적인 원리이다.

스크린 상에서 버튼의 크기와 커서를 이동시키려는 거리가 주어지면, 버튼까지 커서를 움직이려는데 걸리는 평균시간을 피츠의 법칙을 이용하여 구할 수 있다.

Time(in msec)=a+blog2(D/S+1) 
S : 버튼의 크기 
D : 버튼까지의 거리

위와 같이 커서가 버튼까지 움직이는 시간은 거리에 비례하고 버튼의 크기에 반비례한다.

Button을 클릭하기 위하여, Mouse를 이동시키는 거리가 멀면 멀수록 실수 없이 정확히 Button에 Mouse를 접근시키는 것이 더 어려워진다. 그리고 버튼의 크기(또는 클릭할 수 있는 영역)가 작을 수록 커서를 가져갈 target에 접근시켰을 때 성공할 확률이 낮아진다.

메뉴나 버튼은 쉽게 클릭하기에 ‘충분한 크기와 거리’를 고려해서 디자인 되어야 한다.

사용자들은 긴 화면을 스크롤한다
사용자들이 스크롤하기 싫어한다는 전통적인 견해는 흔히 옳은 것으로 간주되어 왔다.
이러한 가정 하에 한정된 분량을 한 화면에 담으려고 할 때, 디자이너는 대부분 다음의 두 가지 경우 중 한 가지를 택할 것이다.

한정된 화면 공간에 맞추기 위해 정보를 임의로 줄인다.
이 경우, 사용자는 내용 파악에 어려움을 느낀다.

하나의 화면을 몇 개의 페이지로 나눈다.
이 경우, 사용자는 다음 페이지가 로딩될 때까지 기다리는 것보다 다소 길어진 페이지를 스크롤하며 훑어보는 것을 더 선호한다.

사용성 테스트의 결과, 사용자들은 스크롤 자체를 기피하지는 않는다는 것이다. 하지만, 스크롤 바가 있는 긴 페이지에는 반드시 사용자들이 원하는 정보를 찾을 수 있도록 이끌어주는 요소로서의 ‘향기(scent)’가 있어야 한다.

출처 : UIdesign