Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways
1 like242 views
웹 애플리케이션에서 어떤 프레젠테이션 스타일이 효과적으로 사용자의 주의를 끄는가? 선행 연구를 기반으로 15가지 프젠 스타일을 추출한 후, 유저 스터디를 통해 user’s attention, their likability, recall of information을 알아봄으로써 효과적인 프젠 스타일을 비교해본 연구
![Dependent variables: Perforance, Reaction Time, Survey, and Recall
3 pages of survey questions
SNU UX _ Lab Meeting
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](https://image.slidesharecdn.com/16-10-06copy-161213013453/85/Getting-User-s-Attention-in-Web-Apps-in-Likable-Minimally-Annoying-Ways-16-320.jpg)
![Procedure
Attention Grabber (AG)
Set Instructions
(training round)
SNU UX _ Lab Meeting
“real” game
[5 minutes]
[@ 2:30]
새로운 정보를 AG 를 통해 알려줌
questionnaire 풀기
[실험 끝나고]](https://image.slidesharecdn.com/16-10-06copy-161213013453/85/Getting-User-s-Attention-in-Web-Apps-in-Likable-Minimally-Annoying-Ways-17-320.jpg)
Getting User's Attention in Web Apps in Likable, Minimally Annoying Ways
- 1. Getting Users’ Attention in Web Apps in Likable, Minimally Annoying Ways + #chi4good | CHI 2016 - Dan Tasse, Anupriya Ankolekar, Joshua Hailpern /유혜수 x 2016 Fall
- 2. 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을 알아봄으로써 효과적인 프젠 스타일을 비교해본 연구
- 3. Author Dan Tasse | Ph.D Student in HCI Institute @ Carnegie Mellon University UX Lab Meeting
- 4. Introduction 웹 어플에서 새로운 정보를 사용자에게 알려줄 경우, 사용자의 주목을 끌어야함 •팝업이 가장 많이 쓰이는데, 사용자의 주목 끄는데 효과적이지만, 결국엔 짜증나서 무시하게 됨 •여러가지의 attention grabber presentation 들 중 어떤 것이 가장 효과적이고 매력있는 visual techniques 인지 알아 볼 필요가 있음 SNU UX _ Lab Meeting
- 5. 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 SNU UX _ Lab Meeting
- 6. 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 SNU UX _ Lab Meeting
- 7. Types of Attention Grabbers SNU UX _ Lab Meeting IRC framework of McCrickard et al. 3가지 축으로 Attention Grab이 어떠한지 테스트 - Interruption, Reaction, Comprehension
- 8. Types of Attention Grabbers SNU UX _ Lab Meeting IRC framework of McCrickard et al. 3가지 축으로 AG이 어떠한지 테스트 - Interruption, Reaction, Comprehension want users to shift their attention to the alert
- 9. Types of Attention Grabbers SNU UX _ Lab Meeting IRC framework of McCrickard et al. 3가지 축으로 Attention Grab이 어떠한지 테스트 - Interruption, Reaction, Comprehension user to do something
- 10. Types of Attention Grabbers SNU UX _ Lab Meeting IRC framework of McCrickard et al. 3가지 축으로 Attention Grab이 어떠한지 테스트 - Interruption, Reaction, Comprehension want users to store informaiton & relate to its existing knowledge
- 11. 3 4 1 1 2 4 15 Attention Grabbers McCrickard et al. 의 IRC framework에 15개의 attention grabbers를 반영함 #
- 13. 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 SNU UX _ Lab Meeting
- 14. Independent Variable: Attention Grabbers Attention Grabber (AG) SNU UX _ Lab Meeting 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
- 15. 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 SNU UX _ Lab Meeting •Interruption + Reaction - pop up •Interruption + Comprehension - slow pulse •Comprehension + Reaction - message badge
- 16. Dependent variables: Perforance, Reaction Time, Survey, and Recall 3 pages of survey questions SNU UX _ Lab Meeting 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
- 17. Procedure Attention Grabber (AG) Set Instructions (training round) SNU UX _ Lab Meeting “real” game [5 minutes] [@ 2:30] 새로운 정보를 AG 를 통해 알려줌 questionnaire 풀기 [실험 끝나고]
- 18. Experiment Context - Set Game Set Game 의 환경으로 한 이유? SNU UX _ Lab Meeting •(1) Engaging 하며, 집중력을 요구하기 때문에 •(2) 성과에 따른 보상을 지급 할수 있어서 •(3) (하기) 쉽고, 리쿠르팅하기도 쉬워서 게임 •12가지의 카드 (4가지의 심볼, 3가지 칼라, 3가지 심볼 카운트) 3 colors 3 shadings3 symbols 3 symbol count
- 19. 15 attention grabbers Layout Placement Visual Styles
- 20. Visual Styles Marquee (천막) Pop - up Box _ Appear G Chat pop up Message_ badge
- 21. Layout Placement
- 22. Study Results
- 23. Study Results SNU UX _ Lab Meeting Component Analysis: Noticeability & Interruption Lag •I noticed a (AG) •As soon as the (AG) appeared, I saw it immediately •The (AG) grabbed my attention
- 24. 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
- 25. Component Analysis: Annoyance •The (AG) was annoying •The (AG) distracted me from playing Set •The (AG) interrupped my thoughts adfd
- 26. Annoyance by Attention grabber type Study Results •Noticeability 결과랑 비슷 Study Results strongly disagree strongly agree
- 27. Study Results SNU UX _ Lab Meeting 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
- 28. Likability by attention grabber type Annoyance by Attention grabber type •Likable: Message icon with Badge —> glow pulse •Least Likabe: pop up —> marquee
- 29. Recall SNU UX _ Lab Meeting Recall: whether people remembered the icon •의외로... 소수의 사람들이 맞췄음 (최고로 33%...) •많은 사람들이 메세지 아이콘을 기억 못함 •percent of participants who remembered the icon correctly
- 30. Design SNU UX _ Lab Meeting 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
- 31. Summary 배경 SNU UX _ Lab Meeting 목표 방법 결과 키워드 #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에 대해서 살펴봄 이 논문에서는 웹페이지에서 어떤 “효과적이고, ” “매력적인” 디자인 가이드라인이 사용자의 이목을 끄는지 알아봄 “언제” “어떻게” 새로운 정보를 시각적으로 보여주는게 좋은지에 대한 선행 연구가 있음
- 32. ? •프로포절 주제 | 뉴스 카테고리 재배치의 뉴스 읽기 연구를 더 구체화 하는데 도움 될 것같음 •Attention Grab을 하기위해, 각기 다른 UI elements와 배치 위치 (replacement)를 통해, 어떤 조합이 사용자들에게 notieable, annoying, likable 한지 알아본것이 흥미로움 •실험을 정교하게 설계함 --> 실제 실험을 진행 할때 참고해볼 수 있을것임 SNU UX _ Lab Meeting + - •독립 변수와 종속 변수에 대한 관계를 명확하게 명시 •논문 쓸때, 어떻게 정교하게 실험을 설계 할지 참고 할 수 있을것 •survey - based measure로만 하고, 사후 인터뷰를 하지 않음 •web application 뿐만 아니라 다른 플랫폼 (모바일)에서도 적용하면 좋았을것 같음 나의 후기...
- 33. 감사합니다.