brunch

You can make anything
by writing

C.S.Lewis

by 서점직원 Nov 28. 2024

[5분 UI/UX]
웹콘텐츠를 읽는 5가지 패턴


[5분 UI/UX] 웹콘텐츠를 읽는 방법-F패턴에서 이어지는 글입니다


제이콥 닐슨이 2006년 F패턴 이론을 발표한 이후 15년이 지났지만 지금까지 F패턴은 UX 관계자들 사이에서 교과서처럼 인용되고 있다. 아무도 F패턴의 효용성을 의심하지 않는다. UX 업계의 원로이자 거물인 제이콥 닐슨이 주창한 이론이니까. 그런데 십년이면 강산도 변한다는데 모바일시대에도 F패턴은 여전히 유효한 이론일까?


여기 용감하게 F패턴에 대해 반론을 제기하는 사람이 있다. 잠시 그녀의 말을 들어보자.


닐슨 노먼 그룹의 연구 중 UX 업계에서 가장 많이 인용된 연구는 웹콘텐츠에 대한 F자형 읽기 패턴일 것입니다. 이 연구는 2006년에 발표되었는데 많은 사람들이 이것을 잘못 해석하고 있습니다. 이에 우리는 F패턴에 대한 동향과 함께 사람들이 F패턴에 대해 가지고 있는 잘못된 오해를 바로잡고자 합니다.

1)웹에서 콘텐츠를 읽을 때 항상 F패턴으로 읽는 것은 아닙니다. 다른 스캔 패턴도 존재합니다.

2017년 11월 12일, 닐슨 노먼 그룹 부사장 카라 페르니스(Kara Pernice)의 글¹ 중 일부 내용 발췌 –


카라 페르니스는 사용자의 웹콘텐츠 읽기 패턴은 F패턴 이외에도 다양한 형태가 존재하며 사람들은 F패턴만이 유일한 유형이라고 생각하는데 이는 착각이라고 주장했다. 그녀의 말이 사실이라면 닐슨 노먼이 틀린 걸까? 왜 사람들은 F패턴만이 유일한 유형이라고 생각하게 된 걸까?


제이콥 닐슨이 2006년 공개한 F패턴에 대한 글은 닐슨 노먼 그룹에서 발간하는 유료 보고서  판매를 위한 홍보 글이었다. 99달러 짜리 유료 보고서²를 팔기 위해 보고서 주요 내용 중 한 단락을 뚝 떼어 글을 썼는데 (이른바 미끼상품이다) 그 글이 예상외로 큰 히트를 쳤고 사람들은 보고서를 구매하는 대신 제이콥 닐슨의 글만 보고 F패턴만이 유일한 패턴이라고 착각한 것이다.


실제로 유료 보고서에서는 

① F Pattern 이외에도

② Bypassing Pattern
③ Layer Cake Pattern
④ Spotted Pattern
⑤ Commitment Pattern 

총 5가지 패턴을 소개하고 있다. 




① F Pattern
기사, 스토리 등 텍스트가 대부분인 페이지를 볼 때 사용자는 F자 모양의 히트맵을 만듭니다.




② Bypassing Pattern

동일한 단어가 여러 줄에서 반복될 경우 사용자는 줄의 첫 번째 단어를 의도적으로 건너뛰고 중간부터 읽기 시작합니다.

 




③ Layer Cake Pattern

사람들은 제목을 스캔하면서 본문 내용을 읽을지 여부를 판단합니다. 이 히트맵은 레이어 케이크를 연상시킵니다.




④ Spotted Pattern

페이지에 원하는 정보가 없으면 사용자는 원하는 정보를 찾기 위해 시선을 이리저리 움직이며 특별한 패턴이 없는 원형 히트맵을 만듭니다.




⑤ Commitment Pattern 

Spotted 패턴에서 사용자가 원하는 정보를 발견하면 해당 정보에 시선을 고정하는데 이때 집중적인 히트맵이 만들어집니다.


보고서의 내용처럼 실제로는 F패턴 이외에도 다양한 읽기 패턴이 존재하며 서비스나 페이지 유형,사용자의 목적과 관심사에 따라 읽기 패턴은 차이가 있다. 동일한 페이지라도 어떤 목적과 의도를 가지고 있느냐에 따라 읽기 패턴이 달라질 수 있다는 얘기다. 사용자의 읽기 패턴은 정형화될 수 없다. F패턴에 대한 맹목적인 믿음을 경계해야 하는 이유다.





✔️ 핵심 3줄 요약


1️⃣ 웹에서 콘텐츠를 읽을 때 항상 F패턴으로 읽는 것은 아니다.

2️⃣ F패턴 이외에도 다양한 형태가 존재한다.

3️⃣ 같은 페이지라도 어떤 목적과 의도가 있느냐에 따라 읽기 패턴이 달라질 수 있다.





각주1) 
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

각주2)
https://www.nngroup.com/reports/how-people-read-web-eyetracking-evidence/


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari