2004년 아마 봄쯤에, UPA에 참석을 하였다가 Eye tracking 시연을 보았습니다.
학교에서 보았던 심리학과에서 쓰던 거대하고 불편했던 Eye tracking 만을 알았다가 Tobii사에서 나온 표준화되고 간편한 Eye tracking 장비를 보고 한번 써봐야 겠다는 생각이 들어 테스틀 해보았던 적이 있었습니다

뻔한 결론이었지만 중요한 정보가 있는곳을 중점적으로 보았고, 광고는 거의 보지 않았습니다. (사용성 평가와 같은 과제를 주어서 그랬을 수도) Tobii 장점이 결과에 대한 시각화가 매우 쉽게 되어 있어 저 같은 초보자도 금방 사용법을 익힐수가 있었네요~ 다만 눈동자가 빠르게 움직일때 움직임을 가끔 놓치는 경우가 있었는데 이건 저렴한 장비의 한계인듯 싶습니다.

LCD 모니터 일체형이었고, 카메라를 따로 구매해서 Digital TV로도 테스트가 가능하였습니다. 모바일은 거의 힘들듯 보였고요, 하더라도 Screen size가 매우 협소해 사후 data 보정에 많은 노력이 들어가야 할 것 같았습니다. 재미있는건 남자던 여자던 이미중 여성 이미지에 대해 시선이 자주 간다는 사실과, 의외로 자신이 인지하지 못하는 영역도 많이 보았습니다. 디자인에 적용할 수 있는 유용했던 점은, 빈도를 계산해서 등고선 처럼 보여주어 레이아웃의 타당성을 검증할 수 있었고, 시선이 움직이는 순서가 나와서 이용 흐름이 잘 설계되었는지도 확인이 가능했습니다. 나중에 광고효과 측정에도 유용할 듯 합니다.

http://www.Tobii.com

이용량에서도 나타나지만 실제로 이미지보다 텍스트가 이용자의 주목을 더 끕니다. (이건 모바일도 마찬가지인듯, 먼가 훅인 하는데는 텍스트가 가장 효과적인 것 같습니다), Navigation 관련 도구들은 가능하면 최상단에 배치를 하는것이 바람직하고요, 배너/광고는 절대 거의 보지를 않네요, 이미지는 크면 클수록 잘보지만 텍스트는 일정 사이즈가 넘으면 부정적인 효과가가 더 큽니다. 의외로 여백 White Background가 의미가 있습니다. 아마 빡빡한 사이트를 보여주면 전체가 다 뭉그러져서 전체를 다 안보는 경우도 생기곤 합니다. 역시 Simplicity가 중요하고 과욕은 금물입니다~




Refer : http://www.virtualhosting.com/blog/2007/scientific-web-design-23-actionable-lessons-from-eye-tracking-studies/

Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies

By Christina Laun

Eye-tracking studies are hot in the web design world, but it can be hard to figure out how to translate the results of these studies into real design implementations. These are a few tips from eye-tracking studies that you can use to improve the design of your webpage.

