interactive tv: improve the user experience using a second screen arne misbaer & robin vrebos...
TRANSCRIPT
1
Interactive TV: Improve the user
experience using a second screen
Arne Misbaer & Robin VrebosMentor: Robin De Croon
2
Demo• Connect to network “secondscreentv”
(pass:demo)• Web app:
o http://doug.cs.kuleuven.be/secondscreen/
• Android app:o http://doug.cs.kuleuven.be/secondscreen/apk/SecondScreenTV.apk
• +-5 minutes• TV show: The Blacklist• Episode: The Freelancer (S01E02)• Start: 32:30• End: 36:30
3
Presentation structure• Reseach question• Design cirteria• Overview prototypes• Digital prototype 1: recapitulation• Digital prototype 2• Digital prototype 3• Digital prototype 4• Final testing
4
Research questionWhat do viewers want and how to present it to them?
We will try to answer following questions:• What content to show?
o Murray, J., & Goldenberg, S. (2012). Story-map: iPad companion for long form TV narratives. … on Interactive Tv and …, 223–226. Retrieved from http://dl.acm.org/citation.cfm?id=2325659
• When to show this content?o Geerts, J. V. and D. (n.d.). Second-Screen Use in the Home: An Ethnographic Study.o Holmes, M. E., Josephson, S., & Carney, R. E. (2012). Visual attention to television programs with a second-screen
application. Proceedings of the Symposium on Eye Tracking Research and Applications - ETRA ’12, 397. doi:10.1145/2168556.2168646
• Where to show this content?o Michel, A., Schou, J., Bo, L., Fleury, A., & Pedersen, J. S. (2012). Interactive TV : Interaction and Control in Second-
screen TV Consumption.
5
Design criteria• Right balance between engagement and
distractiono Murray, J., & Goldenberg, S. (2012). Story-map: iPad companion for long form TV narratives. … on Interactive Tv
and …, 223–226. Retrieved from http://dl.acm.org/citation.cfm?id=2325659o D. Geerts, R. Leenheer, D. De Grooff, J. Negenman, S. Heijstraten, In front of and behind the second screen: viewer
and producer perspectives on a companion app, 2014.o Basapur, S., Mandalia, H., Chaysinh, S., Lee, Y., Venkitaraman, N., & Metcalf, C. (2012). FANFEEDS: Evaluation of
Socially Generated Information Feed on Second Screen as a TV Show Companion. Proceedings of the 10th European Conference on Interactive Tv and Video - EuroiTV ’12, 87–96. Retrieved from http://dl.acm.org/citation.cfm?id=2325616.2325636
o Van Cauwenberge, A., Schaap, G., & van Roy, R. (2014). “TV no longer commands our full attention”: Effects of second-screen viewing and task relevance on cognitive load and learning from news. Computers in Human Behavior, 38, 100–109. doi:10.1016/j.chb.2014.05.021
o Holmes, M. E., Josephson, S., & Carney, R. E. (2012). Visual attention to television programs with a second-screen application. Proceedings of the Symposium on Eye Tracking Research and Applications - ETRA ’12, 397. doi:10.1145/2168556.2168646
• Low threshold to start applicationo D. Geerts, R. Leenheer, D. De Grooff, J. Negenman, S. Heijstraten, In front of and behind the second screen: viewer
and producer perspectives on a companion app, 2014.
• Platform independent
6
Design criteria• Consistency and simplicity
o R. Hoekman Jr., Designing the obvious: a common sense approach to Web & mobile application design, 2010.
• Personalizationo R. Bernhaupt & Pirker, M. M., User interface guidelines for the control of interactive television systems via
smartphone applications. Behaviour & Information Technology, 33(8), 784799. doi:10.1080/0144929X.2013.810782, 2013.
• Revisit notificationso D. Geerts, R. Leenheer, D. De Grooff, J. Negenman, S. Heijstraten, In front of and behind the second screen: viewer
and producer perspectives on a companion app, 2014.o Brown, A., Evans, M., Jay, C., Glancy, M., Jones, R., & Harper, S. (2014). HCI over multiple screens. Proceedings of
the Extended Abstracts of the 32nd Annual ACM Conference on Human Factors in Computing Systems - CHI EA ’14, 665–674. doi:10.1145/2559206.2578869
• Added valueo D. Geerts, R. Leenheer, D. De Grooff, J. Negenman, S. Heijstraten, In front of and behind the second screen: viewer
and producer perspectives on a companion app, 2014.
7
Overview prototypes
2014 Nov Dec Jan Feb Mar Apr May Jun 2015
Digital Prototype 1 evaluation22-24 Nov
Sus score: 87
Digital Prototype 2 evaluation18-19 Mar
Sus score: 79
Digital Prototype 3 evaluation24-26 Mar
Sus score: 74
Final evaluationApr 12 – May 3
8
Remember digital prototype 1?
9
Feedback DGP1• Tests:
o Collapsible menu was not very popular (2/5)o Graphical improvements needed (5/5)
• Your feedback:o Not everyone received all notificationso Pull content on certain moments instead of pushingo Narrow target group downo Two or three shows
10
Changes DGP2
Graphical improvements (5/5)
Image sliders (D.C. revisit notifications)Illustrated character list (D.C. simplicity + scaling)Better map (usability ++)
11
12
Collapsible Static menu (2/5)
Less clicks + better overview usability ++
Better suited for long screens (mobile)
13
Notifications issue• Pushing to app App pulls from DB at startup
New Setup:
14
Pull functionality
Additional information can be pulled at any time
Design criteria: added value
15
Target group• Young adults (+- 15-30)
o Courtois, C. (n.d.). Second Screen Applications and Tablet Users : Constellation , Awareness , Experience , and Interest, 11, 153–156.
• Never used second screen appo Holmes, M. E., Josephson, S., & Carney, R. E. (2012). Visual attention to television programs with a second-screen
application. Proceedings of the Symposium on Eye Tracking Research and Applications - ETRA ’12, 397. doi:10.1145/2168556.2168646
• Familiar with touchscreen• Different educational backgrounds• Show preferences not a requirement
16
Multiple shows
17
General changes DGP2
18
Home screen• Collapsible set Image sliders
o Image catches the attention of usero Beauty of application ++o Idea from: AMC Story Sync, SHO Sync & De ridder app
19
Synchronisation• App syncs with primary screen
no login no initial preference setting Idea from: Shazam for TV
Design criteria: Low threshold
20
Settings• Choose content types• Notifications: on primary or not?
Design criteria: personalisation Research question: where to show content?
21
Encountered problems• Synchronization with primary screen
o No open API for audio synchronizationo Solved with Kodi media player (Web Socket)
• Phonegap app creationo Html 5 video not working on local files
• Web Socket issues for Android version < 4.4o Solved with Phonegap plugin
• Small issues with JQuery Mobileo Initialization sliders
22
Testing DGP2• 6 people • Age: 20 – 26• Familiar with touchscreen• Never used a second screen application• Solo viewing • Native Android apk• Location: trusted environment
• Testing focus: usability
23
Feedback DGP2
Average SUS score: 79
24
Feedback DGP2• Pull button unclear
(4/6)• Arrows sliders blocking text
(3/6)• Timer: next notification?
(3/6)• Overview slides
(2/6)• Pause primary screen during video (2/6)• Provided info too extensive
(2/6)• Automatic jump new notification
(2/6)• Warning new notification on secondary screen
(1/6)
25
Changes DGP3
26
Pull button (4/6)• Button label changed• Position changed• Button click:
Usability ++
27
Graphical• Slider arrows blocking text, bad readability (3/6)
fading arrows• No slides overview (2/6) bullets slider (familiar
feel)
Usability ++
28
Timer next notification (3/6)
Usability ++
29
Warning new notification (1/6)
Usability ++
30
Other changes• Pause primary screen during video
(2/6)o Design criteria: Right balance between engagement and distraction
• Provided info too extensive (2/6)o Info in DB shortened o Design criteria: Right balance between engagement and distraction
• Automatic jump to new notification (2/6)o Usability ++
• Native web applicationo App on KUL servero More flexible testingo Design criteria: platform independent
Encountered problems• Video recording
o Rasberry pi camera module • Not working on openelec• Too heavy work for pi• Quality to low for darker room
o Front facing camera on phone/tablet• No Phonegap plugin found• Too much space needed for video on users phone
• App not working on Android version < 4,4o Web Socket not supported in browsero Use different browser: e.g. Google chrome
31
32
Setup DGP3
New
33
Testing DGP3• 4 people• 2 together, 2 solo viewings• Age: 19-25• Familiar with touchscreen• Never used a second screen application• Web app• Location: trusted environment • Filmed +- 20 min• Logging: Google analytics
o Research question: what content to show?
• Testing focus: usability & information gathering
34
Feedback DGP3
Average SUS score: 74
35
Feedback DGP3• Screen non-active: no notifications on secondary
screen (3/4)
• Notification title: bad readability (2/4)
• Video’s on primary screen (in group viewing) (2/4)
• Settings: notification speed (1/4)
• Seek in video (1/4)
• Primary screen: Notifications not visible with subtitles
(1/4)
36
Changes DGP4
37
Screen non-active (3/4)
• Not possible using web application• Solved native Android appBoth native & web• Anyone an idea for solving this issue with a web
application?
38
Notification title (2/4)
Usability ++
39
Video’s primary screen (2/4)
Design criteria: personalisation Research question: where to show content?
40
Notification speed (1/4)
Design criteria: personalisationResearch question: when to show content?
(All settings stored in cookie)
41
Other changes• Seek in video
(1/4)o Seek in video notifications possible
• Notifications primary screen (1/4)o moved to top
42
Encountered problems• Google Analytics
o Did not log information needed (could not link to user)o Solved by added own logging system
43
Final testing: overview• Target group• Setup • Duration• Planned information gathering• Preparations
44
Final testing: Target group
• Same requirements as before:o Young adults (+- 15 – 30)o Familiar with touchscreeno Different educational backgroundso Show preferences not a requirement
• Controlled (10 people)o 3 groups of 2o 4 individual
• In the wild (+- 30 people)
45
Final testing: Setup• Controlled
o 14 test moments in total • 3x groups of 2• 4 individual• 2 episodes per test moment• Each participant participates in 2 test moments
o Tests in classroom at this facultyo Episode playing on laptop, connected to projectoro Local wifi (needed because of firewalls)
• In the wildo App (link, apk, ipa) availableo Search for participants on Reddit, Facebook, Kodi forum
46
Final testing: Duration• Contolled: 3 weeks (12 april – 3 may)• In the wild: release 12 april, as long as possible
47
Final testing: Planned information gathering• Research questions:
o What content to show?• Logging: tabs, notifications• Logging: settings: types disabled?
o When to show this content?• Quiz: lower scores during notification heavy periods?• Logging: settings: speed changed?
o Where to show this content?• Settings: primary screen notifications disabled?• Logging: videos played on primary or not?• Differences between group – invidual (Ex. Videos)
48
• Design criteria:o Right balance between engagement and distraction
• Quiz: different scores non users?• Filming: attention division• Logging: difference arrival – viewing
o Consistency and simplicity• Sus survey
o Personalization• Logging: settings changes
o Revisit notifications• Logging: difference arrival – viewing
o Added value• Sus survey (frequently use)• Logging: notifications viewed?
Final testing: Planned information gathering
49
• Controlled VS In the wild:
Final testing: Planned information gathering
Controlled In the wild
Logging Yes Yes
Quiz Yes Yes
Filming Yes No
SUS survey Yes No
Group - individual
Yes Yes
50
Preparations• Already found 4 people (2 groups of 2) for controlled• No fixed data yet (planning doodle)• Complete setup test in advance
51
Novelty• Content based on user preference• Content placement on primary screen• Very low threshold• Synchronization Supports multiple shows • Pulling content:
o Not in paperso Not in evaluated apps
• High personalisationo Filterso Primary screen?o Notification speed
52
Planning• Prepare test& finish details app (if necessary)
o 1-12 april
• Final prototype testingo 12 april: sending app in the wild (reddit, facebook, Kodi forum etc)o 12 april -3 may: Controlled testing)
• Evaluation: processing results & integrate into papero 3 -10 may
• Poster & demo HCI dayo 10-21 may
• Thesis text writing (meanwhile during previous steps)o 6 april - begin june
53
Summary• Hours worked (2 combined)
o Digital prototype 2:• timespan = 12 weeks• Hours = +- 450• Hours/week = 37,5
o Digital prototype 3 + paper:• timespan = 1 week • Hours = 49• Hours/week = 49
o Digital prototype 4 + paper:• timespan = 5 days• Hours = 45• Hours/day = 9
54
Summary• Expected score = +- 13,5/20• # blogposts = 21• # comments on other blogs = 3 (Arne) 5 (Robin)
55
Questions?