Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Social Web Design

3,013 views

Published on

Presentazione al Webdesign international Festival (WIF), tenutsi a Milano dal 4 al 6 febbraio. Con l'avvento del Web 2.0 anche il Web design è cambiato: da siti web a Social Web applications.. La metodologia AOF (Activities, Objects, Features) applicata al Web Design. Particolare focus sul concetto di Oggetti sociali e sui verbi del Social Web

Published in: Business, Technology

Social Web Design

  1. 1. ELEMENTI DI SOCIAL WEB DESIGN Milano- 5 febbraio 2010 Leonardo Bellini
  2. 2. Il Social Web Design Cos’è il social web design? È lo studio, la pianificazione e la produzione di siti web e applicazioni che supportano l’interazione sociale Joshua Porter Autore di “designing for the Social Web”
  3. 3. I verbi del Social Web <ul><li>Comunicare </li></ul><ul><li>Blog </li></ul><ul><li>Podcast </li></ul><ul><li>Video Blogging </li></ul><ul><li>Video Sharing </li></ul><ul><li>Photo Sharing </li></ul><ul><li>Connettere </li></ul><ul><li>Social networks </li></ul><ul><li>SMS </li></ul><ul><li>IM </li></ul><ul><li>/Twitter </li></ul><ul><li>Skype </li></ul><ul><li>Connettere </li></ul><ul><li>Social networks </li></ul><ul><li>SMS </li></ul><ul><li>Instant messaging/Twitter </li></ul><ul><li>Skype </li></ul><ul><li>Raccogliere/Categorizzare </li></ul><ul><li>Marcatura </li></ul><ul><li>Social Bookmarking </li></ul><ul><li>Motori di ricerca </li></ul><ul><li>Collaborare/creare collaborativamente </li></ul><ul><li>Wiki </li></ul><ul><li>Consumer-Generated Content </li></ul><ul><li>Software Open Source </li></ul><ul><li>Creative Commons </li></ul><ul><li>Mash-ups </li></ul><ul><li>Valutazioni collettive </li></ul><ul><li>siti di valutazione </li></ul><ul><li>social news </li></ul><ul><li>Personalizzare </li></ul><ul><li>RRS </li></ul><ul><li>Widgets </li></ul><ul><li>Mondi virtuali/ Avatar </li></ul>
  4. 4. Uno dei Principi del web 2.0 Da sito Web a una Piattaforma di condivisione e partecipazione
  5. 5. Il trend del Social software / Web sta accelerando 2000 Prime social web application Attività dell’utente: Conversation Comunicazione fra tanti utenti che usano l’applicazione Many-way communication WEB site/apps 1995 Prime web application Attività dell’utente: Read & write Contenuti dinamici con cui l’utente può interagire Two-way communication WEB site/apps 1990 Primi siti: statici Attività dell’utente: Read only Contenuti statici con cui l’utente non può interagire One-way communication WEB site/apps
  6. 6. I Siti Web più visitati al mondo sono piattaforme “social”
  7. 7. 1. First, the individual <ul><li>Prima soddisfa i bisogni dell’individuo </li></ul><ul><li>Identifica i bisogni, il valore ed il senso che offri per il singolo </li></ul><ul><li>Offri un servizio che abbia valore anche per il singolo individuo </li></ul>La community è come un by-product che nasce grazie alle interazioni tra gli utenti
  8. 8. 2. Quali sono i membri più attivi in Twitter ? <ul><li>Le moderne applicazioni sono “Social” di default </li></ul><ul><li>Cambia il concetto di “ proprietà ” </li></ul><ul><li>I creatori del Sito Web sono sullo stesso piano dei suoi utilizzatori </li></ul><ul><li>I membri più attivi di una community, i più influenti di una community non sono i suoi Fondatori.. </li></ul>
  9. 9. DigitalMarketingLab Group su LinkedIn A chi appartiene?
  10. 10. Dalla Single Web Experience alla Social Connected Exp La mia nuova casa
  11. 11. Un Ecosistema di Piattaforme strettamente interconnesse
  12. 12. Crea e utilizza le API per il tuo Web Service <ul><li>Le API sono un mezzo per distribuire i vostri contenuti e i comportamenti del sistema attraverso il WEB </li></ul><ul><li>Permettono agli utenti di connettersi senza accedere al sito </li></ul>Per creare servizi in maniera efficace, create un set di API
  13. 13. Social Web e l’intelligenza collettiva <ul><li>Google Page Rank per il posizionamento </li></ul><ul><li>Netflix Collaborative Filtering per le raccomandazioni di film </li></ul><ul><li>Amazon Customer reviews </li></ul><ul><li>I membri sono incoraggiati ad arricchire il sito con contenuti personali </li></ul><ul><li>Effetto di rete: rende visibili a tutti i risultati frutto dell’intelligenza collettiva </li></ul>
  14. 14. Digital User Experience goes Mobile Web, Desktop Client, Mobile App Seamless Social User Experience
  15. 15. Il Ciclo di vita dell’utente nel Social Web E’ l’insieme di fasi che gli utenti di un sito attraversano quando approcciano e usano un sito. Awareness Sign-up Return visits Emotional attachment Unaware Interested First-time use Regular use Passionate use
  16. 16. Un Design Pattern per il Social Web <ul><li>Raccogliere dati </li></ul><ul><li>Renderli utili </li></ul><ul><li>Offrire servizi basati su questo al resto del Web </li></ul>Pochi tool utili + Meccanismo di scambio sociale
  17. 17. AOF – UNA METODOLOGIA PER IL SOCIAL WEB DESIGN
  18. 18. AOF: Activities – Objects - Features <ul><li>Focus sull’attività primaria : cosa fa e deve fare l’utente/audience? </li></ul><ul><li>Identificare i temi/oggetti social : per i quali gli utenti decidono di iscriversi ad un sito/servizio, su cui vogliono discutere avere un parere </li></ul><ul><li>Scegliere un insieme ristretto di feature : quale set di azioni devono fare gli utenti con gli oggetti scelti? </li></ul>
  19. 19. Focus sull’attività primaria <ul><li>Conosci i tuoi utenti: </li></ul><ul><ul><li>Gli step che fanno per completare l’attività </li></ul></ul><ul><ul><li>Le decisioni che devono prendere per fare ciascuno step </li></ul></ul><ul><ul><li>I fattori che influenzano le decisioni </li></ul></ul><ul><ul><li>I ruoli che le persone assumono quando fanno i vari passi </li></ul></ul>Cosa sta facendo la tua Audience online?
  20. 20. Social Technographics di Forrester <ul><li>Usa questa scala per segmentare i tuoi utenti </li></ul><ul><li>Definisci strategie differenti per livelli di engagement differenti </li></ul><ul><li>Scegli piattaforme e feature in base ai loro comportamenti e attitudini </li></ul>
  21. 21. Online Profile Tool di Forrester http://www.forrester.com/Groundswell/profile_tool.html
  22. 22. 1. Seleziona una singola specifica attività Focus solo su 1 attività primaria Site Attività Flickr Condividere foto Netflix Prendere a nolo film Monster Trovare un lavoro Amazon Fare shopping Menuism Trovare luoghi salutari dove mangiare
  23. 23. 1. Attività, Obiettivi e Compiti Spesso ci concentriamo sugli obiettivi e non sulle attività Site Attività Obiettivi Compiti Flickr Condividere foto Stare aggiornati da parenti e amici Caricare foto, commentare, inviare URL via email Netflix Prendere a nolo film Divertimento Selezionare film, inserire nella lista, discutere, votare.. Monster Trovare un lavoro Soldi, carriera Cercare un lavoro, inviare CV Amazon Fare shopping Acquistare buoni prodotti Cercare,Aggiungere nel carrello,comparare, acquistare Menuism Trovare luoghi dove mangiare Mangiare bene Recensire e votare i ristoranti, leggere commenti, prenotare
  24. 24. Attività e Interazioni Sociali Le attività ci permettono di focalizzarci meglio sulle Interazioni Sociali quando compiamo un’attività (es. fare acquisti)
  25. 25. Attività: acquistare e vendere prodotti fatti a mano
  26. 26. Attività: trovare buoni posti dove mangiare
  27. 27. Attività: conservare e condividere foto
  28. 28. Attività: ricordarsi e condividere i bookmark preferiti
  29. 29. Le Attività sono importanti perché.. <ul><li>Rivelano i processi , ci permettono di scoprire i passi compiuti dalle persone per raggiungere i loro obiettivi </li></ul><ul><li>Rivelano criticità : quando le persone si affidano ad altri in cerca di aiuto </li></ul><ul><li>Ci permettono di gestire informazioni </li></ul><ul><li>Ci aiutano a focalizzare su un Design centrato sull’utente </li></ul>
  30. 30. Eccellere in una singola attività primaria <ul><ul><li>Flickr ->photo sharing </li></ul></ul><ul><ul><li>Amazon ->shopping </li></ul></ul><ul><ul><li>Dopplr -> viaggi </li></ul></ul><ul><ul><li>Last.fm -> gusti musicali </li></ul></ul><ul><ul><li>Twitter ->conversazioni brevi </li></ul></ul>
  31. 31. 2. Identificate i tuoi Oggetti Social Le web app di maggior successo sono costruite attorno a questi elementi social Tutte le interazioni degli utenti su questi siti è all’interno e intorno a questi elementi: Amazon -> Prodotti Flickr -> Foto Youtube ->Video Upcoming ->Eventi Twitter ->Messaggi Blogger-> Blogs Monster-> Lavori Netflix-> Film Slideshare-> Slide Last.fm-> Musica
  32. 32. 2. Identificate gli Oggetti Social Un Oggetto sociale è la ragione per cui 2 persone parlano l’un con l’altro e non con qualcun altro. È il nodo sociale che fa scattare la conversazione. Questo è il motivo per cui lo chiamiamo “ Social Object ” Hugh McLeod, Gaping Void I Social network sono costruiti attorno ai Social Object
  33. 33. Il successo dei Social Object <ul><li>I Social Object non necessariamente sono fisici </li></ul><ul><li>Possono essere anche astratti come i posti di lavoro o gli appuntamenti, i progetti, i team e gli eventi o le conversazioni tra persone </li></ul>“ If your product is not a Social Object, why are you in business?” Hugh McLeod, Gaping Void
  34. 34. Oggetti primari e oggetti secondari Website Oggetto primario Attività Oggetto secondario Last.fm Music Track Ascoltare, commentare Artista, Album, favoriti, raccomandazioni Dopplr viaggio Coincidenze Luoghi, suggerimenti Twitter Messaggi brevi Posting Liste, #hashtag
  35. 35. Dopplr – una community di viaggiatori Il viaggio diventa l’oggetto sociale
  36. 36. Gli eventi su LinkedIn come Oggetto Sociale
  37. 37. Una bottiglia di vino come oggetto sociale Blue Monster Reserve genera conversazioni, crea amicizie 1218 membri
  38. 38. Dare un URL univoco agli oggetti sociali <ul><li>Quali vantaggi? </li></ul><ul><li>Gli Url rendono i temi/oggetti condivisibili </li></ul><ul><li>Gli Url consentono di trovare e ri-trovare i temi/oggetti </li></ul><ul><li>Gli Url consentono di linkare direttamente i temi/oggetti </li></ul><ul><li>Gli Url piacciono ai motori di ricerca </li></ul>Un Oggetto sociale deve essere condivisibile
  39. 39. Gli Url e Flickr <ul><li>http://www.flickr.com/photos/brezzadilago/4316589967/ </li></ul>
  40. 40. 3. F come Feature <ul><li>Insieme di applicazioni che consentono di: </li></ul><ul><li>eseguire meglio l’attività primaria (wish list, recommendations) </li></ul><ul><li>essere supportati nell’attività primaria ( rating, review, compare ) </li></ul><ul><li>interagire con gli altri utenti (friending, grouping,following) </li></ul><ul><li>partecipare e contribuire ai contenuti del sito ( post, comment, tag, upload, bookmark ) </li></ul>
  41. 41. Upload tagging Commenting Grouping Organizing Title Nota
  42. 42. Trovate i vostri verbi! Dato un tema/oggetto, quali verbi d’azione sono associati? Molti di questi verbi possono essere trasformati direttamente in applicazioni (feature). Inoltre molti di essi sono sia social che personal Oggetto Verbo /azione Articoli Leggi, archivia per leggere dopo, vota, linka a, condividi, commenta, annota, Libri Leggi, aggiungi al carrello, acquista, aggiungi alla wish list, condividi, commenta, vota, tagga, aggiungi una recensione Video avvia, ferma, edita, magazzina, carica, commenta, embedda sul blog Software Scarica, acquista, scarica il trial, vedi demo,vota, aggiungi una recensione
  43. 43. I Social Object su Youtube Video Object: Play Pause Share Add to favs Add to playlist Flag Rate Comment Post a response Embed Upload Response Object Comments Object Person Object Subscribe View Related Object Add to quicklist View
  44. 44. Funzionalità legate alla Shopping Experience <ul><li>Le liste di oggetti sono una collezione importante </li></ul><ul><li>Perché le persone fanno delle liste? </li></ul><ul><li>Come le ordinano e le gestiscono? </li></ul><ul><li>Esempi per collezionare oggetti/temi: </li></ul><ul><ul><li>Wish list </li></ul></ul><ul><ul><li>Shopping cart </li></ul></ul><ul><ul><li>Favorites </li></ul></ul><ul><ul><li>Shared item </li></ul></ul><ul><ul><li>I miei oggetti (ristoranti preferiti, recensioni, bookmarks) </li></ul></ul><ul><ul><li>Gli oggetti dei miei amici </li></ul></ul><ul><ul><li>Progetti </li></ul></ul>Quali azioni svolgono su queste liste i membri della vostra Social Web App?
  45. 45. Le Social Feature di Amazon Product rating Share your own product images Add to Wish/Shopping List Add to Wedding/Baby Registry Tell a friend
  46. 46. Un Post – Acquisto di tipo social What do customers ultimately buy after viewing this item ? Tag this item Help others find this item? Rate this item to improve your recommendations
  47. 47. Consigli per gli acquisti – Collaborative filtering People who bought this also bought that..
  48. 48. Le recensioni e i voti dei clienti Customer reviews Was this review helpful to you?
  49. 49. Introducete poche funzionalità alla volta <ul><li>Il processo di introdurre, spostare o riassegnare le priorità è complesso. Se l’applicazione e l’interfaccia grafica sono fatte bene l’utente si adatta presto </li></ul><ul><li>Non create migliaia di funzionalità. Fate invece una scelta sensata su quelle che sono realmente importanti </li></ul><ul><li>Non copiate le funzionalità . Le migliori idee e la migliore progettazione si distinguono fra tutti anche se altri le hanno copiate </li></ul>
  50. 50. Postilla, un Blog network per Professionisti Ultimi Post TagCloud Diventa Blogger
  51. 51. Applicare AOF a Postilla <ul><li>Attività : costruire e coltivare relazioni tra professionisti (Avvocati, Commercialisti, Consulenti del lavoro, d’impresa, ambiente e sicurezza) </li></ul><ul><li>Oggetto Sociale : </li></ul><ul><ul><li>Singolo Blog del Professionista </li></ul></ul><ul><ul><li>Profilo personale </li></ul></ul><ul><li>Feature </li></ul><ul><ul><li>Scrivi Post </li></ul></ul><ul><ul><li>Seleziona categorie, aggiungi Tag </li></ul></ul><ul><ul><li>Pubblica Post </li></ul></ul><ul><ul><li>Diventa Blogger </li></ul></ul><ul><ul><li>I post + letti </li></ul></ul><ul><ul><li>I post + commentati </li></ul></ul><ul><ul><li>I tag più ricorrenti </li></ul></ul>
  52. 52. Premia i Super User <ul><li>Sono state create 2 classifiche: </li></ul><ul><li>Classifica settimanale per i primi 5 blogger </li></ul><ul><li>Classifica Blogger complessiva (dalla nascita di Postilla) </li></ul><ul><li>La classifica tiene conto del N° di Post letti e del N° di commenti ricevuti. </li></ul><ul><li>La formula prevede: </li></ul><ul><li>( 0,5 * N° Commenti + 0,5 * N° Letture del Post) </li></ul>
  53. 53. E per finire: una citazione “ Il web è più una creazione sociale che tecnica. Mi occupo del suo design per studiarne gli effetti di tipo social, per aiutare le persone a lavorare insieme, e non per usarlo come strumento tecnico. L’obiettivo ultimo del web è supportare e migliorare la nostra presenza interconnessa nel mondo . Dobbiamo quindi assicurarci che la società virtuale che costruiamo con il web sia del tipo che realmente noi intendiamo ”. Tim Berners-Lee, Weaving the Web www.w3.org/People/Berners-Lee/Weaving/
  54. 54. Per saperne di più… Building social Web Applications Web2.0 Architectures
  55. 55. CHI VI HA PARLATO… <ul><li>Leonardo Bellini – Consulenza, Formazione e Servizi Web </li></ul><ul><li>Riferimenti online: </li></ul><ul><li>Book site: www.farebusinessconilweb.com </li></ul><ul><li>Web site: www.dml.it </li></ul><ul><li>Blog: www.digitalmarketinglab.it </li></ul><ul><li>Slideshare: www.slideshare.net/leonardobellini </li></ul><ul><li>email: [email_address] </li></ul>

×