1. Text attracts attention before graphics. Contrary to what you might think, the first thing users look at on a website isn’t the images. Most casual users will be coming to your site looking for information, not images, so make sure your website is designed so that the most important parts of your text are what is most prominent.
2. Initial eye movement focuses on the upper left corner of the page. It shouldn’t be surprising that users look at webpages in this way, as most computer applications are designed with the top left hand side as the main focus. You can do your website a favor by keeping this format in mind when creating a design. Remember, while you want to have a personal style, you have to keep the habits of your readers in mind if you want your site to be successful.
3. Users initially look at the top left and upper portion of the page before moving down and to the right. Users were found to generally scan webpages in the shape of an ‘F’. Make sure the important elements of your content are located in these key areas to keep readers engaged. Place headlines, subheadlines, bullet points, and highlighted text along these lines so readers will be enticed to read further.
4. Readers ignore banners. Ads may be the bread and butter of your site, but studies have shown that readers largely ignore banner ads, often focusing for only a fraction of a second. If you’re trying to make money from ads, you need to be creative in your ad placement or in the types of ads you have on your site.
5. Fancy formatting and fonts are ignored. Why? Because users assume they are ads and don’t have the information they need. In fact, studies showed that users had difficulty finding information in large colored letters formatted in this way because visual clues told them to ignore it. Keep your site streamlined and not so shiny that important elements will be glossed over.
6. Show numbers as numerals. Readers will find it much easier to find factual information on your site if you use numerals instead of writing out numbers. Remember, you’re writing for readers that are going to be primarily scanning your site, so make it easier for them to find what they need and keep them interested.
7. Type size influences viewing behavior. Want to change how people look at your page? Change the size of your font. Smaller fonts increase focused viewing behavior while larger fonts encourage scanning. Depending on your needs, you may want more of one than the other.
8. Users only look at a sub headline if it interests them. Don’t put in subheadlines just to stick to a particular format–make sure that they are relevant and interesting. You can also help yourself out by making sure they include keywords that will bring search engines to your site.
9. People generally scan lower portions of the page. You can use this to your advantage if you give readers something to latch onto when they’re scanning your page. Highlight certain sections or create bulleted lists so information is easy to find and read on your page.
10. Shorter paragraphs perform better than long ones. Information on your page should be designed for the short attention span of most Internet users. Keep paragraphs and sentences short unless context mandates otherwise, such as descriptions of products on an e-commerce sites.
11. One-column formats perform better in eye-fixation than multi-column formats. Don’t overwhelm visitors to your site with too much information. Simpler really is better in some cases. Multiple columns will more than likely by ignored by users, so eliminate clutter from the get-go.
12. Ads in the top and left portions of a page will receive the most eye fixation. If you’re going to place ads on your site, try integrating them into the top left portion of your page, as those will get the most visual attention. Of course, just because readers see them there doesn’t mean they’ll click on them, so don’t sacrifice design just to gain some extra visibility.
13. Ads placed next to the best content are seen more often. If you want to get your ads seen and hopefully clicked on, incorporate them into your design in a way that places them near the most interesting elements of your content. Users will still be able to find what they need, but you’ll gain an advantage in advertising.
14. Text ads were viewed mostly intently of all types tested. Like we said earlier, the average Internet user generally doesn’t waste much time looking at things that immediately appear to be ads. That’s why text ads perform so much better. They aren’t distracting and blend in with the rest of the content on the page, making them less visually irritating to the reader and ultimately more successful.
15. Bigger images get more attention. If you are going to use images on your page, bigger is better. People are more interested in an image where they can see details and information clearly. Just make sure that any image you are using is particularly relevant to your text, otherwise it will most likely be ignored. Most readers have high-speed connections these days so don’t be afraid to stick a few larger photos on your Web host.
16. Clean, clear faces in images attract more eye fixation. While they might look good with your design, abstract and artsy photos aren’t going to garner much reader attention. If you’re using photos with people in them, make sure they are clear, easy to read shots. It should also be noted that photos with “real” people, not models, perform better.
17. Headings draw the eye. One of the first things readers have been found to look at on a webpage are headlines. Make sure yours are unobstructed by other items on the page and that they are engaging enough to draw the reader into looking further through your site.
18. Users spend a lot of time looking at buttons and menus. Because of this, you’ll want to put in some extra time making sure that yours are well-designed. After all, they not only draw a lot of eye fixation, they are one of the most important elements of your site.
19. Lists hold reader attention longer. One way you can break up the paragraphs in your content and keep users looking through your site is to make frequent use of a list format for your articles. Use numbers or bullet points to highlight important information within your content. It will make your site more scannable and easier for users to find the information that they’re looking for.
20. Large blocks of text are avoided. Studies have shown that that your average Web visitor isn’t going to take the time to study large blocks of text no matter how informative or well-written they might be. Because of this, you need to break up these larger blocks of text into smaller paragraphs. Highlighting specific areas and pulling out bullet points can also help to keep user attention.
21. Formatting can draw attention. To keep users from skipping over the main and most important points in your content use bold, capitalized, italicized, colored, and underlined text. Use these things judiciously however, as too much will make your page hard to read and send readers away.
22. White space is good. While it might be tempting to put something in every corner of your page, it’s actually better to leave some of your site free of any text. Sites with too much going on tend to overwhelm users and they ignored a large part of the content. So keep things simple and allow some visual open space for readers to rest their eyes.
23. Navigation tools work better when placed at the top of the page. Ideally, you don’t want readers to just look at the initial page they came to on your site, you want them to stick around and look at other interesting things as well. You can help send them in the right direction by making your navigation easy to find and use by placing it at the top of the page.

 

