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

2. Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 2

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

4. OBSERVATION 4

5. 5

6. Co-event Album 6

7. 7 Co-event

8. 8

9. 9

10. Gather…? Organize…? 10

11. Browse…? 11

12. 12

13. PRIOR USER STUDY Field Study Interview 13

14. 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

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

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

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

18. 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

19. 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. 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

21. 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

22. 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

23. 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

24. 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

25. Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 25

26. Co-Event 26

27. Create Gather Organize Browse Share Update Co-Event 27

28. Create Gather Organize Browse Share Update Co-Event 28

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

30. 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. 31

32. 32

33. 33

34. 34

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

36. Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 36

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

38. Social Album Indexing ViewBrowsing View 38

39. Social Album 39

40. Indexing View 40

41. Navigation Bar 41

42. Friend List 42

43. Function Panel 43

44. Indexing Panel 44

45. Time Line 45

46. Visualization 46

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

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

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

50. Layout Grid layout (Orthogonal) Straight main-track 50

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

52. Track Analyzer 52 Most Sites

53. Track Analyzer 53 Most Intersections

54. Track Analyzer 54

55. 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

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

57. Scalability 7 tracks only. Coloring. 57

58. Scalability 7 tracks only. Coloring. Filtering. 58

59. Filtering 59 Filter

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

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

62. Co-event 62 Hover

63. Browsing Album 63 Single Album Single Album Merged Album Merged Album

64. Browsing View 64

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

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

67. 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. 68 Feature Extracting Feature Extracting Photo Grouping Photo Grouping Album Photos Grouping Result 00100

69. Grouping Result 69

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

71. 71 Album Merging Album Merging Merged Albums Displaying Order

72. 72 Album Merging Album Merging Merged Albums Displaying Order

73. 73 Album Merging Album Merging Merged Albums Displaying Order

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

75. 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

76. Editing View 76

77. 77

78. 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

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

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

81. 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

82. 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

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

84. 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

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

86. LIMITATION The scalability of visualization 86

87. Limitation Time Line # of Tracks 87

88. GENERALIZATION Other social data : time + participants 88

89. 89

90. 90

91. 91

92. FUTURE WORKS 92

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

94. 94

95. 95

96. Outline Introduction Idea Social Album Design Evaluation Discussion Conclusion 96

97. 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

98. DEMO http://www.cmlab.csie.ntu.edu.tw/~socialalbum 98

99. Q & AQ & A 99

100. Thanks you. 100

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

102. MULTI-USER PHOTOWARES 102

103. 103

104. 104

105. 105

106. 106

107. PHOTOWARES BASED ON SN 107

108. 108

109. 109

110. 110

111. 111

112. SOCIAL NETWORK VISUALIZATION 112

113. 113

114. PRIOR USER STUDY Field Study Interview 114

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

116. 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%)

117. 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.

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

119. 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

120. 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

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

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

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

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

125. 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

126. 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

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

128. 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

129. 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. 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

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. 131

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. 132

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. 133

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. 134

135. 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