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.

UserExperience in web2

4,782 views

Published on

It illustrate some general aspects of designing the user experience in web2 services.
The document provides some general introduction about:
-- User Experience
-- web2 as a Social Read/Write Web
-- some Case Studies for web2 and mash-ups
-- UserExperience common patterns in web2

Published in: Business, Technology

UserExperience in web2

  1. 1. User Experience in web2.0 dott. Daniele Galiffa Mediateca Santa Teresa Milano, 2007.07.13 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 1
  2. 2. Parleremo di... User Experience ● Social Read/Write web ( srww ) ● Case studies ( User Experience e srww ) ● Mash-ups ● Opportunità nel mondo srww ● Archetipi negli elementi di User Experience dei servizi srww ● 2 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 2
  3. 3. Premesse Il seminario di oggi è l'espressione dell'uso collaborativo e partecipativo di strumenti e serivizi di rete ad alto valore aggiunto in termini di User Experience. Blog ( www.idearium.org ) Barcamp / wiki Skype OpenOffice Slideshare Flickr 3 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 3
  4. 4. Citazione quot;When technology delivers basics needs, users expereince dominatesquot; Don Norman 4 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 4
  5. 5. User Experience – Una definizione Possiamo definire la User Experience (UX) come la disciplina che studia, progetta ed analizza l'insieme delle esperienze e soddisfazioni tratte da un utente durante l'uso di un prodotto o di un sistema 5 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 5
  6. 6. User Experience - Il rapporto con le altre discipline Information Architecture Interaction Design Ethnography Branding Usability 6 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 6
  7. 7. User Experience – I domini coinvolti 7 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 7
  8. 8. User Experience – Le faccette di Q 8 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 8
  9. 9. User Experience – Gli elementi di Garrett 9 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 9
  10. 10. User Experience – Il processo progettuele Osservare, Ascoltare, Testare ...e poi ricominciare di nuovo 10 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 10
  11. 11. User Experience – Alcuni validi esempi apple iPhone Offrire migliori esperienze invece di moltissime funzioni Analizzare le esperienze Attenzione ai dettagli 11 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 11
  12. 12. User Experience – Alcuni validi esempi Nintendo Wii Concentrarsi sull'esperienza e sul contenuto 12 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 12
  13. 13. User Experience – Alcuni validi esempi Nabaztag Definizione di scenari di comunicazione non tradizionali 13 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 13
  14. 14. User Experience – Alcuni validi esempi Fiat 500 Gli utenti definiscono i valori del prodotto ('500 wants you') Il brand come esperienza 14 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 14
  15. 15. User Experience – Un esempio non (troppo) valido Nike+ system Il sistema pensato solo per un uso (la corsa) 15 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 15
  16. 16. Social Read/Write Web Web 2.0...ma siamo sicuri ? Il web è nato per condividere ( documenti testuali ) e collaborare ( tra scienziati ) Il web ora consente di condividere moltissimi tipi di documenti tra moltissimi utenti 16 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 16
  17. 17. Social Read/Write Web – Il ruolo dell'utente Meglio parlare di Social Read/Write Web (srww), cioè il web in cui ciascun utente è: editore fruitore distributore collaboratore 17 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 17
  18. 18. Social Read/Write Web – Caratteristiche Il web come piattaforma ● Il software è un servizio e non un prodotto ● Intelligenza collettiva ● Informazione distribuita ● Gli utenti producono valore ● Facilità di utilizzo ● Customizzazione ● Perpetual Beta ● Focus sui concetti della LongTail ● 18 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 18
  19. 19. Social Read/Write Web – Fenomi scatenanti Hypertexts ● emails ● Peer2Peer ● OpenSource ● RSS / RDF ● OnLine forums / mailing list ● OnDemandContents ● 19 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 19
  20. 20. Social Read/Write Web – Case Studies CASE STUDIES 20 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 20
  21. 21. Social Read/Write Web – Case Studies Flickr (http://www.flickr.com) 21 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 21
  22. 22. Social Read/Write Web – Case Studies 22 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 22
  23. 23. Social Read/Write Web – Case Studies 23 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 23
  24. 24. Social Read/Write Web – Case Studies 24 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 24
  25. 25. Social Read/Write Web – Case Studies 25 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 25
  26. 26. Social Read/Write Web – Case Studies 26 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 26
  27. 27. Social Read/Write Web – Case Studies 27 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 27
  28. 28. Social Read/Write Web – Case Studies Flickr Condivisione di foto Annotazioni e commenti sulle foto Organizzazione delle foto per argomenti (tags), date, coordinate geografiche (geotagging) Erogazione e produzione via API / RSS / widgets Integrazione con servizi offline (stampa) ed altri devices (mobile phones) 28 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 28
  29. 29. Social Read/Write Web – Case Studies Delicious (http://www.delicious.com) 29 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 29
  30. 30. Social Read/Write Web – Case Studies 30 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 30
  31. 31. Social Read/Write Web – Case Studies 31 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 31
  32. 32. Social Read/Write Web – Case Studies Delicious Condivisione di bookmarks Annotazioni sui bookmarks Organizzazione dei bookmark per argomenti (tags) Erogazione e produzione dei contenuti via API / RSS / widget Integrazione con browsers 32 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 32
  33. 33. Social Read/Write Web – Case Studies YouTube (http://www.youtube.com) 33 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 33
  34. 34. Social Read/Write Web – Case Studies 34 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 34
  35. 35. Social Read/Write Web – Case Studies 35 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 35
  36. 36. Social Read/Write Web – Case Studies YouTube Condivisione di video Commenti e rating sui video Organizzazione dei video per argomenti (tags) e canali Erogazione e produzione dei contenuti via API / RSS / widget Integrazione con devices mobili e blogs 36 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 36
  37. 37. Social Read/Write Web – Case Studies Digg (http://www.digg.com) 37 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 37
  38. 38. Social Read/Write Web – Case Studies 38 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 38
  39. 39. Social Read/Write Web – Case Studies Digg Condivisione di storie Annotazioni e commenti sulle storie Organizzazione delle storie per argomenti (tags) e canali Erogazione e produzione dei contenuti via API / RSS / widget 39 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 39
  40. 40. Social Read/Write Web – Case Studies WordPress (http://wordpress.org) 40 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 40
  41. 41. Social Read/Write Web – Case Studies 41 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 41
  42. 42. Social Read/Write Web – Case Studies 42 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 42
  43. 43. Social Read/Write Web – Case Studies Wordpress Piattaforma opensource per blogging Ampia possibilità customizzazione Integrazione con altri servizi (technorati, delicious, flickr, google adsense, etc...) Sharing dei contenuti e della tecnologia 43 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 43
  44. 44. Social Read/Write Web – Case Studies UStream (http://www.ustream.tv) 44 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 44
  45. 45. Social Read/Write Web – Case Studies 45 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 45
  46. 46. Social Read/Write Web – Case Studies 46 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 46
  47. 47. Social Read/Write Web – Case Studies Ustream.tv Piattaforma per streaming audio/video (live ed onDemand) Aggregazione dei contenuti per argomenti (tags) o canali Integrazione con altri servizi (blogs, etc...) Annotazioni e commenti sui contenuti Erogazione dei contenuti via RSS 47 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 47
  48. 48. Social Read/Write Web – Case Studies Wikipedia (http://www.wikipedia.org) 48 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 48
  49. 49. Social Read/Write Web – Case Studies 49 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 49
  50. 50. Social Read/Write Web – Case Studies Wikipedia Piattaforma per la produzione e fruizione gratuita di hypertesti via web Organizzazione dei contenuti per tassonomie Processo di revisione dei contenuti Peer2Peer Annotazioni e commenti sui contenuti e sugli interventi di modifica Erogazione dei contenuti via RSS 50 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 50
  51. 51. Social Read/Write Web – Case Studies Google (http://www.google.com) 51 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 51
  52. 52. Social Read/Write Web – Case Studies 52 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 52
  53. 53. Social Read/Write Web – Case Studies Google adWords + Google adSense Piattaforma per pubblicità online, interamente basata su UGCs. Eroga pubblicità contestualmente e coerente al contenuto che fruito dall'utente o legato alle parole cercate Format della comunicazione: testo + link Modello di business con revenue sharing tra gli stakeholders 53 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 53
  54. 54. Social Read/Write Web – Case Studies Zopa (http:www.zopa.com) 54 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 54
  55. 55. Social Read/Write Web – Case Studies 55 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 55
  56. 56. Social Read/Write Web – Case Studies Zopa Piattaforma partecipativa per crediti/prestiti in denaro Condivisione del rischio Stile della comunicazione: tono semplice e diretto Modello di business con revenue sharing tra gli stakeholders 56 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 56
  57. 57. Social Read/Write Web – Case Studies Barcamp (http://barcamp.org) 57 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 57
  58. 58. Social Read/Write Web – Case Studies 58 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 58
  59. 59. Social Read/Write Web – Case Studies 59 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 59
  60. 60. Social Read/Write Web – Case Studies Barcamp Piattaforma collaborativa per organizzare incontri tematici Utilizzo di wiki Contenuto generato spontaneamente ed esclusivamente dagli utenti Forte correlazione tra online ed offline Comunicazione: naming forte (molti eventi hanno nel nome il suffisso “camp”. Esempio: ZenaCamp) Erogazione dei contenuti via RSS 60 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 60
  61. 61. Social Read/Write Web – Case Studies LinkedIn (http://www.linkedin.com) 61 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 61
  62. 62. Social Read/Write Web – Case Studies 62 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 62
  63. 63. Social Read/Write Web – Case Studies LinkedIn Social network che mette in relazione colleghi e professionisti Utenze freemium Autorevolezza / Digital Identity Integrazione con i servizi di pubblicità di google ad sense 63 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 63
  64. 64. Social Read/Write Web – Case Studies Many Eyes (http://services.alphaworks.ibm.com/manyeyes/) 64 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 64
  65. 65. Social Read/Write Web – Case Studies 65 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 65
  66. 66. Social Read/Write Web – Case Studies 66 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 66
  67. 67. Social Read/Write Web – Case Studies 67 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 67
  68. 68. Social Read/Write Web – Case Studies Many eyes Condivisione di tabelle di dati e di strumenti di visualizzazione Commenti e annotazioni sui contenuti e sulle visualizzazioni dei contenuti Comunicazione: forte interattività tra il contenuto e gli utenti Richiede forte partecipazione e senso critico 68 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 68
  69. 69. Social Read/Write Web – Case Studies Programmable web (http://www.programmableweb.com/) 69 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 69
  70. 70. Social Read/Write Web – Case Studies 70 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 70
  71. 71. Social Read/Write Web – Case Studies 71 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 71
  72. 72. Social Read/Write Web – Case Studies Programmable web Aggregatore di informazioni sui servizi srww Elenchi, classifiche, tassonomie, tests su servizi e piattaforme collaborative 72 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 72
  73. 73. Social Read/Write Web – Case Studies Ning (http://www.ning.com ) 73 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 73
  74. 74. Social Read/Write Web – Case Studies 74 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 74
  75. 75. Social Read/Write Web – Case Studies 75 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 75
  76. 76. Social Read/Write Web – Case Studies Ning Piattaforme per la creazione del proprio social network Integrazione con altri servizi (flickr, you tube, etc... ) Forte customizzazione Utenze freemium Completamente basato su UGCs Forte attenzione alle nicchie 76 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 76
  77. 77. Social Read/Write Web – Fenomi derivati Folksonomy ● Forma separata dal contenuto (Mash-ups / APIs) ● LiveCasting / Podcasting / VideoCasting ● Contenuti accessibili e frammentati ● (cross-media e cross-platform) Forte relazione tra online/offline ● OnLine collaboration/sharing ● Rating / Autority ● Digital Identity ● 77 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 77
  78. 78. Social Read/Write Web – Mash-ups MASH-UP 78 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 78
  79. 79. Social Read/Write Web – Mash-ups I Mash-up sono dei servizi digitali ottenuti dall'integrazione di contenuti e strumenti forniti gratuitamente da terze parti. I Mash-up sono una delle tipiche espressioni di sintesi di cosa è il Social Read/Write web 79 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 79
  80. 80. Social Read/Write Web – Mash-ups ALCUNI ESEMPI 80 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 80
  81. 81. Social Read/Write Web – Mash-ups 81 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 81
  82. 82. Social Read/Write Web – Mash-ups 82 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 82
  83. 83. Social Read/Write Web – Mash-ups 83 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 83
  84. 84. Social Read/Write Web – Mash-ups 84 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 84
  85. 85. Social Read/Write Web – Mash-ups 85 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 85
  86. 86. Social Read/Write Web – Mash-ups 86 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 86
  87. 87. Social Read/Write Web – Mash-ups 87 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 87
  88. 88. Social Read/Write Web – Mash-ups 88 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 88
  89. 89. Social Read/Write Web – Mash-ups 89 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 89
  90. 90. Social Read/Write Web – Mash-ups 90 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 90
  91. 91. Social Read/Write Web – Mash-ups 91 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 91
  92. 92. Social Read/Write Web – Mash-ups 92 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 92
  93. 93. Social Read/Write Web – Mash-ups 93 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 93
  94. 94. Opportunità nel Social Read/Write Web Progettazione dei servizi srww centrati sull'utente ● Attenzione alle nicchie ● (ai loro linguaggi, stili e contenuti) Definizione di nuove forme di comunicazione ● Utilizzo di strumenti complessi ma non complicati ● Il brand veicolato come somma di esperienze ● 94 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 94
  95. 95. User Experience – Archetipi TagCloud ● Branding: Naming ● Findability: Star / Favourites / “Your” ● Information Architecture: Explicit labeling ● Tono della comunicazione: diretta e semplice ● 95 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 95
  96. 96. Conclusioni Internet è sempre più lo strumento per creare e rafforzare relazioni tra le persone La qualità dell'esperienza degli utenti nell'utilizzo dei nuovi servizi srww è un fattore determinante nel decretare il successo di un servizio web Gli utenti cercano di trovare l'ambiente (e i mercati) in cui le conversazioni e le relazioni con altri utenti vengono valorizzate 96 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 96
  97. 97. Risorse e fonti The Design of Everyday Things delicious.org Donald A. Norman barcamp.org The Elements of User Experience: User-Centered Design for the Web wikipedia.org Jesse James Garrett wordpress.com Experience Design 1 mentegrafica.it Nathan Shedroff uxnet.com The Long Tail: Why the Future of Business Is Selling Less of More idearium.org Chris Anderson linkedin.com zooppa.com Designing Interactions zopa.com Bill Moggridge (Author) ning.com programmableweb.com paperandpencil.info/home/2003/06/index.html ustream.tv nathan.com/ digg.com semanticstudios.com/publications/semantics/000029.php youtube.com qltd.com/ http://www.ubilabs.net/tourdefrance/ jjg.net/elements/ http://www.theairdb.com/sub/Airlines.html pimpampum.net/rt/ http://googlemapsmania.blogspot.com/ adobe.com http://www.biblemap.org/ flickr.com http://www.placeopedia.com/ 97 User Experience in web2.0 – dott. Daniele Galiffa – Milano, 2007.07.13 - 97
  98. 98. Grazie Grazie www.mentegrafica.it/ux

×