1. 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일 수요일

2. Predicting
Users’
First
Impressions
of
Website
Aesthetics
With
a
Quantification
of
Perceived
Visual
Complexity
and
Colorfulness
-­‐
CHI
2013
Best
Paper
Department
of
Digital
Contents
Convergence
UX
Lab.
Kim,
Sumi
13년 10월 2일 수요일

3. 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 Miratrix
Assistant Professor of Statistics
Authors
13년 10월 2일 수요일

4. Page에 머무를 것인가..?
Background
미적인 인상 0.5초 만에 결정
13년 10월 2일 수요일

5. Background
미적인 인상 0.5초 만에 결정
디자인 심미성 측정방법 부족
디자인 질적 가이드가 대다수
Page에 머무를 것인가..?
사용자 웹의 미적 첫인상을 예측하는 정량적모델 제시
13년 10월 2일 수요일

6. Introduction
1. 선행연구
- 이미지 특징 요소(Colorfulness, Visual Complexity)
- 첫인상에 영향을 미치는 요소
2. 2가지 실험
- 채도(Colorfulness), 시각적 복잡도(Visual Complexity) 정량화
- 모델의 채도, 시각적 복잡도로부터의 첫인상 예측 모델
3. 타당성 검증
- Visual appeal에 대한 예측자(Predictor)로서의 타당성 검증
사용자의 웹 선호도를 예측하는 정량적모델 제시(미적 첫인상)
... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?
13년 10월 2일 수요일

7. Introduction
. 모형이 무리없이 추정되고 활용에 적합한지 검토
. 결정계수를 활용한 R-square, Adjust R-square 활용
다중선형회기분석 모형 활용(multiple linear regression model)
- 2개 이상의 독립변수로 현상을 설명하는 모형
- 가정: 종속변수(Y)와 독립변수(X1,X2,X3...) 간에는 선형 함수관계가 존재
- 분석과정
모형 설정
모형 추론
적합성 검토
. 선행연구를 통해 가설 설정
. 변수 설정
. 모형의 추정치(b)를 활용해 모수(β)를 추정하고 검정
. 추정: 종속변수와 독립변수와의 관계의 정도
주로 최소제곱법(OLS,Ordinary Least Square) 활용
. 검정: 신뢰 정도를 객관화
회귀모형 추정량은 t분포를 따르므로 이를 활용한 F-test로 검정
13년 10월 2일 수요일

8. Introduction
1. 선행연구
- 이미지 특징 요소(Colorfulness, Visual Complexity)
- 첫인상에 영향을 미치는 요소
2. 2가지 실험
- 채도(Colorfulness), 시각적 복잡도(Visual Complexity) 정량화
- 모델의 채도, 시각적 복잡도로부터의 첫인상 예측 모델
3. 타당성 검증
- Visual appeal에 대한 예측자(Predictor)로서의 타당성 검증
모형 설정
모형 추론
적합성 검토
사용자의 웹 선호도를 예측하는 정량적모델 제시(미적 첫인상)
... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?
13년 10월 2일 수요일

9. Quntifying Colorfulness & Complexity
Colorfulness
- 색상은 신뢰, 신의, 구매의사 등에 영향
- 인지 채도: 어떻게 분포했나(distribution)? 주변 색상과의 결합은(composition)?
- 다양한 컬러 모델 활용 (eg.HSV)
< 색상(H), 채도(S), 명도(V) >
Visual Complexity
- 너무 단순하거나 복잡해도 인지도, 선호도가 떨어짐(Negative U곡선 형태를 보임)
- 다양한 방식으로 시각적 인지 수행
< 게슈탈트(Gestalt) 인지모델 >
13년 10월 2일 수요일

10. Quntifying Colorfulness & Complexity
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/
13년 10월 2일 수요일

11. Quntifying Colorfulness & Complexity
Computing Procedure
- 이미지를 공간기반, 쿼드트리 방식으로 분해해서 정보밀도 측정 및 비교
- 많이 분할될 수록 조잡하고 전문성이 떨어져 보임
쿼드트리(4) 분해(Quadtree decomposition)공간기반 분해(Space-based decomposition)
13년 10월 2일 수요일

