Advanced
A Study of User Experience from Parallax Scrolling Use on the Web Interface
A Study of User Experience from Parallax Scrolling Use on the Web Interface
Journal of Korea Multimedia Society. 2016. Feb, 19(2): 512-519
Copyright © 2016, Korea Multimedia Society
  • Received : January 22, 2016
  • Accepted : February 18, 2016
  • Published : February 28, 2016
Download
PDF
e-PUB
PubReader
PPT
Export by style
Article
Author
Metrics
Cited by
About the Authors
수민, 이
Dept. of Contents Design, Seoul Women’s University
혜영, 고
Dept. of Contents Design, Seoul Women’s University
kohy@swu.ac.kr

Abstract
In this paper, we compared the user experience according to utilize parallax scrolling technique in web site. For this purpose, we divided subjects into two groups. The subjects of Group1 were given to use web site interface with Parallax scrolling and the Group2 were given to use web site interface with non Parallax scrolling. Then, All Subjects answered the questionnaire of user experience. User experience were evaluated by four entries as Novelty, Esthetics, Usage of Satisfaction, Cheerfulness. Consequently. As a result, the web site interface with Parallax scrolling showed significantly higher score of Novelty, Esthetics, Cheerfulness than the web site interface with non-Parallax scrolling. In this study. we proved that using the parallax scrolling technique in web site interface improves the overall user experience, and suggested to apply as a way to advance the attention and persistency on creating a web site.
Keywords
1. 서 론
2015년 국내 인터넷 이용은 85%를 넘어섰으며 사람들은 수많은 정보를 웹을 기반으로 접하고 있다 [1] . 웹 접속과 항해만으로도 많은 양의 정보에 용이하게 접근할 수 있는 것은 정보 수집을 위한 사용자들에게 편리함을 제공하며 정보중심 사회로의 변화를 가속화시켜왔다. 하지만 이런 현상의 이면에는 넘쳐나는 정보들로 인해 버려지는 정보들이 증가하고 있으며, 사용자들이 일반적인 정보에 쉽게 집중하지 못하고 있다는 문제점이 있다. 사용자의 인지적 한계를 초과하는 정보의 다양성과 복잡성이 정보 전달의 효율성을 감소시키고 있는 현실이다 [2] .
웹에 정보를 담아서 전달하는 웹사이트가 사용자들에게 주요 정보를 전달하고 그 목적을 달성하기 위해 방문한 사용자의 이탈을 방지하고 몰입할 수 있도록 하여 목적하는 정보를 효과적으로 전달하는 것에 대한 중요성이 커지고 있다. [3] 이를 위해서 웹사이트 사용자의 사용자 경험을 향상 시키는 것이 중요한 이슈로 떠오르고 있으며 이와 관련된 다양한 시도와 연구가 이루어지고 있다 [4] .
웹사이트의 사용자 경험을 향상시키기 위한 연구로 사용자와 인터랙션이 일어나는 UI(User Interface) 설계 또는 시각적 요소들의 배치와 관련된 연구들이 주를 이루고 있다 [5 , 6] . 이는 웹 인터페이스의 변화와 개선을 통한 사용자 경험 향상을 지향하고 있음을 드러낸다 [7] . 최근 기존 웹 인터페이스에 변화를 적용할 수 있는 패럴랙스스크롤링(Parallax Scrolling) 기법이 등장 하였다. 이 기법은 사용자의 마우스 스크롤 또는 드래그 등의 간단한 조작에 따라 화면 내의 시각적 요소들이 시차를 두고 움직이게 한다. 기존의 평면적인 웹 인터페이스에 공간감을 형성하고 청각적 요소들의 활용까지 더해져 사용자들에게 시청각적 자극을 제공한다. 이 기법은 비교적 최근에 등장하여 해외에서는 서비스 랜딩 웹 페이지 제작에 많이 활용되고 있고, 특별한 분위기를 제공하기 위한 개인 포트폴리오 웹사이트 등에도 활용되고 있다. 국내에서도 서비스 랜딩 웹페이지나 제품을 홍보하기 위한 웹페이지 등에 활용이 되고 있지만 해외에 비해 아직은 그 활용이 제한적이다 [8] .
그 배경으로는 크롬 브라우저에서 패럴랙스스크롤링이 원활하게 구현되는 특징으로 인해 익스플로어 환경이 보편화되어 있는 우리나라 인터넷 환경의 이유가 있다. 하지만 최근 크롬 브라우저의 사용이 지속적으로 늘어나는 추세이고, 브라우저에 따른 문제는 해결의 가능성이 높은 점을 감안할때 해당 기법의 사용자 측면에서의 가능성에 대한 연구의 필요성을 인식하였다.
기존에 일반적인 웹 사이트는 하이퍼링크로 연결된 정보의 계층적 구조로 이루어져 있어 사용자가 정보를 선택적으로 클릭하여 링크된 웹페이지를 열어보는 방식으로 정보를 제공하였다 [9] . 즉, 웹페이지 내의 정보는 비순차적 방식으로 사용자에게 제공되어지고, 정보제공자 입장에서는 정보를 보는 순서를 예측할 수 없다. 반면 패럴랙스스크롤링은 One Page로 이루어져 사용자의 간단한 스크롤링은 웹페이지 내의 시각적 요소들의 움직임과 청각적 반응을 동작시키며 제작자가 의도한 순서대로 사용자에게 화면을 노출하게 된다. 즉, 사용자가 웹 인터페이스의 요소들을 원하는 속도로 능동적으로 동작시키면서도 정보제공자의 의도된 순서대로 정보를 전달 받을 수 있는 특징이 있다 [10] . 또한 사용자의 조작에 따른 웹 인터페이스의 인터랙션이 가능한 점은 사용자의 몰입을 유도할 수 있는 가능성을 가지고 있다 [6] .
연구자는 패럴랙스스크롤링 기법의 활용이 웹 인터페이스에서 사용자의 새로운 경험을 향상시킬 수 있다는 가능성을 토대로 [10] 의도하는 메시지의 전달은 용이하게 하면서 사용자의 몰입을 유도할 수 있는 해당 기법을 통한 구체적인 사용자 경험의 요소들을 찾고자 한다. 본 연구를 위해 패럴랙스 스크롤링 기법을 활용한 웹페이지의 사용자 경험 요소들을 기존 문헌연구를 기반으로 추출하여 이를 기반으로 가설을 세우고 패럴랙스가 적용된 사이트와 적용되지 않은 사이트를 두 집단의 실험 참가자들에게 시연하도록 한 후 사용자 경험 요소들에 대한 설문 분석을 통해 향상되는 사용자 경험을 찾고자 한다.
본 논문의 구성은 다음과 같다. 2장에서 기존 연구를 검토하고 본 논문의 사용자 경험 측정 평가 요소를 정의한다, 3장에서는 연구 설계 및 결과를 서술하고, 4장에서는 결론을 맺는다.
2. 문헌연구
- 2.1 웹 사용자 경험의 중요성
사용자 경험은 웹사이트의 재미요소와 전반적인 만족에 영향을 받는다. 웹사이트의 재미는 시각적인 아름다움, 기존에 없었던 방식으로부터 느끼는 새로움에 의해 유발되기도 하는데 [11] 인간은 근본적으로 재미를 추구하는 존재이기 때문에 재미를 느낄수 있는 콘텐츠에 긍정적인 피드백을 하며 재사용할 의지를 갖게 된다 [12] . 한편 Oliver(1980b)는 만족이란 재화나 서비스에 대한 사용자의 전반적인 반응이라고 정의하고 있는데 [13] , 사용자가 웹사이트의 정보가 유용하고 잘 전달이 되었졌다고 느끼는 감정을 포함한다. 재미요소와 만족의 충족으로부터 형성된 긍정적인 사용자 경험은 사용자가 제품이나 콘텐츠에 몰입할 수 있게 한다 [14] . 또한 웹사이트를 이탈하지 않고 사용하며 궁극적으로는 재방문 하게 되는 동기를 부여하기 때문에 중요하다.
- 2.2 웹 인터랙티브와 패럴럭스스크롤링
최근 웹사이트의 사용자 경험을 향상하기 위한 시도가 활발하게 이루어지고 있으며 대표적인 방법으로는 인터랙티브가 있다. 이는 상호간(inter)과 작용(ative)의 합성어로 ‘상호 작용이 가능함’을 의미한다. 인터랙티브는 영화, 게임, 제품UI 등 여러 분야에 널리 사용되고 있으며 인터랙티브가 적용된 영화는 기존의 영화와 다르게 사용자의 선택에 따라 스토리라인을 전개할 수 있다는 특징이 있다 [15] . 게임분야에서도 사용자의 주체적 통제권이 높은 인터랙션 방식으로 GUI가 도입되었을 때 사용자의 몰입도와 유희적인 만족감이 증가하는 것으로 연구되었다. 특히 사용자와 웹사이트 간의 쌍방향 커뮤니케이션이 가능한 인터랙티브 웹 사이트들이 점점 증가하고 있는데 인터랙티브 웹 사이트는 화면 내에 사용자가 조작할 수 있는 요소를 제시하고 조작에 따라 즉각적으로 사용자에게 피드백 주는 방법으로 반응을 통해 몰입도를 높히고 사용자 경험을 향상한다. [6] 기업들은 상호작용이 가능한 인터랙티브 요소를 포함한 광고를 제작하여 소비자의 기억 속에 오래 남을 수 있는 전략으로 활용하고 있으며 이를 통해 제품에 대한 고객의 호의적 태도를 형성하고 있다 [16] .
최근 등장한 패럴랙스스크롤링 기법에도 이러한 인터랙티브 방식이 응용되고 있다. 이 기법은 사용자의 인지 속도에 따라 직접 조작이 가능하다는 장점이 있다. 김미영(2004)은 사용자의 능동적이고 직접적인 조작이 가능한 웹 인터랙션은 사용자의 경험을 성공적으로 향상시킬 수 있으며 [6] 김수림(2006)은 사용자의 개입과 참여를 유도하는 인터랙티브 콘텐츠는 모든 측면에서 유희적인 속성을 포함하고 있다고 하였다 [17] . 또한 강정원(2003)은 발상을 전환시킨 새로운 인터페이스는 사용자의 재미 요소를 향상 시킬 수 있다고 주장하여 [11] 패럴랙스스크롤링 기법 활용의 가능성을 기대할 수 있을 것이다.
- 2.3 웹 인터페이스의 사용자 경험 평가요소
D.M. Frederick(2013)의 선행 연구에서는 패럴랙스 스크롤링 기법 활용 시 사용자 경험 중 재미와 시각적 호소력이 증대하는 것으로 연구가 되어졌으나, 이를 평가하는 항목에 대한 구체적인 정의가 부족하다는 한계를 가지고 있었다 [18] . 특히 평가 항목중 Fun 과 Enjoyment를 국내 단어로 재미와 즐거움으로 번역될 수 있는데, 연구 결과를 해석하기 위해서는 이를 구분하는 기준을 정의할 필요가 있다.
본 연구에서는 웹 인터페이스의 사용자 경험에 대한 평가 항목과 기준을 구체적으로 제시하기 위해 제품 사용 중 표출되는 사용자 감성에 대한 연구와 [19] 인터페이스 사용자 경험 측정에 대한 연구를 참고하여 사용자 경험 관련 단어를 수집하였다 [20] . 6가지 대표감성 중 심미성, 사용적 만족성, 신규성, 유쾌성 이외에 불편성은 사용적 만족성과 대비되는 개념으로 사용적 만족성을 통해 측정이 가능할 것이다. 우수성에 대한 단어 중 시각적인 우수함을 나타내는 단어는(돋보이는) 심미성과 관련되며, 웹 인터페이스 전반에서 느낄 수 있는 만족과 관련된 단어는(탁월한, 최상의) 사용적 만족성에 포함될 수 있다. 즉, 위의 연구내용을 기반으로 웹 인터페이스의 사용자 경험을 신규성, 심미성, 사용적 만족성 및 유쾌성 등 4가지로 분류할 수 있고, 이에 대한 세부 요소들과 정의는 다음과 같다.
a. 신규성에 대한 평가: 독특한, 참신한, 신기한, 기발한 기존 웹사이트를 사용할 때에 비해 해당 웹사이트를 사용하면서 느끼는 참신하고 새로운 것에 의해 표출되는 감성(독특한, 참신한, 신기한, 기발한)을 포괄한다.
b. 심미성에 대한 평가: 매력적인, 세련된, 조화로운, 돋보이는 웹사이트의 디자인 요소와 시각정보에 의해 느끼는 심미적인 감성(매력적인, 세련된, 조화로운)과 눈에 돋보인다고 느끼는 감성인 우수성(돋보이는)을 일부 포함한다.
c. 사용적 만족성에 대한 평가: 흡족한, 유용한, 효율적인, 탁월한 웹사이트의 전반적인 사용성이나 실용적 측면에서 느끼는 만족과(흡족한, 유용한) 독보적인 장점이 있다고 느끼는 우수성(탁월한)을 일부 포함한다.
d. 유쾌성에 대한 평가: 기쁜, 기분 좋은, 호의적인, 즐거운 웹사이트를 사용하면서 느끼는 유쾌한 감성(기쁨, 기분 좋음, 호의. 즐거움)을 포괄한다.
3. 연구내용
- 3.1 연구 설계
- 3.1.1 연구 가설
앞서 문헌을 기반으로 분류하고 정의한 웹 인터페이스 사용자 경험 요소들을 기반으로 다음과 같이 4개의 가설을 설계하였다.
1. 패럴랙스스크롤링 기법 활용에 따라 사용자의 ‘신규성’ 측면에서 유의미한 차이가 있을 것이다.
2. 패럴랙스스크롤링 기법 활용에 따라 사용자의 ‘심미성’ 측면에서 유의미한 차이가 있을 것이다.
3. 패럴랙스스크롤링 기법 활용에 따라 사용자의 ‘사용적 만족성’ 측면에서 유의미한 차이가 있을 것이다.
4. 패럴랙스스크롤링 기법 활용에 따라 사용자의 ‘유쾌성’ 측면에서 유의미한 차이가 있을 것이다.
- 3.1.2 연구대상
하루 웹서핑 시간이 1시간 이상인 20대∼40대 성인 남녀를 대상으로 하여 그룹 1과 그룹 2로 나누어, 패럴랙스스크롤링이 활용된 사이트와 비 활용된 사이트를 각각 사용하게 한 후 설문을 진행하였다. 성실하게 작성한 응답자는 남녀 176명으로 그룹1과 그룹2 각각 88명의 설문이 분석에 활용되었다.
- 3.1.3 연구방법
본 연구는 패럴럭스스크롤링 기법 활용이 사용자 경험에 어떤 영향을 미치는지 비교하는 실험을 하기 위해 패럴랙스스크롤링이 적용된 웹 사이트들을 검토하여 실험 사이트를 선정하여 실험으로 활용하였다 [21] . 또한 선정된 웹 사이트와 모든 시각적 요소는 동일하지만 패럴랙스스크롤링 기능만 비적용된 사이트를 WIX툴을 사용하여 별도로 제작하여 대조군으로 활용하였다 [21 , 22] . 설문지는 정상훈(2007) [23] 의 자기-보고 질문지형 척도의 형식을 참고하여 제작하였으며 총 16문항으로 각 문항은 Likert 5점 척도를 사용하였다. 설문 도구로는 Naver Form을 사용하였다.
- 3.2 연구결과
SPSS의 Chronbach’s Alpha를 사용하여 분석한 신뢰도 결과 값은 신규성 α= 0.908, 심미성α= 0.872, 사용적 만족성 α= 0.827, 유쾌성 α= 0.915 으로 나타났다. 항목 간 문항들이 지속적으로 높은 상관관계가 있음이 확인되어 설문지의 신뢰성이 검증되었다. 항목별 세부 결과 분석에는 Mann-Whitney test 가 사용되었다. 도표에는 패럴랙스 스크롤링 기법을 활용한 그룹 1과 비활용한 그룹 2를 나누어 표기하였다.
신규성에 대한 통계적 검증 결과 Table 1 과 같이 독특한 p=0.00, 참신한 p=0.00, 신기한 p=0.00, 기발한 p=0.00각 문항의 유의수준이 기준 값인 0.05보다 낮으므로 모두 유의미한 차이가 있는 것으로 나타났다. 패럴랙스스크롤링을 활용한 그룹1의 항목별 평균 순위 또한 모두 증가하였으므로 신규성이 통계적으로 유의미하게 향상되어 가설1은 성립한다.
Sensibility – Novelty
PPT Slide
Lager Image
Sensibility – Novelty
심미성에 대한 통계적 검증 결과 Table 2 와 같이 매력적인 p=0.014, 세련된 p=0.006, 돋보이는 p=0.004는 0.05 이하로 유의미한 차이가 있었으며 조화로운 p= 0.844 로 유의미하지 않은 것으로 나타났으며 평균 순위가 그룹1:89.22 그룹2:87.78 로 미미한 차이를 보였다. 패럴랙스스크롤링을 활용한 그룹1의 평균 순위가 모두 증가하였고 4가지 문항 중 3가지가 유의미하므로 심미성이 통계적으로 유의미하게 향상되었음을 알 수 있으며 가설2는 성립한다.
Sensibility – Aesthetic
PPT Slide
Lager Image
Sensibility – Aesthetic
사용적 만족성에 대한 통계적 검증 결과 Table 3 과 같이 탁월한 p=0.014로 유의미한 차이가 있었고 흡족한 p=0.167, 유용한 p=0.532, 효율적인 p=0.723는 유의미한 차이가 없었다. 패럴랙스 스크롤링을 활용한 그룹1과 비 활용한 그룹2 사이에 통계적으로 유의미한 차이가 없으므로 가설 3은 성립하지 않는다.
Sensibility - Usage of Satisfaction
PPT Slide
Lager Image
Sensibility - Usage of Satisfaction
유쾌성에 대한 통계적 검증 결과 Table 4 와 같이 기쁜 p=0.048, 기분 좋은 p=0.024, 즐거운 p=0.004로 유의미하였고 호의적인은 p=0.403 으로 유의미한 차이가 없었다. 패럴랙스 스크롤링을 활용한 그룹1의 평균 순위가 모두 증가하였고 4가지 문항 중 3가지가 유의미하므로 유쾌성이 통계적으로 유의미하게 향상되었음을 알 수 있으며 가설 4는 성립한다.
Sensibility - Cheerfulness
PPT Slide
Lager Image
Sensibility - Cheerfulness
4. 결 론
본 연구에서는 실험을 통해 패럴랙스스크롤링이 활용된 사이트가 비활용 된 사이트보다 신규성, 심미성, 유쾌성이 유의미하게 높은 것으로 나타났다. 패럴랙스스크롤링 활용 사이트의 사용자 경험 4가지 중 3가지가 유의미하게 높은 수치를 기록하였고, 본 연구를 통해 웹사이트에서 패럴랙스스크롤링 기법활용이 전반적인 사용자 경험을 향상시킬 수 있음을 알 수 있었다. 신규 서비스 랜딩페이지, 홍보 페이지 등 사용자를 집중시키고 콘텐츠를 지속적으로 수용 할 수 있는 동기부여를 위한 방법으로 패럴랙스스크롤링 기법의 활용을 제안한다. 이는 사용자에게 웹 인터페이스의 신규성, 심미성, 유쾌성 등의 특정 사용자 경험을 높일 수 있는 방안이 될 것이다. 한편, 본 연구에서는 사용자 경험에 영향을 미치는 패럴랙스스크롤링의 구현 요소들에 대한 연구에는 한계가 있다. 향후, 구체적인 요소들과 사용자 경험의 관련성에 대한 정밀한 연구가 이어지며 웹 인터페이스의 사용자 경험 향상을 위한 면밀한 연구가 지속되어야 할 것이다.
BIO
이 수 민
2011년∼현재 서울여자대학교 콘텐츠디자인과 학부생
2014년 얼굴정보를 이용한 실종 가족찾기 시스템 및 기록매체 특허 출원
2016년 스마트러닝 인터랙션 콘텐츠 개발 사업 연구원
관심분야 : UX/UI, 캐릭터디자인 등
고 혜 영
2000년 부산대학교 시각디자인학과 미술학사
2002년 부산대학교 영상정보공학과 공학석사
2008년 부산대학교 영상정보공학과 공학박사
2006년∼2009년 동서대학교 디지털콘텐츠학부 게임학과 전임강사
2009년∼현재 서울여자대학교 콘텐츠디자인학과 부교수
관심분야 : 데이터디자인, 인포그래픽디자인, 모션그래픽, 캐릭터디자인 등
References
Analysis of Use Internet
Choe J.P , Doctor’s Thesis 2015 “A Study on the Cognition of Visual Information of the User in the Mobile Environment,” Yeungnam University of Art and Design Doctor’s Thesis
Park E.J. , Lee K.P. , Seo J.H. 2010 “Application of Digital Storytelling for Emotional-based Website Navigation Design,” Journal of Korean Society of Design Science 23 (1) 173 - 184
Marc H. , Noam T. 2006 “User Experience-a Research Agenda,” Behaviour & Information Technology 25 (2) 91 - 97    DOI : 10.1080/01449290500330331
Seo K.K. , Lee S.W. , Chung B.D. , Park C.S. 2015 “Users’ Emotional Valence, Arousal, and Engagement Based on Perceived Usability and Aesthetics for Web Sites,” International Journal of Human-Computer Interaction 31 (1) 72 - 87    DOI : 10.1080/10447318.2014.959103
Kim M.Y. , Kim H.J. 2004 “Analysis and Adaptation of Strategy for Designing Web Interaction through Analyzing Cases of Interactive Website,” Journal of Korea Society of Design 17 (4) 37 - 50
Jung S.Y. 2009 “Research Reports : A Study on the Case Analysis on Interaction Design to Improve Users` Experience in Web Site,” Journal of the Korean Society of Design Culture 15 (4) 493 - 506
Yoon D.J. , Oh S.H. "A Study on The Elements of Parallax Scroll for Stereoscopic Information," Proceeding of Korean Society of Design Science Conference Proceeding, Korean Society of Design Science 2013 242 -
Dumais S. , Chen H. “Hierarchical Classification of Web Content,” Proceeding of the 23rd Annual International ACM SIGIR Conference 2000 256 - 263
Ko H.Y. , Kim C.Y. 2015 "Application Possibility of Parallax Scrolling Technique for Website Users' Emotional Experience," Journal of Korea Multimedia Society 18 (3) 278 - 279
Kang J.W. 2003 “Research on Analytical Method of Fun Generating Factor of Product,” Archives of Design Research 16-3 (53) 221 - 230
Park J.W. , Park J.K. 2012 “The Study on Infortainment Applying Plan in Each Smart Application Contents Type,” Journal of the Korean Society of Design Culture 18 (4) 193 - 202
Oliver R.L. 2008 “A Cognitive Model of the Antecedents and Consequences of Satisfaction Decisions,” Journal of Marketing Research 17 (4) 460 - 469    DOI : 10.2307/3150499
Kim J.Y. , Master’s Thesis 2006 A Study on the Effects of Online Game Using Satisfaction on Game Item’s Purchasing Intention Sookmyung Women’s University of Graduate School of Management Master’s Thesis
Cho S.H. 2011 “A Study on the Case of Interactive Contents Provided by the New Media,” Journal of Communication Design 36 (1) 59 - 67
Rhie J.H. 2014 "The Impact of Emotional Storytelling on Brand Attitude-compare to Humor Advertising," Journal of Digital Contents Society 15 (1) 61 - 68    DOI : 10.9728/dcs.2014.15.1.61
Kim S.R. , Master’s Thesis 2006 A Study on the Visual Fun of Interactive Digital Contents-Focused on Digital Media Art and Design Hansung University of Art Master’s Thesis
Frederick D.M. , Master’s Thesis 2013 “The Effects of Parallax Scrolling on User Experience and Preference in Web Design,” Purdue University of Computer Graphics Technology Master’s Thesis
Jeong S.H. , Lee K.P. 2004 "Extraction of User's Representative Emotions Expressed While Using A Product," Journal of Korean Society of Design Science 18 (1) 72 - 78
Kim Y.M. , Ryoo H.Y. 2010 "User Experience Attributes in Digital Media Interface," Journal of Digital Design 10 (4) 565 - 574    DOI : 10.17280/jdd.2010.10.4.054
Sony http://www.sony.com/be-moved/
Sony for Experiment http://s0o0m3.wix. com/swugo1
Jeong S.H. 2007 “Development a Self-report Questionnaire-type Scale for Measuring User's Emotions while Using a Product,” Journal of the Science of Emotion & Sensibility 10 (3) 403 - 410