웹 사용성 연구의 선구자인 제이콥 닐슨이 연구데이터

UX 2011.05.03 17:21

*인터넷 경험차이에 따른 홈페이지 이용 특성과 일반적인 홈페이지 이용 특성

* 홈페이지 평균 체류 시간
- 경험이 적은 사람 : 35초 이내
- 경험이 많은 사람 : 25초 이내
- 평균 30초를 체류하며 2분 내에 판단하고 이용 여부를 결정

* 스크롤풀에 의한 페이지 보기 (스크린풀 : 스크롤이 있는 페이지에서 스크롤을 전부 내려 페이지를 탐색)
- 첫 방문자 : 체류시간 31초 / 사용자 스크롤 23% / 스크린풀 스크롤 0.8
- 2번째 방문자 : 체류시간 25초 / 사용자 스크롤 16% / 스크린풀 스크롤 0.8
- 3번째 방문자 : 체류시간 22초 / 사용자 스크롤 16% / 스크린풀 스크롤 0.8
- 4번째 방문자 : 체류시간 19초 / 사용자 스크롤 14% / 스크린풀 스크롤 0.5

* 홈페이지(메인 페이지), 내부 페이지 이용 소비 시간
- 경험이 적은 사람 : 홈페이지상에서 소비 시간 35초 / 내부 페이지 소비 시간 60초
- 경험이 많은 사람 : 홈페이지상에서 소비 시간 25초 / 내부 페이지 소비 시간 45초

* 사용자가 다른곳을 둘러보기 위해 클릭하는 부분
- 가운데 > 우측 > 좌측 > 하단 > 상단 (상단 클릭율이 가장 낮음)

* 특정 사이트 방문을 위해 검색을 사용하는 비율
- 검색 사용 : 88%
- 직접 입력 : 12%

# 검색 엔진 이용 특성

* 검색 엔진 서비스에서 특정 단어 검색의 검색 결과 페이지에서 페이지 이동율
- 1페이지 : 93%
- 2페이지 : 7%
- 3페이지 : 1%

* 검색 결과 페이지에서 사용자가 클릭하는 위치 (검색 결과 10개 기준)
- 검색 결과 상위 첫번째 : 51%
- 검색 결과 상위 두번째 : 16%
- 검색 결과 상위 세번째 : 6%
- 검색 결과 상위 네번째 : 6%
- 검색 결과 상위 다섯번째 : 5%
- 검색 결과 상위 여섯번째 : 4%
- 검색 결과 상위 일곱번째 : 2%
- 검색 결과 상위 여덟번째 : 1%
- 검색 결과 상위 아홉번째 : 1%
- 검색 결과 상위 열번째 : 2%
(첫번째 ~ 네번째까지, 맨 끝이 효과적)

* 페이지 유형별 스크롤 이용 비율
- 첫번째 방문자 : 23%
- 네번째 방문자 : 14%
- 내부 페이지 스크롤 이용 비율 : 42%
- 검색 엔진 결과 페이지 스크롤 이용 비율 : 42%

# 웹 사이트 사용성 문제

* 웹 사용성 문제 중 가장 중요한 문제 8가지
- 방문했던 링크의 색이 바뀌지 않는 문제
- 뒤로가기 버튼이 사용안되는 문제
- 새 창을 여는 점
- 팝업
- 광고처럼 보이는 디자인 요소
- 웹 전체의 관계를 위배
- 내용이 없는 컨텐츠와 과장된 표현
- 빽빽한 컨텐츠와 읽기 어려운 문자열

* 유저가 가장 싫어하는 광고 기술
- 팝업
- 느린 로딩 속도
- 속임수로 클릭 유도
- 닫기 버튼이 없는 경우
- 보려는 것을 가리는 경우
- 불명확한 용도
- 컨텐츠 주위를 움직이는 것
- 페이지 대부분을 차지하는 것
- 계속 깜빡이는 것
- 화면을 가로질러 움직이는 것
- 자동 소리 재생

