jasu's blog

명확한 단계를 요구하는 입력폼
입력폼은 사용자의 정보를 요구하는 화면이므로 사용자들이 가장 민감하게 반응할 수 있고 특히 결재에 관한 입력폼은 금전적인 위험요소도 고려되어 사용자는 과정이나 결과에 대한 확인을 매우 필요해 한다.
해외의 사례를 보면 성질이 같은 덩어리로 단계를 나누고 그 단계마다 화면이 전환되어 사용자가 지금 어느 위치에서 어떤 작업을 하고 있는지를 각 화면마다 정확하게 인지시키는 것을 선호한다는 결론을 도출한 바 있다.
그러나 우리나라의 경우 여러 테스트와 전문가의 분석 결과 조금 다른 사용자의 행태를 발견할 수 있었는데 단계가 시각적으로 명확하게 구분되어 보이되 화면의 길이가 조금 길더라도 한 화면에 보여지는 입력폼의 디자인을 선호하였다.
물론 너무 긴 화면은 지루할 수도 있고 사용자가 포기하거나 힘들어 하는 원인이지만 외국의 사례처럼 서너 줄의 입력폼마다 성격이 다르다는 이유로 화면전환을 하는 것은 우리나라 실정이나 국민성(?)에는 맞지 않는다는 것이 UI 전문가들의 결론이었다.
이러한 결과는 UI 전문가가 여러 번의 테스트를 객관적으로 진행한 산출물이지만 모든 사이트에 적용되는 정답일 수는 없고 사이트와 입력사항의 성격에 따라 달라질 것이다.

결론적으로 화면의 전환 여부는 사용자의 성향에 따라 달라질 수 있으나 입력폼은 가장 명확성이 요구되는 화면이므로 정확히 단계를 나누고 지금 사용자가 어디에서 무엇을 하고 있는지와 얼마나 걸릴 것인지를 여러가지 방법을 이용하여 꼭 명시해야 한다.

마우스오버 만들기
마우스오버를 하지 않을 수 없는 곳은 아무래도 메인 메뉴에 해당하는 네비게이션 바이다. 그러므로 이 곳에 마우스오버를 사용하여 만들 경우가 많을 것이다. 이때 마우스오버 했을 때 서브메뉴링크가 뜨도록 해주면 좋다.

보통 마우스오버를 하면 숨겨있던 이미지나 텍스트가 나온다. 그러나, 숨겨져 있는 정보를 사용자들이 찾아내지 못했을 경우는 어떻게 하겠는가?

사용자가 사용할 마우스의 위치를 생각해 볼 때 대부분 상하로 생기는 스크롤을 움직이기 위해서 마우스의 포인터는 오른쪽 스크롤 바에 가 있다. 마우스가 마우스오버를 하지 않았을 경우에는 숨겨져 있는 정보를 볼 수가 없지 않을까? 그러므로 마우스오버하기 전에 이미 떠 있어야 하는 정보를 굳이 마우스오버 후에 나타나도록 숨겨진 정보로 만들 필요는 없다.

풀다운 메뉴 만들기
풀다운 메뉴는 오래된 사이트에서 단골손님을 위한 메뉴 '바로가기'로써의 역할로 만든다.

풀다운 메뉴의 장점이라고 하면 일반적인 사용자 인터페이스(User Interface)사용하는 요소들 - Back, Forward, Up, Down의 구조 - 를 뛰어넘는 Jump라는 기능을 가지고 있다는 것이다. 하지만, 모든 선택 메뉴들이 숨어 있다는 단점을 가지고 있다.

이 메뉴들이 사용자들의 호기심을 자극하지 않는 한 열어보지 않을 수도 있기 때문에 주의해야 할 UI요소이다. 그러므로, 새로운 사용자들을 위하기 보다는 기존의 사용자들이 빨리 자신이 원하는 메뉴로 점프(Jump)하게 끔 하는 역할로 사용하는 것이 좋다. 또한, 사용자 자신이 자기만의 풀다운 메뉴를 등록 하게끔 하는 것도 괜찮은 방법이다.

