A TV Interface for Set-top boxes with Social Functionality So a Larsson and Jenny Peterson
September 28, 2010 Master's Thesis in Computing Science, 30 credits Supervisor at CS-UmU: Anders Broberg Examiner: Per Lindström
Umeå University
Department of Computing Science SE-901 87 UMEÅ SWEDEN
Abstract The fact that digital TV and set-top boxes are connected to Internet opens up for many possibilities. One concept that has emerged because of this is social TV, which has to do with social functionality in combination with watching any type of content: on TV or on the web. In this report an interface for digital TV is presented with social features. The challenge with developing this is that the viewer is in a lean-back mode when watching TV and not up for complicated interaction tasks. Because of this, the aim of the design was to have relevant social features, that will t in a TV context. This meant that they would support social activities that are already being made when watching TV and movies and also demand a very simple interaction. A concept was developed through literature studies and the design process. The result is a interface with a simple navigation that constitutes of ve widgets, all that supports dierent kinds of watching behavior and social activities. The interface has been implemented to an interactive prototype that conveys the look and feel of the concept.
ii
Contents
1 Introduction
1
1.1
Problem Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.2
Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
1.3
Limitations
2
1.4
Thesis Outline
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2 Method
3
5
2.1
Idea Seed
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2.2
Sketching
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
2.3
Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5
3 Background 3.1
3.2
3.3
3.4
Interactive TV
7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.1.1
De nition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
3.1.2
Applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
3.1.3
Challenges with Interactive TV . . . . . . . . . . . . . . . . . . . . . .
10
Social TV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
3.2.1
Synchronous and asynchronous interaction . . . . . . . . . . . . . . . .
12
3.2.2
Social television systems . . . . . . . . . . . . . . . . . . . . . . . . . .
12
3.2.3
Program genres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
3.2.4
Challenges with social TV . . . . . . . . . . . . . . . . . . . . . . . . .
14
Social Recommender Systems . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.3.1
Recommender systems . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
3.3.2
Recommender for TV content . . . . . . . . . . . . . . . . . . . . . . .
15
Conclusions from Literature Study
. . . . . . . . . . . . . . . . . . . . . . . .
16
3.4.1
Interactive TV
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
3.4.2
Social TV and recommender systems . . . . . . . . . . . . . . . . . . .
17
4 Social Media
19
4.1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
4.2
Levels of contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
iii
iv
CONTENTS 4.3 4.4
4.5
Mash-ups
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
Social networking sites (SNS) . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
4.4.1
Pro le-based
22
4.4.2
Sharing material
4.4.3
Bookmarking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5 Calm Technology
22
25
5.1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
5.2
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
5.3
Related work
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
26
5.3.1
Aesthetics of interaction . . . . . . . . . . . . . . . . . . . . . . . . . .
26
5.3.2
Dealing with information
. . . . . . . . . . . . . . . . . . . . . . . . .
27
5.4
Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
5.5
Summary and conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
6 From Theory to Practice
31
7 Design Process
33
7.1
7.2
Idea Seed
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Literature Study
7.1.2
Focus Group
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
7.1.3
What, Why, How . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
7.1.4
Re ections from idea seed phase
34
Sketching
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
34
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
7.2.1
Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
7.2.2
Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
7.2.3
Sketching
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
7.2.4
Levels of Social Functions . . . . . . . . . . . . . . . . . . . . . . . . .
39
7.2.5
Social Main Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
7.2.6
Inspiration
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
7.2.7
The Winning Concept . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
7.2.8
Low- delity Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . .
41
7.2.9
UI-Flows and Wireframes . . . . . . . . . . . . . . . . . . . . . . . . .
42
7.2.10 Concept Packaging . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
7.2.11 Re ections from sketching phase 7.3
33
7.1.1
. . . . . . . . . . . . . . . . . . . . .
43
Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
7.3.1
High- delity Prototyping
. . . . . . . . . . . . . . . . . . . . . . . . .
44
7.3.2
Computer based Mock ups
. . . . . . . . . . . . . . . . . . . . . . . .
44
7.3.3
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
7.3.4
Evaluation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
7.3.5
Re ections from prototyping phase . . . . . . . . . . . . . . . . . . . .
48
CONTENTS
v
8 Result
49
9 Conclusions and Discussion
51
9.1
Limitations
9.2
Future Work
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
9.3
Re ections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53
10 Acknowledgements
55
References
57
vi
CONTENTS
List of Figures
3.1
Digiturk world Cup Service provides information about the schedules and scores in the World Cup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
3.2
The EPG application in Boxer TV Navigator. . . . . . . . . . . . . . . . . . .
9
3.3
Viasat OnDemand contains two video on demand parts: a video store and play channels.
3.4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
Google TV wants to combine the good parts from two worlds: the web and TV.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9
3.5
CollaboraTV with the virtual audience.
3.6
Joost, a free Internet television application with live chat and sharing functions. 13
3.7
A remote control as a secondary display for social activities. . . . . . . . . . .
4.1
The picture shows dierent levels of contributions that can be made in social media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2
13
21
When watching a show on TV4 Play the viewer can chat with friends about it via Facebook. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3
12
22
Youtube has many social features that are feasible when watching something or after watching something.
. . . . . . . . . . . . . . . . . . . . . . . . . . .
23
5.1
Heat reactive wallpaper. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
5.2
The Ambient Orb glows dierent colors depending on the information changes. 28
7.1
A GANTT schedule of the work process. . . . . . . . . . . . . . . . . . . . . .
7.2
The picture shows some brief result from the workshop categorized in levels of social activity.
7.3
33
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
The picture shows the famous icons used for the Role storming method in the workshop and some of "their" thoughts. . . . . . . . . . . . . . . . . . . .
36
7.4
Martin Berggren is the fake person that constitutes our primary persona.
. .
37
7.5
Anna Isaksson is a fake person that is part of our secondary personas.
. . . .
38
7.6
Lena Schoultz is a fake person that is part of our secondary personas.
. . . .
38
7.7
A sketch of the social main page. . . . . . . . . . . . . . . . . . . . . . . . . .
40
7.8
A mood board with pictures to inspire during the sketching phase.
40
vii
. . . . . .
viii 7.9
LIST OF FIGURES Sketches of the the idea of having a social main page.
. . . . . . . . . . . . .
40
7.10 A very simple sketch of the structure of the interface to work further with. . .
41
7.11 Pictures from the low- delity prototype testing. . . . . . . . . . . . . . . . . .
41
7.12 The two suggestions on the interaction. To the left: the sneak peak menu is visible. To the right: The sneak peak menu with full screen is visible.
. . . .
42
7.13 A sketch of the how the structure and ow is supposed to work. . . . . . . . .
42
7.14 The wire frames, showing content and navigation. . . . . . . . . . . . . . . . .
43
7.15 The mood board containing the visual elements.
45
. . . . . . . . . . . . . . . .
7.16 Mock ups of the visual design in Photoshop. . . . . . . . . . . . . . . . . . . .
45
7.17 The picture shows the components in the prototype.
46
. . . . . . . . . . . . . .
7.18 The picture shows the prototype, from the simplest version to a more complex. 46 7.19 User tests of the high- delity prototype. . . . . . . . . . . . . . . . . . . . . . 8.1
The sneak peak menu on top of a TV screen.
8.2
Anytime, the widget and the full screen mode.
47
. . . . . . . . . . . . . . . . . .
49
. . . . . . . . . . . . . . . . .
49
8.3
On TV now, the widget and the full screen mode. . . . . . . . . . . . . . . . .
50
8.4
Upcoming, the widget and the full screen mode. . . . . . . . . . . . . . . . . .
50
8.5
Entertainment and Pro le, the widgets were developed but not the full screen
8.6
modes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
50
Chapter 1 Introduction There has been a change in TV history in the past few years where analogue transmission has been replaced by digital which is viewed through a set-top box. As a result of digital TV the functionality is more complex and content can be provided not only from broadcast but also from the local storage in the box or Internet. The fact that the set-top box is connected to Internet opens up for many possibilities.
Already there are dierent applications and
services in set-top boxes and there will be more to come.
One new interesting area that
is researched but also a reality in some cases is Social TV. The idea is that social features will enhance the viewing experience by helping the viewer to nd relevant content, socialize with friends and have fun. Many people think that Social TV is something new but the fact is that TV has always been social. Before, people watched TV in a dierent way than today. The TV was placed in the living room where family and friends gathered to watch together.
Nowadays the
TV is usually placed in separate rooms and at least half of Americans usually watch alone [25]. The video on demand services have resulted in people watching TV programs when it suits them best, it is no longer necessary to watch a TV program at a speci c time. This has lead to people not talking about TV in the same way as before when people gathered around the water cooler at work to discuss the happenings of yesterday [35]. So how can a TV application bring back the social activities? With social TV people can for instance recommend TV programs to each other and make it easier to nd something to watch with help from friends. People still have the need to share their reactions and opinions and they even compete mentally when watching a quiz show.
What if it was possible to actually
compete with your friends that also watch the same quiz show? This project was done at TAT's Innovation department in Malmö, Sweden during spring 2010. It was made as a Degree Project in Computing Science Engineering within the eld of Interaction design at Umeå University. This is an interaction design project where a User Interface for set-top boxes with social functionality was developed.
1.1 Problem Statement Social applications and other services may give a value to the viewer when watching TV, but they call for a change in the viewing behavior. The increased complexity and interactivity will make it necessary for the user to become more active and pay attention, thus going towards a more lean-forward activity. However, studies have shown that people enjoy not being very active when watching TV, it is a place to be relaxed and entertained.
1
It is
2
Chapter 1. Introduction
important to keep this essence of TV and not try to change the qualities that people like about it. Because of this, the social features must be very relevant to the context of watching TV or movies. They can not be intrusive and distractive to the user by taking focus from the main activity, which is to watch TV and movies. Another side eect of increased complex functionality is the interaction and navigation. The remote control is a simple tool that uses four-way navigation and therefor the interface structure must be simple. The challenge is to include social features in a set-top box in a way that is relevant in a TV context .
1.2 Goal The goal of this master thesis is to design and evaluate a set-top box interface where social functionalities are included in a way that is appropriate when watching TV. This means that the social features should be relevant within the extent of TV and behave in a way that provides a simple interaction.
The goal is also to develop a high- delity interactive
prototype of the interface with the development environment TAT Motion Lab. An interactive prototype shows the whole concept and demonstrates how the navigation will work and is also a tool to nd potential problems with the design. To achieve this, the following sub-goals have been established: 1. Get a good understanding of the concept social TV. Because of this a background study will be made about interactive TV, social TV and social recommender systems. All of these have to do with social TV and will help us gaining more knowledge about designing for social TV. With general knowledge in the areas we will get a good starting point and be aware of positive and negative aspects about the subject. The background study can be read in chapter 3. 2. Find out which social functions that is suitable for a TV context.
To nd out, a
deepening study will be made about social media that will help us to nd smart ways to include social functionality in digital media. This deepening study can be read in chapter 4. 3. Find out how a TV application can be designed to be calm and relaxing way and have a simple interaction. To learn about this, a deepening study will be made about calm technology. This deepening study can be read in chapter 5. 4. Design and implement the interactive prototype. 5. Evaluate the prototype to nd out if it is a working concept.
1.3 Limitations This master thesis will provide with a conceptual design and a high- delity prototype and not a fully working application. The aim is to convey the concept through the prototype so that it can work as a starting point for future work.
The issues concerning privacy
have not been dealt with. With social functionality in combination with TV the user lets other people know both their TV habits and other personal information.
There should
be a possible option to completely turn of the social TV and also to have dierent levels of social features.
The user must feel in control of the application and not the opposite.
The interaction with the interface is limited to an ordinary remote control with four-way navigation and some extra buttons.
1.4. Thesis Outline
3
1.4 Thesis Outline Chapter 2 - Method Here the dierent methods used during the work process are brie y presented. The three phases in the work process are Idea seed, Sketching and Prototyping.
Chapter 3 - Background This chapter will provide with theory about the subjects Interactive TV, Social TV and Social Recommender Systems.
Chapter 4 - Social Media This is a deepening study about social media. The purpose with this study is to nd out which social media that is suitable in a TV context.
Chapter 5 - Calm Technology This chapter is a deepening study about calm technology. By nding out how decorations can be used to present some information the TV interface can be less obtrusive for the viewer.
Chapter 6 - From Theory to Practice Here we will present the knowledge from the literature study and the in-depth studies that will be brought into the design process.
Chapter 7 - Design Process In this chapter the whole work process with the design of the interface will be described. From pre-study to implementation of the interactive prototype.
Chapter 8 - Result In this chapter the result will be presented with screen shots of the TV interface and descriptions of the social content in the interface.
Chapter 9 - Conclusions ans Discussion At last, the goals stated in chapter one are discussed and concluded, limitations with the work are described and some thoughts about future work are presented.
4
Chapter 1. Introduction
Chapter 2 Method A time plan was developed where important steps were established. For each step there was a goal explained to be able to know the purpose of each activity. As a method for the work process, TAT's own way of working in projects was embraced. It consists of three parts: idea seed, sketching and prototyping.
2.1 Idea Seed The purpose of the idea seed phase was to specify the idea of the thesis. First, a literature study was made to get more knowledge about the subjects interactive TV and social TV. A user study was conducted to nd out the users' needs and opinions early in the design process. To narrow down and specify the problem and the project goal the method "What, Why, How?" was used. Answers had to be found on the questions "What are going to be done?", "Why is it going to be done?" and "How is it going to be done?" After the answers were clearly established the sketching phase could begin.
2.2 Sketching A brainstorming session was performed in order to nd new ideas with the knowledge from the literature study as a starting point. The ideas were visualized with sketches and one of the ideas were chosen and developed further into a low delity prototype.
The paper
prototype worked as a tool to develop the structure of the user interface and to early in the design process detect problems with the navigation and interaction by conducting a number of user tests.
2.3 Prototyping In the prototyping phase the low delity prototype was translated into a computer based interactive prototype.
The high delity prototype was developed in TAT's development
environment Motion Lab using the programming language TML (TAT Markup Language). During the implementation the nal interface design was done, forms and colors were decided to complete the actual appearance. The graphical elements were done in Adobe Photoshop and Adobe Illustrator.
Finally the prototype was evaluated and tested to nd out if it
ful lled the goals and the user's needs.
5
6
Chapter 2. Method
Chapter 3 Background A literature study has been made in order to gain some general knowledge about the current state of social TV. The purpose was to learn what kind of work that already has been done in the area and what kind of problems that exist. This gives us a good starting point and prevents us from making mistakes that others have made. The background study consists of three parts that all have to do with social TV in some way: interactive TV, Social TV and Social recommender systems. Interactive TV is a concept that deals with the viewer's interaction with the TV. Since social TV is a part of interactive TV and thereby shares the same issues and challenges, it is important to investigate in this subject.
The section social TV will get us deeper into the aspects of
social TV, what kind of work that has been done and what kind of challenges that exist. A social recommender system is needed in the interface since we want the users to be able to recommend each other content. This is also a feature that is common in social media so it will be positive for us to gain some knowledge about it.
3.1 Interactive TV In this section we will give an overview of interactive TV. It is an important area to investigate in since Social TV is a form of interactive TV and they share the same functionalities and problems.
First we de ne Interactive TV by giving a brief technical background to
it and what it means. Then we present some common applications in interactive TV and lastly explain the design issues.
3.1.1 De nition Interactive TV is a broad term that deals with a viewer's ability to interact and aect what happen on the screen[24]. It is TV that either has enhanced content in the interface or that lets the user interact with some type of content in dierent ways. Some examples can be trivia about an artist during a music video, allowing people to vote in a show using their phones or the ability to pause a live broadcast. Interactive TV has emerged through the transition from analogue to digital TV, but the meaning of has in a way been here for a long time. In the 50's the rst interactive television program was aired, the children's show Winky Dink and You. The show was about Winky Dink and his friends and viewers could interact with the show using a set of crayons and a
7
8
Chapter 3. Background
plastic lm. By putting the plastic lm on the TV screen the children could draw objects like bridges or ropes to help save Winky Dink and his friends from trouble [31]. Digital TV has opened up for more possibilities which have led to increased interactivity TV Sets. In traditional TV there were two layers: the background video output and the foreground that were used to display additional information, like teletext (Text TV). Both these layers were from the same source in the broadcasting stream.
The dierence with
set-top boxes is that they provide more sources. The content may come from a local storage in the box, from a live or recorded broadcast or Internet. [13] The technical side of digital TV is as follows. Digital TV is transmitted with analogue signals that contain digital information like video, audio and data signals. The technology used is called MPEG-2 technology which is the same as in DVD players.
Just like DVD
has some advantages over VHS, digital TV has some advantages compared to analogue TV. The picture and sound quality is better, there are more channels and additional information and material can be provided in the form of services and applications [9].
Figure 3.1: Digiturk world Cup Service provides information about the schedules and scores in the World Cup.
Interactive TV can be divided into Enhanced TV, Personalized TV and cross-media interaction [23]. Enhanced TV means that content like text, graphics or video is laid on top of the broadcasting stream. This content can be displayed and interacted with along with a show (synchronized) or can be reached whenever (asynchronized). Common synchronized content can for example be statistics in sport events or information about the actors in shows or movies. Examples of asynchronized data can be weather and news reports that are updated continuously. Figure 3.1 shows an application during a World Cup in Turkey. The viewer can receive information about Turkey's performance in the World cup, track scores of each team in each group and see match schedules.
Personalized TV gives the viewer
more control over the content than when using traditional TV. The broadcast stream can be stored locally on to a hard disk and because of this the viewer can pause, rewind and fast-forward the content.
Cross-media interaction refers to the way dierent medium are
used in combination with TV to create interactive moments in shows. The viewer interacts with the program content using phones, SMS or laptops when for instance voting in Idol for the winner.
3.1. Interactive TV
9
3.1.2 Applications Two common applications that are used in interactive TV now are Electronic program guides (EPG) and video-on-demand [23]. The EPG is a very necessary application considering there can be hundreds of channels in one household.
Zapping hundreds of channels or reading
printed television guide for that many channels will not work. Jensen writes: "Viewers will demand more comfortable, eective and sophisticated navigation tools and interfaces to the television content" The EPG is one solution for this that oers the viewer to see current and upcoming shows and search for a particular show. It can also remind the viewer when bookmarked show is on or record a show automatically. Some EPG's have recommendation systems that keep track of the viewer's preferences and thereby recommending similar content. Figure 3.2 shows the EPG in the set-top box Boxer TV Navigator. It allows the viewer to view and search shows for 6 upcoming days, categorize and record shows.
Figure 3.2: The EPG application in Boxer TV Navigator. Video-on-demand services have changed the way we watch TV. We no longer need to adjust to the TV schedule, because the same content can be found in the website of the channel or in the set-top-box. The set-top-box from Viasat OnDemand has a video store and oers the ability to watch play channels like SVT Play and TV4 Play (see
3.3). Also
movies can be digitally rented though the set-top box whenever.
Figure 3.3: Viasat OnDemand contains two video on demand parts: a video store and play channels.
10
Chapter 3. Background Other interactive applications that have been made are chat applications, interactive
advertising and games and betting applications [23]. Chat applications engage the viewer to communicate with the host or the guests in the show or with other viewers. Interactive advertising is often targeted and customized for a speci c audience and encourages the viewer to be part of contests, quizzes or to purchase products directly. Games applications have been made that let the viewer be part of broadcasting events like quiz shows or sports events, by letting them answer to questions associated with the show.
Figure 3.4: Google TV wants to combine the good parts from two worlds: the web and TV.
Google are currently working on an interactive set-top-box that brings the advantages from the web into the TV experience (see
3.4) [20]. They argue that is it easier to nd
content to watch on the web compared to going through complicated EPG's or channel sur ng. Even though it is easier, TV is still fun to watch compare to the small screens that computers have. Google TV thinks these two aspects should work together. In the Google TV it is possible to search for anything in a database of all the channels in the household, favorite shows, YouTube and other websites. The content can be added to a home screen where all the favorite channels, web sites, music play lists and photos are stored.
3.1.3 Challenges with Interactive TV Navigation Designing for interactive TV is a relatively new area within the eld of interaction design and therefore not well explored.
Some issues that need to be considered when designing
an interactive TV interface have been discussed and identi ed[28]. The most challenging problem has to do with the navigation. Traditional analogue TV only had some few features where the most common were changing channel, changing the volume and using teletext features like Text TV. This has worked well with the simple remote control that uses the one button per function paradigm and thereby gives direct access to any functionality through one button press [18]. As a result of digital TV and set-top-boxes, the TV is becoming more like a computer in a way since Internet is provided. This opens up for many new features and possibilities. Despite of all new functionality it is still the simple remote with four-way navigation that is the interaction tool. criteria[32].
This calls for an interface design with simplicity as the foremost
The challenge is to have complex features in the interface but still keep the
navigation simple.
3.1. Interactive TV
11
Lean-back activity The need for simplicity also has to do with the context of watching TV. Lack of knowledge and design guidelines within the area has led to applications being designed with the same principles as computer applications. When using computers a user is active and engaged and the activities are task-oriented. The applications have complicated design that requires concentration and attention[23]. The context in which people are using TV is dierent and cannot be designed with the same principles as applications in computers[28].Sometimes TV is used as background noise without someone watching it.
Other times people are doing
another activity while watching TV, making it a secondary activity. Other times the viewer might be concentrated, like when watching a good movie or interesting documentary. But overall, watching TV is a lean-back activity where both body and mind are relaxed and not very active[49]. This lazy interactivity in combination with the distance to the screen demands a very simple interface. Computer interaction methods like using radio buttons, scroll bars, slider bars and menu hierarchies are not suitable for the lazy interactivity. It is important that the TV interface has a shallow menu where physical buttons can work as direct ways to get to popular features. A major interaction problem to solve is the issue with text input which is a time-consuming task using a simple remote[28]. Text input tools have been made in two ways, using the remote to navigate through a virtual keyboard on the screen or by using the remote buttons the same way as writing SMS on a phone.
Research has been
done in the area and one of the solutions seems to be to simply avoid having text input in the interface[28].Since the remote control is a big issue concerning the interaction, other suggestions have been researched and prototyped.
Some interaction ways include voice
input, gestures, electronic ink, tangible interfaces, other hand held devices and secondary screens[48].
Balancing primary and secondary activities Something that makes TV dierent from other media artifacts is that there are two separate parts in the interface. The display of the video stream which is the core function of watching TV and the interactive elements that are placed on top of the video stream. Since they often are displayed at the same in the interface, there need to be a good balance between them. Lee et al. writes[28]: "The viewer needs to switch his/her attention between the playback and interactive elements while watching TV. A good design would be one where this attention switching is natural and minimally constrains one while the viewer is interacting with the other." The designer need to decide in what way both of the parts can be presented without interfering on each other. Two popular ways to do this are the L-shape and overlay. The L-shape transforms the TV content stream into a smaller square in the upper corner while the interactive elements are laid as the shape of an L around it. The overlay method keeps the video stream as full screen while the interactive elements are partially blocking the view. One important aspect to remember is that the enhancements should not compete with the main content in the TV[32].
Watching TV is the primary task and the interactive
elements should not take too much focus from it.
Research has showed that TV is so
integrated in people's lives that the activity of watching TV is sometimes more important than what content that is actually watched[44].
12
Chapter 3. Background
3.2 Social TV When the television came in the 1950s it was placed in the living room and family and friends sat and watched together. They could together choose what to watch and comment the program or share a reaction to the program. Today it is more common that there is more than one TV in a household and that the TVs are placed in the family member's rooms which have resulted in people watching TV separately instead of together. Actually, a typical American home now has more TVs than people and at least half of Americans usually watch alone [25] [35]. Since the television programs still had a xed broadcast time people were at least watching TV at the same time.
This new behavior of watching TV
resulted in people talking about TV the next day at work or in other social contexts instead and television shows acted as a conversation starter [25].
This phenomenon is called the
water-cooler eect, which is when a group of people meet and discuss current events and gossip. But the way of watching TV changed even more. Nowadays with digital video recorders and web TV it is not necessary to watch a TV show at a speci c time. This has lead to people no longer discuss TV around the water cooler [35]. Not only is the independence of time the reason why people stopped watching the same shows but also the increment of the number of channels. Even though we are not talking about TV or watching TV together as much as we used to do people still have a need to share emotions and opinions. Viewers compete mentally when watching a quiz show, they react emotionally to the TV content and they also want to share and recommend programs to friends. News and sports events are discussed at work, at school and on the bus [12]. Furthermore, a social television system like on-line video sharing enables people who are not co-located to actually get the feeling of watching TV together. Friends and family who live long distances from each other can watch together and streaming video on the TV can be used to keep in touch with each other.
3.2.1 Synchronous and asynchronous interaction One of the main features of social interactive television is the possibility to communicate while watching a TV show [19]. A real-time chat for example, can be used when watching on-line video. A conversation during a movie can be very enjoyable and fun but it can also end in frustration by taking too much attention from the viewer. The question is if people would chat during a movie at all, but if a conversation with a friend increases the feeling of togetherness and makes the viewing experience more positive it might be a new, more active way to experience video content [52]. The mode of communication can be either text or voice but it does not necessarily need to happen in real-time. Synchronous interaction means that you are talking while watching and asynchronous interaction means that you talk about the TV programs afterwards, at another occasion [19]. Instead of having a text chat in which messages can be sent instantly to another person who receives it at the same moment the social features can be recommendations, comments and notes that can be read by people at another time [19]. The result of digital video recorders, web TV and other video on demand services is that people do not watch TV at the same time as we used to do before. This makes it harder to discuss shows with others since no one is watching the same shows at the same time anymore and it can even be so that people avoid talking about TV shows because they fear that it could spoil yet-to-be-seen episodes. But people still want to communicate their opinions about a TV show to their friends and one way to enable this is to make it possible for people to leave notes and comments in a TV show that can be read by people at dierent moments.
3.2. Social TV
13
3.2.2 Social television systems Chris Harrison and Brian Amento at AT T Labs have focused on the asynchronous interaction and they developed CollaboraTV. CollaboraTV is a system that provides communication and participation between people who are watching TV at dierent moments. When watching a show you can choose audience members which shows up as avatars on the screen, see gure
3.5. The avatars as a virtual audience give the impression of watching together
with someone else but independent of time. While watching a TV show the viewer can write comments, react with emoticons and give positive or negative response with thumbs up or thumbs down. Those who are watching at the same time can see the comments directly but the comments are also saved for those who will watch it later [35].
Figure 3.5: CollaboraTV with the virtual audience.
CollaboraTV is a one way to make social interactive television and above all to create presence awareness with the virtual audience. Other examples on how to make social interactive television is online video sharing, such as YouTube [1] and MySpace [2] where the users easily can upload, search and rate videos.
Web TV systems such as Joost [3] and
enriched instant messaging like Messenger TV are also systems that enable communication and sharing functionality [19]. Joost, see gure 3.6, is a free Internet television application with over 20,000 shows. The viewers who use the application can send instant messages and share their favorite TV shows [3].
Figure 3.6: Joost, a free Internet television application with live chat and sharing functions.
14
Chapter 3. Background Marie-José Montpetit works with social TV and she wants television to be something
that can enable discussion and sharing TV content between people in dierent places and she also want to make it easier to nd something to watch.
The prototype that she has
developed at the MIT Media Lab is a concept that avoids using the TV screen for social features. Instead a secondary display is used to avoid that irritating messages pop up on the screen while watching, see gure
3.7.
The application also allows friends to suggest
shows to one another [4].
Figure 3.7: A remote control as a secondary display for social activities. The applications described above all have dierent interaction aws when it comes to a TV context. Many demands for text input, since they include a chat function. Text input is more appropriate when interacting with a computer than a TV and a simple remote control. Both the virtual audience and a secondary display can be distracting when watching TV. A secondary display might even demand for more attention than the actual TV show which in fact is the primary activity.
3.2.3 Program genres But is a virtual audience or communication on the whole suitable for all kinds of genres of TV shows?
Geerts et al.
have done research on how television genres can play a role
when it comes to socializing in combination with watching TV. Studies that concerns social interactive television have shown that the genre of the television content has an impact on how much people talk and discuss while watching television as well as afterwards. The two interaction modes, synchronous interaction and asynchronous interaction, are also used depending on the genre [19]. It is not appropriate to talk during some types of TV shows because it is too disturbing but afterwards it can be interesting and fun to discuss with others what you just saw. The study showed that the genres during which people are talking to each other the most are news, soap operas, quiz, sports, reality shows and talk shows. Especially sports are a genre that is suitable for social interactions using for example a voice chat to communicate during the sports event. Quiz shows are also a genre when people often talk while watching; this is because they want to show o their knowledge in front of their friends and family. It is during the quiz show that people want to show their competence by trying to answer a question before the contestants in the show. Geerts et al. suggest that those genres are best suited for synchronous interaction [19]. Genres that people tend to talk most about after watching it were lms, news, soap operas and sports. When designing a TV system with asynchronous interaction they suggest
3.3. Social Recommender Systems
15
these genres and above all news and movies which people talk most about. Geerts et al. ends their article with a suggestion on how the result from their study can be used. Since the user is in a laid back mode it is not desirable to be forced to choose every time you want to be social or not. If we know during which genres that people want to talk, the TV can change the user's status automatically for these genres and the user can stay relaxed in the sofa [19].
3.2.4 Challenges with social TV A social television application could enrich the viewing experience, support asynchronous television watching and even make it easier for people to nd relevant TV content to watch with support from a social network.
But there are also some challenges with socializing
while watching television:
Social TV might not t everyone and all situations.
It is not comfortable to sit in
front of the computer in a lean forward mode to watch a movie. The living room is the place where you want to watch TV, sitting in the sofa. Furthermore, the genre of the TV show has a meaning, some are appropriate for social activities and some are not [19].
Both chatting and watching at the same time require attention which can be distracting for the viewer. The study that Geerts et al made with CollaboraTV showed that the viewers found the chatting fun as well as distracting. Some people might not nd any value to a chat feature at all.
But there could be some kind of break when people
could chat without missing video content to minimize the feeling of being distracted. Intermissions in TV content may not be appropriate for all types of content though [52].
The remote control is a limited way to interact with a social TV application. For social functions on the TV for example chatting, is the remote control a limiting device. Text input is hard to achieve with only a remote control.
Privacy is an issue when it comes to social television applications. How do we choose when we want to be available for social activity?
Do we even want to make these
choices at all when we are in a laid back relaxed mode? And also, people care about whom they share a viewing experience with and wants to have the availability to choose their own group of friends that can read their comments [52].
Another challenge is to consider what happens when there is more than one person in front of the TV. A social TV application might work ne as long as it is only one person that wants to control the TV. When there is a whole family for instance, it is likely that con icts will arise when one member of the family in the middle of a TV program starts a chat conversation with someone.
The TV might need a personalization so
that those kinds of con ict can be avoided.
3.3 Social Recommender Systems When watching TV nowadays people have a lot of content to choose from.
The digital
television entailed a large amount of TV channels which in turn has lead to a huge amount of TV content. This large content makes it di cult for people to nd the relevant material
16
Chapter 3. Background
and the user might end up with watching something that is not even in the eld of interest. Electronic program guides and personalized TV guide systems are examples on how the navigation and searching for TV programs can be simpli ed. When making decisions in our everyday life, for instance when going to the movies, the choice of movie is in uenced by many factors. When choosing which movie to watch we can rely on the opinion of a person who shares the same taste in movies or we can base our judgment on the information that is available about the movie, for example genre or actors [10]. A recommender system that can lter the content and recommend what the user is interested in based on both content and social aspects can help the user to discover things that they might not have found by themselves and it could also be a solution on how to lter this overabundance of material [15].
3.3.1 Recommender systems A recommender system is a way to lter information so that a user can nd items such as lms, music and books that are expected to be of interest but have not been encountered before.
Recommendation systems can be divided into two categories, content-based and
collaborative recommendations [42]. Content-based recommendations are based on the information available about the item or artifact. The system predicts the user's rating on an item by comparing the user's pro le and prior ratings to items with similar characteristics. The system learns to predict what the user likes or dislikes in regard to the nature of the items that the user has rated. Collaborative recommendations concern the user's social environment. The system is provided with the user's ratings which are compared to other user's ratings on the same or similar items to determine the degree of interest for an unnoticed item.
The system bases the
recommendations on the similarities between what the user likes and on what the user's friends like [42] [10].
The limitation with using only ratings as ltering approach is that
it only works ne when there are enough of other users that rate the items in the system. Also, when a new item is added to the system it will not have any ratings and will not be recommended either. A hybrid recommender system is a combination of content-based and collaborative recommendations that can be a way to overcome some of these problems and make the recommendations more truthful [10].
3.3.2 Recommender for TV content Two important factors to consider when it comes to recommendations of TV content are the context and the social network relations. De Pessemier et al. developed a recommendation system that was based on the user's own ratings but also complemented with suggestions from friends. By connecting the application to Facebook they could use personal information such as sex, age and country to lter content but above all the user's friends list.
The
friends became a new way for users to explore new content by both receiving and sending recommendations to each other. With social recommendations combined with traditional recommender systems it is possible to get hold of suggestions that are more appealing and also more unexpected [15]. Traditional recommender systems do not take into account the context in which the user consumes TV. The way people are watching TV changes depending on the time of the day, if it is weekend or not or if you are at work or at home. For instance, it is more likely to watch a movie in the evening than in the middle of the day. Mobile devices and laptops also have an impact on the context as it enables users to watch TV while on the move. It
3.4. Conclusions from Literature Study
17
is not enough to only rely on a user pro le that re ects the personal taste because the taste changes depending on where the user are, what the user is doing and how the user is feeling at that moment. The recommendation system developed by De Pessemier et al. stored the context as an extra information source to improve the recommendation algorithm [15]. Zimmerman and Kurapati conducted a study were they developed a recommender system for TV shows that was supposed to help viewers to nd new shows to watch and that the user could feel that the recommender was trustworthy as well. When people are seated in front of the TV they are in a very relaxed mode and the choice of TV program is usually not planned. When coming home from work or school at night you are tired and just want to watch whatever is on TV and zap until you nd something interesting.
It should not
be a challenge to nd something to watch it should be easy in the view of the laid back mode. The TV show recommender was supposed to give suggestions on new TV shows but the users felt that the recommender had failed when they had not heard about the program before.
If the users could from the beginning understand why the recommender system
had suggested the show, Zimmerman and Kurapati meant that the user might trust the recommender a bit more and also be more forgiving if it recommended something that they did not like. Another feature that they also thought would increase the trustworthiness was to have the recommendations as conversational sentences that made it feel more like getting the recommendation from a friend rather than a computer [56].
3.4 Conclusions from Literature Study The most valuable and important facts that we have learned during the literature study are presented here and will work as a foundation of knowledge that we want to work with.
3.4.1 Interactive TV Set-top boxes are provided with Internet.
Content can be distributed from a broadcast,
from Internet or from a local storage in the box.
Interactive TV can be made in three
ways; Enhanced TV means that content like text, graphics or video is laid on top of the broadcasting stream, Personalized TV is a term that describes the way the viewer has more control over the content because of the ability to pause, rewind and record live content. Cross-media interaction has to do with the way dierent medium are used in combination with TV to create interactive moments in shows, for example using phones, SMS and laptops. There can be hundreds of channels provided in televisions set. Zapping these channels or reading printed television guides for that many channels will not work. A solution for the is the EPG service that helps the viewer to get an overview over current and upcoming shows. Video-on-demand services has changed the way we watch TV since we no longer need to adjust to the TV schedule. This has led to that more people use web TV on web sites when they want to watch content. Challenges with Interactive TV involves navigation, the fact that TV is a lean-back activity and the balance between the interactive applications and the primary activity which is to watch TV. The navigation must be simple because of the simple remote control and the distance to the screen. The viewer is also in a lean-back mode, not up for heavy interaction tasks. The application cannot be designed the same way as an computer application because of these factors. Instead of developing an interface with radio buttons, scroll bars and so on, the interface should have a shallow menu where physical buttons can work as direct ways to go to popular features. Text input needs to be carefully considered. There should be a
18
Chapter 3. Background
good balance between the application and the main video stream. The application should not compete with the primary activity which is to watch TV.
3.4.2 Social TV and recommender systems TV has always been social.
We watch TV together, we talk about TV and share our
emotions and opinions about dierent TV-shows and movies. We also compete with each other when watching quiz shows and share and recommend shows to each other. As a result of video on demand people don't necessary watch TV at a speci c time anymore. The genre of the television content has an impact on how much people talk and discuss while watching something or after watching something.
News, soap operas, quiz, sports, reality shows
and talk shows are best suited for synchronous interaction while lms, news, soap operas and sports are best suited with asynchronous interaction. The existing examples on social television applications creates presence awareness and also enables people to communicate both synchronous and asynchronous. But there are also problems with these applications that should be avoided. A virtual audience or an additional display can demand for to much attention and the TV viewing becomes the secondary activity instead of the primary. Challenges with social TV is how to make it non-distracting. Chat and watching together can be considered as both fun and distracting. Privacy is also a big issue that needs to be considered in order to make the viewers comfortable.
This has also to do with the fact
that people often watch TV together with family or friends, thereby making it even more crucial to think about privacy issues.
Therefore, the social TV needs to be personal.
A
recommender system is a good help when making social TV. A content-based recommender system predicts a user's rating on an item by comparing the user's pro le and prior ratings to items with similar characteristics.
Collaborative recommender systems are based on
the similarities between what the user likes and on what the user's friends like. A hybrid between these two gives a truthful outcome. One challenge is to convince the user that the recommendations are good for him or her. It will help if the user know why it is recommended and if the recommendation is addressed to the user as conversational sentences because it makes it feel like it comes from a friend instead of a computer.
Chapter 4 Social Media This chapter is an in-depth study about social media. The study presents examples on social media and describes the features that need to exist to obtain social media. The purpose with this study is to nd out what kind of features from social media that is relevant and suitable in a TV context.
4.1 Introduction Social media is a popular phenomenon on Internet that is widely used and has many de nitions. Mentioning big sites like YouTube, Facebook, MySpace, and Wikipedia might give an idea of what it is about. It is media that combines technology, social interaction and user-generated content [53]. In these media the user play a central role to the content and the communication. The users are readers and consumers but also authors and producers and the roles are constantly shifting [45]. As a result of social media the communication between users has changed. For example, in traditional on-line media like on-line newspapers, the communication is a one-way conversation going from the author of the articles out to the reader [55]. In a social on-line newspaper however, the user can comment on the articles in the on-line newspaper. The users can also choose to like the article, or share to friends or social networks. This involves the user and makes the communication more of a two-way. The purpose of this study is to nd out what kind of features from social media that is appropriate for TV. To do this, the context of watching TV needs to be considered. How do people interact and behave when watching TV now? As mentioned earlier in the report the viewers are in another state when watching TV than when using computers. They are in a laid-back position in both body and mind as opposed to when sitting in front of the computer. Here, the user sits close to the screen and interacts with the content constantly. When watching TV there is a larger distance and the user is relaxed and not up for heavy interaction tasks. The tool for interaction is only a simple remote instead of keyboard and mouse. Therefore, a TV interface simply can not behave like a computer interface. With that stated, the social media features in the set-top box should be controlled with simple interaction patterns. A literature study will be made about social media to get an overall knowledge of the parts that constitutes social media. What overall features need to exist in order to obtain social media? These also need to exist in the TV interface. Also, a participatory observation will be made. This is a qualitative method where the designer participates in and observes the activities that are being made in a context and environment relevant for the study.
19
20
Chapter 4. Social Media
The study will be on social networks on-line and the strategy will be to register on various on-line social networks to get involved in the social networks. These networks will then be analyzed on what kind of functionality they have. This method lets the designer take part in the users life in stead of letting the user come to the designer and explain what he/she does [33]. The participatory design method will be made to get a deeper knowledge of the functionalities in social media and how they work. Which functionalities are simple enough to be suitable in a TV context? These functionalities will also be evaluated on how relevant they are for a TV environment. What features will suit the context of TV? The formulation questions are:
What overall features need to exist in order to obtain social media?
Which social functionalities are relevant and simple enough to be suitable in a TV context?
The disposition of the study is as followed:
in Section 2 user-generated content and
dierent levels of contribution are described. In Section 3 the idea of mash-ups is explained and how it can be done using Facebook Connect. Section 4 describes some dierent social networking sites and what their characteristics are. In Section 5 the result is discussed with the formulation questions as base and in Section 6 the conclusions are gathered.
4.2 Levels of contributions Collaboration and user-generated content are two of the keys to social media. This Section describes the relationship between users and user-generated content.
Since there are all
kinds of users with dierent goals and interests, the contribution must happen in dierent ways. By having dierent levels of contributions all users can be satis ed. User-generated content makes the site dynamic and personalized. Instead of having a xed content where the users have to follow goals from a corporate organization, users can set up their own goals and rules to follow. When a site has user-generated content it will turn into a self-organizing space that evolves with time [11]. A lot of people want to be active users rather than passive. However, not all user want to make too much eort, some are satis ed with making very small contributions. All kinds of users should be able to contribute to the content in some way by oering tasks that vary from very simple to more complex. The interface should support this and also encourage the user to take one step higher up as long as they are comfortable with it. Designers must rethink their strategy to make interfaces easy to use and rather make them easy to create, participate and produce [37]. Figure
4.1 shows some levels of social media ranging from
very small contributions to higher-level contributions [11]. Small tasks can be that the user can comment, write on someone's wall and bookmark content. A more advanced task can be too start groups or pages. In the middle range there are features like sharing with friends, polls/contest/voting, rating, tagging, chat, expert panel and forums.
4.3. Mash-ups
21
Figure 4.1: The picture shows dierent levels of contributions that can be made in social media.
Concerning new users, it should be easy for them to take part in the contribution by having a short and easy registration or letting them contribute without being registered at all[11].
This is the case with Wikipedia where anyone can write articles without any
authentication.
Anyone, even unregistered users can edit the articles.
The goal is to let
democracy play the role in the production by letting all kinds of people collect , analyze and edit the content constantly. It might seem like a risk to let anyone contribute with no quali cation needed but the fact is that Wikipedia has grown to have increasingly respected content[15]. The reason that such high quality content is produced is because of the Wisdom of crowds principle. This is explained by James Surowiecki[47]:
"Under the right circumstances, groups of people can be remarkably intelligent and often smarter than the smartest people in them. Even if most of the people in a group are not exceptionally well informed, they can still reach a collectively wise decision."
The reason for this has a mathematical explanation. When a group of people estimate something, it can have two outcomes: the expected value or error. When these outcomes are added together, the errors will be canceled out and this will lead to a high accuracy level. One real life example of this is during "Who wants to be a millionaire" and the lifelines "ask the crowd" and "Ask a friend". The rst one produces the right answer more percentage of the times[47]:
4.3 Mash-ups This Section deals with the ubiquity of social media. Websites and applications are becoming more integrated with each other. The essence of a web site is bigger than the website itself, it reaches out beyond, to other places on Internet and to other devices. Many websites have some kind of feature that makes it possible to share material or opinions with others. The sharing can be done in dierent ways. Blogs and news sites like Aftonbladet.se oers the reader to share articles via some dierent social networks like Facebook, Twitter and Digg or by sending an e-mail to a friend. Some sites take one step further by using mash-ups. A mash-up is when two or more technologies together blend into a new service. A feature that can support these kind of mash-ups is Facebook connect.
22
Chapter 4. Social Media
Figure 4.2: When watching a show on TV4 Play the viewer can chat with friends about it via Facebook.
Facebook connect is an API that supports web sites to be integrated with Facebook. It means that some functionalities from Facebook can be reached and used outside of their site with just a few lines of code. When watching web tv it is possible in some sites to use these functionalities, like on TV4 Play(see gure like the clip by rst logging in to Facebook.
4.2). It is possible to give comments and
It is also possible to see which one of your
friends that are active on the site [26]. This is a quick way to get people to interact on the site since it is a low threshold before the user can be active. No registration is needed on the site, they just need to use their Facebook account.Many big sites and applications are using Facebook connect to support their users to share their opinions with their network. Twitter statuses can be shown on both Twitter and Facebook. Spotify has recently made their application more social by providing a way to share playlists on Facebook. By using the same friends in the Spotify platform as in Facebook it is possible to send tracks and playlists directly to friends. [46]
4.4 Social networking sites (SNS) This section describes some dierent types of social networks sites and their features. This is done by a combination of a literature study and participatory design.
4.4.1 Pro le-based Social networks often allow users to create a pro le that is public or semi-public for other too see. Some examples of social networks are Facebook, Myspace, Twitter, LinkedIn. In Facebook, the most popular feature is probably that people can share their thoughts and opinions by writing a status and/or commenting on other people's status. This comment can either be a written text or by using a "like"-icon.
This icon comes in handy when
users want to give feedback on a comment or status, but not have anything in particular to say. When logged in to Facebook, the rst thing you see is the news feed where all the
4.4. Social networking sites (SNS)
23
recent happening are presented. It could be news on who has become friends with someone, statuses from people, new photo albums or videos and new events that people will attend.
4.4.2 Sharing material In social sharing networks the main idea is to upload and share content with others and browse through other people's uploaded material. Youtube is an on-line video community that allows people to create their own videos and upload them. This can be done privately, so that only your friends can see it, or publicly, for everybody to see.[27]
Figure 4.3: Youtube has many social features that are feasible when watching something or after watching something.
Anyone can go to Youtube and watch videos without having to sign up for anything. However, since Youtube is a social network site, a pro le page is oered through registration. This is called the user's channel and here the user can organize and store favorite videos, create a play-list and see their history. When watching a clip the user can choose to save it to their favorites or a play-list. The user can see the latest watched videos through the history functionality. When watching a video some dierent functionalities are feasible which can be seen in gure 4.3. The viewer can provide feedback through commenting or liking/disliking the video. They can share the video to friends via email, Facebook or twitter. It is also possible to give thumbs up or thumbs down on dierent comments, something that will help traversing through the load of comments.
The highest rated comment will show on top.
The video gets an implicit rating in the number of views. A video that has many views will be higher up in the list when searching for something.
4.4.3 Bookmarking The ability to bookmark web content to your web browser has existed for a long time but has evolved to something more. Social bookmarking oers possibilities to share, organize, search and manage web content. It is not the content itself that is bookmarked, it is the source, along with information such as user viewing count, comments, votes, ratings and reviews on the content. This kind of information is called meta data and with this information the user can get an overview of what the content is like before consuming it. [54] Another meta data
24
Chapter 4. Social Media
that can be added to bookmarks are tags, which are digitals labels or keywords that the user adds to the content manually. These labels provide a meaningful description over the bookmarks and helps organizing them [43]. It also allows for other users to search amongst them. The bookmarks can be used to store relevant information that you wish to retrieve for later use. In StumbleUpon, a plug-in is downloaded to the tool bar in the web browser. With this tool bar the web content that is stumbled on can be evaluated by choosing "like" or don't like. The content that is liked end up on StumbleUpon as favorites and is also led under my old fashioned bookmarks. On the site the users can search for speci c content by tags.
4.5 Discussion In this Section we will discuss the formulation questions. We will have a top-down approach where the most fundamental features will be identi ed rst. What overall features need to exist in order to obtain social media? After that, some functionalities of social media will be discussed to nd the particular ones that suit the context of watching TV and movies and require little interaction eort. Which social functionalities are relevant and simple enough to be suitable in a TV context? Something that de nes social media and thereby should exist is some kind of collaboration and one-to-many communication.
This will turn the social TV application into a
self-organization. To do this, every individual in the organization follows a few rules and it results into a complex system, where the whole picture is bigger than the sum of the parts [38]. The interface should therefore supply the user with some simple functionalities that the user can easily follow. One criteria in social media is that it should be easy to start contributing. Instead of having an interface that is easy to use it should be easy to create, participate and produce. The registration should be very short and simple or not needed at all when making smaller contributions.
One way to make the registration process easy and let the user quickly
contribute is to use Facebook Connect. Instead of making a closed community where the user has to join to look up friends that also has joined he or she can just use the pro le and friends that already exists on Facebook. While it is important that there should be simple features, it is also important to have a range of social features, from simple to more complex.
This will welcome all kinds of
users and let them advance to take higher steps in the production chain if they want to. Some levels of social features going from simple to complex are: commenting, writing on walls, bookmarking(favorites and tagging), share with friends, contests/polls/voting, rating, chatting/messaging, expert panels, pro le, groups and pages. An expert panel lets a few experts answer some questions by visitors like a more dynamic, open FAQ [17]. Whether these will t into the TV context has a lot to do with the interaction complexity. Will they require a lot of text input, will they be very frequent and disturbing or will they have a deep hierarchical structure? Bookmarking, rating, contests, polls, voting and sharing with friends are rather simple features since they could be done with a press of a button. Commenting, writing on walls, writing questions to expert panels and chatting are easy tasks on computer but not in front of the TV, unless the user has an advanced remote control with a built-in keyboard.
If this was the case, commenting and expert panels is
more relevant in a TV interface than chat and writing on walls. The rst are more focused on giving feedback on speci c topics, which could be a TV-show or an actor. The latter are features intended for more general talk.
4.5. Discussion
25
To be able to store personal information and have friends on sites like Youtube and Facebook, the user has to have a pro le. By that stated, the user has to have a pro le in the set-top box somehow. Groups and pages are interesting considering TV. Perhaps the users could start groups with speci c content. There could be groups for dierent interests, TV-shows or movie tastes that other users with the same interest could join. The di culty would be to know how much interaction that it takes to do this.
Perhaps this could be
administrated some other place, like on a website where the more complex tasks could take place and still also be available in the TV interface with suitable amount of interaction.
26
Chapter 4. Social Media
Chapter 5 Calm Technology This chapter is an in-depth study about calm technology in order to get inspiration and some guidance on how a TV application can be designed in a calm and simple way. The study contains related work in the area of calm technology and information decorations and in the end we discuss how this can be integrated into a TV application to make it less obtrusive for the user.
5.1 Introduction When watching TV the viewer is in a laid back position and has a low level of user engagement and do not want to be disturbed by noti cations and other kinds of annoying information. A set top box with social functionality is more likely to be disturbing than a set top box with no social features. By nding out what kind of information that can be disturbing or even cause information overload and nd alternative ways of how information can be represented in an encalming way it is believable that the TV can become the new social media. The aim of this part of the thesis is to nd design guidelines that can work as support when developing the design of the user interface of the social set top box. The rst section contains background about the idea of calm technology and examples on how information can move back and forth between the center and the periphery of our attention. The third section includes related work and examples on how information can be presented in a way that is perceived as less obtrusive for the user. Finally we will present the design guidelines and discuss how calmness and information decorations can be integrated into a TV application.
5.2 Background The periphery is the outer part of any object or space [5] and can also be explained as something that we perceive without attending to explicitly [51].
Our attention can be
attracted by information but the information can also be more or less important to us. The attention that we pay to information in our environment dier depending on how important it is to us and the current situation. Human attention can be categorized into three types; inattention, divided attention and focused attention. Inattention is when objects can aect the behavior without being directly available, this is when the information has marginal importance and consumes no conscious awareness. Divided attention is when a human can
27
28
Chapter 5. Calm Technology
distribute the attention over a number of objects and the information has some importance and requires a smaller amount of attention. Focused attention is when all attention is used to focus on one single object and the user will be temporarily distracted from the primary task [34]. One example when we use the periphery to quickly attend to something is when we are driving a car and the sound of the engine changes. When we are driving our attention is on the road and not on the noise of the engine but we can quickly attend to it if it starts to sound dierently. This example explains how information can move back and forth between both the center and the periphery of our attention depending on how important the information is. Calm technology is a new approach to how technology can t to human beings' lives by using the periphery of our attention. So why is this encalming? If everything would be in the center of our attention we would not be able to attune to many things at the same time. If things are placed in the periphery it is possible to see or hear many things at the same time without overburden our mind [51]. The design of a calm user interface is never interfering with the user's task and working activity. A calm interface is non-intrusive and allows the user to work naturally and with a ow. The information that is represented in the interface should not be distracting but always available when needed. This means that the user should be able to decide when it is possible to completely ignore the information and focus on something else [21].
5.3 Related work In this section a number of dierent solutions on how to actually create calm technology or information that is non-intrusive will be presented. The idea of aesthetics of interaction will be introduced and we will look into how information can be handled by artwork such as informative art and information decoration. Further on the concept of peripheral displays will be explained which also is a way to handle information and make it less obtrusive.
5.3.1 Aesthetics of interaction The beauty and the appearance of a product are not the only things that makes a product pleasurable.
The aesthetics of appearance is all about making a product look beautiful
but the aesthetics of interaction is concerned with the ow, timing and the rhythm when interacting with the product.
A product will not be nice to use just by looking good, it
must also be beautiful when using it.
If the rst impression of the product is positive
just by looking at it the expectation on the product gets high but if it later comes out that it is di cult to use, the user will be very disappointed and frustrated [16].
Even
though beautiful things make us happy which in turn opens our mind and makes it easier to overcome obstacles [36] a good combination of aesthetics of appearance and aesthetics of interaction is what makes a product pleasurable. According to Löwgren there are four interaction qualities that together form aesthetics of interaction. The interaction qualities are pliability, rhythm, dramaturgical structure and uency [30].
These interaction qualities are properties that characterize the experience a
user gets when interacting with a product. The last one, uency, is the interaction quality that becomes the most interesting one when it comes to the area of non-intrusive interfaces. Fluency is a quality that is embedded in the ow of everyday life and means that digital media do not have to be in the focus of our attention, instead the transition from awareness to focus should shift elegantly. When the degree of uency is high it means that we can attune to many media streams simultaneously in a graceful way.
Calm technology and
5.3. Related work
29
peripheral interaction is one area in interaction design were uency as an interaction quality is involved [30].
Digital media must not always be in the focus of our attention.
It can
be a part of our environment and be perceptible and therefore there should be graceful transitions when information moves from the center of our perception to the periphery of our perception [29].
5.3.2 Dealing with information Information is everywhere in our everyday lives. By looking out of the window it is possible to tell what the weather is like, what time of the day it is and if something happens outside. This is one example of peripheral information, which means that we perceive the information without maybe even realizing it [34]. Information shall be at hand when needed and when there is time to deal with it otherwise it can cause information overload. When information takes too much attention there are too many objects that demands for full concentration simultaneously. The information that is most important and relevant for the actual moment is what should be in the focus of our attention. Useless information will only be obstacles and disturb the user's primary focal task.
To reduce the information overload a lot of
information can be visualized as abstract representations in the environment and then be perceived peripherally. We can then be aware of the information and knowing what is going on but we do not have to be fully attentive. This way to fuse data into abstract visualizations helps the uency in our everyday life, since they provide us with enough information without putting to much weight on our minds and the changes in the visualization is a noti cation that tells the user when attention needs to be taken [30]. When it comes to TV the primary focal task is to watch TV and to be relaxed.
In
the following sections we will give some examples on how information can be displayed and perceived in a way that requires minimal attention and cognitive eort.
Art as an information carrier A visualization is something that is based on non-visual data and the purpose is to communicate the data and make it visible. The result of a visualization is an image and the image itself should be recognizable and readable [6]. One example of a visualization of nonvisual data is the pattern that emerge when music is played on a computer with for example Windows Media Player. Informative art is a way to integrate information into the environment of our everyday lives.
Information that is continuously updated can then be visualized through artistic
objects. The purpose with informative art is that it should be placed where art normally is placed, such as in the living room or in an o ce and look more like a piece of art than just computer based graphics. Something that is important to have in mind when it comes to informative art is that the information is not exact. Information that represents dierent amounts of things can not show the exact amount, only that it is a lot or very few [22]. This is also the reason why all kinds of information is not suitable for being presented artistically. If the information has to be perceived within a speci c timespan and is crucial for the user an informative art is not the optimal way to present the data [40]. The viewer will actually learn how to interpret the visualizations so that it is possible to get almost the same details that you get when reading for example a text that contains the same information. Moreover, the content in the informative art need to be explained to the viewer the rst time, otherwise it wont be useful. If more informative data would be added to the illustrations it would also be easier to understand it but it would no longer be that aesthetically pleasing. So, what
30
Chapter 5. Calm Technology
informative art provides is an overview of continuously updated complex information.
It
also makes complex information more available for people in everyday environments [22]. Information decoration is another solution on how information can be presented in a dierent way. The primary goal with a decoration is that it is aesthetically pleasing and non functional.
But how about using a decoration as an information carrier?
As with
informative art is information decoration not appropriate for all types of information, it is about making data look better. So even if it is not informative it will still be decorative, a wall paper for example can indicate how warm a heating element is by changing the color of the pattern [50] [7] see gure
5.1.
Figure 5.1: Heat reactive wallpaper.
The periphery as an information carrier Peripheral displays is a concept within the area of ubiquitous computing.
The fact that
computer interfaces are embedded into the environment makes it even more important that they can be perceived peripherally. A peripheral display lets the user to stay focused on her primary task and acts as a secondary display. The user can be aware of the information while doing something that takes more attention.
One example of a physical peripheral
display is the Dangling string which showed the network activity level in an o ce.
The
plastic wire hangs from an electric motor which is connected to an Ethernet cable.
The
string is visible for a lot of people without being disturbing and when it starts to whirl and make a sound it means that the network is very busy [8]. Another example is the Ambient Orb which presents information unobtrusively and can be placed on a desk in an o ce, see gure 5.2. It changes color to show how the information changes and a more rapid change between colors means that the information increases. Ambient information channels that the orb can represent can be the stock market trends, tra c congestions or pollen forecasts [6] [34].
Figure 5.2: The Ambient Orb glows dierent colors depending on the information changes.
5.4. Discussion
31
Both the Dangling String and the Ambient Orb are examples of how calm technology can be created. But the general opinion about calm technology and peripheral displays is that they are di cult to design. Matthews et al. have developed a toolkit that can work as a support for managing user attention when developing peripheral displays. The toolkit is supposed to support three issues that need to be handled when expressing information in the periphery of human attention.
The issues are abstraction, noti cation levels and
transitions. Abstraction is about how the information should be presented in a way so that it demands minimal cognitive eort and is easy to read and understand at a glance. Studies have shown that an abstraction of data can be informative enough and still let the user to be focused on the main activity.
Noti cation levels deals with how important it is to
make the user aware of the information. The information importance can vary from very critical data that requires the user to drop everything and only focus on the information that is displayed to data that does not attract the user's attention but can be perceived occasionally or peripherally. The third issue is about the changes of the display to indicate that new information has arrived or to show that the noti cation level has changed from low to high importance. These changes in the display are transitions and can be expressed as eects or animations that attract the right amount of attention from the user [34].
5.4 Discussion Social features in combination with watching TV might force the user from a laid back to a more laid forward position. If we can nd out how the social functions should look, feel and behave in a way that provides a more calm and simple interaction the user can stay leaned back and relaxed. Noti cations are likely to exist in a social set top box and are probably going to be disturbing when watching TV. Examples on noti cations could be when a friend gets on-line, when a friend sends a message or if a friend sends a reminder that a good TV show just started. Noti cations can be more or less important and maybe it is hard to determine which noti cations that are the important ones. It depends on occasion and what the viewer is watching. If someone is watching a movie it is not believable that noti cations that pop up are desired but during a sports event like a football game communication with friends might be something that can even enhance the viewing experience. To make the noti cations as non-obtrusive as possible transitions and subtle changes through dierent types of animations can support a less distracting application. What is important to remember is that TV is about being relaxed and the social features are not allowed to become predominant and put the user in a position that demands too much attention. Noti cations can be made more subtle with help from animations. If the noti cation is really important it should be very clear and there cannot be a risk to miss it and the user must pay full attention to the event. For a TV application it can play a great role to make noti cations more or less subtle depending on the level of importance of the noti cation. Not only is the importance of the noti cation important to consider but also the context and the user's behavior. What is the viewer doing right now? Is he watching a movie and has full focus on the TV or is he sitting in front of the TV while talking to family and friends and does not care about the TV at all? Depending on the user's current situation we believe that a noti cation or a transformation in the interface should suit that behavior. It would for example be more appropriate if the TV application has an abrupt change if the user is in a mode when he can accept that something pops up on the screen. Information that is suitable for being calm in a set top box with social functionality is information that can be represented in a way that does not show the exact number or amount
32
Chapter 5. Calm Technology
of the information. Moreover the information cannot be crucial for someone who is watching TV, for example it is important to know the exact time when a TV show or movie starts not the approximate time. However it is not that important to know exactly how many of your friends that are watching a speci c TV show, the user only needs to know if many or few are watching to decide whether or not to watch the TV show. An abstraction makes it easier to read information at a glance and this is the key mechanism that is needed in a social TV application.
This enables the user to stay focused on the TV show while perceiving
secondary information. For a set top box interface the idea of information decoration could be applicable. A decoration in the user interface can both make the data look better but also give the user a quick overview of what is going on. Another reason why decorations and art should be used as an inspiration when creating abstractions of information in the user interface is that even if the information itself is not worth anything or not interesting at the moment it will at least be nice to look at. At another occasion the information decoration can be valuable and provide with relevant information.
5.5 Summary and conclusions The purpose with information decoration is that with just a quick glance at it you can read it and understand what it means. It also enables a reduction of the amount of information by transforming some of it into nicely looking patterns.
The following guidelines have
been developed with support from the previous parts in this paper and are going to work as a support when designing the graphical user interface for interactive TV with social functionality. Suitable information The information must be suitable for being calm or transformed into a pattern. Information that is not suitable is critical data and data that need to be exact to understand it.
Data that is presented through an abstraction must be easy to
read at a glance. Information that can be a lot or few, high or low is more suitable to be represented with abstract visualizations than information that has to be exact.
Overview
- Use abstractions to present the information and provide the user with an
overview of what is happening. This will require less cognitive eort from the user.
Importance awareness
- Make the user aware of the importance of the information
so that it is possible to know whether or not attention must be taken or the amount of attention that must be taken.
Subtle transitions - Make the user aware of noti cations with subtle changes such as
fading or rolling animations.
Animations such as these helps to create transitions in an
application that do not distract the user.
Make data look better - Make the information look better with inspiration from art
and decorations. Beautiful things make us happy and more open minded and creative. Even if it is not informative it will still be decorative. The conclusion of this study is that it is di cult to apply the theory about calm technology on a graphical user interface. A graphical user interface, in this case a TV application, is not embedded in the environment or ambient in any way. Information decorations on the other hand can be useful to present data in a dierent way and let the user choose whether or not he or she is interested in its content.
Even though it is di cult to create calm
technology in a graphical user interface we can be inspired by the concept and create user interfaces with in uences from this area to make them more calm, simple and non-intrusive.
Chapter 6 From Theory to Practice In this chapter we will present the most important knowledge from the literature study and in-depth studies that will be brought into the practical work and the design of the interface. The theoretical work is a very important and big part of this thesis and the knowledge from this part must be carefully considered before the practical work can begin. The most important parts that we must consider during the design of the interface is to support the user to nd relevant TV content, design for a lean-back mode, choose social features that are relevant for TV and use decorations to present information in a less obtrusive way.
Relevant Content There are many view content sources:
TV, web TV and movies.
On top of this a TV
can have hundreds of channels. The prototype need to support the user to nd good and relevant material in a quick and easy way. A recommender system that is both content and collaborative-based will support this and reduce a cognitive overload by giving an overview over the most recommended shows or movies.
To do this, the TV needs to be personal.
This will also solve some privacy issues.
A Lean-back Interaction The prototype has to be designed for a lean-back mode, meaning that there should be shallow hierarchies, direct buttons and not too much text input. The social features should not compete too much with the primary content, it should be a good balance. A balance can be obtained by considering how much space the application uses, what kind of colors and contrast it has and how it shows up on the screen. Fading animations will decrease the feeling of distractedness.
Social Features When designing the social TV prototype there are three features that is needed to be able to obtain social media.
First and foremost, the application should evolve around user-
generated content. The users are the producers of the content and it should be simple for them to contribute. A few simple rules, in this case features, will lead to a self-organisating space. Secondly, the interface needs to support both novice and advanced users. By oering dierent levels of social functionality, going from simple to more complex, user will be able to choose how much they want to contribute and also take one step higher if they want to.
33
34
Chapter 6. From Theory to Practice
Thirdly, the registration should be a low barrier and Facebook Connect is a good tool for this. Something that always is needed to provide the user with personalized information is a pro le. The social TV application will need to have this. Bookmarking, rating, contests, polls, voting and sharing with friends are rather simple features since they could be done with a press of a button.
Because of that, they will work well in a TV interface.
The
application should support social activities that are already made in combination with TV, like giving recommendations ore sharing with friends, talk about TV-shows and watching together. There should be support for both synchronous and asynchronous communication. Avatars give the feeling of watching together and increase the presence awareness but should not be too distracting. A chat can be seen as distracting because it demands a lean-forward interaction.
A Calm Interface Noti cations should be designed to be more or less subtle depending on their level of importance. If the noti cation is very important it should be very clear but otherwise it can be more subtle. It is also important to consider the context and the user behavior . It is more acceptable for noti cations when the user is in a certain mode that makes him or her accept noti cations, rather than when watching a movie. Information decoration will be used in the prototype to visualize some kind of data. This data cannot be crucial information, like for example visualizing which time a show starts. It will work for less crucial information, like how many friends that are online right now or how many bookmarks that a user has during a TV-night. This can be represented with many versus few or high versus low instead of an exact number. The decoration will give the viewer an overview over the current state in the matter and at the same time work as a decoration. Subtle changes such as fading or rolling animations will be included in the prototype to help making transitions that do not distract the user.
Chapter 7 Design Process
This chapter describes the practical work and the design process of the TV interface. The work process is divided into three main parts, Idea seed, Sketching and Prototyping. Chapter 2 gives an overall description of the three parts and in this chapter we will present in more detail what has been done in each phase. The picture below, gure
7.1, shows how many
weeks that were spent on each phase and the included activities. The Idea seed phase is about de ning the task and the problem and gather information about the subject.
In
the Sketching phase the goal is to nd a working concept that can be developed into a high- delity prototype. The high- delity prototype and the nal graphical design is then implemented during the Prototyping phase.
Figure 7.1: A GANTT schedule of the work process.
35
36
Chapter 7. Design Process
7.1 Idea Seed The idea seed phase started of with data gathering to get an overall knowledge about the area.
The subject of the thesis was rather large from the beginning (UI for set-top box)
so it was important to narrow it down. By collecting information about current research and work some interesting aspects and issues could be identi ed.
De ning the problem
statement and identifying user need was continuously developed and re ned throughout the phase. Apart from the data gathering, a user study and the methods What, Why, How and NABC were made. What, Why, How answers to the questions what we will do, why we will do it and how we will do it and the purpose of this is to fully understand and explain the purpose of the project. Before entering the sketching phase it was important to have a clear project goal and problem speci cation.
7.1.1 Literature Study The goal of the Idea seed was to gather data to get an overall knowledge of the project area and from this identify a problem. Articles were read on the topics: interactive TV, social TV, user behavior and dierent ways to interact with the TV. Articles that had to do with calm technology were also read to get knowledge of how to make non-intrusive interface. A contemporary social and environmental analysis where made about dierent kinds of settop boxes and media centers. The articles revealed that there were some major problems with interactive TV and the remote control. There were also many articles about social TV which is a part of interactive TV. We decided to go further with it.
7.1.2 Focus Group A user study was made about social TV using a focus group. Five persons in varying ages were gathered to talk and discuss about two themes: Social media and social activities in combination with TV. The conclusions was that social media is good to keep in touch with friends that are far away or that you don't talk to so often. It is OK that information is shown as long as it is to friends only. If the person don't enjoy being on-line it is easy to just log out. The negative aspects are that people can spy. Some people did not want to give out information about them. The overall opinion about social TV was that it would be awkward, weird and unusual. They would rather use other ways to socialize and they would rather sit in front of the TV together. Some were positive to be able see what their friends like and watched so that they could watch together with them.
7.1.3 What, Why, How During the data gathering the method what, why, how was upgraded iteratively. When it made sense - i.e.
was clear and understandable it was time to move on to the sketching
phase. This was the nal draft of what, why, how:
WHAT - A set-top box interface where social functionalities enhance the viewing experience - in a non-intrusive way.
WHY - Because TV is associated with entertainment and togetherness and is often a subject of conversation. Social features can enhance these aspects of TV. TV is also simple and relaxing. Social functionality might disturb the main purpose which is to watch TV and therefore it should be expressed in a non-intrusive way.
7.2. Sketching
37
HOW - By nding out what kind of social features that is suitable for the TV and how they should look, feel and behave in a way that provides a calm and simple interaction.
7.1.4 Re ections from idea seed phase The idea seed was a fundamental stage in the design process that helped us identifying the problems and needs within the area of social TV. We had a quite big literature study which was very good for us.
It gave us general knowledge about a large area and through this
we could decide what we thought was the most interesting. The user study with the focus group was not very helpful for us because it was di cult for the participants to understand the concept of social TV which led to unwanted discussions. A more aimed and structured user study might have given better result. The what, why, how method was a great way of staying in focus throughout the project. Whenever we had doubts or took wrong paths we could always read our nal version of what, why, how and stay focused on the goal.
7.2 Sketching After narrowing down the task it was time to go wider again by doing a workshop. The goal of the workshop was to gather more ideas and to come up with a rough concept idea. A Persona was made to aim the project and to make one user very happy instead of making many dierent users almost happy.
Throughout the phase sketching has been made to
visualize ideas and concepts. One of the concepts was chosen and a low- delity prototype was made. This was evaluated and re-designed until a de ned concept was decided. The structure of the concept was developed with wire frames and UI ows.
7.2.1 Workshop A workshop was made in order to gather more ideas apart from those who came up in the idea phase. It was important that there was a clear understanding of What, why, how and that the problem formulation was identi ed before the workshop was made. The workshop was supposed to take the project further towards the goal and not to start on zero again with the risk of receiving the same result as already gathered in the idea phase. To do this, it was crucial to let the participants take part of the conclusions from the idea seed and thus letting they have the same starting point. The participants of the workshop got a brief introduction to what social features exist now in real applications, in what way people are social now in combination with TV, what the problem was and what the goal was. This way the workshop could be aimed in line with the problem speci cation. The methods that were used were 6-3-5 and Role storming.
6-3-5 is a method where
every participant writes down three ideas on three dierent papers during ve minutes. All three papers are then sent to the next person who develops, adds ideas or comes up with something new.
The session is over when the original idea is handed back to you.
This method worked well except that the participants wanted to sketch and this took time. One idea for ve minutes would have been better. After this method was done there was a discussion among the participants about the dierent ideas. The other method lets the participant take a role of someone else, in this case a celebrity. The participants were to think "If I was x which social features would I want in my TV? I would suggest/thik..." and the roles were Einstein, Princess Diana, Jesus, Buddha, Elvis and Astrid Lindgren.
The
thoughts were written on post-its. This method gave the users the opportunity to see social TV from another person's perspective and it was also a chance to be completely objective.
38
Chapter 7. Design Process After the workshop it was time to deal with the result which contained several A4
paper sheets lled with sketches and text and some post-its. These were written down and categorized with similar ideas. This gave seven dierent categories. One of these categories was about social levels, the fact that it should be easy to move between dierent levels of social features. It was proposed that it should be very easy to shut o or turn on the social features whenever.
There were also some suggestions and comments on the pro le issue.
How should the person log into the system and what happens if there are many watching? Both personal and group authentication was proposed as solutions.
Figure 7.2: The picture shows some brief result from the workshop categorized in levels of social activity.
The category about social levels gave interest and the will to investigate in the subject further. To see what could be done, some of the ideas from the workshop were divided into dierent social levels with aspect to high or low or in between. be seen in gure
This categorization can
7.2.The result from the Role storming method was summarized with one
thought from each of the famous persons as the gure 7.3 shows.
7.2. Sketching
39
Figure 7.3: The picture shows the famous icons used for the Role storming method in the workshop and some of "their" thoughts.
7.2.2 Personas Since any kind of person despite age, culture, sex, interest and so on watch TV, our target group is very wide. To be able to target our project anyway personas were made. A Persona is a hypothetical user with made up qualities and goals. The idea of using personas is that one primary person should be very happy and some secondary personas should be satis ed. One might resonate that if the target group is wide, then the best thing would do to provide a broad set of features so that everybody will be happy. Cooper writes that it is actually the opposite in the book Inmates are running the asylum [14].
The features that please
some users will interfere with other user's needs. Because of this, it is better to design for one persona and it is better that a minority loves your product to a 100
%
than that the
majority is 50% happy. The personas were made by writing down all kinds of users.
They got a name, an
age, a family and a profession. After that, their TV-habits were described which are the persona's practical goals. This was completely based on experience and very stereotypical. For example, it's more likely that a 60 year old watches the news than watching MTV. Their skills with both computers and social networks were described since those two were the most relevant.
Also their personal goals were described.
What is the persona's goal
with a TV-night? This must not be confused with practical goals which are tasks. Personal goals are the overall goal, for example: to relax or to be entertained.[14]
Primary persona Martin Berggren was chosen as our primary persona because he would appreciate getting help and support to nd new movies and to keep track of what is happening in all of his channels.
He would also nd it relevant for his sports interest.
He wants to have good
quality when watching TV and movies and the social interface will provide him with that. Instead of asking friends or trying to keep up with the latest movie releases on Internet he can get recommendations from friends directly to the set-top box.
40
Chapter 7. Design Process
Figure 7.4: Martin Berggren is the fake person that constitutes our primary persona.
Name: Martin Berggren
Age: 39
Profession: Self-employed
Family: One child from an earlier marriage. Lives with his Lisa.
TV-habits: Has a set-top box. Likes sports and has many channels and enjoy watching movies.
Skills: He uses his computer a lot. Downloading and youtubing, he is a member of Facebook but does't use it very often. He is interested in new technical stu.
Goal: Good quality, get an experience.
Description: Was born and raised in Karlstad. He started to study economics directly after school in Linköping for four years. Martin never nished his bachelor thesis because he got a job oering at a friend's company in Stockholm so he and his girlfriend Elin (who he met Linköping) moved there together. He worked there for two years but quickly discovered that he wanted to start his own business and so he did. In the mean time they had a baby which they named Klara. After 10 years together, he and his girlfriend went separate ways. Martin meets Klara every other week and they come and live with him and his new girlfriend Lisa in their apartment in kungsholmen. He makes good money out of his company so he can allow himself to buy new technical stu with the highest quality. The living room is furnished with a black leather sofa and decorated with lots of black and white. He has a big at screen TV with a surround system and he loves his new IPhone which he uses a lot. In the spare time he loves watching soccer games at home with friends or go out to restaurants with Lisa.
Secondary personas: These are the secondary personas that were used and for whom the interface will be satisfying but not thrilling. Anna will be able to connect with her friends, keeping up with what her friends are watching so that they can talk about it the next day and have a good laugh. The social interface will suit Lena since she is alone a lot in the evenings. She can watch documentaries together with friends and view the most popular discussion programs.
7.2. Sketching
41
Figure 7.5: Anna Isaksson is a fake person that is part of our secondary personas.
Name: Anna Isaksson
Age: 21
Profession: Telemarketer
Family: Mum, dad, little sister
TV-habits: Follows many American TV series. Watches a lot of TV and zaps a lot.
Skills: She is online all the time, often at the same time as she watches tv. Chats and uses Facebook.
Goal: Keep up with the cyberspace, being seen and heard.
Desciption: Anna was born and raised in Luleå. After Anna nished school (with fairly good grades since she is an ambitious girl) she applied to be an au-pair in London for 6 months. She liked being there and she also had some friends moving there so she stayed the rest of the year, working in coee shops. After that she came home to Luleå and started working as a telemarketer to earn some more money to her next trip which will be to Asia with two other friends. In the mean time she lives with her parents and little sister. She has a driver's licence but mostly uses her bike everywhere she goes. Her week-day is very irregular, sometimes she works in the evening and sometimes during the day. One day she might stay in a whole day watching TV and another day she is out all day. She can't aord to work out at the nearest working out-place so she occasionally goes out jogging.
Figure 7.6: Lena Schoultz is a fake person that is part of our secondary personas.
Name: Lena Schoultz
Age: 53
42
Chapter 7. Design Process
Profession: Senior-level school teacher
Family: Divorced, adopted daughter from Korea. Lives alone in an apartment.
TV-habits: Watches serious programs such as news, discussion programs and documentaries.
Skills: she watches web-tv, member of Facebook and a dating community.
Goal: Wants to relax and be updated on the latest news.
Description: Lena lives in Stockholm but she was born in Kalmar. She met Claes, her rst husband, when she studied at the college of education in Stockholm. When they found out they weren't able to have their own baby they decided to adopt. They went to Korea in 1988 to bring a little girl back to Sweden, her name is Petra. When Petra was 14 years old, Lena and Claes decided to go separate ways and divorced. Today Lena lives alone in an apartment located in Solna, she has a large balcony where she grows herbs, tomatoes and owers.
She goes by bike every morning to her work no matter what weather it is
and she stays t by working out at Friskis
&
Svettis 2-3 times a week. She owns a car, a
Volkswagen Golf, but she doesn't use it very often since she is not comfortable with driving in the city. Lena is satis ed with her life but lately she has felt lonely and she would like to meet someone.
Her daughter convinced her to try a dating community to nd a new
partner. Even if she was doubtful about it in the beginning she recently made an account at www.39plus.se. On Saturday she will go on her rst date with Gustav. During the summer when she is free from work she leaves Stockholm and moves to her country house which she shares with her older brother Leif. There she can grow vegetables, fruits and berries and be relaxed.
7.2.3 Sketching Sketching is a means for communicating an idea to other people, to visualize something that is inside the head.
It also works as a way of thinking, each sketch that is created might
explore a dierent concept. To have a sketching phase early in the design process and create a lot of sketches is a good way to express thoughts about ideas but also to come up with new ideas. A sketch is an economical way to explore a concept early in the design process. A too completed drawing looks expensive but a sketch can always be thrown away and if you cannot, it is not a sketch. There are many advantages with sketching, they are quick to make and can be provided at any time, all that is needed is pen and paper [39]. After the workshop, in which a lot of new ideas were generated, it was a useful way to work further by sketching all dierent ways to be social in combination with watching television.
7.2.4 Levels of Social Functions The sketching started with just getting as concrete as possible with the ideas from the workshop.
Dierent levels of social functions were an idea from the workshop that was
worked further with.
It was quite complicated to come up with suggestions on how the
levels should look and behave and how they should be connected to each other. The social activities could happen in many dierent ways in combination with TV and in dierent places in the set top box. While watching TV for instance, there could be a chat function and the electronic program guide could also include social features. The social features were too spread out. This resulted in that the idea of social levels was given up, instead an idea about having a main page for social TV emerged.
7.2. Sketching
43
7.2.5 Social Main Page At rst, the thought was that the viewer should be able to choose between dierent levels, from a complete social TV-mode to a normal TV-mode. would be no social activity at all.
In the normal TV mode there
But many people might not choose to watch TV in a
social mode even though it's there, because they are not used to it. Because of that the focus was laid on providing social features anywhere in the set-top box. All of the features are tied together in the heart of the social set top box: the social main page. The social main page is entertaining, engaging and valuable. It could work as a "lazy TV-guide" and provide with help when deciding what to watch or just work as a page where you can go during the commercials or when you are bored. The sketch below is a description of how the social main page is connected to the other parts of the set top box.
One important
feature with the social main page was that it should be easy to start having an interest for it. For example when nished watching a movie, there could be a proposal "Log in to rate this movie" or "watch what your friends thought about this movie".
Figure 7.7: A sketch of the social main page.
7.2.6 Inspiration The next step was to nd out how the social main page should look like and what it should contain. To get inspiration a mood board containing visual elements that was wanted in the page was made (see gure
7.8). The page should provide with a good overview of the
content but also consist of dierent parts. Since it was not a very good idea to pack all the social functions into one single page it should consist of dierent parts. Depending on which part of the social main page that the viewer was most interested in the focus could shift so
44
Chapter 7. Design Process
that it was possible to look more into a speci c part. From this in mind a lot of sketches were made (see gure 7.9).
Figure 7.8: A mood board with pictures to inspire during the sketching phase.
Figure 7.9: Sketches of the the idea of having a social main page.
7.2.7 The Winning Concept The best solution on how the page should behave was a menu which could pop up on the TV screen. The menu could contain dierent social functions. The structure of the menu
7.2. Sketching was a carousel so that it can be expanded.
45 The carousel is exible and thereby enables
that more content can be added if that is needed. The structure is also suitable for a TV application with a remote control since it is only left to right navigation. The menu should also contain a full screen stage to make it possible to get more insight into one speci c part of the small menu.
Figure 7.10: A very simple sketch of the structure of the interface to work further with.
7.2.8 Low- delity Prototyping If users are asked about how they think a product should be like they often do not know that. If they can see something that can be discussed on the other hand, they know at least what they do not want the product to be like. A prototype is a tool that is very helpful when ideas and features about a product are discussed with users and it is also an easy way to let users interact and experience an imagined product. The low- delity prototype works as a limited representation of the nal design and can answer questions about the interaction and content early in the design process. A low- delity prototype is made by materials like paper and cardboard which is very dierent from how the nal design will look like. The materials are very easy and quick to work with which makes it very simple for modifying it to. This is also why low- delity prototypes can work as a communication tool in a design team since dierent ideas can be tested easily without spending a lot of time. The point is that the paper prototype should be very exible and encourage the designers to make changes with the design and iterate it through several versions [41]. In this thesis the low- delity mock up was a tool for exploring dierent suggestions of how to navigate in the user interface and to nd potential problems with the designs. It was very important to make user tests to evaluate and verify that the interaction was working before starting with the development of the high- delity prototype. The paper prototype was tested on approximately ten persons. The test persons got a task to solve and were told to think aloud during the whole test. The think-aloud technique is an evaluation method that helps the observer to understand what is going on in the test person's head. When the test persons have a task to perform and are trying to solve it they are supposed to speak out everything they are thinking and trying to do [41].
46
Chapter 7. Design Process
Figure 7.11: Pictures from the low- delity prototype testing.
The user tests gave a lot of information about which buttons to use on the remote control and what would happen in the interface when dierent buttons were used. There were a lot of interaction aws that were discovered with the low- delity prototype and it was also a useful way to discuss the content and ideas with the design with the test persons. The evaluations resulted in two dierent suggestions on how the user interface could behave. The rst suggestion was that only the sneak peak menu pops up on the screen when the social button is pressed on the remote control and then the user can choose to go into one of the widgets and enter full screen mode. The other suggestion was that when the social button is pressed the user enters full screen mode at immediately. After the tests and discussions with the test persons the decision was to go further with the rst suggestion. It is more likely that the user wants to control whether or not to enter the full screen mode. If only the sneak peak menu pops up the viewer can still watch the TV program and also get an overview of the social happenings.
Figure 7.12: The two suggestions on the interaction. To the left: the sneak peak menu is visible. To the right: The sneak peak menu with full screen is visible.
7.2.9 UI-Flows and Wireframes The structure of the menu with widgets was developed further with a sketch of the UI- ow. The idea is that when watching a television show and pressing the a "social button" on the remote control, the small menu will be visible on the screen. From that menu it is possible to enter a full screen mode by entering the widgets.
7.2. Sketching
47
Figure 7.13: A sketch of the how the structure and ow is supposed to work.
Wireframes To more in detail describe the user interface wire frames were also made. Both content and structure was decided and how to use the remote control to navigate in the application. Sneak Peak Menu (SP Menu) - the menu is like a carousel of widgets which makes it exible and it is possible to expand it with more widgets. Step to the right or left with the remote control to choose a widget. Press "OK" to enter full screen mode of the selected widget.
1. On TV now: The purpose of this widget is to help the viewer to nd a TV show to watch right now with help from friends and my bookmarked TV shows.
2. Anytime: The purpose of this widget is to help the viewer to nd something to watch anytime based on recommendations and ratings from friends. It can be a movie, TV series or web TV shows.
3. TV highlights: The purpose of this widget is to get an overview of the best upcoming shows tonight or this week based on what I and my friends have bookmarked. It is also possible to let your friends know what you are going to watch and see who of your friends that have planned to watch a show. Bookmarks make the recommendations more reliable and the knowledge about who is going to watch makes it more social.
48
Chapter 7. Design Process
Figure 7.14: The wire frames, showing content and navigation.
7.2.10 Concept Packaging The social main page should work as a lazy TV-guide. Whenever you are bored sitting in front of the TV you or don't have anything to watch you can always go to the social main page. More speci cally the page can be used:
During commercial Studies have shown that people often do some activity when there is a commercial break. They leave the room and come back when it is over, chat with others or try to nd something else to watch. The social main page will keep the viewer both in front of the TV and in the channel which might be interesting to advertisers. Of course the commercial should still be perceivable by having a transparent interface or a small version of the TV in it.
When nding something to watch The social main page should support the viewer in nding something to watch whenever without zapping through hundreds of channels or going to the EPG. The EPG provides a good overview of all the channels but does not give an overview of the most relevant shows just for you. The social main page should help me to nd something relevant to watch no matter what mode I am in: when I turn on the TV and want to get an overview of what to see during the night, when I want to nd something to watch right now or if I plan to have a movie night. These activities are now done in many ways. The computer, teletext or a magazine might be used to see what is on TV. The process of nding a movie to watch is more complicated. The user might ask some friends if they have some recommendations before downloading the movie and either watch it on the computer or on the TV connected to the computer. The social main page will have a support for these activities all in one place.
7.3. Prototyping
49
When curious The social main page will work as an entertaining and engaging place where the viewer can go to see if anything new has happened or just hang around, reading and contributing. After nished watching something like a show or a movie it will be possible to share thoughts and interact upon it, like rating, reviewing or commenting on it.
7.2.11 Re ections from sketching phase Most of the tasks in the sketching phase worked well and led us further towards the goal. Something that was very important for us was the workshop that gave us many new ideas to work with.
The lo- tests were also great because they helped us nd problems and
ideas that we never would have found in other ways. The concept packaging was a good way to emphasize what makes our idea good and how to use it, something that is crucial in our industry. Making personas were a good thought and is probably a very good way of aiming the design. For us it was a problem, because it kept us from being creative when sketching. It was tricky to come up with solutions in general. To come up with solutions for one speci c persona was even more di cult.
7.3 Prototyping When there was a de ned concept it was time to move on to the prototyping phase. SCRUM was used in order to plan the tasks. At rst high- delity prototypes were developed, evaluated and redesigned in Photoshop. After that an interactive prototype was made in TAT's own development environment to be able to evaluate it after certain criteria.
7.3.1 High- delity Prototyping High- delity prototyping is about making a prototype that looks and behaves similar to the nal product. It should consist of the material that the nal thing is expected to consist of. An interactive prototype made in for instance Flash is higher delity than a prototype made of paper. The advantages with a high- delity prototype according to Sharp et al are that it is fully interactive, it can be used for exploration and testing and it can be used as a marketing and sales tool [41].
The reason why a high- delity prototype was developed
in this project was because the wholeness of the interface could not be conveyed with only screen shots. Another reason to develop an interactive prototype was to communicate to others how the navigation was supposed to work and also to be able to test it and nd potential problems with interaction and content. If we could make a prototype that feels real with help from animations and transitions the prototype can be a means for people to start thinking about what more things that can be done with social TV. People get associations and start to think about the next step with TV and social features when they see the concept.
7.3.2 Computer based Mock ups When the wire frames were nished the next step in the process was to develop computer based mock ups in Photoshop that could convey a more realistic appearance of the user interface. The aim with this was to explore how the visual elements should relate to each other on an actual TV screen. It was also to nd out which content that is the most relevant
50
Chapter 7. Design Process
one in the sneak peak menu and to nd out how much space there was to work with on a TV screen. Another reason was to be able to know how large the font size had to be in the text and which character style that was most appropriate to use.
Moodboard Before starting with the graphical design in Photoshop a mood board with visual elements were made. The interface should have a natural base build on with transparent layers and gray scale to enhance the feeling of non-intrusiveness. The words of value to describe the interface with:
Transparent and layers
Shadows and highlights
Clean and neutral pattern
Gray scale and soft colors
Figure 7.15: The mood board containing the visual elements.
Mock ups in Photoshop The rst mock ups in Photoshop show examples on the appearance of the sneak peak menu and the social features in the three widgets which was called "Anytime", "On TV Now" and "TV Highlights". Pictures of friends, movie cover arts and icons for bookmarked shows are some examples on visual details that needed a graphical look. By aligning text and pictures to make the appearance more balanced and by putting every pixel in its right spot, the look of the interface was improved a lot. The mock ups were iterated a number of times before we reached the nal design.
7.3. Prototyping
51
Figure 7.16: Mock ups of the visual design in Photoshop.
7.3.3 Implementation The prototype was built in Motion Lab which is the development environment for Cascades, created by TAT [https://developer.tat.se/]. Cascades is a platform-independent framework used for building graphical interfaces. It is written in C and can be integrated in cell phones, but also in dashboards for cars and set-top boxes. Apart from the C api, there is also a layer of TML on top of this. TML is a XML-based language designed by TAT to handle presentation of data and graphical presentation. It makes it possible to make animations, transitions eects and 3D eects. TAT believes that the best way to develop an application is to separate it into three layers: logic, data and presentation. Because of this all TML elements are classi ed as controls, visuals or models.
Code example Model represents the information (raw data) in the application. The models in our prototype are represented with images and texts . Here is the model for on TV now (m_ontvnow.xml) which contains images of the dierent TV shows and their widths and heights.
View contains the layout information. It uses images and text from models, and places them on the screen, much like a web page connected to a database. This code is from the visual for on TV now (v_ontvnow_item.tml) and shows how the data from the xml- le is declared.
52
Chapter 7. Design Process Controller acts as a link between the model and the view. It reacts on events and performs
actions, on either the view or the model. In the control of our prototype (c_social_ tv.tml) all events for dierent button commands are placed. This is an example of the event that occurs when F3 (RSK) is pressed to open the full screen. An event will be triggered that in turn triggers an animation inside the upper dataform. The animation changes the opacity from 0 percent to 100 percent (1) which means that it will fade in.
/>
