'네비게이션'에 해당되는 글 1건

  1. 2009/05/11 방문자 눈의 동선으로 알아보는 블로그 전략 12가지 (41)



아래는 뉴스 사이트에서 방문자 눈 흐름을 추적한 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]



TRACKBACK :: http://webchobo.com/trackback/961

  1. 작은아이!의 생각

    Tracked from agiletalk's me2DAY  삭제

    UX 방법론 스터디에서 공부하게 될 사용자 반응 중에서 방문자 눈의 동선으로 알아보는 블로그 전략 12가지 흥미로운 사실들을 많이 알 수 있는 글이네요! 역시 UX는 실생활에 밀접한 관계를 가지고 있는 분야 같아요~

    2009/05/11 17:24
  2. 방문자 눈의 동선으로 알아보는 블로그 전략 12가지

    Tracked from 마케팅 브런치  삭제

    최근 무수히 나온 블로그팁 중에 가장 유용한 글이 아닐까 싶네요.

    2009/05/11 23:01
  3. 마키디어의 생각

    Tracked from markiday's me2DAY  삭제

    방문자 눈의 동선으로 알아보는 블로그 전략 12가지

    2009/05/11 23:27

댓글을 달아 주세요

  1. 해피쿠스  수정/삭제  댓글쓰기

    좋은 글 잘 읽고 갑니다~

    2009/05/11 16:14
    • 웹초보  수정/삭제

      도움이 됐으면 좋겠네요.. ^^;

      2009/05/11 18:30
  2. 머니야  수정/삭제  댓글쓰기

    실무적인 내용이 많네요^^
    도움이 되었습니다~
    블로그의 특성상...그리고 짧은 경험상..댓글 바로 아래쪽도 사람들 시선이 많이 머무는것 같아요^^

    2009/05/11 16:14
    • 웹초보  수정/삭제

      오.. 역시 날카로운 머니야님.. +_+
      말씀대로 댓글 아래쪽도 블로그에서는 핫스팟인 것 같아요.. ^^

      2009/05/11 18:32
  3. 구차니  수정/삭제  댓글쓰기

    음.. 우측 상단은 블로그 대문 사진으로 인해서 우선순위가 낮아 지는건가요? ㅎ
    저 같은 경우에는 귀차니즘으로 인해서
    핵심 부분만 bold / color=red 로 설정을 해 놓고 나머지 부분은 조금은 흐릿하게 표시를 해 놓는답니다
    (물론 티스토리 자체 기본 글씨가 black아니라 gray인듯 합니다 ^^;)

    라고 해도.. 글씨만 잔뜩이라 1초 이후에 슝~ ㅠ.ㅠ

    2009/05/11 16:19
    • 웹초보  수정/삭제

      구차니님 블로그는 텍스트 위주래도 가독성은 아주 좋은 것 같아요. 글 읽기 아주 편한데요.. ^^;

      2009/05/12 19:24
  4. 스마일맨  수정/삭제  댓글쓰기

    제목의 중요성을 다시 한 번 알고 가네요 ^^

    2009/05/11 16:21
    • 웹초보  수정/삭제

      네.. 제목의 힘을 다시 한번 느끼게 되죠.. ^^;

      2009/05/12 19:24
  5. Danzy  수정/삭제  댓글쓰기

    좋은 내용 감사합니다!
    구글애드센스 위치라던지 한번더 생각하게되는 글이네요

    2009/05/11 16:39
    • 웹초보  수정/삭제

      광고도 눈의 동선에 따라 배치해야 클릭율이 높겠죠.. ^^;

      2009/05/12 19:27
  6. 상오기  수정/삭제  댓글쓰기

    도움이 되는 내용 이네요
    감사 합니다 ^^

    2009/05/11 16:55
    • 웹초보  수정/삭제

      도움이 되었다니 영광입니다.. ^^;

      2009/05/12 19:30
  7. 작은아이!  수정/삭제  댓글쓰기

    좋은 글 잘 읽고 갑니다! 미투데이에 트랙백 걸었어요~

    2009/05/11 17:31
  8. 불멸의 사학도  수정/삭제  댓글쓰기

    가장 먼저 보는 것은 제목이긴 하겠지만 그림이 어떤 그림이냐에 따라서 등고선의 빨간 부분이 그림에 집중될 수 있는 만큼 그림이 차지하는 중요성이 크다고 할 수 있겠네요...(그래서 신문 기사나 블로그 포스트나 할 것 없이 되도록 잘 보이는 곳에 므흣한 사진을 올려놓으려고 하는 거겠구요...)

    2009/05/11 17:59
    • 웹초보  수정/삭제

      네.. 여기서 언급은 안했지만 원문을 보면 이미지 크기에 따라 눈의 집중도 틀려지더군요. 크면 클수록 더 많이 본다고 하니 잘 보이는 곳에 적당한 크기로 배치한다면 많은 집중 효과를 얻을 수 있겠죠.. ^^;

      2009/05/12 19:33
  9. 학주니  수정/삭제  댓글쓰기

    역시나 제목을 잘 뽑아야.. -.-;;;

    2009/05/11 18:57
    • 웹초보  수정/삭제

      ㅎㅎ.. 맞아요. 클릭하게 만드는 제목의 힘!!

      2009/05/12 19:33
  10. 와이엇  수정/삭제  댓글쓰기

    좋은 내용이네요. 블로거들에게 많은 참고가 되겠어요. 잘 봤습니다. ^^

    2009/05/11 20:21
    • 웹초보  수정/삭제

      조금이라도 도움이 되면 좋겠어요.. ^^;

      2009/05/12 19:36
  11. 탐진강  수정/삭제  댓글쓰기

    흥미로운 정보입니다.
    컨텐츠를 보기 쉽게 정리해주고, 쉽게 읽힐 수 있도록 해주는 것도 필요할 듯 합니다.
    좋은 정보 잘 보고 갑니다.

    2009/05/11 21:02
    • 웹초보  수정/삭제

      네.. 글의 내용뿐만 아니라 얼마나 효과적으로 읽힐 수 있는지 고려하는 것도 마찬가지로 중요한 것 같아요.. ^^;

      2009/05/12 19:37
  12. 이정기  수정/삭제  댓글쓰기

    안녕하세요 웹기획자 입니다.
    많은 부분 동감하며 좋은정보 감사합니다. 제이콥닐슨의 유저빌리티 테스트에서도 비슷한결과가
    많이 있는듯 합니다.

    그런데 그중에...
    '작은 폰트는 읽기에 더 집중하게 만든다.'는 잘 이해가 안됩니다.
    제이콥닐슨의 유저빌리티 테스트나 사용성전문가들은 폰트의 크기를 적당히 키워야 한다고 이야기하는데요 참 적당히란 말이 정확한 의미는 아니지만

    '작은 폰트는 읽기에 더 집중하게 만든다'의 논리적 뒷받침을 하는 보고서나 연구결과물이 있을지..궁금합니다.

    좋은정보 감사합니다.

    2009/05/11 23:32
    • 웹초보  수정/삭제

      글쎄요. 저도 원본글만을 참고해서 작성한거라 이 결과를 더 뒷받침해줄 자료가 있는지는 확인 못했습니다.
      그리고 말씀하신대로 어디까지나 적당히가 중요한 것 같은데요. 스크린의 다른 폰트에 비해 상대적으로 작을 때에 좀 더 집중하게 만들뿐.. 극단적으로 작은 폰트는 오히려 역효과만 유발하겠죠.. ^^

      2009/05/12 20:02
    • 코코은  수정/삭제

      저도 이 부분에서 약간 의아함을 느꼈더랬는데요.
      저한텐 폰트9가 읽기가 가장 편한거 같아요
      10도 괜찮고 ..하지만 8 이하로는...별로던데.

      그러나 12나 14 처럼 지나치게 크면 읽으려던 맘이 사라지더군요.

      참 흥미롭네요...다 ....수긍이 가요.너무 큰 글자가 그래서그랬구나.

      근데 이런건 있더군요.

      아고라에서 느낀건데요.각 단락마다 빨간글씨로 내용을 요약해놓으면
      긴 글이 세부적으로 읽혀지지가 않고 빨간색 요약만 좍~읽어지는 (정머시기라는 정치가 글....이런 식으로 올라오는데 전 단 한번도 그의 글을 세세하게 읽은 경험이 없네요.)

      2009/08/31 06:52
  13. Lemon-  수정/삭제  댓글쓰기

    항상 좋은정보에 감사드립니다. :)

    2009/05/12 02:20
    • 웹초보  수정/삭제

      칭찬해 주셔서 감사합니다.. ^^;

      2009/05/12 20:02
  14. webito  수정/삭제  댓글쓰기

    잘 정리하셨네요..잘 보고 갑니다^^

    2009/05/12 09:50
    • 웹초보  수정/삭제

      아무쪼록 좋게 봐주시니 감사합니다.. :)

      2009/05/12 20:03
  15. 제노  수정/삭제  댓글쓰기

    뉴스 사이트에서의 아이트래킹 자료는 흔치 않은데, 좋은 정보 감사합니다 :)

    2009/05/12 09:53
    • 웹초보  수정/삭제

      뉴스 사이트 관련 자료지만 블로그에도 적용하면 좋을 것 같아서요.. ^^;

      2009/05/12 20:04
  16. 그린데이  수정/삭제  댓글쓰기

    사람들은 광고배너를 의식적으로 무시하는 경향이 있다지요~ 그래픽 광고 보다는 텍스트 광고. 맞는 얘기 같습니다. ^^ 유용한 글 잘 읽었습니다. ~

    2009/05/12 13:08
    • 웹초보  수정/삭제

      텍스트 광고도 이제 많이 익숙해 졌지만.. 그래도 그래픽 광고보다는 효과가 월등하다죠.. ^^;

      2009/05/12 20:04
  17. 별바람  수정/삭제  댓글쓰기

    가끔 웹황제님 블로그에 뜨는 현란한 광고때문에 눈이 아플때도 있습니다 ㅋ 그래도 저보다 뛰어나신 웹황제님이라 특별히 용서해드리고 있습니다..^^

    2009/05/15 08:07
    • 웹초보  수정/삭제

      켁.. 상단의 TNM 광고 말씀하시는거군요.. 송구스럽습니다.. -_-;

      2009/05/19 19:34
  18. 고선생  수정/삭제  댓글쓰기

    좋은 글 잘 보고 갑니다. 감사합니다.

    2009/05/18 14:54
    • 웹초보  수정/삭제

      좋게 봐주셔서 감사합니다.. :)

      2009/05/19 19:34
  19. MissFlash  수정/삭제  댓글쓰기

    좋은 내용이네요~

    작은 글씨가 더 읽게 만든다는 사실은 좀 새로운 것 같습니다. :)

    2009/05/22 23:38
  20. 코코은  수정/삭제  댓글쓰기

    와우...구~~~~~~~~~~~~~~~~~~~~~ㅅ
    진짜 좋은 정보네요.평소에 이런거 전혀 개념없이
    블로그운영했는데....글쿠나...
    다음블로거이신 은시님 포스팅이 정말 간결하면서
    몰입해서 읽히게하는 깔끔한 글들이라...막연히..이거 좋다
    따라하고싶다.배워야지...하는 감동을 늘 받았어랬는데...이런거였구나.

    근데 트랙백은 어떻게 거는건가요.
    제가 제 블로그의 어느 포스팅에다가, 이 글을 트랙백으로 가져갈수 있나요.

    2009/08/31 06:41
    • 웹초보  수정/삭제

      댓글 시작하는 곳 보면 트랙백 주소 있잖아요. 그걸 복사하셔서 관련있다고 생각하는 코코은님의 글에서 저한테 쏴주시면 됩니다.. ^^;

      2009/08/31 18:52
  21. dough rounder  수정/삭제  댓글쓰기

    It'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!
    Do 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

    2012/01/05 17:27
