랩발제 김수미 20131002

Predicting Users’ First Impressions of Website Aesthetics With a Quantification of Perceived Visual Complexity and Colorfulness- Katharina Reinecke, Tom Yeh, Luke Miratrix, Rahmatri Mardiko, Yuechen Zhao,Jenny Liu, Krzysztof Z. Gajos

/김수미x 2013 Fall

13년 10월 2일 수요일

Predicting Users’ First Impressions of Website AestheticsWith a Quantification of

Perceived Visual Complexity and Colorfulness-‐ CHI 2013 Best Paper

Department of Digital Contents ConvergenceUX Lab.

Kim, Sumi


Yang Wang Intelligent and Interactive Systems group at Harvard School of Engineering and Applied Sciences

Human-Computer Interaction, Intelligent User Interfaces, Cross-Cultural Usability

Tom Yeh Assistant Professor University of Colorado Boulder

causal effect analysis, graphical models, nonparametric analysis of randomized experiments, discretizing data as a non-parametric approach, sparse regression methods

Interactive computer vision algorithms, novel search, automation applications, human-centered computing, computer vision, and software engineering

Luke MiratrixAssistant Professor of Statistics

Authors


http://iis.seas.harvard.edu/

http://iis.seas.harvard.edu/

http://seas.harvard.edu/

http://seas.harvard.edu/

Page에 머무를 것인가..?

Background

미적인 인상 0.5초 만에 결정


Background

미적인 인상 0.5초 만에 결정

디자인 심미성 측정방법 부족디자인 질적 가이드가 대다수

Page에 머무를 것인가..?

사용자 웹의 미적 첫인상을 예측하는 정량적모델 제시


Introduction

1. 선행연구 - 이미지 특징 요소(Colorfulness, Visual Complexity) - 첫인상에 영향을 미치는 요소

2. 2가지 실험 - 채도(Colorfulness), 시각적 복잡도(Visual Complexity) 정량화 - 모델의 채도, 시각적 복잡도로부터의 첫인상 예측 모델

3. 타당성 검증 - Visual appeal에 대한 예측자(Predictor)로서의 타당성 검증

사용자의 웹 선호도를 예측하는 정량적모델 제시(미적 첫인상) ... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?


Introduction

. 모형이 무리없이 추정되고 활용에 적합한지 검토 . 결정계수를 활용한 R-square, Adjust R-square 활용

다중선형회기분석 모형 활용(multiple linear regression model) - 2개 이상의 독립변수로 현상을 설명하는 모형 - 가정: 종속변수(Y)와 독립변수(X1,X2,X3...) 간에는 선형 함수관계가 존재

- 분석과정

모형 설정

모형 추론

적합성 검토

. 선행연구를 통해 가설 설정 . 변수 설정

. 모형의 추정치(b)를 활용해 모수(β)를 추정하고 검정 . 추정: 종속변수와 독립변수와의 관계의 정도 주로 최소제곱법(OLS,Ordinary Least Square) 활용 . 검정: 신뢰 정도를 객관화 회귀모형 추정량은 t분포를 따르므로 이를 활용한 F-test로 검정


Introduction

1. 선행연구 - 이미지 특징 요소(Colorfulness, Visual Complexity) - 첫인상에 영향을 미치는 요소

2. 2가지 실험 - 채도(Colorfulness), 시각적 복잡도(Visual Complexity) 정량화 - 모델의 채도, 시각적 복잡도로부터의 첫인상 예측 모델

3. 타당성 검증 - Visual appeal에 대한 예측자(Predictor)로서의 타당성 검증

모형 설정

모형 추론

적합성 검토

사용자의 웹 선호도를 예측하는 정량적모델 제시(미적 첫인상) ... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?


Quntifying Colorfulness & Complexity

Colorfulness- 색상은 신뢰, 신의, 구매의사 등에 영향- 인지 채도: 어떻게 분포했나(distribution)? 주변 색상과의 결합은(composition)?- 다양한 컬러 모델 활용 (eg.HSV)

< 색상(H), 채도(S), 명도(V) >

Visual Complexity- 너무 단순하거나 복잡해도 인지도, 선호도가 떨어짐(Negative U곡선 형태를 보임)- 다양한 방식으로 시각적 인지 수행

< 게슈탈트(Gestalt) 인지모델 >



Computing Procedure

1. 450개의 웹사이트의 스크린샷(1024*768) 수집

2. 기본화면 픽셀 계산 - W3C의 기본 16개의 색 중심 + HSV 기반 평균 픽셀값 계산

3. 화면 분해 - 색상(color)과 강도(intensity)의 불규칙도(entropy)를 측정해서 일정 수준 이하로 떨어질 때까지 분해

