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?