[로그인][오픈아이디란?]





따끈따끈한 최신 소식을 트위터에서~


카테고리

전체 (1486)
뉴스 일반 (54)
뉴스 MS (56)
윈도우 7 뉴스 (63)
윈도우 7 팁 & 활용 (31)
PC 팁 & 활용 (28)
구글 뉴스 (62)
구글 팁 & 활용 (34)
구글 크롬 (26)
파이어폭스 뉴스 (64)
파이어폭스 팁 (37)
파이어폭스 확장기능 (87)
브라우저 일반 (24)
IE (14)
오페라 (13)
소프트웨어 뉴스 (94)
소프트웨어 소개 (156)
소프트웨어 활용 (18)
웹사이트 소개 & 활용 (176)
링크 모음 (60)
가젯 & 스타일 (118)
아이폰 (1)
블로그 팁 (34)
유머 (74)
게임 (41)
번역글 (5)
잡담 (22)
기타 (87)
http://file.tattermedia.com/media/image/plugin/tnm_badge_white.gif
Tatter & Media textcube get rss
올블로그 어워드 5th 엠블럼
2011-03-30_005923_1
2011-03-30_005602
위자드닷컴 추천블로그 | 웹초보의 Tech 2.1
2009 대한민국 블로그 어워드 IT/정보과학부문후보 엠블럼

웹초보의 Tech 2.1

웹초보's Blog is powered by Tattertools / Supported by Tatter & Media
Copyright by 웹초보 [ http://www.ringblog.com ]. All rights reserved.

Tattertools Tatter & Media DesignMyself!
웹초보's Blog is powered by Textcube. Designed by Qwer999. Supported by Tatter & Media.