* 사용성에 영향을 미치는 것 들
불확실한 클릭 영역 / 파란색이 아닌 링크 / 스크롤 작업 / 등록 요구 / 복잡한 URL /
풀다운 메뉴와 캐스케이딩 / 플러그인과 최첨단 기술 / 3D 사용자 인터페이스 / 스플래시 페이지 /
움직이는 그림과 자동스크롤 되는 문자열 / 커스텀 GUI / 정보 제공자 불명 / 만들어 낸 말 /
오래된 컨텐츠 / 웹 사이트 내의 모순 / 조급한 개인 정보 요청

* 사용자 이용의 실패 이유 중 가장 큰 이유 (사용자가 사이트 이용에 어려워 하는 점)
- 검색 능력 (검색 지원이 좋지 않으면 컨텐츠 이용을 어려워 함)
- 페이지 디자인 (조악한 페이지 디자인으로 인해 이용을 어려워 함)

# 웹에서의 문자 사용 방법

* 일반적인 인쇄물에 사용하는 단어의 수 25%만을 웹에서 사용해야 안정적인 가독성 유지

* 텍스트 위주의 컨텐츠는 앞 2줄까지만 읽는 경향이 있어 컨텐츠의 주요 내용이나 결론은 앞줄에 기입해야 함

* 제목에 사용되는 글자의 크기는 본문에 사용된 글자 크기의 140% 사용

* 권장 문자열 크기
- 일반 방문자 : 10~12포인트
- 고령 및 시력이 낮은 방문객 : 12~14포인트
- 어린이나 이제 막 글을 깨친 사람 : 12~14포인트
- 10대 : 10~12포인트

* 글꼴에 대한 4가지 지침
- 10포인트 또는 그 이상 크기를 갖는 일반적인 글꼴 사용
- 글꼴의 배경을 복잡하게 만들지 말 것
- 흰 색 배경에 검은색 문자열을 사용
- 계속 움직이는 문자열, 대문자로만(영어) 이루어진 문자열, 그림으로 만들어진 문자열을 최소화
신고

제이콥 닐슨의 최악의 웹 사이트 디자인 10가지

UX 2011.05.03 17:15
1. "백(back)" 버튼이 작동하지 않거나 느리다.


백 버튼은 웹이용자들에게 구명 밧줄과 같으며, 실제로 두번째로 제일 많이 사용하는 네비게이션 기능 중 하나로 알려져 있다. (제일 많이 쓰이는 네비게이션은 하이퍼텍스트 링크이다.)

이 용자들은 백 버튼을 클릭함으로써 어떤 경우에라도 자신들이 웹에서 했던 시도에서 벗어나 익숙한 이전 페이지로 돌아갈 수 있다는 것을 잘 알고 있다. 그러나, 어떤 사이트들은 백 버튼을 없애는 만행을 저질러 이용자들을 당황하게 한다.

  • 새 창 띄우기 (실수 2 참조)
  • 자동 리다이렉트는 이용자가 백 버튼을 클릭할 때마다 브라우져가 이용자를 원하지 않는 페이지로 이동 시킨다.
  • 캐쉬 방지는 백 버튼을 클릭할 때마다 브라우저에 캐쉬로 저장된 페이지가 불려오는 게 아니라, 새로이 웹서버에서 페이지를 재호출하게 되어 백 버튼이 작동하는 시간을 2배 정도 지연시킨다.


2. 새 창을 띄우고 본다.

새 창을 띄우는 것은, 마치 진공청소기 판매원이 고객의 카페트에 재떨이를 엎지른 것과 같다. 특히나 최신의 OS는 끔찍한 창 관리 기능을 갖고 있기에 이용자들은 "제발, 내 스크린을 더 많은 창으로 오염시키지 말란 말이야! 새 창이 필요하면, 내가 알아서 띄울 것이다!" 라는 비명을 지르게 된다.

