-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·545 lines (417 loc) · 21.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/styles.css" />
<link rel="stylesheet" href="content/css/styles.css" />
<title>NoTube WP7c Final Review March 2012</title>
</head>
<body>
<header>
<h1>NoTube WP7c</h1>
<nav>
<ul>
<li><button id="prev-btn" title="Previous slide">Previous Slide</button></li>
<li><span id="slide-number"></span><span id="slide-total"></span></li>
<li><button id="next-btn" title="Next Slide">Next Slide</button></li>
</ul>
</nav>
</header>
<div id="deck">
<section>
<div>
<img src="./content/images/notube_logo-with-screen.png" style="margin-left:auto;margin-right:auto;padding-top:100px;"/><br>
<div style='font-size: 50px;text-align:center;'>NoTube WP7c <br>
Final Review, March 2012 </div>
<h2>Libby Miller, Vicky Buser, BBC R&D; Dan Brickley, VU </h2>
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<div class='large'>NoTube is a project about the Web and TV. WP7c focused on
social media and TV, a topic that has become more popular in the lifetime of the
project.<br /><br />
Early on we identified some <a href="">key user questions</a> and some associated <a
href="">technological questions</a>. We chose a <a href="">strategy</a>, some <a
href="">techniques</a>, and specific <a href="">applications</a> to explore these
questions. Here we present a summary, including the results of <a href="">user
testing</a> the N-Screen application and some notes on <a href="">continuity and
longevity</a>.</div>
</section>
<section>
<h1>TV, the Web, and Attention</h1>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<img src="content/images/cat_tv.png" width="200px;" align="left" class="large_image"/>
<div class="large">
There is increasing competition for attention from the Web, and TV is losing out.</li>
<br /><em>But</em> access to activity data, personal data and social network
data potentially mean the viewers TV does get are more valuable
<br />
We took a user perspective on these changes, rather than an industry one.
</div>
<div class="notes">
Driving our work are some observations about behaviour and technology. The Web has
been a looming presence over TV since it began to take up large proportions of
peoples' attention. Competition for attention: for adverts, for types of content, for
free over paid for content, and the sheer volume of content, are all reducing the
amount of attention devoted to traditional TV.
<br />
<br />
However, by measuring and classifying usage more precisely, the technology could
improve the quality of the attention TV does receive. The increased availability of
activity data, personal data and social network data are all valuable resources of
increasing the monetary value of the attention that is given: fewer eyeballs but more
valuable ones.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Key User Questions</h1>
<div class="large">
General questions such as: how do people watch TV together, and why? How is this
changing as the devices and availability of programmes change and with the rise of
social networks? What are the technologies that might help them watch together in the
way they want to, in the future?
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>And Specifically</h1>
<div class="large">
How people can find something to watch when faced with an overwhelming choice? What
is the role of social recommendations to end users? What are the perceived trade-offs
between personalisation in exchange for loss of privacy? How is it best to interact
with the Web and TV simultaneously?
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Specific Applications</h1>
<img src="content/images/nscreen1.png" width="500px;" align="left" onclick="window.open('content/images/nscreen1.png')" class="large_image"/>
<div class="large">
N-Screen: drag and drop sharing and TV control
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Specific Applications</h1>
<img src="content/images/shaker1.png" width="200px;" align="left" onclick="window.open('content/images/shaker1.png')" class="large_image"/>
<div class="large">
<a href="http://www.flickr.com/photos/nicecupoftea/6770443471/">Shaker</a>: Randomising programme chooser.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Specific Applications</h1>
<img src="content/images/teaplayer1.png" width="400px;" align="left" onclick="window.open('content/images/teaplayer1.png')" class="large_image"/>
<div class="large">
TEA and TEAPlayer: video annotation and second screen annotation playback.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>N-Screen Functionality / User Testing</h1>
<img src="content/images/nscreen0.png" width="400px;" align="left" onclick="window.open('content/images/nscreen0.png')" class="large_image"/>
<div class="large">
N-Screen started out as a technology demonstrator – so the UI developed organically – started out as a proof of concept.
We created a more polished, professional visual interface in time for IBC.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>User Scenario</h1>
<img src="content/images/scenario.png" width="400px;" align="left" onclick="window.open('content/images/scenario.png')" class="large_image"/>
<div class="large">
A small group of people together in the same room, each with their own personal
device, deciding what to watch together on one shared TV.
Alternatively the people in the group could be physically remote.
<br />
In either case, the specific scenario is about choosing and watching in
real-time with others.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Second Screen</h1>
<img src="content/images/tv1.png" width="400px;" align="left" class="large_image"/>
<div class="large">
N-Screen's 'Connected TV' is a web page capable of playing streaming and on-demand
HTML and flash video. You connect to a specific TV via a pin number. Multiple TVs can
play the same content simultaneously.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Finding 'Something to watch'</h1>
<img src="content/images/nscreen1.png" width="400px;" align="left" onclick="window.open('content/images/nscreen1.png')" class="large_image"/>
<div class="large">
N-Screen supports different recommendation and browsing strategies, including those
based on Beancounter profiles, within one unified end-user interface.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Suggestions for you</h1>
<img src="content/images/nscreen2.png" width="400px;" align="left" onclick="window.open('content/images/nscreen2.png')" class="large_image"/>
<div class="large">
Each participant starts with a different set of personalised recommendations from one
or more video collections (based on Beancounter).
Our user testing participants all liked the concept of seeing programme suggestions
based on things they’d done in the past.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>'Random Selection' (Shuffle)</h1>
<img src="content/images/nscreen3.png" width="400px;" align="left" onclick="window.open('content/images/nscreen3.png')" class="large_image"/>
<div class="large">
An alternative means of surfacing content buried in the
video collection, or for times when the user might reach a dead-end with the
recommendations approach. It also adds an extra element of serendipity to the
experience. It was liked by testers.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Drag and drop real-time sharing</h1>
<img src="content/images/nscreen4.png" width="400px;" align="left" onclick="window.open('"content/images/nscreen4.png')" class="large_image"/>
<div class="large">
Finding interesting niche video content and sharing these ‘hidden gems’ with friends
are both central components of N-Screen. This aspect of the UX really appealed to people because it’s
simple and fun to use. But they were less convinced about real-time sharing.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Getting recommendations from friends</h1>
<img src="content/images/nscreen3.png" width="400px;" align="left" onclick="window.open('content/images/nscreen3.png')" class="large_image"/>
<div class="large">
Receiving suggestions from friends is another way of finding something interesting to watch.
The idea of sharing and receiving suggestions for things to watch with friends in this way was a highlight of the app for many.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>More information about a programme</h1>
<img src="content/images/nscreen7.png" width="400px;" align="left" onclick="window.open('content/images/nscreen7.png')" class="large_image"/>
<div class="large">
Tapping on a programme suggestion in N-Screen displays an overlay with a brief
programme synopsis, and a 'linked data' explanation as to why it has been recommended.
Contrary to our expectations, people didn't care much about explanations.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Changing the TV using drag and drop</h1>
<img src="content/images/nscreen6.png" width="400px;" align="left" onclick="window.open('content/images/nscreen6.png')" class="large_image"/>
<div class="large">
Once the group has decided what to watch, one of the participants drags the programme to the TV icon.
People <em>really</em> liked this feature, but thought being able to change others' TVs remotely was a terrible idea.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Conclusions from User Testing</h1>
<img src="content/images/N-Screen_testing_visualisation.png" width="400px;" align="center" onclick="window.open('content/images/N-Screen_testing_visualisation.png')" style="margin-left:auto;margin-right:auto;padding-top:50px;"/>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Social TV</h1>
<img src="content/images/SocialTV.png" width="400px;" align="left" onclick="window.open('content/images/SocialTV.png')" class="large_image"/>
<div class="large">
People want to watch TV together. They like talking about TV - they like people
having watched the same thing as them, and older people miss the days when people were
much more likely to have watched something they had. To get the social benefit they don't
have to watch it at the same time as others but sometimes this is fun.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Recommendations</h1>
<div class="large">
People like recommendations from friends, either personally or via social networks:
social networks here are an extension of face to face interactions; but not all
recommendations from friends are equally good.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Privacy</h1>
<div class="large">
People will trade-off privacy and personalisation, especially if they see the
benefit. They're getting used to systems that do this, like Amazon.
54% participants in our Social Web & TV survey either strongly agreed
or agreed with the statement "I don't mind disclosing programs I've
watched in return for personalised TV recommendations"
<br />
44.5% are concerned about the privacy implications of the TV
programmes they watch being tracked automatically, 43% not very
concerned, and 7% not concerned at all.
</div>
<div class="notes">
[It's a mixed picture, clearly there is still some concern, but
attitudes seem to have got more relaxed over the last three years - as
people have become more used to being tracked in general]
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>What to watch</h1>
<img src="content/images/what-to-watch.png" width="400px;" align="left" onclick="window.open('content/images/what-to-watch.png')" class="large_image"/>
<div class="large">
People use various means to find out what to watch, including social networks and
word of mouth, newspapers and listings magazines, and TV adverts and TV show
cross-promotion. They don't spend much time browsing content sites to find programmes
to watch.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>TV and Second Screen User Experience</h1>
<div class="large">
As TVs become more complex, interacting with them via remotes is becoming much
harder, in particular, UX between applications is inconsistent, text input is
difficult, and reading text is difficult.
<br />
There are no conventions yet for tablets as first screen controls, so their behaviour is
not well understood in this context, although in general people enjoy using tablets
and find them intuitive.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Predictions from a User Perspective</h1>
<img src="content/images/secondscreens.png" width="400px;" align="left" onclick="window.open('content/images/secondscreens.png')" class="large_image"/>
<div class="large">
We see second screen devices (tablets and smartphone) continuing to play a major role
in complementing TV.
<br />
We think TVs may get dumber rather than smarter.
<br />
Interactions will be done on mobile devices/tablets which have better UX.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Key Technical Questions</h1>
<div class="large">What's the role of metadata in TV and in applications?
How do devices find out about each other and communicate with each other, and how can we make the process very simple?
What are good technologies for syncing TV and other metadata, and sharing information in real time?</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Pairing</h1>
<div class="large">
Probably the key issue is pairing of devices. We have tried various techniques: QR
codes, numeric codes, autodiscovery, and numeric 'pin' encapsulating enough
information to connect. Pin seems to be most useful, simple and best understood and least
prone to technical problems.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Synchronisation</h1>
<div class="large">
We initially used XMPP permissioning mechanisms to pair devices with TVs (for example using audio signals, QR codes, or numeric pins displayed on screen).
For N-Screen we used the anonymous group chat feature of XMPP, pushing some of the
permissioning out into social mechanisms that people already have.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Metadata</h1>
<div class="large">
Being able to access basic metadata about programmes is very important
for Social TV use cases, because links are the basic currency of social media, and when you share a link you
want it both to uniquely identify the thing you want to talk about (so other people can share it), and
provide more information about it (so people can find out more about it).
Making a small amount of metadata
available not only enables interesting applications to be built which help people explore what's available,
but also helps people share what they found with others.
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Projects Face Choices</h1>
<div class="large">
...modest role in something huge - or a huge role in something modest?
<br />
NoTube's approach was to use our own modest work to start conversations that allowed
us to help shape some huge changes
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Strategy</h1>
<div class="large">Be visible, adaptable, demonstratable and open</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Techniques</h1>
<div class="large">
Use standards and open source software; reuse software where possible<br />
Use web technologies for speed of prototyping<br />
Use mainstream commercial platforms for longevity of artifacts and communications
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Collaborations</h1>
<div class="large">
Adverts (WP4)
<br />
<br />
Watch 'n' buy integration
<br />
<br />
Recommendations (WP3)
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Conclusions: Continuity and longevity</h1>
<div class="large">
Exploitation and dissemination within the BBC
<br />
<br />
Demonstrator longevity
<br />
<br />
Artifact longevity (blogposts, flickr, vimeo, github)
<br />
<br />
Open Source code
</div>
</section>
<section>
<img src="./content/images/notube_logo-with-screen.png" style="padding:10px;width:150px;position:absolute;right:0px;top:0px;"/>
<h1>Thank You</h1>
<div class="large">
Photo credits:
<br />
<br />
<a href="http://www.flickr.com/photos/mediawench/6811065552/">Maggie Osterberg</a>
<br />
<br />
<a href="http://www.flickr.com/photos/aijoskobi/2869334902">CarrieLu</a>
</div>
</section>
</div>
<!-- /deck -->
<footer>
<p id="footerCredits">NoTube 3rd Review, 2012-03-27
<img src="./content/images/fp7.jpg" height="30px"/>
<img src="./content/images/eu.jpg" height="30px"/>
</p>
<p id="footerDate"></p>
</footer>
<script src="resources/jquery-1.4.2.min.js"></script>
<script src="resources/htmlSlides.js"></script>
<script>
//This is just to demo the custom events
$('html').bind('newSlide', function(e,id) { console.log('New slide event, slide number ' + id)});
$('html').bind('newAction', function(e,id) { console.log('New action event, action number ' + id)});
</script>
</body>
</html>