검색엔진의 사용성. (1)
사이트 상의 검색 엔진들은 사이트내의 컨텐츠를 찾는 것을 도와주는 목적으로 있다.
그러나 사용성 테스트의 타스크를 통한 성공률을 보면 검색엔진을 사용해서는 30%, 사용하지 않고서는 53% 성공하는 것을 볼 때 검색엔진 자체가 사용성에 충분히 도움을 주지는 못하는 것 같다. 그러나 사용자들은 검색엔진의 사용을 빨리 가기로 인식하는 것 같다.

검색엔진이 일으키는 문제들은 다음과 같다.
- 사용자에게 컨텐츠가 어떻게 쓰여지고 구성되어 있는지에 대해 이해 할 것을 요구한다.
- 검색엔진 스스로가 정보의 향기를 제공하지 않고 있으며 오히려 사용자들 스스로가 향기를 제공해야 한다는 것이다.

검색은 사용자들에게 즉각적인 만족을 주기도 한다. 그러나 사용자가 목적을 달성하는데 얼만큼의 시간을 단축시켜 주는지, 또는 정확하게 목적을 달성하는데 도움을 주는지, 도움을 주기 위해서는 어떤 방법들이 있는지에 대해 디자이너는 고민해야 할 것이다.

검색엔진의 사용성. (2)
Netscape의 DevEdge 검색 엔진으로부터 추출된 1주일치 데이터를 분석해 본 결과에 의하면 일반적으로 1단어 검색이 가장 많은 44%에 달했다고 한다.

또한 복수 단어 검색 중 반 이상이 연속 단어를 사용했으며 나머지 반은 정확한 모양의 쿼리를 사용했다는 것이다. 더욱 중요한 것은 쿼리의 3%가 잘못된 스펠링을 포함하고 있었다는 것이다. 이러한 결과는 사용자는 키워드를 치는 방법에 있어서 자신들의 단어로 원하는 것을 정의하며 이는 1단어 이상이기가 어렵다는 것이며 사용자는 검색 후에 틀린 답에도 뭐가 잘못 되었는지 결코 모른다는 것을 뜻한다. 또한 많은 사용자들이 부울 논리를 사용하지 않는 것으로 나타났다.

검색은 세가지 형태의 문제점을 안고 있다.
- 올바른 검색 영역에 도달하는 것
- 검색을 정의하는 것
- 결과를 해석하는 것

이러한 문제점들은 사용자들이 어떤 키워드를 입력해야 할지 잘 모른다는 것을 의미하며 종종 사용자들을 사이트의 다른 부분으로 갖다 놓는다는 것이다.

그러나 검색은 사용자들에게 즉각적인 만족을 준다. 그러므로 검색엔진의 사용성에 있어 사용자를 고려한 많은 노력(검색의 범위를 좁히는 도구나 프로세스)이 있다면 사용성이 높아지겠지만 그렇지 않다면 오히려 사용성을 감소시키는 주된 요인으로 작용된다는 것을 명심하자.

프레임의 실수
프린트를 어렵게 한다.
프린트를 방해한다. 여러 프레임 중 엉뚱한 부분이 프린트되어져 나올 수 있다.

북마크를 어렵게 한다.
프레임 페이지를 북마크 했을 경우, 다시 찾아갔을 때 엉뚱한 곳으로 왔다는 것을 발견할 수 있다.

검색엔진에 잘못 등록될 수 있다.
검색엔진에서 결과로 나온 URL을 찾아갔을 때 프레임의 일부분만 링크되어 있는 것을 본적이 있을 것이다.

수평 스크롤이 생길 수 있다.
스크롤에는 수직 스크롤과 수평 스크롤이 있는데 수직 스크롤은 요즘 많이들 사용하고 있는 휠마우스를 사용하여 어느 정도 사용하기 편하지만, 수평스크롤은 오른쪽과 왼쪽으로 왔다갔다하는 움직임을 해야 하기 때문에 몹시 불편을 준다.

출처 : UIdesign

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

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

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

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


링크를 신호로 만드는 방법
문법적으로 정확한 문장은 정보를 찾기 어렵게 할 경우가 있다는 조사 결과(제이콥 닐슨 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