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.

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.

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.

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.

Update

Social 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

Cre

ate

Gat

her

Org

aniz

eBro

wse

Shar

eUpd

ate

Create

Gather

Organize

Brow

se

Share

Update

Create

Gather

Organize

Browse

Share

Update

Co-Event

30

Cre

ate

Gat

her

Org

aniz

eBro

wse

Shar

e

Upd

ate

Create G

ather

Organize

Brow

se Share Update

Create

Gather

Organize

Browse

Share

Update

Co-Event

Create

Gather

Organize

Browse

Share

Update

Cre

ate

Gath

er

Org

an

ize

Bro

wse

Sh

are

Upd

ate

Create

Gather

Organize

Browse

ShareUpdate

Co-Eve

nt

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

44

Indexing Panel

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 intersection– Reduce cross of tracks.

• Intersections 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 albums

Design 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 Grouping

AlbumPhotos

Grouping Result

67

Feature Extracting

Photo Grouping

AlbumPhotos

Grouping Result

Gray

HSVRGB

H : 18 binsS : 3 binsV : 3 binsG : 4 bins

feature factor

68

Feature Extracting

Photo Grouping

AlbumPhotos

GroupingResult

0 0100 100

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 Grouping

AlbumPhotos

Grouping Result

AlbumMerging

Merged Albums Displaying Order

Duplication

Alignment

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 V

2 V V V V

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