Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways

Getting Users’ Attention in Web Apps in Likable, Minimally Annoying Ways + #chi4good | CHI 2016

- Dan Tasse, Anupriya Ankolekar, Joshua Hailpern

/유혜수

x 2016 Fall

Getting User’s Attention in Web Apps in Likable, Minimally Annoying Ways

- CHI 2016, San Jose, CA, USA

Dan Tasse | Carnegie Mellon University

Anupriya Ankolekar | Hewlett Packard Labs

Joshua Hailpern | HP Labs and HP ArcSight

요약 웹 애플리케이션에서 어떤 프레젠테이션 스타일이 효과적으로 사용자의 주의를 끄는가? 선행 연구를 기반으로 15가지 프젠 스타일을 추출한 후, 유저 스터디를 통해 user’s attention, their likability, recall of information을 알아봄으로써 효과적인 프젠 스타일을 비교해본 연구

Author

Dan Tasse | Ph.D Student in HCI Institute @ Carnegie Mellon University

UX Lab Meeting

Introduction

웹 어플에서 새로운 정보를 사용자에게 알려줄 경우, 사용자의 주목을 끌어야함

•팝업이 가장 많이 쓰이는데, 사용자의 주목 끄는데 효과적이지만, 결국엔 짜증나서 무시하게 됨

•여러가지의 attention grabber presentation 들 중 어떤 것이 가장 효과적이고 매력있는 visual

techniques 인지 알아 볼 필요가 있음

SNU UX _ Lab Meeting

Definition

Attention Grabber (AG)

• Any user interfce element that tries to get the user to attend to it

•NOT “notification” - includes unrelated visual elements like advertisement


Definition


• Any user interfce element that tries to get the user to attend to it

•NOT “notification” - includes unrelated visual elements like advertisement


Types of Attention Grabbers


IRC framework of McCrickard et al.

3가지 축으로 Attention Grab이 어떠한지 테스트 - Interruption, Reaction, Comprehension




3가지 축으로 AG이 어떠한지 테스트 - Interruption, Reaction, Comprehension

want users to shift their attention to the alert





user to do something





want users to store informaiton & relate to its existing knowledge

3

4

1

1

2

4

15 Attention Grabbers

McCrickard et al. 의 IRC framework에 15개의 attention grabbers를 반영함

#

EXPERIMENT DESIGN

Experiment Design

Goal: Quantify varying visual presentations of AGs

•Independent Variable = AG style

•Dependent measures = Participant’s Reaction Time, Recall of AG content, Responses to survey questions

•Between subject design - each participant only seeing 1 AG during their session


Independent Variable: Attention Grabbers



Interruption, Reaction, Comprehension

Interruption Reaction

Comprehension

•Low interruption, reaction, and comprehension

•High Interruption

•High comprehension

•High reaction

•High interruption and reaction

•High interruption and comprehension

•High comprehension and reaction

Indepedent Variable: Attention Grabbers

High

•Interruption - fast pulse

•ex. color pulse fast, glow pulse fast, message pulse fast

•Comprehension - marquee

•ex. scrolling marquee, fading marquee

•Reaction - g chat pop up


•Interruption + Reaction - pop up

•Interruption + Comprehension - slow pulse

•Comprehension + Reaction - message badge

Dependent variables: Perforance, Reaction Time, Survey, and Recall

3 pages of survey questions


7 point Likert Scale 1- Strongly Disagree/ Very Low

7- Strongly Agree/ Very High

— NASA Task Load Index measure enjoyment of e- learning games

[Perceived cognitive load] [Enjoyment] questions about AG itself

page 1 page 2 page 3

Procedure


Set Instructions

(training round)


“real” game

[5 minutes]

[@ 2:30]

새로운 정보를 AG 를 통해 알려줌

questionnaire 풀기

[실험 끝나고]

Experiment Context - Set Game

Set Game 의 환경으로 한 이유?

•Between subject design - each participant only seeing 1 AG during their session


•(1) Engaging 하며, 집중력을 요구하기 때문에

•(2) 성과에 따른 보상을 지급 할수 있어서

•(3) (하기) 쉽고, 리쿠르팅하기도 쉬워서

