아래는 뉴스 사이트에서 방문자 눈 흐름을 추적한 Eyetrack III 연구 결과 중 흥미 있는 부분을 발췌한겁니다. 비록 조사 대상이 뉴스 사이트에 국한되어 있지만 대부분의 블로그 역시 비슷한 레이아웃을 가지고 정보 전달의 성격이 강한만큼 연구 결과의 직접적인 대입도 큰 무리는 없을 것 같네요. 사람들이 내 블로그를 방문했을 때 어떤 식으로 읽고 반응하는지를 한번 단편적으로나마 알아보죠.. ^_^
1. 눈은 사진보다 제목을 먼저 향한다.
언뜻 생각하기에는 사진이 더 주목을 이끌어 낼 것 같지만 연구 결과는 전혀 다른 결과가 나왔네요. 방문자가 웹페이지에 처음 도착했을 때 사진을 보기 전에 먼저 헤드라인, 특히 페이지 상단 왼쪽 부분을 주목한다고 합니다. 물론 컨텐츠에 부합하는 멋진 사진은 당연히 중요하고 항상 고려되어야 하는 요소지만 그보다 먼저 제목의 중요성과 효과가 더 크다고 할 수 있습니다.
2. 방문자는 제목의 처음 몇 단어를 먼저 흩어본다.
연구 결과에 따르면 방문자들은 제목의 처음 몇 단어만 슬쩍 보고 글을 계속 읽을지 여부를 결정한다고 합니다. 그러니 지나치게 긴 제목보다는 사람들 눈에 쏙 들어오는 적당한 길이의 제목을 만드는 게 중요하고, 흥미를 유발하며 그 글의 포인트가 될만한 단어들을 추려서 앞쪽에 배치하는 전략이 효과적입니다.
3. 목록을 볼 때는 왼쪽 위부터 아래쪽으로..
위의 2번 패턴과 비슷한데요. 방문자들이 제목 또는 링크 목록과 마주쳤을 때 왼쪽 사이드부터 아래쪽으로 보는 경향을 보여준다고 합니다. 처음 몇 단어에 집중해서 본인이 흥미를 가질만한 주제를 찾을 때까지 왼쪽 위부터 아래쪽으로 빠르게 흩어보는 거죠. 그러므로 리스트에서 가장 흥미 있는 단어를 상단 왼편에 집중적으로 배치하는 것이 현명하겠습니다.
4. 제목은 1초 이내에 사람들의 관심을 얻어야 한다.
온라인 방문자들은 대체로 인내심이 없으며 떠돌이 습성을 가지고 있습니다. 글 제목에서 1초 이내에 자신들의 흥미를 유발하지 않으면 바로 떠나버리죠. 그런 까닭에 그들의 관심을 얻으려면 보는 순간 흥미를 유발하고 말하려는 포인트에 바로 도달하는 제목이 중요합니다. 두서 없는 단어들을 나열하거나 핵심을 파악하기 어려운 제목은 곤란합니다.
5. 작은 폰트는 읽기에 더 집중하게 만든다.
지나치게 작은 폰트는 가독성에 나쁜 영향을 주지만 대체적으로 폰트가 작아질수록 사람들이 더 글 읽기에 집중한다고 합니다. 반대로 폰트가 커질수록 대충 흩어 읽는 경향이 커진다고 하는데요. 이에 따라 꼼꼼하게 의미를 전달해야 하는 컨텐츠라면 폰트를 좀 더 작게 해서 방문자들의 집중을 이끌어내고, 신변잡기 글이나 뉴스 같이 빠르게 소비하는 형태라면 일상적인 폰트보다 좀 더 큼직하게 해보는 것도 고려할 수 있겠습니다.
6. 네비게이션은 페이지 상단이 가장 효과적이다.
대체적으로 웹페이지 로딩 시 위쪽부터 눈이 먼저 향하는 만큼 연구 결과에서도 가장 효과적인 네비게이션 위치로 상단 부분을 언급하고 있네요. 하지만 대부분의 블로그들이 채택하는 사이드 네비게이션 역시 좋은 자리라고 합니다. 특이하게도 사이드바 네비게이션의 경우 왼쪽 보다는 오른쪽 부분에서 더 좋은 결과를 보여줬다고 하네요.
7. 짧은 단락이 읽고 싶게 만든다.
당연한 말이지만 책 읽기에 비교해봐도 쉽게 수긍이 가는 결과입니다. 글 전체가 단락 구분 없이 길게만 이어져 있다면 읽기도 전에 독자에게 어렵고 난해한 인상을 주겠죠. 해당 테스트에서도 사람들은 긴 단란보다 짧은 단락을 2배나 더 많이 보았다고 합니다. 다만 온라인 글쓰기에서는 단락 단락을 뚜렷이 구분하는 일반적인 전개 방식보다 아이디어의 흐름에 따라 자연스럽게 나뉘는 것이 좋습니다.
8. 사람들은 도입 단락을 많이 읽는다.
여기서 말하는 도입 단락은 전체 컨텐츠를 짧게 요약해 제목과 메인 텍스트 사이에 넣은 단락을 의미합니다. 몇몇 뉴스 사이트나 기사 형식의 광고에서 흔히 볼 수 있는 글쓰기 타입인데요. 전체 내용을 축약해 상단에 위치한 만큼 다른 부분에 비해 읽힐 확률이 높지만 메인 텍스트의 열독률에는 거의 영향을 주지 않습니다. 일단은 메인 텍스트의 이해를 돕는 차원에서라도 적극적으로 활용하면 좋을 것 같네요.
9. 광고 위치는 상단 왼쪽 위치가 최고다.
방문자 클릭 위치를 추적하는 히트맵을 보더라도 사람의 눈은 대부분 페이지 상단 왼쪽부터 주목하기 시작합니다. 따라서 여기 위치에 광고가 있다면 일단은 가장 많은 노출을 보장할 수 있죠. 반대로 오른편과 하단은 사람들의 주목도가 가장 떨어지는 영역입니다. 다만 광고가 계속 똑같은 위치에 있으면 익숙함 때문에 어느 순간부터 Ad blindness 현상이 발생할 수 있으니 주기적으로 광고 위치를 바꾸는 것이 좋을 수도 있습니다.
10. 눈길을 끄는 컨텐츠 근처에 광고를 배치하라.
오프라인에서도 사람의 눈이 멈추는 곳이 가장 광고 효과가 좋죠. 남자 화장실에서 소변기 위 자리가 왜 명당인지를 생각해 보시면 알 듯 한데요. 마찬가지로 온라인에서도 메인 컨텐츠 주위에 우선적으로 광고를 배치하는 것이 효과적이며 특히 제목 근처가 가장 좋다고 합니다. 인위적으로 컨텐츠와 광고를 분리하면 광고에 그만큼 덜 눈길이 간다고 하네요.
11. 그래픽 광고 보다는 텍스트 광고
논란의 여지가 있는 연구 결과지만 사람들이 찾는 대부분의 정보가 텍스트 형식이라는 걸 감안하면 이해가 됩니다. 정보를 찾는 사람일수록 그래픽 보다는 텍스트에 우선 순위를 두기 때문이죠. 테스트에서 텍스트 광고는 거의 7초 동안이나 평균적으로 눈이 머물렀지만 그래픽 광고는 불과 1.6초였다고 합니다.
12. 익숙하지 않거나 추상적인 정보는 텍스트보다 멀티미디어 형식이 효과적이다.
읽는 행위는 주제에 대한 이해도에 따라 능률이 달라집니다. 주제를 잘 알고 익숙해질수록 더 빠르고 쉽게 읽을 수 있게 되죠. 만약 사람들에게 전혀 낯설거나 말로 설명하기 어려운 정보, 특히 진행 과정을 알려줘야 하는 강좌 같은 경우 텍스트와 함께 비디오와 일러스트를 함께 전달하는 것이 효과적입니다.
그리고 아래는 가장 흔한 형태의 읽기 패턴과 중요도에 따라 색깔로 구분한 모습입니다. 디자인에 따라 천차만별로 틀려질 수 있으니 그냥 참고 정도로만 생각하시면 좋겠습니다.
[via Direct Creative Blog]
댓글을 달아 주세요
좋은 글 잘 읽고 갑니다~
2009/05/11 16:14도움이 됐으면 좋겠네요.. ^^;
2009/05/11 18:30실무적인 내용이 많네요^^
2009/05/11 16:14도움이 되었습니다~
블로그의 특성상...그리고 짧은 경험상..댓글 바로 아래쪽도 사람들 시선이 많이 머무는것 같아요^^
오.. 역시 날카로운 머니야님.. +_+
2009/05/11 18:32말씀대로 댓글 아래쪽도 블로그에서는 핫스팟인 것 같아요.. ^^
음.. 우측 상단은 블로그 대문 사진으로 인해서 우선순위가 낮아 지는건가요? ㅎ
2009/05/11 16:19저 같은 경우에는 귀차니즘으로 인해서
핵심 부분만 bold / color=red 로 설정을 해 놓고 나머지 부분은 조금은 흐릿하게 표시를 해 놓는답니다
(물론 티스토리 자체 기본 글씨가 black아니라 gray인듯 합니다 ^^
라고 해도.. 글씨만 잔뜩이라 1초 이후에 슝~ ㅠ.ㅠ
구차니님 블로그는 텍스트 위주래도 가독성은 아주 좋은 것 같아요. 글 읽기 아주 편한데요.. ^^;
2009/05/12 19:24제목의 중요성을 다시 한 번 알고 가네요 ^^
2009/05/11 16:21네.. 제목의 힘을 다시 한번 느끼게 되죠.. ^^;
2009/05/12 19:24좋은 내용 감사합니다!
2009/05/11 16:39구글애드센스 위치라던지 한번더 생각하게되는 글이네요
광고도 눈의 동선에 따라 배치해야 클릭율이 높겠죠.. ^^;
2009/05/12 19:27도움이 되는 내용 이네요
2009/05/11 16:55감사 합니다 ^^
도움이 되었다니 영광입니다.. ^^;
2009/05/12 19:30좋은 글 잘 읽고 갑니다! 미투데이에 트랙백 걸었어요~
2009/05/11 17:31트랙백 감사합니다..
2009/05/12 19:30가장 먼저 보는 것은 제목이긴 하겠지만 그림이 어떤 그림이냐에 따라서 등고선의 빨간 부분이 그림에 집중될 수 있는 만큼 그림이 차지하는 중요성이 크다고 할 수 있겠네요...(그래서 신문 기사나 블로그 포스트나 할 것 없이 되도록 잘 보이는 곳에 므흣한 사진을 올려놓으려고 하는 거겠구요...)
2009/05/11 17:59네.. 여기서 언급은 안했지만 원문을 보면 이미지 크기에 따라 눈의 집중도 틀려지더군요. 크면 클수록 더 많이 본다고 하니 잘 보이는 곳에 적당한 크기로 배치한다면 많은 집중 효과를 얻을 수 있겠죠.. ^^;
2009/05/12 19:33역시나 제목을 잘 뽑아야.. -.-;;;
2009/05/11 18:57ㅎㅎ.. 맞아요. 클릭하게 만드는 제목의 힘!!
2009/05/12 19:33좋은 내용이네요. 블로거들에게 많은 참고가 되겠어요. 잘 봤습니다. ^^
2009/05/11 20:21조금이라도 도움이 되면 좋겠어요.. ^^;
2009/05/12 19:36흥미로운 정보입니다.
2009/05/11 21:02컨텐츠를 보기 쉽게 정리해주고, 쉽게 읽힐 수 있도록 해주는 것도 필요할 듯 합니다.
좋은 정보 잘 보고 갑니다.
네.. 글의 내용뿐만 아니라 얼마나 효과적으로 읽힐 수 있는지 고려하는 것도 마찬가지로 중요한 것 같아요.. ^^;
2009/05/12 19:37안녕하세요 웹기획자 입니다.
2009/05/11 23:32많은 부분 동감하며 좋은정보 감사합니다. 제이콥닐슨의 유저빌리티 테스트에서도 비슷한결과가
많이 있는듯 합니다.
그런데 그중에...
'작은 폰트는 읽기에 더 집중하게 만든다.'는 잘 이해가 안됩니다.
제이콥닐슨의 유저빌리티 테스트나 사용성전문가들은 폰트의 크기를 적당히 키워야 한다고 이야기하는데요 참 적당히란 말이 정확한 의미는 아니지만
'작은 폰트는 읽기에 더 집중하게 만든다'의 논리적 뒷받침을 하는 보고서나 연구결과물이 있을지..궁금합니다.
좋은정보 감사합니다.
글쎄요. 저도 원본글만을 참고해서 작성한거라 이 결과를 더 뒷받침해줄 자료가 있는지는 확인 못했습니다.
2009/05/12 20:02그리고 말씀하신대로 어디까지나 적당히가 중요한 것 같은데요. 스크린의 다른 폰트에 비해 상대적으로 작을 때에 좀 더 집중하게 만들뿐.. 극단적으로 작은 폰트는 오히려 역효과만 유발하겠죠.. ^^
저도 이 부분에서 약간 의아함을 느꼈더랬는데요.
2009/08/31 06:52저한텐 폰트9가 읽기가 가장 편한거 같아요
10도 괜찮고 ..하지만 8 이하로는...별로던데.
그러나 12나 14 처럼 지나치게 크면 읽으려던 맘이 사라지더군요.
참 흥미롭네요...다 ....수긍이 가요.너무 큰 글자가 그래서그랬구나.
근데 이런건 있더군요.
아고라에서 느낀건데요.각 단락마다 빨간글씨로 내용을 요약해놓으면
긴 글이 세부적으로 읽혀지지가 않고 빨간색 요약만 좍~읽어지는 (정머시기라는 정치가 글....이런 식으로 올라오는데 전 단 한번도 그의 글을 세세하게 읽은 경험이 없네요.)
항상 좋은정보에 감사드립니다.
2009/05/12 02:20칭찬해 주셔서 감사합니다.. ^^;
2009/05/12 20:02잘 정리하셨네요..잘 보고 갑니다^^
2009/05/12 09:50아무쪼록 좋게 봐주시니 감사합니다..
2009/05/12 20:03뉴스 사이트에서의 아이트래킹 자료는 흔치 않은데, 좋은 정보 감사합니다
2009/05/12 09:53뉴스 사이트 관련 자료지만 블로그에도 적용하면 좋을 것 같아서요.. ^^;
2009/05/12 20:04사람들은 광고배너를 의식적으로 무시하는 경향이 있다지요~ 그래픽 광고 보다는 텍스트 광고. 맞는 얘기 같습니다. ^^ 유용한 글 잘 읽었습니다. ~
2009/05/12 13:08텍스트 광고도 이제 많이 익숙해 졌지만.. 그래도 그래픽 광고보다는 효과가 월등하다죠.. ^^;
2009/05/12 20:04가끔 웹황제님 블로그에 뜨는 현란한 광고때문에 눈이 아플때도 있습니다 ㅋ 그래도 저보다 뛰어나신 웹황제님이라 특별히 용서해드리고 있습니다..^^
2009/05/15 08:07켁.. 상단의 TNM 광고 말씀하시는거군요.. 송구스럽습니다.. -_-;
2009/05/19 19:34좋은 글 잘 보고 갑니다. 감사합니다.
2009/05/18 14:54좋게 봐주셔서 감사합니다..
2009/05/19 19:34좋은 내용이네요~

2009/05/22 23:38작은 글씨가 더 읽게 만든다는 사실은 좀 새로운 것 같습니다.
와우...구~~~~~~~~~~~~~~~~~~~~~ㅅ
2009/08/31 06:41진짜 좋은 정보네요.평소에 이런거 전혀 개념없이
블로그운영했는데....글쿠나...
다음블로거이신 은시님 포스팅이 정말 간결하면서
몰입해서 읽히게하는 깔끔한 글들이라...막연히..이거 좋다
따라하고싶다.배워야지...하는 감동을 늘 받았어랬는데...이런거였구나.
근데 트랙백은 어떻게 거는건가요.
제가 제 블로그의 어느 포스팅에다가, 이 글을 트랙백으로 가져갈수 있나요.
댓글 시작하는 곳 보면 트랙백 주소 있잖아요. 그걸 복사하셔서 관련있다고 생각하는 코코은님의 글에서 저한테 쏴주시면 됩니다.. ^^;
2009/08/31 18:52It's simple, yet effective. A lot of times it's very hard to get that "perfect balance" between superb usability and visual appearance. I must say that you've done a excellent job with this. In addition, the blog loads very fast for me on Internet explorer. Outstanding Blog!
2012/01/05 17:27Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your weblog? My blog site is in the very same niche as yours and my visitors would really benefit from a lot of the information you provide here. Please let me know if this ok with you. Thank you!
Hi there would you mind letting me know which webhost you're working with?
know more information please contact me (Michael Ling ) http://www.chinacateringequipment.com