닐슨 노먼 아이트래킹 연구 정리
들어가며
모든 컨텐츠에는 존재 이유가 있지만 그 이유가 '그럴 듯하게' 보이지 않는 이상 사람들은 굳이 그 이유를 알려고 하지 않는다. "내 컨텐츠(상품)는 이렇게 훌륭합니다!"라고 외쳐봐도 수많은 정보와 선택에 휩싸여 사는 현대인들에게 이 외침은 현란한 간판으로 빼곡하게 둘러 쌓인 건물의 외벽에 달린 작은 간판 하나와 같을 뿐이다.
그럼 사용자들은 자신의 존재 가치를 뽐내기 위해 잔뜩 치장된 간판들 속에서 어떤 간판에 눈을 주고, 어떤 가게에 들어가고, 궁극적으로 어떤 상품을 사게 되는가?
제이콥 닐슨은 "Jacob's Law of Internet UX"를 다음과 같이 말한다.
사람들은 당신의 웹사이트보다 다른 사람들의 웹 사이트에서
훨씬 오랜 시간을 보낸다.
그러니 사용자들이 쉽게 이해하는 디자인 표준을 따라라
누구나 이해할 수 있는 기존의 규칙을 준수해야 나의 컨텐츠에 눈길을 주고, 더 깊이 들어갈 만한 호기심을 느끼게 된다는 것이다.
"Jacob's Law of Internet UX" 영상은 아래의 동영상을 참고하자.
이 글에서는 닐슨 노먼 그룹에서 시행한 아이트래킹 연구 결과를 토대로 사람들이 디지털 컨텐츠를 어떤 방식으로 열람하는지를 살펴보고, 따라서 컨텐츠 공급자들이 지켜야 할 정보 디자인 규칙은 어떤 것이 있는지를 살펴보기로 하자.
아이트래킹 조사로 보는 디지털 컨텐츠 열람 패턴
닐슨 노먼 그룹에서 행한 아이트래킹 연구에서는 사용자들이 어떤 과제를 생각하고 들어오느냐에 따라 무엇을 보고, 무엇을 클릭할지를 결정한다고 한다. 예를 들어 드레스 사이트에 들어와서 어떤 드레스가 마음에 드는지를 보기 위해 드레스 이미지만 훑어보고, 가격대가 궁금한 사람은 가격 정보만 빠르게 훑어본다.
전문은 제이콥 닐슨에서 제공하는 아래의 영상을 참고하자.
좋은 정보가 있을 만한 부분에만 시선을 주면서 빠르게 훑어 보는 행위로 인해 사람들은 몇 가지의 컨텐츠 열람 패턴을 보인다. 이를 조사한 닐슨 노먼 그룹의 아이트래킹 연구에서사람들은 웹페이지에서 정보를 읽는 네 가지 패턴을 발표했다: F 패턴, Spotted 패턴, Layer Cake 패턴, Commitment 패턴
이 조사 결과가 담긴 기사는 다음을 참고하자.
pxd에서 훌륭하게 정리한 아이트래커의 활용 1편 - 아이트래커의 역사와 분석 방법에서는 아이트래킹의 역사와 분석 방법에 대해 좋은 이해를 제공한다.
1. F 패턴
F 패턴은 2000년대 초반 제이콥 닐슨에서 제공한 조사 결과 중 가장 유명한 것 중 하나다. 이 때 인용된 이미지는 지금까지도 많이 회자되고 있다.
F 패턴은 글의 첫 단락에 눈길을 주고 그 줄을 대충 눈으로 훑어 본 다음, 다음 단락의 첫 단어에서 또 다시 가로 방향으로 잠시 글을 훑어 본 후, 다음 단락, 또 다음 단락으로 이동하는 패턴이다. 첫 단락의 첫 부분을 가장 많이 읽고, 아래로 내려갈수록 읽는 읽는 내용이 점점 적어져 알파벳 모양 F 자와 닮았다고 해서 붙여진 이름이다.
이미지 출처. 닐슨 노먼 그룹, F 패턴을 보이는 아이트래킹 연구 결과 이미지2000년대 초반에 실시한 이 패턴은 약 15년이 지난 2017년에 시행한 아이트래킹 조사에서도 여전히 유효하고, 다른 디바이스나 문화권에서도 여전히 같은 패턴을 발견할 수 있다. .(참고 기사: F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile))
이미지 출처. 사법 정책연구원 / 연구보고서, 컨텐츠가 분리되지 않고 크게 한 덩어리로 제시되어 있어 눈길이 가지 않는다. 이 정보가 궁금한 사용자들은 다른 출처를 찾아갈 것이다.위의 글에서 사람들이 F 형으로 읽는 것은 효과적으로 훑어볼 수 있는 글의 포맷(제목, 서체, 진하기, 색상, 글머리 기호 등) 이 없는 상태에서 경제적으로 정보를 얻고 싶어하기 때문이라고 말한다. F 형 열람은 나쁜 정보 디자인의 증거로 사업적인 측면에도 도움이 되지 않는다.이를 방지하기 위해서 단락이나 문장의 첫 부분에 핵심 내용을 제시하고, 제목으로 단락을 나눠주며, 목록 형태로 컨텐츠를 제시하고, 컨텐츠를 차별화하는 다양한 글자 디자인을 활용하라고 제안한다.
아래의 영상은 F 형 열람 방식을 훌륭하게 요약하고 있다.
2. Spotted 패턴
Spotted 형은 F 형과 비슷하지만 특정 단락이나 단어에 이르러서 좀더 집중적으로 열람하는 형태를 보인다. 제목, 서체 디자인, 단락 구분 등으로 눈에 띄는 키워드가 존재하는 경우 그 키워드에 좀더 머무르는 양상을 띄는 것이다.
이미지 출처. 닐슨노먼그룹, Spotted 형태를 보이는 아이트래킹 조사 이미지3. Layer Cake Scanning 패턴
레이어 케익 스캐닝 패턴은 제목이나 부제목을 살펴본 후, 그에 부속된 텍스트 정보를 훑어 보는 열람 형태이다. 이 패턴이 겹겹이 레이어로 이루어진 케익과 같다고 해서 레이어 케익 스캐닝 패턴이라고 이름붙인다.
이미지 출처. 닐슨노먼그룹, Techcrunch.com에서 도드라진 제목들을 주목한 후, 그에 부속된 텍스트에도 눈을 주고 다음 단락들로 겹겹이 같은 행태를 보이는 아이트래킹 결과F 형은 컨텐츠의 구획이 나뉘어지지 않아 사용자들이 임의로 훑어보며 내려가기 때문에 중요한 정보를 놓치게 되지만 레이어 케익형은 세심하게 고안된 제목들로 제목들만으로도 컨텐츠의 개요를 파악할 수 있고, 더 깊이 알고 싶은 정보는 부속하는 텍스트에서 더 상세한 정보를 얻게 하는 효율적인 정보 열람 방식이라고 평가한다.
따라서 컨텐츠를 디자인할 때는
- 다양한 색상, 크기, 서체 등으로 제목과 부제목을 도드라지게 만들고
- 제목으로 컨텐츠를 여러 덩어리로 나눠주며
- 그 덩어리를 대표할 수 있도록 잘 요약된 제목을 붙여주고,
- 제목으로 컨텐츠 배치 순서를 반영하라
고 제안한다.
이미지 출처. 국민건강보험공단 / 건강보험안내, 컨텐츠가 제목과 소제목, 글머리 기호로 컨텐츠가 여러 덩어리로 나뉘어 있다.레이어 케익 스캐닝 패턴에 대한 상세한 내용은 다음 기사를 참고하자.
4. Commitment 패턴
커미트먼트 패턴은 전통적인 방식처럼 페이지에 있는 글자를 모두 읽는 것이다. 흔한 일은 아니지만 사람들이글의 출처를 신뢰할 때, 브랜드 충성도가 높을 떄, 이 정보를 얻기 위한 가장 좋은 장소라고 생각할 때 시간과 노력을 쏟기도 한다. 하지만 혹시라도 사용자가 글을 다 읽을 수 있다는 기대감에 페이지를 텍스트로 꽉 채우는 일은 없어야 한다고 충고한다.
이미지 출처. 닐슨 노먼 그룹, 가디언 홈페이지에서 모든 글자를 꼼꼼히 살펴 보는 아이트래킹 결과
이미지 출처. 닐슨노먼그룹의 기사. 닐슨 노먼 사이트는 디지털 UX에 대한 공적인 신뢰감을 주기 때문에 긴 텍스트 정보도 마다하지 않고 읽어 내려간다.바람직한 웹 컨텐츠 편집 방식
사람들은 왜 커미트먼트 패턴으로 읽지 않을까? 닐슨 노먼 그룹에서는 사람들이 글을 제대로 읽지 않고 대충 눈으로만 훑어 보는 이유를 다음과 같이 이야기한다.
▶ 컴퓨터 화면으로 읽는 것은 힘들다. (모바일 화면까지 가세하면서 더욱 그렇게 되었다.)
▶ 웹은 사용자가 주도하는 매체이다.
▶ 내 웹 페이지와 경쟁하는 수백 만의 경쟁 페이지가 존재한다.
▶ 사람들은 바쁘다.
기사 전문은 다음과 같다.
아무리 좋은 말도 적당한 때와 장소에서 잘 정리해서 말하지 않으면 소음이나 잔소리가 된다. 아무리 좋은 컨텐츠라 해도 사람들이 쉽게 읽을 수 있는 방식으로 제공되지 않는다면 잠시 스쳐 지나가는 페이지가 되고 말 것이다.
제이콥 닐슨이 정리한 How Users Read on the Web에서는 컨텐츠 편집 방식에 따라 사용성이 어떻게 달라지는지를 보여준다.
(이 기사에서 제시한 편집 방식을 한국적 컨텐츠로 재구성하였습니다)
이 표에서 알 수 있듯 동일한 내용을 '어떻게' 전달하느냐에 따라 사람들이 읽는 양, 따라서 얻는 정보의 양이 극적으로 달라진다.더 오래 머물러 더 많은 정보를 얻어간다면 그 사이트에 대한 신뢰도, 궁극적으로 고객이 수행하기를 원하는 활동(클릭, 구매, 즐겨찾기 추가, 잦은 방문 등)을 할 확률도 높아진다.
아울러 이 기사에서는 사람들이 훑어 보기 좋은 컨텐츠 정리 방식을 제안한다.
▶ 눈에 띄는 키워드(링크, 서체, 색상 등)
▶ 부제목(실용적인)
▶ 글머리 기호로 된 목록
▶ 한 단락에 한 가지 생각(두 번째 생각이 나오면 건너뛰기 시작한다)
▶ 역 피라미드 스타일(결론부터 시작)
▶ 기존 매체에서 읽는 글보다 반도 안되는 글자 수(1997년 자료이니 이제는 이보다 더 글자를 안읽을 것이다)
사람들이 관심을 가질 만한 좋은 컨텐츠를 가지고 있는 것이 그 모든 것을 압도하는 첫 번째 과제가 되어야 하지만, 사람들이 읽는 패턴에 맞추어 컨텐츠를 편집하는 노력 또한 컨텐츠 전략의 큰 축이 되어야 한다.
이 내용을 전하는 제이콥 닐슨의 기사 전문은 다음과 같다.
정리하며
컨텐츠에서 텍스트의 비중은 나날이 줄어들고, 컨텐츠가 유통되는 디바이스나 환경은 다변화되고 있다. '읽을 가치가 있다'는 인상을 한 눈에 주지 못하면 사람들은 잠시의 시간도 허용하지 않는다.
정보를 습득하기 위한 다양한 도구와 매체가 발달한다지만 관심 분야에 대해 깊이 알려고 할 때 텍스트만한 도구는 없을 뿐 아니라 전문가가 되기 위해 텍스트를 활용하는 경향은 미래에도 지속될 것이라고 예측한다. 다만 읽을 만한 가치가 없다고 '판단'되면 잠시의 시간도 아까워 할 뿐이다. 반대로 읽을 만한 가치가 있다고 판단되면 머물러 읽기 시작할 것이다.
더 적은 화면에 더 적은 텍스트로 더 많은 정보를 담아내야 하는 과제는 앞으로도 심화될 전망이다. 그럼에도 불구하고 많은 컨텐츠 전략가, 작가, UX 전문가들은 '환경은 변하지만 원칙은 변하지 않았다'고 말한다. 그 원칙이란: 내 컨텐츠에 개성을 갖기, 고객 중심에서 생각하기, 대화체로 전하기, 간결하기, 명확하기, 한 페이지에 하나의 내용만 담기
참고 자료)
영상
Jakob's Law of Internet User Experience
Eyetracking Shows How Task Scenarios Influence Where People Look
F-Pattern in Reading Digital Content
아티클
Why Web Users Scan Instead of Reading
Text Scanning Patterns: Eyetracking Evidence
아이트래커의 활용 1편 - 아이트래커의 역사와 분석 방법
F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)
The Layer-Cake Pattern of Scanning Content on the Web
