User Centered Design per il Mobile, Un Approccio Cognitivo

1,741 views
1,663 views

Published on

Centro Congressi Milanofiori (Milano, Italy)
26 Maggio 2011

Lo User Centered Design (UCD) è un modo per progettare e costruire, App Native, WebApp o Servizi Mobile in genere, che tengono conto del punto di vista e delle esigenze dell’utente al fine di realizzare un prodotto che risponda alle esigenze delle persone che lo utilizzeranno.

Come la nostra Mente Interagisce con il Design di un Interfaccia Utente? Come dobbiamo presentare i nostri Contenuti su un Dispositivo Mobile o su un Tablet? Quale Lingua usa la nostra mente per comunicare con un Interfaccia Utente?
Come Influenzare o Motivare un utente attraverso le nostre Applicazioni su un Dispositivo Mobile o un Tablet?

Queste sono solo alcune delle domande a cui daremo una risposta.

Nella Prima Parte analizzeremo le 4 Fasi (ISO 13407) dello User Centered Design (UX) e ne presenteremo alcune implementazioni in un Ottica Agile in modo da soddisfare i bisogni di singoli sviluppatori o piccoli team di design e sviluppo.

Nella Seconda Parte illustreremo i Fondamenti Cognitivi della User eXperience (UX) e vedremo, attraverso esempi concreti di progetti reali, come migliorare alcune tecniche classiche di design e come risolvere attraverso nuovi approcci situazioni tipiche della maggior parte dei progetti.

Published in: Technology, News & Politics
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,741
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