디자이너들은 새 창이 이용자들을 그 사이트에 계속 머무르게 한다는 이론에 입각하여 새 창을 띄운다. 그러나 이용자의 컴퓨터 화면을 차지해 버리면 이용자가 적대적인 감정을 가질 수도 있으며, 일반 이용자들이 이전 페이지로 돌아가기 위해 보통 사용하는 백 버튼을 쓸 수 없게 만듬으로써 이용자를 불편하게 만드는 전략이 되어버린다. 작은 크기의 모니터로 전체 화면을 한 창으로 고정해서 쓰는 사람들은 팝업 창의 존재를 쉽게 알아 차리지 못한다. 이전 페이지로 돌아가고자 하는 이용자는 이미 회색으로 변해 작동하지 않는 백 버튼에 혼란을 일으킬 것이다.

3. GUI 표준화 요소를 임의로 변경해버린다.

일 관성은 사용 편리성 원칙을 구현하는 제일 중요한 요소이다. 과정이 항상 동일한 방법으로 진행된다면 이용자는 앞으로 어떤 일이 발생할 지 걱정하지 않는다. 오히려 축적된 경험에 따라 앞으로 어떤 일이 일어날 지 예측할 수 있다. 사과를 뉴튼의 머리 위에서 살짝 놓으면? 사과는 뉴튼의 머리로 떨어질 것이다. 이것으로 충분하다.

이용자의 예상이 맞다고 증명되면 그들은 시스템이 그들의 조정 밑에 있다고 여기며, 친밀감까지 가진다. 시스템이 이용자의 기대를 버린다면 그들은 불편해 한다. 만약에 내가 사과를 살짝 놓았는데, 그 사과가 토마토로 변해 저 하늘로 1KM나 날라가 버린다면 얼마나 황당할까.

상호 작용의 일관성이야말로 새 창을 여는 것이 잘못되었다는 한 이유이다. 일반적으로 링크를 클릭하면 같은 창 내에서 대상 페이지가 목적 페이지로 치환될 거라고 대부분 기대한다. 만약 이 이용자의 기대를 버린다면 자신의 원하는 대로 웹에서 움직일 수 없다는 불안감을 주게 된다.

최근 들어 심각하게 제시되는 일관성 파괴는 라디오 버튼과 체크박스와 같은 GUI 규격에서 발생한다. 이런 디자인의 적절한 행동론은 Windows UI Standard,
Macintosh UI standard, Java UI standard 에 정의되어 있다. 이 중 플랫폼의 취사선택 여부는 최다 대중이 쓰는 플랫폼이 무엇인가에 달려 있다. (아마 Windows가 선택 될 것이다.) 그러나 대부분의 규격들이 관련된 동일한 규칙을 갖고 있으므로 어느 플랫폼을 선택하든 그것은 크게 문제되지 않는다.

예를 들어 라디오 버튼의 경우 여러 조건 중 반드시 하나만 선택하게 되어 있으며, 이용자가 OK 버튼을 누르기 전까지 선택 결과가 반영되지 않는 것이 원칙이다. 그러나, 내가 방문한 대부분의 웹사이트들은 라디오버튼이 선택만 되어도 실시간으로 즉각적인 반응을 하고 결과가 전송되고 있었다. 인터페이스 표준을 벗어난 임의의 변경은 웹을 더 사용하기 어렵게 만들 뿐이다.

 

4. 글쓴이의 소개가 부족하다.

이 용자는 웹을 통해 이 웹을 만든 이에 대해 관심이 많은 것으로 나타났었다. 특히, 해당 웹 제작자의 개인 소개 및 사진은 웹을 친근한 장소로 만들며 웹에 있는 정보들의 신뢰도를 증가 시켰다. 성격과 관점이 전선을 통과하는 익명의 비트에 압승을 거둔 것이다.

그러나 아직 많은 웹사이트들이 전문 컬럼니스트를 고용하지 않으며, 기재된 글의 작성자를 알리기 꺼려하고 있다. 글쓴이를 밝히더라도 그가 어떤 인물인지 소개 하는 것 자체도 잊고 있기에 동일한 사람이 쓴 다른 글을 이용자들이 알아 챌 수도 없다.

