GroupFun HCI Lab - EPFL

283 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
283
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GroupFun HCI Lab - EPFL

  1. 1. !"#$%&$(& &)*+*,-*"&%"#.*/-&,%"0(1&2344& Elsa FRISCIRA
  2. 2. HCI Group FunTable of ContentsIntroduction ............................................................................................................................. 3! What is Group Fun? ............................................................................................................ 3! What has my semester project consisted in? ...................................................................... 3!Phase 1: Task Model .............................................................................................................. 6!Phase 2: High-Fidelity prototype ............................................................................................. 6Phase 3: Coding ..................................................................................................................... 7 1. Technologies used ......................................................................................................... 7! 2. Where is the code? ......................................................................................................... 8! 3. Different screens of the application ................................................................................. 8Conclusion ............................................................................................................................ 14! Page 2
  3. 3. HCI Group FunIntroductionWhat is Group Fun? Group Fun is a Facebook application, which allows a group of friends tocompose a common playlist together; it helps them agreeing on a common musicplaylist for a given event, e.g., a birthday party or a graduation ceremony. GroupFun has several goals: connecting friends together, managing music and sharing it.With Group Fun, users can listen to their own collection of songs as well as theirfriends’ music. With the collective music database, GroupFun integrates music tastesfrom different friends and recommends common playlists to them. Therefore, theycan choose a common list for social events easily without worrying about distinctmusic tastes. The application aims at satisfying music tastes of the whole group byaggregating individual preferences.What has my semester project consisted in? The goal of my semester project was to extend the previous functionalities ofGroup Fun. Finally, after discussing a lot about it, it turned out that lots offunctionalities have been redefined and changed. Moreover, since I took the HCIcourse at the same time, I have learned all the way a designer has to browse beforestarting coding an application: product statement, interaction design characteristics,population analysis and persona, scenario, interface sketching, story board. It hashelped me a lot.My semester project has been divided in three parts: studying the functionalities ofGroup Fun, studying the interfaces and coding. Page 3
  4. 4. HCI Group FunPhase 1: task model: After several meetings with Dr Pu talking about the main functionalities GroupFun should have, Yu and I have created the task model bellow.Description :Create a group: allows the user to create a group of friends in order for them toshare music together. It can be created for any occasion: a birthday, a party, adinner!The user will have to precise a name, a photo for the group and a privacy status forthe group. Then, he will send invites to each person he wants to have in his group.(each futur member) Page 4
  5. 5. HCI Group FunAccept a group invitation: the friend invited by the user to join his group will havethe choice to accept or to decline the invite.Revisit a group: (visit a group again) Any user can go to his group page again anddo anything that is provided in the group page (as long as he is still a member of thisgroup)Invite friends: This functionality depends on the groups privacy.If the group is public, anyone belonging to this group can invite friends.If the group is private, only the one who has created it (the admin) can invite friends.However, the admin can decide to assign other members of the groups to be adminas well: in this case,they could invite friends.Enter a group: The user has accepted the invite to join the group and enters in it forthe first time.Upload and rate music: Each user has the possibility to rate the songs of thegroups he belongs to and to upload his music from his computer.View members: allows the user to see all the members of the groups he belongs to.Listen to my uploaded music: Each user will have the possibility to listen to themusic he has uploaded.Listen to group music: Each member of the group can listen to all the musicuploaded by the other members of this group. Page 5
  6. 6. !"#$%&$()"#*+,-( F"/-C"&L/A".64%&M4&I9"#%&N*.)&5-1.61-)%&L)("*)&O"*C)0/& P& !#(-#(( ( S& 865-+(-#(49(4$56,( !"##$%& "()*"%& +,& $")-.& /*0%& 1.& )& 2).3"-& .340"#3& 1#& 51#)#6"7& 89"& 1.& )& ./61)*& 6//-01#)3/-& 1#& 1#3"-#)31/#)*& .340"#3& 4#1/#&:;8<=&1#&>4-169%&8?13@"-*)#07&& 89"& 1.& -".A/#.1B*"& /-& /-C)#1@1#C& ?""D*$& ,& 39"("& A)-31".7& 89"& ()1#3)1#.& )& *)-C"& 6/**"631/#& /& (4.16& /#& 39"& 6/(A43"-& /& ;8<7& 5/-& ")69& 39"("& A)-3$%& .9"& 3)D".& */#C& 31("& ."*"631#C& 39"& )AA-/A-1)3"& )#0& ."+/-+(/(0"#$%( )0"E4)3"&./#C.7&& F1G"#& 39"& "/-3& )#0& 31("& .9"& .A"#3%& ./("31(".& A)-3$& A)-3161A)#3.& .31**& 6/(A*)1#"0&)B/43&39"&./#C.&)#0&?)#3"0& 3/& 69//."& 39"1-& )G/-13"& ./#C.7& H91.& +& ()D".&!"##$&-4.3-)3"07& & H91.&5-10)$&"G"#1#C%&!"##$&1.&/-C)#1@1#C&)& I/.A*)$& A)-3$7& J/?"G"-%& .9"& 0/".& #/3& 9)G"& "#/4C9& (4.16& 6/**"631/#& /-& 39"& 39"("7& 89"& 9).& B""#& 3-$1#C& 3/& ).D& -1"#0.&/-&.4CC".31/#.%&B43&-".4*3.&-/(& 7++(/22(!"#$%5( 9"-&-1"#0.&)-"&.31**&1#.4161"#37&& H91.& 31("%& .9"& ?)#3.& 3/& ."*"63& (4.16& -/(&)**&4."-.&/#&;8<&5)6"B//D&C-/4A&/-& ."G"-)*& -")./#.7& 51-.3%& 39"& 6/**"631G"& R& .4CC".31/#.& -/(& ("(B"-.& ?1**& 6/#3-1B43"& 3/& .4161"#3& )(/4#3& /& (4.167& 8"6/#0%& ")69& I/.A*)$"-& 6/4*0& 1%2#/3(4$56,( ."*"63& ./#C& 39)3& 6/--".A/#0.& 3/& 39"& 69)-)63"-& 9"K.9"& 1.& )631#C& /#& )#0& B-1#C& (/-"&4#&3/&39"&A)-3$7& Q& !"#$%&$( Phase 2: High fidelity prototype: !#(-#(!"#$%(Page 6 Group Fun HCI
  7. 7. HCI Group FunPhase 3: Coding: I have worked a lot on trying to organize the code. I have recoded everythingfrom scratch comparing to the previous application. 1. Technologies used: • Code igniter (PHP framework based on MVC) • Php • Html • Javascript • AjaxWhat is MVC?MVC means model view controller. It is a pattern which isolates ”domain logic” fromthe user interface, permitting independent development, testing and maintenance ofeach.The model manages the behavior and data of the application domain.The view renders the model into a form suitable for interaction.The controller receives user input and initiates a response by making calls onmodel objects. Page 7
  8. 8. HCI Group Fun2. Where is the code? The application is accessible via facebook as “Group Fun”.The path to the application on our server is:http://grpupc1.epfl.ch/~laurentiu/groupfunElsaPhpFram/index.php/homeThe settings for the connexion to the data base are in:“groupfunElsaPhpFram/application/config/database.php »3. Different screens of the application: Page 8
  9. 9. HCIGroup Fun Page 9
  10. 10. HCIGroup Fun Page 10
  11. 11. HCIGroup Fun Page 11
  12. 12. HCIGroup Fun Page 12
  13. 13. HCIGroup Fun Page 13
  14. 14. HCI Group FunConclusion To conclude, I have learned a lot thanks to this semester project and to theHCI course. I have discovered that in computer science, there are other challengesthan algorithms and code! Finally, I would like to thank again Dr Pu for taking time out from her busy schedule in order to give me very useful pieces of advice and recommendations. Thanks a lot to George and Yu as well who have been always free to answer my questions! It has been a pleasure to work in this HCI lab with you! Page 14

×