User Centered Design per il Mobile, Un Approccio Cognitivo

  1. 1. User Centered Design per il Mobile Andrea Picchi
  2. 2. ..Chi era Costui? Andrea Picchi Laurea in Psicologia (Padova) Laureando in Informatica (Pisa) 1. Interface Designer Domotica e Dispositivi Mobili 2. Designer & Developer iPhone e iPad
  3. 3. ..Chi siete Voi? Quanti Applicano dei Processi di Sviluppo?
  4. 4. uscita:29 GIU 2011http://www.apress.com/9781430232469
  5. 5. Di che cosaparleremo oggi?
  6. 6. Argomenti Trattati USER CENTERED DESIGN1 2 3 4 50 minuti
  7. 7. Argomenti Trattati USER CENTERED DESIGN UCDiso 13407 1 2 3 4 50 minuti
  8. 8. Argomenti Trattati USER CENTERED DESIGN UCD UCDiso 13407 fondamenti cognitivi 1 2 3 4 50 minuti
  9. 9. Argomenti Trattati USER CENTERED DESIGN UCD UCD UCDiso 13407 fondamenti cognitivi esempi concreti 1 2 3 4 50 minuti
  10. 10. Argomenti Trattati USER CENTERED DESIGN UCD UCD UCD Domandeiso 13407 fondamenti cognitivi esempi concreti e dubbi 1 2 3 4 50 minuti
  11. 11. PARTE 01 UCD ISO 13407- standard user centered design approach -
  12. 12. UCD ISO 13407Protocollo ISO 13407 (1999) “User Centered Design” Protocollo ISO 12207 (1994)“Software Lifecycle Processes”
  13. 13. UCD ISO 13407 Protocollo ISO 13407 “User Centered Design” Risponde alle Domande Cosa è importante per l’Utente?Che Task compie l’Utente? Con che Frequenza? In che Ordine? Quale è l’Ambiente di Utilizzo? Quali sono i Vincoli Utente in Ottica Funzionale? Quali sono le Aspettative dell’Utente?Come il Design può Ottimizzare i Processi Cognitivi dell’Utente?
  14. 14. Approcci a ConfrontoUser Centered Design Driven Technology Driven Focus sulle Soluzioni  Focus sui Componenti Focus sulla Robustezza della UI  Focus sulla Robustezza Sistema Scenario Driven (Real World)  System Driven (Use Case) Qualità basta su Completamento Task  Qualità basata su Difetti del Prodotto
  15. 15. UCD ISO 13407 Protocollo ISO 13407 (Principi)  Coinvolgimento Attivo Utenti  Assegnazione Ruoli Sistema ed Utente*  Iterare Soluzioni Design  Usare Team Multi-Disciplinare *Utente visto come Parte Centrale del Processo
  16. 16. UCD ISO 13407 Protocollo ISO 13407 (Attività)  Specificare Contesto Uso  Specificare Requisiti  Creare Soluzioni Progettuali  Valutare Design
  17. 17. UCD ISO 13407 1 2 Fasi di Analisi  Specificare Contesto Uso 2  Specificare Requisiti
  18. 18. UCD ISO 13407 1 Specificare Contesto Uso  Chi la Userà?  Che Cosa ci Farà?  In Quali Condizioni la Userà?
  19. 19. UCD ISO 13407 Specificare Requisiti  Quali sono gli User Task? 2  Quali sono gli Obiettivi Business?
  20. 20. UCD ISO 13407 1 Alcuni Strumenti Fase 1 e 2  Pianificazione Vincoli e Aspettative 2  Analisi Concorrenti  Interviste con Potenziali Utenti  Questionari  Creazione Profili Utenti  Creazione Elenco Compiti  Creazione di Scenari
  21. 21. UCD ISO 13407 Alcuni Strumenti Fase 3  Brainstorming e Discussioni Libere  Sketching delle Interfacce  Analisi Cognitiva Interfacce  Prototipi delle Interfacce 3
  22. 22. UCD ISO 13407 Alcuni Strumenti Fase 4  Test con Utenti  Questionari  Analisi Ispettive ed Euristiche  Analisi Comparative  Simulazioni Cognitive4  Implementazione
  23. 23. UCD ISO 13407 Processo Rigido? NOProcesso Personalizzabile? SI
  24. 24. Esempio 01Interview Personas Storyboard Sketch Electronic Usability Paper Prototype Testing PrototypeUsability BetaTesting Prototype Usability Testing RELEASE
  25. 25. Esempio 02
  26. 26. Esempio 03 Specifica Contesto Specifica RequisitiValutazione Design Soluzioni Design
  27. 27. PARTE 02Fondamenti Cognitivi - dello user centered design -
  28. 28. UCD ISO 13407 Caratteristiche Tecniche Interagisce col Sistema**Sistema visto come Utente + Software + Hardware + Ambiente
  29. 29. UCD ISO 13407 Risponde alle DomandeCome Ottimizzare i Processi Cognitivi*? *Processi Cognitivi dell’Utente durante l’Interazione con l’Interfaccia
  30. 30. UCD ISO 13407 E’ Guidato da Scenari Reali*Valore dell’Ambiente è una Variabile Fondamentale nel Processo
  31. 31. UCD ISO 13407 The White Box approach* *versus the black box approach
  32. 32. UCD ISO 13407 Sono Utentein quanto Essere Umano* *con delle peculiarità specifiche
  33. 33. {{
  34. 34. Creazione Design Domotica ad hoc Ubiquitous Computing Ottimizzazione Cognitiva Design Esistente Aumento Livello User eXperience*Elaborazione Design Persuasivo
  35. 35. Mainframe Personal Ubiquitous 1 Computer 1 Computer N Computer N Utenti 1 Utenti 1 Utenti100755025 0 1940 1950 1960 1970 1980 1990 2000 2010 2020 Chart: Mark Weiser
  36. 36. Def: Proc.Cognitivo“sequenza di singoli eventi necessari alla formazione di un qualsiasi contenuto di conoscenza”
  37. 37. “tutto”accade in pochi “momenti” image credit: flickr @ jtbrennan
  38. 38. Come l’Essere UmanoCome l’Essere Umano si interfaccia si interfaccia con l’ambiente? con l’ambiente?
  39. 39. I 5 Sensi comeframework genetico image credit: flickr @ victoriapeckham
  40. 40. Sist.Visivo come interfacciacon l’Ambiente image credit: flickr @ chefranden
  41. 41. visione
  42. 42. leggi eprincipi della percezione image credit: flickr @ devendernarang
  43. 43. percezione
  44. 44. Sist.Percettivoe l’archiviazionedell’informazione image credit: flickr @ yinyang
  45. 45. Breve Medio LungoTermine Termine Terminememoria memoria memoria cache ram di massa
  46. 46. Page FaultPROCESSO Load Page WORKING SET
  47. 47. Concetti ChiaveCI INTERFACCIAMO USANDO I 5 SENSI ... ... 1 2
  48. 48. Concetti ChiaveCI INTERFACCIAMO USANDO I 5 SENSI Sistema Visivo (occhio) ... ... 1 2
  49. 49. Concetti ChiaveCI INTERFACCIAMO USANDO I 5 SENSI Sistema Visivo (occhio) sistema percettivo (cervello) ... ... 1 2
  50. 50. Concetti ChiaveCI INTERFACCIAMO USANDO I 5 SENSI Sistema Visivo (occhio) sistema percettivo (cervello) ... ... 1 2 Nota: La Mappa Non e’ il Territorio
  51. 51. Risorse Cognitive Attenzione Percezione Categorizzazione Memoria Temporanea
  52. 52. Def: Risorsa Cognitiva“capacita’ di gestire ed elaborare informazioni”
  53. 53. Risorse DisponibiliRisorse Disponibili = Risorse Totali - Risorse Ambiente
  54. 54. APP AMBIENTE
  55. 55. Concetti ChiaveLE RISORSE COGNITIVE SONO LIMITATE 1 2
  56. 56. Concetti ChiaveLE RISORSE COGNITIVE SONO LIMITATE Consumate dall’ambiente 1 2
  57. 57. Concetti ChiaveLE RISORSE COGNITIVE SONO LIMITATE Consumate consumate dall’ambiente dall’applicazione 1 2
  58. 58. PARTE 03Esempi Concreti- di user (cognitive) centered design -
  59. 59. ESEMPIO 01Gestire Errori- ridurre la percentuale di errori -
  60. 60. Ampiezza Contenuti - meno opzioni = meno errori -
  61. 61. Profondità Contenuti - più focus = meno errori -
  62. 62. ISTANZA ISTANZA“CASA” “AUTOBUS” 15% 65%DISTURBO DISTURBO MOBILE RSS
  63. 63. AMBIENTE ≠ AMBIENTE
  64. 64. Concetti ChiaveOTTIMIZZARE SCORRIMENTO CONTENUTI 1 2
  65. 65. Concetti ChiaveOTTIMIZZARE SCORRIMENTO CONTENUTI wide: riducendo le opzioni 1 2
  66. 66. Concetti ChiaveOTTIMIZZARE SCORRIMENTO CONTENUTI wide: riducendo deep: aumentando le opzioni il focus 1 2
  67. 67. ESEMPIO 02Creare Interazione - uso delle leggi di percezione -
  68. 68. Interfacce Cognitive - negative e positive space -
  69. 69. Interfacce Cognitive - legge di prossimità e similarità -
  70. 70. Concetti Chiave MODELLARE TUTTI GLI SPAZI 1 2
  71. 71. Concetti Chiave MODELLARE TUTTI GLI SPAZI sia spazi positivi 1 2
  72. 72. Concetti Chiave MODELLARE TUTTI GLI SPAZI sia spazi sia spazi positivi negativi 1 2
  73. 73. Concetti Chiave MODELLARE TUTTI GLI SPAZI sia spazi sia spazi positivi negativi 1 2 * in quanto essere umano
  74. 74. ESEMPIO 03Carico Informativo- ridurre il rumore cognitivo dei contenuti -
  75. 75. Progressive Disclosure - fornire messaggi all’utente -V Summit di Architettura dell’Informazione - Milano, 5-7 maggio 2011 62
  76. 76. Dettagli Avanzati - solo su richiesta dell’utente -
  77. 77. Lasciatelo Agire- ridurre il rumore cognitivo nei processi decisionali -
  78. 78. Nella stessa “Pagina” - usando anche elementi grafici -
  79. 79. Concetti ChiaveOTTIMIZZARE FRUIZIONE CONTENUTI 1 2
  80. 80. Concetti ChiaveOTTIMIZZARE FRUIZIONE CONTENUTI riducendo il rumore cognitivo 1 2
  81. 81. Concetti ChiaveOTTIMIZZARE FRUIZIONE CONTENUTI riducendo il usando il rumore cognitivo progressive disclosure 1 2
  82. 82. ESEMPIO 04Ottimizzare Esperienze - aderenza tra schemi mentali e concettuali -
  83. 83. Implementation Mode Represented#import <Foundation/Foundation.h> Modeint main (int argc, const char * argv[]) { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];... ... ...} Mental Mode Nomenclature: Donald Norman
  84. 84. Manca Qualcosa- il supporto delle esperienze passate -
  85. 85. *
  86. 86. Introdurre Paradigmi - creare e forzare gli schemi mentali -
  87. 87. Concetti ChiaveDISEGNARE PER GLI SCHEMI MENTALI 1 2
  88. 88. Concetti ChiaveDISEGNARE PER GLI SCHEMI MENTALI schemi* già esistenti 1 2
  89. 89. Concetti ChiaveDISEGNARE PER GLI SCHEMI MENTALI schemi* schemi* già esistenti da creare 1 2
  90. 90. Concetti ChiaveDISEGNARE PER GLI SCHEMI MENTALI schemi* schemi* già esistenti da creare 1 2 * schemi mentali
  91. 91. ESEMPIO 05Esperienza Surrogate - implementare esperienze nell’utente -
  92. 92. RICORDO (reale) RICORDO (surrogato) Non VengonoPercepite Differenze
  93. 93. 1 RICORDO (reale)2 RICORDO (surrogato)
  94. 94. Concetti ChiaveSFRUTTARE TUTTI I TIPI DI RICORDI 1 2
  95. 95. Concetti ChiaveSFRUTTARE TUTTI I TIPI DI RICORDI reali: per ottimizzare sm* 1 2
  96. 96. Concetti ChiaveSFRUTTARE TUTTI I TIPI DI RICORDI reali: per surrogati: per ottimizzare sm* creare sm* 1 2
  97. 97. Concetti ChiaveSFRUTTARE TUTTI I TIPI DI RICORDI reali: per surrogati: per ottimizzare sm* creare sm* 1 2 * schemi mentali
  98. 98. ESEMPIO 06 Regole Sociali - usare regole sociali nelle interazioni -V Summit di Architettura dell’Informazione - Milano, 5-7 maggio 2011 84
  99. 99. 1sec
  100. 100. Concetti ChiaveUTENTE ASPETTA SEMPRE UN FEEDBACK 1 2
  101. 101. Concetti ChiaveUTENTE ASPETTA SEMPRE UN FEEDBACK nella navigazione 1 2
  102. 102. Concetti ChiaveUTENTE ASPETTA SEMPRE UN FEEDBACK nella nelle navigazione interazioni 1 2
  103. 103. ESEMPIO 07 Valore Sociale- incrementare la reputazione con i feedback -
  104. 104. PrincipioSimilarità + Principio Validazione Sociale
  105. 105. Concetti ChiaveUSARE SEMPRE LA VALIDAZIONE SOCIALE 1 2
  106. 106. Concetti ChiaveUSARE SEMPRE LA VALIDAZIONE SOCIALE per motivare gli indecisi 1 2
  107. 107. Concetti ChiaveUSARE SEMPRE LA VALIDAZIONE SOCIALE per motivare per rafforzare gli indecisi la reputazione 1 2
  108. 108. Concetti ChiaveUSARE SEMPRE LA VALIDAZIONE SOCIALE per motivare per rafforzare gli indecisi la reputazione 1 2 * in quanto essere umano
  109. 109. ESEMPIO 08 Creare Empatia- uso delle immagini per motivare azioni -
  110. 110. Neuroni Specchio- sfruttare indirettamente l’empatia -
  111. 111. Più Aggressivo- sfruttare direttamente l’empatia -
  112. 112. Ads Dinamici- aumentano realismo ed impatto cognitivo* -
  113. 113. Ads Dinamici- aumentano realismo ed impatto cognitivo* - * percepiti più aderenti al contesto
  114. 114. Concetti ChiaveCREARE EMPATIA CON GLI UTENTI 1 2
  115. 115. Concetti ChiaveCREARE EMPATIA CON GLI UTENTI in maniera diretta 1 2
  116. 116. Concetti ChiaveCREARE EMPATIA CON GLI UTENTI in maniera in maniera diretta indiretta 1 2
  117. 117. Concetti ChiaveCREARE EMPATIA CON GLI UTENTI in maniera in maniera diretta indiretta 1 2 * in quanto essere umano
  118. 118. UCD per il Mobile Grazie per l’ascolto! more info: www.andreapicchi.it slideshare.net/andreapicchi twitter.com/andreapicchi it.linkedin.com/in/andreapicchi info@andreapicchi.it
  119. 119. uscita:29 GIU 2011http://www.apress.com/9781430232469

×