작가명을 단순히 mailto: 로만 대신하는 것도 그리 좋은 방법은 아니다.

  • 대부분의 이용자는 글쓴이에게 직접 연락하기 보다, 그가 어떤 사람인지 더 궁금해 한다. (그 글쓴이가 쓴 다른 글을 보는 것에도 관심이 많다.) 물론 연락처는 글쓴이 소개에 넣어 두면 좋은 것이나 연락처가 제일 중요한 요소가 되는 것은 피해야 한다.
  • 밑줄로 표시되는 하이퍼텍스트 링크를 클릭했을 경우, 새로운 페이지가 나타나는 것이 웹에선 관습이다. 클릭했을 경우 이메일 창이 뜨는 것은 그 관습을 어기는 것으로 사용 편리성을 떨어 뜨려 웹 행동을 예상하기 어렵게 한다.


5. 정보를 보관하지 않는다.

오 래된 정보 중에도 종종 좋은 정보가 많으며, 독자에게 유용하게 쓰일 수도 있다. 새 정보가 이전 정보보다 훨씬 가치 있다면, 물론 이전 정보도 가치 있을 것이다. 온라인에서 이런 옛 정보를 보관하는 것 또한 저렴하다. 지난 자료 모음을 계속 유지하는 것은 웹사이트 운영 비용을 10% 정도 증가시키겠지만, 그 컨텐츠의 유용성은 50% 증가할 것이다.

지난 자료 모음은 죽은 링크가 발생하는 문제를 해결하는 유일한 방법이며 또한 다른 사이트들로부터 해당 사이트로 링크를 손쉽게 받을 수 있게 해 준다.

6. 새로운 URL로 페이지를 이동한다.

페이지를 다른 주소로 옮기면 다른 웹사이트에서 해당 페이지로 준 링크는 작동하지 않게 된다. 무료로 참조 링크를 준 사람들의 성의를 굳이 저버릴 이유는 없지 않은가?

7. 의미와 전혀 상관 없는 헤드라인을 짓는다.

헤드라인, 페이지 제목, 소제목 등은 오프라인의 미디어와는 반드시 다르게 쓰여야 한다. 웹에서 이 것들은 UI 요소로 사용됨과 동시에 이용자들의 네비게이션도 도와주는 아이템이기 때문이다.

헤드라인은 내용 중 홈페이지나 분류 페이지의 목차로 쓰이거나 검색 결과로 쓰일 수도 있다. 어떤 경우이든지, 글 작성은 평서체로 하며 다음의 두 가지 목표에도 부합해야 한다.

링크 다음에 어떤 내용이 있을지 이용자가 추측하지 않고도 쉽게 알 수 있도록 할 것

  • 이용자가 관심 가지지 않을 내용을 억지로 클릭하게 유도하지 말 것 (이용자 방문 조회수를 증가시키는 데는 많은 도움이 되겠으나, 결국은 신뢰도 저하로 이용자들이 다시는 그 사이트를 방문하지 않게 된다. )


8. 인터넷 첨단 유행에 무작정 뛰어든다.

웹은 자금과 적자 웹사업에서 구제 해 주겠다는 사람들로 가득 차 있다고 해도 과언이 아니다.

푸 쉬, 커뮤니티, 채팅, 무료 이메일, 3D 사이트맵, 경매 – 등등. 총알이 무엇인지 여러분도 잘 알고 있다. 그러나, 마법의 총알은 없다. 대부분의 인터넷 첨단 유행어들은 첨단 유행을 제대로 사용할 수 있는 한두개의 웹사이트에 약간의 이익을 안겨 줄 뿐이다. 대부분의 웹사이트는 최신 첨단 유행을 따르면 오히려 어려워 질 것이다.

인터넷 첨단 유행에 집중하여 일을 벌리는 것은 기본 고객 서비스와 이용 편리성을 개선함에 드는 시간, 자금, 관리 능력보다 더 큰 기회 비용을 요구한다. 다음 달에는 새로운 인터넷 유행어가 나올 것이다. 관심의 고삐는 늦추지 말아라. 그러나, 단순히 쥬피터가 그에 대해 리포트를 썼다 하여 그 사업에 뛰어 들지는 말아라.

 