12. Quntifying Colorfulness & Complexity
Computing Procedure
- 이미지 메트릭스
13년 10월 2일 수요일

13. 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초
13년 10월 2일 수요일

14. Implementation & Evaluation
Actual Test
13년 10월 2일 수요일

15. Implementation & Evaluation
Actual Test
13년 10월 2일 수요일

16. Implementation & Evaluation
Actual Test
13년 10월 2일 수요일

17. Implementation & Evaluation
Actual Test
13년 10월 2일 수요일

18. Implementation & Evaluation
Data Preparation and Analyses
- 에러율이 75프로 이상이거나 3점 이하의 점수를 받은 웹페이지는 제외하고 수행
- 1회와 2회의 편차가 2 이상인 웹페이지는 제외
- 총 3412의 rating 평균을 갖고 수행
- ANOVA 교차분석
. 인구통계학적 변수(Demographic Background)를 대입해 교차분석 실시
. 영향력이 적으며 대체로 비슷한 판단을 내리는 것을 관찰
- 다중선형회기분석
. 변수들간 상관관계를 보임
. 모형의 추정치(b)를 활용해 모수(β)를 추정하고 검정
. adj. R2 = .48 → 모델이 전체 중 48%를 대표할 수 있음
13년 10월 2일 수요일

19. Implementation & Evaluation
Prediction Model for Perceived Colorfulness and Complexity
- 다중선형회기분석을 통한 모델의 유효성 검증
. 채도가 시각적 복잡도보다 모델과의 일치율이 더 높음
13년 10월 2일 수요일

20. Experiment on Visual appeal
다중회기분석 적합성 검토(adjust R Square)
adj. R2 = .48 → 모델이 전체 중 48%를 대표할 수 있음
The fit
(모델이 100% 대표성을 지님)
meaning rate
(모델이 약 50% 대표성을 지님)
웹페이지의 평균 Rating 분포
Result
13년 10월 2일 수요일

21. Experiment on Visual appeal
Result
시각적 복잡도와 Visual appeal(Rating)과의 관계
- 시각적 복잡도가 낮거나 높을 경우 Visual appeal(Rating)이 감소
- 복잡도가 높을 경우 감소폭이 더 큼
실제 User rating
모델 rating
13년 10월 2일 수요일

22. Conclusion
사용자의 웹 선호도를 예측하는 정량적모델 제시
... 딱 보고 얼마나 끌리는지를 예측해 볼 수 있지 않을까?
채도(Colorfulness)와 시각적 복잡도(Visual Complexity)를 기반으로..
전반적 심미성 평가(overall visual appeal rating)를 실시하고,
사용자 인지과정 예측 모델제시!
+ 인구통계학적 요소(나이, 성별, 교육수준, 국가) 사이의 관계
약 절반 정도(48%)의 예측률을 기대할 수 있음
채도(Colorfulness)가 시각적 복잡도(Visual Complexity)보다 더 큰 상관관계
인구통계학적 요소는 생각보다 영향력이 적음
13년 10월 2일 수요일

23. Discussion
결과를 보니,
- 인구통계학적인 차이는 결과값(Rating)에 큰 영향을 미치지 않았음 (좋은 디자인은 말이 필요없구나.)
- 각 국가별 문화적 및 실험군 인원별 차이도 존재했음
... 일정 인원을 모집한 후 문화별로 비교해보는 것도 의미있을 듯
연구방법론..
- 추후 비쥬얼 관련 양적연구에서 참고용으로 선형회귀분석 등을 익혀두면 유용할 듯
- 인터뷰 만큼의 깊이있는 답변이나 독특한 인사이트 등은 얻기 힘들지만,
거시적인 사회, 문화적 관점으로 접근할 수 있는 양적연구... 일장일단!
RQ의 가정이 당연하면 뻔한 연구라고.. 하던데,
- 양적 연구의 대다수는 뻔한(?) 연구일텐데, 이를 기존 선행연구와 차별화하기 위해서는..
... 많은 고민! 이 필요하지 않을까?!
13년 10월 2일 수요일

24. FIN.
13년 10월 2일 수요일