1) Daum에 있을 때 만들었던 Field Study에 대한 아주 기초적인 자료도 첨부 PDF파일로 첨부했습니다.

    ".... 자료처리는 크게 4단계를 거치게 된다. 첫번째 군집(Cluster)은 원 데이터를 그룹화 시키
     며 이를 구조화 시키는 과정이며, 이후 이들의 차원(dimension)을 정하는 과정이 있고 이러
     한 것의 패턴화를 시키는 과정 (metrics)이 있고 이를 연계해서 이론을 만들어내는 network
     과정이 있다.
     Clustering > Discovering > Metrics > Network...."

     상세한 내용은 첨부파일을 참고하세요

--------------------------------------------------------------------------
2) 영문으로 된 자료입니다. 자세한 내용은 아래 URL로~~

http://liftlab.com/think/nova/2008/08/20/ethnographic-outputs-for-design/

Ethnographic outputs for design

처음 학교에서 배웠던 사용자 조사 방법론은 설문(survey) 였다. 지금은 생소하지만 당시에는 트랜드였던 웹캐스팅(web caseting), 이름만 들어도 알만한 바나나TV를 비롯한 성인 방송이나 주병진이 만들었던 프랑켄 슈타인을 접목한 사이트도 있었고 (http: //www.frank.co.kr; 들어가지는 마시라 현재 확인을 해보니 성인사이트로 이동을ㅡㅡ;) 물론 교육 사이트도 상당히 많았었다. 이런 웹캐스팅 사이트 사용자들을 대상으로 만족도나 UI 관련 설문을 해서 이걸 구조방정식 모델중 하나인 (어떻게 보면 당근 알만한 정답을 많은 시간과 노력을 기울여모델링을 해준다) 리즈렐을 통해 열심히 돌렸던 기억이 난다. 사실은 지금도 설문이나 이런 류의 통계적 기법에는 매우 취약하다. 아마도 내가 잘 몰라서 그렇겠지만 이런 류의 분석은 실무에 적용하기에는 난이도나 비용이 너무 드는 반면에 얻게되는 실익은 거의 없다고 해도 과언은 아니다. 아마도 학문적 가치나 정교함에서 전문 분야에서 활용이 되면 좋을 것 같다. 일주일이 넘게 걸려한 정교한 설문 및 분석과 한시간이 걸려 얻은 Quick & Dirty 방법을 적용한 (쉽게 말하면 대충한) 설문 결과가 달라지는 경우는 UI 업계에서는 거의 없을 것 같다.

사설이 길었지만, 설문을 시작으로 프로토콜 분석 (Protocol analysis; 이 방법론 역시 실용적이지는 못하다), 각종 심리학적 실험, 간단한 필드 리서치를 끝으로 학교에서의 사용자 조사 수업은 끝났다. 지금 돌이켜 보면 배웠던 양도 양이지만, 교수님의 독특한 약간의 경쟁과 석사 1학기 과정학생에게도 맡기는 PM 역할로 인해 알지못하는 새로운 방법론이나 과제에 대한 적응력이 무척는 것 같다. (지도교수님께 감사를 ^^;)

회사에 들어와서는 주어긴 여건의 제한과 계속 바뀌는 프로젝트와 환경으로 본의아니게 다양한 방법론을 수행할 수 밖에 없었다. 특히 혼자서 습득을 하기에는 필드 리서치에 대한 경험이 없었던 것은 정말 아쉬었다. 다른 방법론과는 달리 시간과 비용이 많이 드는 필드 리서치를 회사에서 학습의 기회를 갖기는 거의 불가능했다. 인터넷과 논문 그리고 몇번의 세미나를 통해 듣긴했지만, 이론에서 실무로 이어지는 부분은 항상 들을 수가 없어 개인적인 툴킷을 몇개 만들어 사용하고 있지만 제대로 하고 있는지는 잘 ㅡㅡ;

몇년전쯤 책에서 본 방법론을 사사분면에 분류를 한 그림이다. John M. Carroll이 편집했던 4년전쯤 책인것 같다. 제목이 Design Research로 기억이 난다. Daum에 있었을때 아마도 Lab 공유용으로 이미지를 만들어 뒀던것 같네요!

 
우선 사용자 조사는 양적조사(Quantitative) 와 질적조사(Qualitative)로 나뉩니다. 처음엔 양적조사가 더 어렵게 느껴지지만, 하다보면 질적조사가 들어가는 시간이나 분석의 난이도가 훨씬 높다는 생각이 차차 듭니다. 설문조사나 통계분석 그리고 비디오 촬영을 통한 프로토콜 분석등이 양적 조사에 속하고, 관찰, 인터뷰, 사용성 테스트, 문화적 분석 등은 질적 조사에 속합니다. 사용성 분석을 학교에서는 간혹 통계적 분석을 적용하기도 하는데 참여자 수가 너무 적고 실험조건의 전반적인 타당성(validity)가 떨어져서 통계적 분석이 의미있는 분석이라고 보긴 어렵고 보통 참여자의 코멘트나 개선사항 도출등이 의미있는 결과로 활용됩니다.

다음으론 시각적 분석과 언어적 분석으로 나뉩니다. 비디오 분석 및 관찰같이 시각적인 수집이 이루어지는 경우 시작적 분석으로 설문/언어/인터뷰/사용성 테스트 등과 같이 사용자의 말이 중요한 수집 및 판단 근거가 된느 경우를 언어적 분석이라고 합니다. 아마도 사용성 테스트와 인터뷰가 매우 비슷하다고 생각이 될 수 있는데요, 실제로 크게 다르지는 않습니다.

혹시 공부하시는 분들을 위해 시험에 나올지도 모르는 정량적 분석과 정성적 분석의 차이를 정리해 보았습니다. ^^

구분	정량적	정성적
진행 방법(method)	사전에 결정된 (predetermined)	Ad hoc, opportunistic
샘플링(sampling)	랜덤으로 추출된 모집단 대표가 가능한 큰 규모의 참여자 Large, Representative, Random	전략적으로 선택한 적은수의 참여자  Small, Strategic
분석 (data analysis)	통계의 ANOVA등 정밀한 방법 Standardized measures allow efficient data reduction Facilitates combining, comparing across cases	경우에 따라, 분석자에 따라 다름 Volume of raw data overwhelming, often of unclear pertinence Data reduction not straight-forward Non-standardized, non-equivalent across cases
평가(evaluationn)	Standards of quality exist, looks objectives, degree of support for inferences open to scrutiny	Inferences seem to come from “invisible” intuitions, hard to assess quality
Focus	Questions should be specified in advanced, based on theory Must be narrowed, sometimes ridiculously Isolates variables, or task “black box” approach	Initial focus broad, open to possibility we may not know right questions in advance Broad, holistic, explanatory, tries to grasp complex interactions of factors
Aimed at	What? Numerical Abstractions Characterize the population	How & why dynamics Rich, realistic representations Characterize the “design space”

결론적으로 정량적 방법은 통계적 의미를 찾아 이를 일반화하는데 유용하고 정성적 방법은 UI 개발에 있어 실무적인 인사이트를 찾는데 유용합니다. 시간이 나는대로 사용자 방법론 별로 상세한 설명자료를 올리도록 하겠습니다.