S ocial A lbum

1

Social Album

台大資工所，郭子豪Advisor : Bing-Yu Chen

Communications and Multimedia Lab.National Taiwan University

Utilizing Social Network to Visualize Co-event Albums

2

Outline

• Introduction• Idea• Social Album Design• Evaluation• Discussion• Conclusion

3

Outline

• Introduction– Observation– Prior User Study

• Idea• Social Album Design• Evaluation• Discussion• Conclusion

4

OBSERVATION

5

6

Co-event Album

7

Co-event

8

9

10

Gather…?Organize…?

11

Browse…?

12

13

PRIOR USER STUDY

Field StudyInterview

14

Prior User Study

Field StudyGoal: Confirm the observation of observations.

Result: • Lost of co-event

albums on the web.• Tagging is an common

practice.

InterviewGoal:Interaction between users and co-event albums.

Result:The lifecycle of co-event albums.

15

Lifecycle of co-event albums

• Create• Gather• Organize • Browse• Share• Update

Understanding Photoware, David Kirk et al., CHI06

16

Conclusion

Social Need• Tag• Share• Update

Recollective Need• Create• Gather• Organize• Browse

17

Conclusion

Social Need• Tag• Share• Update

Recollective Need• Create• Gather• Organize• Browse

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.

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.

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

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

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

UpdateSocial Need

25

Outline

• Introduction• Idea• Social Album Design• Evaluation• Discussion• Conclusion

26

Co-Event

27

Create

Gather

Organize

Browse

Share

Update

Co-Event

28

Create

Gather

Organize

Browse

Share

Update

Co-Event

29

Crea

teGa

ther

Orga

nize

Brow

seSh

are

Upda

te

Create Gather

Organize

Browse Share Update

Create

Gather

Organize

Browse

Share

Update

Co-Event

30

Crea

te

Gath

erOr

ganiz

eBr

owse

Shar

eUp

date

Create Gather

Organize

Browse Share Update

Create

Gather

Organize

Browse

Share

Update

Co-Event

Create

Gather

Organize

Browse

Share

UpdateCreate

Gather

Organize

Browse

Share

Update

CreateGatherOrganize

BrowseShare

Update

Co-Event

31

32

33

34

36

Outline

• Introduction• Idea• Social Album Design• Evaluation• Discussion• Conclusion

37

Conclusion

Social Need• Tag• Share• Update

Recollective Need• Create• Gather• Organize• Browse

38

Social Album

Indexing View Browsing View

39

Social Album

40

Indexing View

41

Navigation Bar

42

Friend List

43

Function Panel

44

Indexing Panel

45

Time Line

46

Visualization

Sites as Albums

47

(a)

(b)

(c)

(d)

48

Tracks as People

Event A Event B

(b)

(c)

(a)

49

Layout

• Grid layout (Orthogonal layout)

On the effects of viewing cues in comprehending distortions, Zanella, NodiCHI02

50

Layout

• Grid layout (Orthogonal)

• Straight main-track

51

Layout

• Grid layout (Orthogonal)

• Straight main-track

• Tracks arrangement

52

Track Analyzer

Most Sites

53

Track Analyzer

Most Intersections

54

Track Analyzer

55

Track Analyzer

• Reduce interactions– Reduce cross of tracks.

• Interactions as Intimacy

–

–

Filter the results while sharing and displaying

Design Guideline

Let users easily update their friends' activities

Design Guideline

56

Scalability

• 7 tracks only.

The magical number seven, plus or minus two, Miller, The Psychological Review 1956.

57

Scalability

• 7 tracks only.

• Coloring.

58

Scalability

• 7 tracks only.

• Coloring.

• Filtering.

59

Filtering

Filter

60

Co-event

Merge by tagging

Merge by manual(with Album Recommendation)

61

Co-event

Merge by manual(with Album Recommendation)

Merge by tagging

Make it easy to collect co-event albumsDesign Guideline

62

Co-event

Hover

63

Browsing Album

Single Album

MergedAlbum

64

Browsing View

65

Problems

• No support for browsing mixed albums.

• Separate Albums• Mixed Albums