9. 서버 응답 속도가 늦다.

서버 응답 시간이 늦어지는 것은 웹 이용 편리성의 제일 큰 적이다. 이전에 작성한 "10가지 실수"에서 보듯이 84%의 대형 사이트도 서버 응답 시간 규칙을 지키지 못하는 것으로 나타났었다.

서 버 응답 속도 저하 관련하여 제일 큰 원인은 풍부한 그래픽 디자인이다. 많은 사이트들이 너무 많은 수의 그래픽을 갖고 있거나, 또는 너무 사이즈가 큰 그래픽을 갖고 있다. 다이나믹 HTML이나 일반 HTML로 처리하면 될 것을 애플릿으로 하여 속도 저하를 야기시키는 곳도 있다. 다운로드 속도 줄이기는 아무리 강조해도 지나치지 않다.


웹 기반 어플리케이션, 전자상거래, 개인 맞춤 서비스의 성장은 각각의 페이지들이 작동 중 반드시 컴퓨터로 계산, 산출 되어야 하다는 것을 뜻한다. 따라서 페이지 로딩 시간의 증가는 다운로드 속도 외에 서버 성능에서도 영향을 받게 되었다. 백엔드 메인프레임이나 데이터베이스 서버로의 연결을 포함한 웹사이트를 구축하면 각 프로세스들의 처리 속도는 더욱 저하된다.

문제는 이용자들은 서버 응답 속도가 느려지는 이유에 대해서는 전혀 신경 쓰지 않는다는 것이다. 그들은 사이트가 제대로 서비스를 제공하지 않는다는 것만 인지할 뿐이다. 따라서, 늦은 응답 시간은 곧장 신뢰도 저하로 이어지며 이용자들은 항상 비즈니스와 함께 떠나기에 방문자수도 줄어들게 된다.

속도가 빠른 서버 구축에 투자하라. 서버 튜닝 전문가를 고용해 시스템 구조를 검토하라. 최적화된 응답 시간을 위해 퀄리티를 조절하라.


10. 광고처럼 보이도록 디자인한다.

선 별된 집중은 매우 강력한 파워를 갖고 있다. 그러나 웹 이용자들은 어떤 목적을 가지고 네비게이션을 하는 도중에, 어떤 광고가 보이더라도 시선을 두지 않게 되어 있다. 이것이 클릭-쓰루률이 매년 절반 이하로 감소하는 것과 웹광고가 효과 없는 이유이다.

설상가상으로 이용자들은 유행하는 형태의 광고 양식이면 완벽한 디자인 구성요소라도 바로 무시한다. 결국 무언가 무시한다는 것은, 그 것이 무엇인지 구체적으로 알려고 하지도 않는 것이다.

따라서, 광고와 같은 형태를 디자인에 적용 시키는 것은 절대 피해야 한다. 아래 가이드라인은 새로이 개발되는 광고의 형식에 따라 다양할 것을 미리 암시한다. 현재 적용 가능한 규칙은 다음과 같다.

  • 배너에 시선 안주기 : 이용자는 페이지에서 배너와 같은 형태나 위치에 있는 어떤 그래픽이나 구성 요소에도 절대 시선을 주지 않는다.
  • 에니메이션 기피 : 이용자들은 깜박임이나 움직이는 텍스트, 또는 과격한 에니메이션은 무시한다
  • 팝업 정화 : 이용자는 팝업 창에 무엇이 있는지 보지 않고 바로 종료 시킨다. 종종 팝업에 대해 악감정을 품기도 한다. 팝업 창을 완전히 금지시키자는 것은 아니다. 팝업 창도 효과적인 인터페이스의 한 부분이 될 수 있음은 분명하다. 단, 팝업 창을 전혀 보지 않는 이용자들을 고려한 대안이 사이트에 구현되어 있는 지 반드시 확인하기 바란다
출처:http://blog.naver.com/asfreeas/40000333301
신고