출처 - http://blog.naver.com/ssoowoo/50024791819
-- 너무 좋은 내용인거 같아서 퍼왔어요. 혹 싫으시다면 삭제할게요 =ㅠ=
원제는 Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies by Christina Laun.
Eye-tracking에 대한 다양한 자료들이 있지만, 실제로 디자인에 적용할 단계가 오면 "그래서 어떻게 하지?"라는 고민을 하기 마련이다. 여러가지 Eye-tracking 연구에서 나온 Insight들만 모아서 정리해 놓은 포스트가 있어 소개한다. 23가지 교훈(?) 정도로 정리하고 있는데, 상당부분 공감하는 부분이고, 일부는 흥미로운 것도 있다. 원문의 내용을 재그룹핑하고 커멘트를 살짝 추가했다.
Web Writing
1. 텍스트가 그래픽 이미지 요소보다 시선을 더 잡아끈다. Text attracts attention before graphics.
재미있는 결과다. 아무래도 이미지 배너들이 현란한 환경에서 사용자들이 길들여지다 보니, 발생하는 현재의 병폐에 기인한 게 아닌가 싶다. 그래서인지 아래에도 언급되어 있지만 구글 애드센스와 같은 텍스트형 배너가 더 효과적이라고 한다.
2. 순서를 나타내기 위해서 숫자를 쓰는 것이 좋다. Fancy formatting and fonts are ignored.
당연한 거 같은데... ^^; 컨텐츠 작성 시에 '하나, 중얼중얼 / 둘, 중얼중얼' 이렇게 쓰는 것보다 '1, 중얼중얼 / 2, 중얼중얼'이렇게 쓰는 것이 사용자들이 정보를 찾기 위해 스캐닝하는데 도움이 된다는 얘기다.
3. 텍스트의 사이즈는 페이지를 열람하는 패턴에 영향을 끼친다. Type size influences viewing behavior.
텍스트의 사이즈가 작아지면 집중하게 되고, 텍스트의 사이즈가 커지면 스캐닝을 주로 한다고 하는데... 그럴 수도 있을 것 같지만... 정말 그럴까? 일반화되기는 어려운, 변수가 많은 이슈인 듯 하다.
4. 사용자는 관심이 있는 내용에 대해서만 서브타이틀을 본다. Users only look at a sub headline if it interests them.
당연!
5. 일반적으로 사용자들은 페이지 하단은 그냥 스윽 훑어본다. People generally scan lower portions of the page.
상단은 그래도 좀 찬찬히 보지만, 하단은 보는 듯 마는 듯 훑어본단다. 그래서 F 패턴이 나오겠지. 역으로 하단의 컨텐츠에 주요한 키워드에 대해서 시각적으로 강조한다면 이를 방지할 수도 있다는 얘기도 하고 있다.
6. 짧은 단락이 긴 단락보다 효과적이다. Shorter paragraphs perform better than long ones.
짧고 간결한 Web writing이 필요하다는 얘기다. 어떠한 사용자도 길고 지루한 텍스트를 읽지는 않는다. 따라서 단락이 길어진다면 적절하게 끊어주는 것도 센스.
7. 헤드라인에 먼저 시선이 간다. Headings draw the eye.
역시 당연!
8. 목록 형태가 줄글 보다 유리하다. Lists hold reader attention longer.
당연한 얘기이긴한데, 실제로 Web writing을 할 때 잘 고려하지 않는 요소이기도 하다. 긴 설명을 목록으로 간결하게 만들어서 제공할 수 있는 센스와 섬세함이 필요하다.
9. 긴 줄글은 피해라. Large blocks of text are avoided.
큰 텍스트 덩어리라고 판단이 되면 점프하고 다른 짧은 내용들을 본다는 얘기. 따라서 긴 줄글을 작은 여러 개의 단락으로 나누어 쓸 필요가 있다.
10. 볼드, 밑줄, 색상 텍스트 등을 활용한 포맷이 보기에 더 쉽다. Formatting can draw attention.
역시 스캐닝하기에 적절하게 만들어진 웹문서가 훨씬 가독성이 높고 사용자들이 읽도록 동기부여를 하는 것은 사실이다.
Page Layout & Visual Design
11. 페이지 로딩 초기에 시선은 좌측 상단에 머무른다. Initial eye movement focuses on the upper left corner of the page.
일반적인 경우에 동의한다. 하지만, 재방문율이 높은 사이트의 경우, 주로 사용하는 기능이 있는 위치에 시선이 머무를 것 같은데... 네이버 홈페이지에서 검색영역에 시선이 가장 먼저 가는 것처럼.
12. 페이지의 아래쪽을 훑어보기 전에 좌측 상단과 상단영역을 살펴본다. Users initially look at the top left and upper portion of the page before moving down and to the right.
동의! 그래서 F형태의 시선흐름이 나타나게 된다. (Jakob Nielsen의 연구 자로 참고)
13. 사용자들은 배너를 무시하는 경향이 있다. Readers ignore banners.
당연한 내용인데, 첨언을 하자면... 사용자가 한 번 배너영역이라고 인지하면 의식적으로 이를 피하는 패턴이 나타난다. 실제로 Eye gaze패턴을 보면, 배너 영역만 뻥 뚫리는 경우도 종종 발생한다.
14. 2개이상의 컬럼을 사용하는 것보다 하나의 컬럼을 사용하는 것이 유리하다. One-column formats perform better in eye-fixation than multi-column formats.
복잡한 레이아웃보다는 한 눈에 스윽 훑어볼 수 있는 레이아웃이 좋다는 얘기
15. 깨끗하고 깔끔한 인물 이미지가 효과적이다. Clean, clear faces in images attract more eye fixation.
인물 사진을 사용할 거라면, 깨끗하고 깔끔한 (예쁜?) 인물의 이미지를 사용할 것을 권장하고 있다. 가상의 인물이 아닌 진짜 인물이어야하고 모델 사진은 사용하지 않는 것이 좋단다.
16. 큰 이미지가 효과적이다. Bigger images get more attention.
기왕 이미지를 쓸 거라면 큰 걸 쓰라는 얘기다. 하지만 중국과 같은 상황에서는 글쎄... 가능할까?
17. 사용자들은 버튼이나 메뉴를 찾는데 시간을 많이 소비한다. Users spend a lot of time looking at buttons and menus.
네비게이션 요소들을 중요하게 생각한다는 얘기. 그리고 쉽게 찾을 수 있어야 한다는 얘기. 점점 Interaction이 Rich해져가는 현재 트렌드에서 네비게이션 요소들이 Contextual하게 변하면서 종종 한 눈에 쉽게 찾기 어려운 경우가 있는데... 고민해볼만한 이슈인 것 같다.
18. 흰색 배경을 사용하라. White space is good.
텍스트와 배경이 쉽게 구분되어서 가독성도 좋아지고 컨텐츠가 돋보일 수 있단다.
19. 네비게이션은 상단에 위치하는 것이 좋다. Navigation tools work better when placed at the top of the page.
아무래도 다른 내용들을 종합하면 이 결론이 나오는 것 같은데. ^^;
Advertisement
* 아무래도 Eye-tracking이라는 장비 자체가 시선의 경로를 추적하는 것인만큼 배너의 효과 측정에 많이 사용되어서 이에 관련된 내용이 많다.
20. 사용자들은 화려한 요소들이나 폰트들을 무시한다. Fancy formatting and fonts are ignored.
사용자들은 화려한 요소들에는 정보가 없거나 광고이지 않을까하고 생각한다고 한다. 일리가 있는 듯...
21. 상단 좌측에 위치한 배너가 효과적이다. Ads in the top and left portions of a page will receive the most eye fixation.
당연! 배너의 위치를 고민할 때 이러한 요소를 고민할 필요가 있다. 하지만, 웹사이트의 Identity는 상단좌측에서 표현되기 때문에 심사숙고할 필요도 있다.
22. 중요한 컨텐츠 다음에 위치하는 배너가 효과적이다. Ads placed next to the best content are seen more often.
그래서 뉴스사이트에 컨텐츠 중간 삽입형 배너가 유행하고 있는지도...
23. 텍스트형 배너가 더욱 효과적이다. Text ads were viewed mostly intently of all types tested.
구글 애드센스에 힘을 싣어주는 결과다. ^^; 흥미로운 결과.
아래는 Eye-tracking과 관련된 연구자료 (Jakob Nielsen)
- 언제부터인가 그는 자기 리포트 내용을 다 공개안하고 팔기 시작해서 항상 아티클이 맛배기식인거 같아 좀 그렇다. -_-;;
1) Eyetracking Study of Web Readers (쪼꼼 오래된 자료)
2) Eyetracking Research (6개의 리포트 맛배기가 링크되어 있다.)
3) F-shaped Pattern For Reading Web Content
출처 - http://blog.naver.com/ssoowoo/50024791819
-- 너무 좋은 내용인거 같아서 퍼왔어요. 혹 싫으시다면 삭제할게요 =ㅠ=
원제는 Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies by Christina Laun.
Eye-tracking에 대한 다양한 자료들이 있지만, 실제로 디자인에 적용할 단계가 오면 "그래서 어떻게 하지?"라는 고민을 하기 마련이다. 여러가지 Eye-tracking 연구에서 나온 Insight들만 모아서 정리해 놓은 포스트가 있어 소개한다. 23가지 교훈(?) 정도로 정리하고 있는데, 상당부분 공감하는 부분이고, 일부는 흥미로운 것도 있다. 원문의 내용을 재그룹핑하고 커멘트를 살짝 추가했다.
Web Writing
1. 텍스트가 그래픽 이미지 요소보다 시선을 더 잡아끈다. Text attracts attention before graphics.
재미있는 결과다. 아무래도 이미지 배너들이 현란한 환경에서 사용자들이 길들여지다 보니, 발생하는 현재의 병폐에 기인한 게 아닌가 싶다. 그래서인지 아래에도 언급되어 있지만 구글 애드센스와 같은 텍스트형 배너가 더 효과적이라고 한다.
2. 순서를 나타내기 위해서 숫자를 쓰는 것이 좋다. Fancy formatting and fonts are ignored.
당연한 거 같은데... ^^; 컨텐츠 작성 시에 '하나, 중얼중얼 / 둘, 중얼중얼' 이렇게 쓰는 것보다 '1, 중얼중얼 / 2, 중얼중얼'이렇게 쓰는 것이 사용자들이 정보를 찾기 위해 스캐닝하는데 도움이 된다는 얘기다.
3. 텍스트의 사이즈는 페이지를 열람하는 패턴에 영향을 끼친다. Type size influences viewing behavior.
텍스트의 사이즈가 작아지면 집중하게 되고, 텍스트의 사이즈가 커지면 스캐닝을 주로 한다고 하는데... 그럴 수도 있을 것 같지만... 정말 그럴까? 일반화되기는 어려운, 변수가 많은 이슈인 듯 하다.
4. 사용자는 관심이 있는 내용에 대해서만 서브타이틀을 본다. Users only look at a sub headline if it interests them.
당연!
5. 일반적으로 사용자들은 페이지 하단은 그냥 스윽 훑어본다. People generally scan lower portions of the page.
상단은 그래도 좀 찬찬히 보지만, 하단은 보는 듯 마는 듯 훑어본단다. 그래서 F 패턴이 나오겠지. 역으로 하단의 컨텐츠에 주요한 키워드에 대해서 시각적으로 강조한다면 이를 방지할 수도 있다는 얘기도 하고 있다.
6. 짧은 단락이 긴 단락보다 효과적이다. Shorter paragraphs perform better than long ones.
짧고 간결한 Web writing이 필요하다는 얘기다. 어떠한 사용자도 길고 지루한 텍스트를 읽지는 않는다. 따라서 단락이 길어진다면 적절하게 끊어주는 것도 센스.
7. 헤드라인에 먼저 시선이 간다. Headings draw the eye.
역시 당연!
8. 목록 형태가 줄글 보다 유리하다. Lists hold reader attention longer.
당연한 얘기이긴한데, 실제로 Web writing을 할 때 잘 고려하지 않는 요소이기도 하다. 긴 설명을 목록으로 간결하게 만들어서 제공할 수 있는 센스와 섬세함이 필요하다.
9. 긴 줄글은 피해라. Large blocks of text are avoided.
큰 텍스트 덩어리라고 판단이 되면 점프하고 다른 짧은 내용들을 본다는 얘기. 따라서 긴 줄글을 작은 여러 개의 단락으로 나누어 쓸 필요가 있다.
10. 볼드, 밑줄, 색상 텍스트 등을 활용한 포맷이 보기에 더 쉽다. Formatting can draw attention.
역시 스캐닝하기에 적절하게 만들어진 웹문서가 훨씬 가독성이 높고 사용자들이 읽도록 동기부여를 하는 것은 사실이다.
Page Layout & Visual Design
11. 페이지 로딩 초기에 시선은 좌측 상단에 머무른다. Initial eye movement focuses on the upper left corner of the page.
일반적인 경우에 동의한다. 하지만, 재방문율이 높은 사이트의 경우, 주로 사용하는 기능이 있는 위치에 시선이 머무를 것 같은데... 네이버 홈페이지에서 검색영역에 시선이 가장 먼저 가는 것처럼.
12. 페이지의 아래쪽을 훑어보기 전에 좌측 상단과 상단영역을 살펴본다. Users initially look at the top left and upper portion of the page before moving down and to the right.
동의! 그래서 F형태의 시선흐름이 나타나게 된다. (Jakob Nielsen의 연구 자로 참고)
13. 사용자들은 배너를 무시하는 경향이 있다. Readers ignore banners.
당연한 내용인데, 첨언을 하자면... 사용자가 한 번 배너영역이라고 인지하면 의식적으로 이를 피하는 패턴이 나타난다. 실제로 Eye gaze패턴을 보면, 배너 영역만 뻥 뚫리는 경우도 종종 발생한다.
14. 2개이상의 컬럼을 사용하는 것보다 하나의 컬럼을 사용하는 것이 유리하다. One-column formats perform better in eye-fixation than multi-column formats.
복잡한 레이아웃보다는 한 눈에 스윽 훑어볼 수 있는 레이아웃이 좋다는 얘기
15. 깨끗하고 깔끔한 인물 이미지가 효과적이다. Clean, clear faces in images attract more eye fixation.
인물 사진을 사용할 거라면, 깨끗하고 깔끔한 (예쁜?) 인물의 이미지를 사용할 것을 권장하고 있다. 가상의 인물이 아닌 진짜 인물이어야하고 모델 사진은 사용하지 않는 것이 좋단다.
16. 큰 이미지가 효과적이다. Bigger images get more attention.
기왕 이미지를 쓸 거라면 큰 걸 쓰라는 얘기다. 하지만 중국과 같은 상황에서는 글쎄... 가능할까?
17. 사용자들은 버튼이나 메뉴를 찾는데 시간을 많이 소비한다. Users spend a lot of time looking at buttons and menus.
네비게이션 요소들을 중요하게 생각한다는 얘기. 그리고 쉽게 찾을 수 있어야 한다는 얘기. 점점 Interaction이 Rich해져가는 현재 트렌드에서 네비게이션 요소들이 Contextual하게 변하면서 종종 한 눈에 쉽게 찾기 어려운 경우가 있는데... 고민해볼만한 이슈인 것 같다.
18. 흰색 배경을 사용하라. White space is good.
텍스트와 배경이 쉽게 구분되어서 가독성도 좋아지고 컨텐츠가 돋보일 수 있단다.
19. 네비게이션은 상단에 위치하는 것이 좋다. Navigation tools work better when placed at the top of the page.
아무래도 다른 내용들을 종합하면 이 결론이 나오는 것 같은데. ^^;
Advertisement
* 아무래도 Eye-tracking이라는 장비 자체가 시선의 경로를 추적하는 것인만큼 배너의 효과 측정에 많이 사용되어서 이에 관련된 내용이 많다.
20. 사용자들은 화려한 요소들이나 폰트들을 무시한다. Fancy formatting and fonts are ignored.
사용자들은 화려한 요소들에는 정보가 없거나 광고이지 않을까하고 생각한다고 한다. 일리가 있는 듯...
21. 상단 좌측에 위치한 배너가 효과적이다. Ads in the top and left portions of a page will receive the most eye fixation.
당연! 배너의 위치를 고민할 때 이러한 요소를 고민할 필요가 있다. 하지만, 웹사이트의 Identity는 상단좌측에서 표현되기 때문에 심사숙고할 필요도 있다.
22. 중요한 컨텐츠 다음에 위치하는 배너가 효과적이다. Ads placed next to the best content are seen more often.
그래서 뉴스사이트에 컨텐츠 중간 삽입형 배너가 유행하고 있는지도...
23. 텍스트형 배너가 더욱 효과적이다. Text ads were viewed mostly intently of all types tested.
구글 애드센스에 힘을 싣어주는 결과다. ^^; 흥미로운 결과.
아래는 Eye-tracking과 관련된 연구자료 (Jakob Nielsen)
- 언제부터인가 그는 자기 리포트 내용을 다 공개안하고 팔기 시작해서 항상 아티클이 맛배기식인거 같아 좀 그렇다. -_-;;
1) Eyetracking Study of Web Readers (쪼꼼 오래된 자료)
2) Eyetracking Research (6개의 리포트 맛배기가 링크되어 있다.)
3) F-shaped Pattern For Reading Web Content
출처 - http://blog.naver.com/ssoowoo/50024791819
