Social Album 台大資工所，郭子豪 Advisor : Bing-Yu Chen Communications and Multimedia Lab. National Taiwan University 1 Utilizing Social Network to Visualize Co-event Albums

Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 2

Outline Introduction – Observation – Prior User Study Idea Social Album Design Evaluation Discussion Conclusion 3

OBSERVATION 4

5

Co-event Album 6

7 Co-event

8

9

Gather…? Organize…? 10

Browse…? 11

12

PRIOR USER STUDY Field Study Interview 13

Prior User Study Field Study Goal: Confirm the observation of observations. Result: Lost of co-event albums on the web. Tagging is an common practice. Interview Goal: Interaction between users and co-event albums. Result: The lifecycle of co-event albums. 14

Lifecycle of co-event albums Create Gather Organize Browse Share Update 15 Understanding Photoware, David Kirk et al., CHI06

Conclusion Social Need Tag Share Update Recollective Need Create Gather Organize Browse 16

Conclusion Social Need Tag Share Update Recollective Need Create Gather Organize Browse 17

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Filter the results while sharing and displaying. 4.Let users easily update their friends' activities. 18

Conclusion Social Need Tag Share Update Recollective Need Create Gather Organize Browse 19 Share Social Need Gather Recollective Need Browse Recollective Need Update Social Need

20 Let users easily update their friends' activities Design Guideline Make it easy to collect co-event albums Design Guideline Facilitate the experience of browsing merged co-event albums. Design Guideline Filter the results while sharing and displaying Design Guideline Make the system embed into the social network service Design Guideline

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Filter the results while sharing and displaying. 4.Let users easily update their friends' activities. 21 Gather Recollective Need

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Filter the results while sharing and displaying. 4.Let users easily update their friends' activities. 22 Browse Recollective Need

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Filter the results while sharing and displaying. 4.Let users easily update their friends' activities. 23 Share Social Need

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Filter the results while sharing and displaying. 4.Let users easily update their friends' activities. 24 Update Social Need

Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 25

Co-Event 26

Create Gather Organize Browse Share Update Co-Event 27

Create Gather Organize Browse Share Update Co-Event 28

Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Co-Event 29

Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Co-Event Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Create Gather Organize Browse Share Update Co-Event 30

31

32

33

34

35 Railway visualization, Yu-Ting Wong, Master Thesis NTU 2010 Metro Map Metaphor

Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 36

Conclusion Social Need Tag Share Update Recollective Need Create Gather Organize Browse 37

Social Album Indexing ViewBrowsing View 38

Social Album 39

Indexing View 40

Navigation Bar 41

Friend List 42

Function Panel 43

Indexing Panel 44

Time Line 45

Visualization 46

Sites as Albums 47 (a) (b)(c)(d)

Tracks as People 48 Event AEvent B (b) (c) (a)

Layout Grid layout (Orthogonal layout) 49 On the effects of viewing cues in comprehending distortions, Zanella, NodiCHI02

Layout Grid layout (Orthogonal) Straight main-track 50

Layout Grid layout (Orthogonal) Straight main-track Tracks arrangement 51

Track Analyzer 52 Most Sites

Track Analyzer 53 Most Intersections

Track Analyzer 54

Track Analyzer Reduce intersection – Reduce cross of tracks. Intersections as Intimacy – 55 Filter the results while sharing and displaying Design Guideline Let users easily update their friends' activities Design Guideline

Scalability 7 tracks only. 56 The magical number seven, plus or minus two, Miller, The Psychological Review 1956.

Scalability 7 tracks only. Coloring. 57

Scalability 7 tracks only. Coloring. Filtering. 58

Filtering 59 Filter

Co-event 60 Merge by tagging Merge by manual (with Album Recommendation)

Co-event 61 Merge by manual (with Album Recommendation) Merge by tagging Make it easy to collect co-event albums Design Guideline

Co-event 62 Hover

Browsing Album 63 Single Album Single Album Merged Album Merged Album

Browsing View 64

Problems No support for browsing mixed albums. Separate Albums Mixed Albums – Alignment & Duplication Problems. 65

Grouping Similar Photos 66 Feature Extracting Feature Extracting Photo Grouping Photo Grouping Album Photos Grouping Result

67 Feature Extracting Feature Extracting Photo Grouping Photo Grouping Album Photos Grouping Result Gray HSVRGB H : 18 bins S : 3 bins V : 3 bins G : 4 bins feature factor

68 Feature Extracting Feature Extracting Photo Grouping Photo Grouping Album Photos Grouping Result 00100

Grouping Result 69

Merge Co-event Albums 70 Album Merging Album Merging Merged Albums Displaying Order

71 Album Merging Album Merging Merged Albums Displaying Order

72 Album Merging Album Merging Merged Albums Displaying Order

73 Album Merging Album Merging Merged Albums Displaying Order

A A B B C C D D E E F F A A B B C C D D Album Merging Album Merging Merged Albums Displaying Order

Browsing View 75 Facilitate the experience of browsing merged co-event albums. Design Guideline Feature Extracting Feature Extracting Photo Grouping Photo Grouping Album Photos Grouping Result Album Merging Album Merging Merged Albums Displaying Order Duplication Alignment