4. Image metrics 형성 - 대칭, 균형, 평형을 고려해 image metrics를 위한 소스코딩(http://iis.seas.harvard.edu/resources/)

http://iis.seas.harvard.edu/resources/aesthetics-chi13/


http://iis.seas.harvard.edu/resources/

http://iis.seas.harvard.edu/resources/






Computing Procedure- 이미지를 공간기반, 쿼드트리 방식으로 분해해서 정보밀도 측정 및 비교- 많이 분할될 수록 조잡하고 전문성이 떨어져 보임

쿼드트리(4) 분해(Quadtree decomposition)공간기반 분해(Space-based decomposition)



Computing Procedure- 이미지 메트릭스


Evaluation of Image metrics

Methods- 목적: 사람들이 채도와 시각적 복잡도에 따라 어떤식으로 점수를 매기는지 알아보고 이를 모델제시에 활용- 10분간의 온라인 테스트1. 0.5초간, 30개의 웹페이지(450개의 Pool에서 22개 English + 4 Foreign + 4 Grayscale website)를 보여줌2. 9점 척도(Likeret Scales)로 응답3. 동일한 30개의 웹페이지를 순서를 랜덤하게 한번 더 보여주고 반복 (일관성 확보)

... 30개 x 2

0.5초 0.5초 0.5초 0.5초


Implementation & Evaluation

Actual Test



Actual Test



Actual Test



Actual Test



Data Preparation and Analyses- 에러율이 75프로 이상이거나 3점 이하의 점수를 받은 웹페이지는 제외하고 수행- 1회와 2회의 편차가 2 이상인 웹페이지는 제외- 총 3412의 rating 평균을 갖고 수행

- ANOVA 교차분석 . 인구통계학적 변수(Demographic Background)를 대입해 교차분석 실시 . 영향력이 적으며 대체로 비슷한 판단을 내리는 것을 관찰

- 다중선형회기분석 . 변수들간 상관관계를 보임 . 모형의 추정치(b)를 활용해 모수(β)를 추정하고 검정

. adj. R2 = .48 → 모델이 전체 중 48%를 대표할 수 있음



Prediction Model for Perceived Colorfulness and Complexity

- 다중선형회기분석을 통한 모델의 유효성 검증 . 채도가 시각적 복잡도보다 모델과의 일치율이 더 높음


Experiment on Visual appeal

다중회기분석 적합성 검토(adjust R Square)adj. R2 = .48 → 모델이 전체 중 48%를 대표할 수 있음

The fit(모델이 100% 대표성을 지님)

meaning rate(모델이 약 50% 대표성을 지님)

웹페이지의 평균 Rating 분포

Result


Experiment on Visual appeal

Result

시각적 복잡도와 Visual appeal(Rating)과의 관계 - 시각적 복잡도가 낮거나 높을 경우 Visual appeal(Rating)이 감소

- 복잡도가 높을 경우 감소폭이 더 큼

실제 User rating

모델 rating


Conclusion

사용자의 웹 선호도를 예측하는 정량적모델 제시 ... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?

채도(Colorfulness)와 시각적 복잡도(Visual Complexity)를 기반으로..

전반적 심미성 평가(overall visual appeal rating)를 실시하고,

사용자 인지과정 예측 모델제시!

+ 인구통계학적 요소(나이, 성별, 교육수준, 국가) 사이의 관계

약 절반 정도(48%)의 예측률을 기대할 수 있음

채도(Colorfulness)가 시각적 복잡도(Visual Complexity)보다 더 큰 상관관계

인구통계학적 요소는 생각보다 영향력이 적음


Discussion

결과를 보니, - 인구통계학적인 차이는 결과값(Rating)에 큰 영향을 미치지 않았음 (좋은 디자인은 말이 필요없구나.)

- 각 국가별 문화적 및 실험군 인원별 차이도 존재했음

... 일정 인원을 모집한 후 문화별로 비교해보는 것도 의미있을 듯

연구방법론.. - 추후 비쥬얼 관련 양적연구에서 참고용으로 선형회귀분석 등을 익혀두면 유용할 듯

- 인터뷰 만큼의 깊이있는 답변이나 독특한 인사이트 등은 얻기 힘들지만, 거시적인 사회, 문화적 관점으로 접근할 수 있는 양적연구... 일장일단!

RQ의 가정이 당연하면 뻔한 연구라고.. 하던데, - 양적 연구의 대다수는 뻔한(?) 연구일텐데, 이를 기존 선행연구와 차별화하기 위해서는..

... 많은 고민! 이 필요하지 않을까?!


FIN.


Documents

랩발제 김수미 20131002