– Alignment & Duplication Problems.

66

Grouping Similar Photos

Feature Extracting

Photo GroupingAlbum

PhotosGrouping

Result

69

Grouping Result

70

Merge Co-event Albums

AlbumMerging

Merged Albums Displaying Order

71

AlbumMerging

Merged Albums Displaying Order

72

AlbumMerging

Merged Albums Displaying Order

73

AlbumMerging

Merged Albums Displaying Order

74

A B C

D E F

A B

C D

1 21 32

AlbumMerging

Merged Albums Displaying Order

75

Browsing View

Facilitate the experience of browsing merged co-event albums.

Design Guideline

Feature Extracting

Photo GroupingAlbum

PhotosGrouping

Result

AlbumMerging

Merged Albums Displaying Order

76

Editing View

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

79

Users’ Needs

Social Need• Share• Update

Recollective Need• Gather• Organize• Browse

80

Outline

• Introduction• Idea• Social Album Design• Evaluation

– Quantitative User Study– Qualitative User Study

• Discussion• Conclusion

81

Quantitative User Study

Watching Condition

Album 1(5 events)

Album 2(5 events)

Grouping Merging

1 V V2 V V V V3 V V

• Test the group and merge algorithms (the browse part of Recollective need)

• 22 participants.

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.

83

Qualitative User Study

• Test the indexing view.– Understanding how Social Album can

help the Social Need.

• 6 people.

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.

85

Outline

• Introduction• Idea• Social Album Design• Evaluation• Discussion

– Limitation– Generalization– Future Work

• Conclusion

86

LIMITATIONThe scalability of visualization

87

Limitation

Time Line

# of Tracks

88

GENERALIZATIONOther social data : time + participants

89

90

91

92

FUTURE WORKS

93

Future Works

• System– Zoom in/out mechanism.

• Evaluation– More focus on the social and recollective

needs.

96

Outline

• Introduction• Idea• Social Album Design• Evaluation• Discussion• Conclusion

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.

98

DEMOhttp://www.cmlab.csie.ntu.edu.tw/~socialalbum

99

Q & A

100

Thanks you.

101

RELATED WORKS

Multi-user PhotowaresPhotoware based on Social Network Social Network Visualization

102

MULTI-USER PHOTOWARES

103

104

105

106

107

PHOTOWARES BASED ON SN

108

109

110

111

112

SOCIAL NETWORK VISUALIZATION

113

114

PRIOR USER STUDY

Field StudyInterview

115

Field Study

Co-event albums# of samples At least one More than half

facebook 55 45 (82%) 41 (75%)Flickr 22 21 (95%) 17 (77%)Picasa 15 15 (100%) 15 (100%)

116

Field Study

Co-event albums# of samples At least one More than half

facebook 55 45 (82%) 41 (75%)Flickr 22 21 (95%) 17 (77%)Picasa 15 15 (100%) 15 (100%)

Tagged co-event albums# of samples At least one More than half

facebook 45 37 (82%) 25 (56%)

117

Field Study

Co-event albumsThe major portion of the shared web albums online are related to co-event.

Tagged co-event albumsTagging Photos is an common practice while sharing co-event albums.

118

Lifecycle of co-event albums

• Creating• Gathering• Organizing • Browsing• Sharing• Updating

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.

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?

Co-Event

121

Creating

• Take photos by their own cameras which are their own view angles.

• Reasons– As memory– As document

Create

Co-Event

122

Gathering

• It’s hard to completely collect all.

• Channel: – Email / Instant Messenger– FTP / Portable Disk– Web Albums

Create

Gather

Co-Event

123

Organizing

• Hierarchical Folder to keep photographer information.

• Date + Event Name– Photographer 1– Photographer 2– Photographer 3– … Create

Gather

Organize

Co-Event

124

Browsing

• No support for browsing mixed albums.

• Separate Albums• Mixed Albums

– Alignment & Duplication Problems.

Create

Gather

Organize

Browse

Co-Event

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

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

127

Conclusion

Social Need• Co-event albums• Tagging Photos• Share• Update

Recollective Need• Create• Gather• Organize• Browse

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.

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

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.