Editing View 76

77

facebook GRAPH APISocial Album Database Social Album Server Social Album Client Indexing View Browsing View Editing View Photo Analyzer Album Analyzer Track Analyzer Social Album 78

Users’ Needs Social Need Share Update Recollective Need Gather Organize Browse 79

Outline Introduction Idea Social Album Design Evaluation – Quantitative User Study – Qualitative User Study Discussion Conclusion 80

Quantitative User Study Watching Condition Album 1 (5 events) Album 2 (5 events) GroupingMerging 1 VV 2 VVVV 3 VV Test the group and merge algorithms (the browse part of Recollective need) 22 participants. 81

Quantitative User Study While running photo grouping with similar photos, though total presented photos are lowered down, the gained information still increased. The information of our merging result is not less than the naïve merging result. 82

Qualitative User Study Test the indexing view. – Understanding how Social Album can help the Social Need. 6 people. 83

Qualitative User Study 4: easily update information happened on friends. 1: easy to describe friends’ events. 6: appreciate the design of filtering algorithm. Most of them appreciate the grouping similar photos design. 84

Outline Introduction Idea Social Album Design Evaluation Discussion – Limitation – Generalization – Future Work Conclusion 85

LIMITATION The scalability of visualization 86

Limitation Time Line # of Tracks 87

GENERALIZATION Other social data : time + participants 88

89

90

91

FUTURE WORKS 92

Future Works System – Zoom in/out mechanism. Evaluation – More focus on the social and recollective needs. 93

94

95

Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 96

Conclusion From Prior User Study: – The life cycle of co-event albums. – Design Guidelines. Social Album – browsing co-event albums – easily update their friends’ activities. 97

DEMO 98

Q & AQ & A 99

Thanks you. 100

RELATED WORKS Multi-user Photowares Photoware based on Social Network Social Network Visualization 101

MULTI-USER PHOTOWARES 102

103

104

105

106

PHOTOWARES BASED ON SN 107

108

109

110

111

SOCIAL NETWORK VISUALIZATION 112

113

PRIOR USER STUDY Field Study Interview 114

Field Study 115 Co-event albums # of samplesAt least oneMore than half facebook5545 (82%)41 (75%) Flickr2221 (95%)17 (77%) Picasa1515 (100%)

Field Study 116 Co-event albums # of samplesAt least oneMore than half facebook5545 (82%)41 (75%) Flickr2221 (95%)17 (77%) Picasa1515 (100%) Tagged co-event albums # of samplesAt least oneMore than half facebook4537 (82%)25 (56%)

Field Study 117 Co-event albums The major portion of the shared web albums online are related to co-event. Tagged co-event albums Tagging Photos is an common practice while sharing co-event albums.

Lifecycle of co-event albums Creating Gathering Organizing Browsing Sharing Updating 118 Understanding Photoware, David Kirk et al., CHI06

Interview 9 people ( 3 men, 6 women ) 21 ~ 30 years old. All are familiar with web albums. All have their own cameras. All usually take pictures in events. 119

Questions What do you usually take picture with? Why? How do you gather the co-event photos from others? Do you have any trouble? How do you organize the gathered photos? Do you have any trouble while browsing them? Will you share your photo albums to your friends actively? How? Will you actively browse your friends’ albums? 120 Co- Event

Creating Take photos by their own cameras which are their own view angles. Reasons – As memory – As document Create Co- Event 121

Gathering It’s hard to completely collect all. Channel: – / Instant Messenger – FTP / Portable Disk – Web Albums Create Gather Co- Event 122

Organizing Hierarchical Folder to keep photographer information. Date + Event Name – Photographer 1 – Photographer 2 – Photographer 3 – … Create Gather Organize Co- Event 123

Browsing No support for browsing mixed albums. Separate Albums Mixed Albums – Alignment & Duplication Problems. Create Gather Organize Browse Co- Event 124

Sharing The relationship influence the willing to sharing. 67% interviewees share albums actively. Most share to their acquaintances. Most gather co-event albums actively. Create Gather Organize Browse Share Co- Event 125

Updating The relationship influence the willing to updating, too. Most people are willing to check friends’ albums actively. Most people are interested to albums they joined personally or albums joined by their friends. Create Gather Organize Browse Share Update Co- Event 126

Conclusion Social Need Co-event albums Tagging Photos Share Update Recollective Need Create Gather Organize Browse 127

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 128

Users’ Needs Social Need Co-event albums. Tagging Photos. Share Update Recollective Need Create Gather Organize Browse 129 Share Social Need Gather Recollective Need Browse Recollective Need Organize Recollective Need Update Social Need

130 Let users easily update their friends' activities Design Guideline Make it easy to collect co-event albums Design Guideline Facilitate the experience of browsing merged co-event albums. Design Guideline Filter the results while sharing and displaying Design Guideline Make the system embed into the social network service Design Guideline

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 131

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 132

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 133

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 134

Design Guidelines 1.Make it easy to collect co-event albums. 2.Facilitate the experience of browsing merged co- event albums. 3.Let users easily update their friends' activities. 4.Filter the results while sharing and displaying. 5.Make the system embed into the social network service. 135