게임 •12가지의 카드 (4가지의 심볼, 3가지 칼라, 3가지 심볼 카운트)

3 colors 3 shadings3 symbols 3 symbol count

15 attention grabbers

Layout Placement

Visual Styles

Visual Styles

Marquee (천막)

Pop - up Box _ Appear G Chat pop up

Message_ badge

Layout Placement

Study Results

Study Results


Component Analysis: Noticeability & Interruption Lag

•I noticed a (AG)

•As soon as the (AG) appeared, I saw it immediately

•The (AG) grabbed my attention

Noticeabiity by AGs

* error bar 95% CI

Figure 4

Noticeability by Attention grabber type

•가장 알아보기 쉬운것: Fast + Colored Pulsing ---> pop up

•가장 알아보기 힘든 것: Fading Marquee --> Message options

strongly disagree strongly agree

Component Analysis: Annoyance

•The (AG) was annoying

•The (AG) distracted me from playing Set

•The (AG) interrupped my thoughts

adfd

Annoyance by Attention grabber type

Study Results

•Noticeability 결과랑 비슷

Study Results

strongly disagree strongly agree

Study Results


Component Analysis: Likability

•The (AG) was asethetically pleasing

•I liked the (AG)

•I wish that other sites would use a smiliar (AG) when they needed to get my attention

Likability by attention grabber type

Annoyance by Attention grabber type

•Likable: Message icon with Badge —> glow pulse

•Least Likabe: pop up —> marquee

Recall


Recall: whether people remembered the icon

•의외로... 소수의 사람들이 맞췄음 (최고로 33%...)

•많은 사람들이 메세지 아이콘을 기억 못함

•percent of participants who remembered the icon correctly

Design


DR 1. For immediate attention, use pulsing shadows

•pulsing shadows (glow pulse slow + fast)

•pop-up 이랑 비슷하게 noticeable 하지만, more likable + less annoying

DR 2. For less- critical info, use an icon with a badge

•message boy with a badge = most likable/ least annoying 하지만 noticeability 가 낮음

DR 3. If something must pop up, make sure it integrates well with the page

•pop-up - quick reactions but significantly annoying

•if integrated within the page, it is perceived as part of the page

Summary

배경


목표

방법

결과

키워드 #User Interface Design #Attention #Alerts #Notifications

1) glowing shadow UI element가 가장 호감을 얻을수 있고, 효과적으로 사용자의 주목을 끔 2) less- critical 한 정보를 제공 할 경우, badge 가 있는 아이콘들이 좋다

1505 명의 사용자들의 reaction time, noticeability, annoyance, likability, recall 을 알아봄으로,

15개의 attention grabbers 들 중 어떤 테크닉이 가장 효과적으로 1) users’ attention 2) likability 3) recall

of information을 획득할수 있는지 비교

사용자들의 “attention”을 끌기위해, pop- up 이 많이 사용됨.

그러나 popup은 사용자의 이목을 끌지 못하고 불쾌감을 유발하여 오히려 역효과를 냄

Attention grabbers presentation에 대해서 살펴봄

이 논문에서는 웹페이지에서 어떤 “효과적이고, ” “매력적인” 디자인 가이드라인이 사용자의 이목을 끄는지 알아봄

“언제” “어떻게” 새로운 정보를 시각적으로 보여주는게 좋은지에 대한 선행 연구가 있음

?•프로포절 주제 | 뉴스 카테고리 재배치의 뉴스 읽기 연구를 더 구체화 하는데 도움 될 것같음

•Attention Grab을 하기위해, 각기 다른 UI elements와 배치 위치 (replacement)를 통해, 어떤 조합이 사용자들에게

notieable, annoying, likable 한지 알아본것이 흥미로움

•실험을 정교하게 설계함 --> 실제 실험을 진행 할때 참고해볼 수 있을것임


+

-

•독립 변수와 종속 변수에 대한 관계를 명확하게 명시

•논문 쓸때, 어떻게 정교하게 실험을 설계 할지 참고 할 수 있을것

•survey - based measure로만 하고, 사후 인터뷰를 하지 않음

•web application 뿐만 아니라 다른 플랫폼 (모바일)에서도 적용하면 좋았을것 같음

나의 후기...

감사합니다.

Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways

Technology