• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
 

Corso WebApp iOS - Lezione 03: Cognitive User Interface Design

on

  • 953 views

Introduzione ai Bisogni Cognitivi dell'Utente e presentazione delle Leggi di Percezione. ...

Introduzione ai Bisogni Cognitivi dell'Utente e presentazione delle Leggi di Percezione.

Introduzione alla Psicologia dei Colori ed ai Pattern di Lettura.

Introduzione ad un possible processo di Design dell'Interfaccia.

Statistics

Views

Total Views
953
Views on SlideShare
948
Embed Views
5

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 5

http://www.linkedin.com 3
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Corso WebApp iOS - Lezione 03: Cognitive User Interface Design Corso WebApp iOS - Lezione 03: Cognitive User Interface Design Presentation Transcript

    • Corso WebApp iOS “Cognitive UI Design” Lezione 03/10”Simplicity is the ultimate Sophistication” Leonardo da Vinci Painter, Sculptor, Architect, Musician, Scientist, Mathematician, Engineer, Inventor.
    • Chapter 04User Interface Design for iOS Devices http://www.apress.com/9781430232469
    • Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
    • Evoluzione HCI Mainframe Personal Ubiquitous 1 Computer100 N Utenti75 1 Computer 1 Utenti5025 N Computer 1 Utenti 0 1940 1950 1960 1970 1980 1990 2000 2010 2020
    • Evoluzione HCI
    • Design Cognitivo
    • Design Cognitivo { specifiche buisiness specifiche visual design “specifiche” utenti
    • Design Cognitivo Utente come Essere Umano conoscere le “specifiche” dei nostri utenti
    • Design Cognitivo Che cosa Implica? approccio white-box contro approccio black-box
    • Design Cognitivo{{
    • Design Cognitivo } Parte Razionale Parte Emozionale Parte Decisionale la parte Emozionale elabora più velocemente della parte Razionale
    • Design Cognitivo Creazione Design Domotica ad hoc Ubiquitous Computing Ottimizzazione Cognitiva Design e Re-DesignElaborazione Design Aumento Livello Persuasivo User eXperience*
    • Design Cognitivo Ottimizzazione Cognitiva Design e Re-Design Aumento Livello User eXperience*
    • Design Cognitivo Concetti Chiave Risorse Cognitive La Mappa non é il Territorio Tutto é Interfaccia
    • Design Cognitivo Def: Processo Cognitivo“sequenza di singoli eventi necessari alla formazione di un qualsiasi contenuto di conoscenza”
    • Design Cognitivo Millisecondi milionesimo di secondo
    • Design Cognitivo velocità impulso nervosofino a 400 km/h**da 0.5 m/s a 120 m/s image credit: flickr @ Ytsejam Photography
    • Design Cognitivo “tutto” accade inpochi “momenti”*da 0.5 m/s a 120 m/s image credit: flickr @ jtbrennan
    • Design Cognitivoimage credit: flickr @ WebWizzard image credit: wikipedia Reti Neurali Vs Telecomunicazioni Mondiali Cervello Vs Chicco di Riso
    • Design Cognitivo Come l’Essere Umano si interfaccia con l’ambiente?
    • Design Cognitivo 5 sensicome framework genetico image credit: flickr @ victoriapeckham
    • Design Cognitivo sistema visivocome interfaccia* con l’ambiente *non unica image credit: flickr @ chefranden
    • Design Cognitivo
    • Design Cognitivo Come vengono elaborate le informazioni?
    • Design Cognitivosistema percettivo e l’elaborazione dell’informazione *non unica image credit: flickr @ chefranden
    • Design Cognitivo
    • Design Cognitivo Come percepiamo il “nostro” mondo?
    • Design Cognitivoleggi (e principi) della percezione similitudine prossimità simmetria continuità chiusura figure-sfondoconnessione uniforme destino comune passata esperienza image credit: flickr @ devendernarang
    • Design Cognitivo Similitudine percepire collettivita’ o totalita’ in base a forma, colore, dimensione, ...
    • Design Cognitivo Prossimità percepire collettività o totalità in base a prossimità spaziale o temporale
    • Design Cognitivo Simmetria percepire relazioni tra immagini simmetriche, anche se distanti tra loro
    • Design Cognitivo Continuità continuare mentalmente pattern visuale o cinestesici
    • Design Cognitivo Chiusura fare esperienza di elementi non percepiti attraverso sensazioni, per completare figure regolari
    • Design Cognitivo Figura Sfondo percepire un oggetto come unione della sua figura e del suo sfondo
    • Design Cognitivo Destino Comune percepire unità di movimento tra oggetti che condividono una direzione nel campo percettivo
    • Design Cognitivo Passata Esperienza fare esperienza di elementi non percepiti attraverso integrazione di esperienze passate
    • Esempio image credit: Richard Fonteneau
    • Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
    • Psicologia Colore Alto Impatto sulla User eXperience concepita a partire dalle specificheredatte nella definizione del brand dell’Applicazione
    • Psicologia Colore Alto Impatto sulla User eXperience sviluppata parallelamente alla creazione della User eXperience in fase di Design
    • Psicologia Colore Colore può essere descritto in 3 modi 1. Nome 2. Purezza 3. Rapporto light/dark
    • Psicologia Colore Colori sono presentati su una ruota Munsell Color Scheme
    • Psicologia Colore Colori sono divisi in 2 gruppi di base: Warm Colors: Rosso, Arancio, Giallo Cool Colors: Blu, Viola, Verde
    • Psicologia Colore Come i Colori Influenzano le Emozioni? Blue Depth, stability, professionalism, loyality, reliability, honor, trustGreen Durability, reliability, safety, honesty, optimism, harmony, freshness, relaxingYellow Comfort, liveliness, intellect, happiness, energy Red Strength, boldness, excitement, determination, desire, courage, enthusiasmOrange Enthusiasm, cheerfulness, affordability, stimulation, creativityPurple Nobility, luxury, mystery, royalty, elegance, magicBrown Endurance, confident, casual, reassuring, earthyWhite Cleanliness, purity, newness, peace, innocence, simplicity, freshness Gray Conservatism, traditionalism, intelligence, seriousness, wisdomBlack Power, elegance, sophistication, formality, strength, mystery
    • Psicologia Colore Come si Combinano i Colori? Schema Monocromatico Schema Colori Analoghi Schema Colori Complementari Schema Colori Complementari Divisi Schema Colori Triadici Schema Colori Tetradici
    • Psicologia Colore Monocromatico Analoghi
    • Psicologia Colore Complementari Complementari Divisi
    • Psicologia Colore Triadico Tetradico
    • Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
    • Pattern Lettura Importante Dettaglioutente raramente* (quasi mai) legge in realtà scansiona il testo in cerca di parole o frasi che corrispondano alla sua ricerca *per vari motivi che non tratteremo
    • Pattern LetturaPossiamo comunque isolare alcuni Pattern* di Lettura utente raramente* (quasi mai) legge in realtà scansiona il testo in cerca di parole o frasi che corrispondano alla sua ricerca *valido per gli utenti che leggono da sinistra a destra
    • Pattern Lettura Pattern di Lettura Z tipico delle “letture” soddisfacenti dove l’utente é consapevolmente ed interessato al contenuto
    • Pattern Lettura
    • Pattern LetturaAlcune Implicazioni del Pattern di Lettura ZUtente salta da un paragrafo ad un altroUtente guarderà sempre nell’angolo basso e sx
    • Pattern Lettura Pattern di Lettura Ftipico delle “ricerche” di parole frettolose o di ricerche caratterizzate da scarso interesse
    • Pattern Lettura
    • Pattern LetturaAlcune Implicazioni del Pattern di Lettura FUtente non legge contenuti parola dopo parolaInformazioni Sensibili nei primi due Paragrafi
    • Diario Lezioni LEZIONE 03Cognitive User Interface Design Design Cognitivo dell’Interfaccia Psicologia dei Colori Pattern di LetturaProcesso di Design dell’Interfaccia
    • Design Cognitivo
    • Design Cognitivo
    • Design Cognitivo { isolare requisiti design isolare requisiti utente isolare gli scenari possibili realizzare sitemap contenuti sketch interfaccia
    • EsercitazioneUtilizzare Tool o Template* Scaricabili http://iu.di.unipi.it/webapp/ 1. Creare Personas (Profili Utenti) 2. Creare Scenari Interazione 3. Creare Sitemap Contenuti 4. Sketch Interfaccia 5. Documento Interazione Interfacce *oppure usare un proprio template
    • Esercitazione
    • PROSSIMA LEZIONE LEGGERE Prioritizzazione Contenuti Prototipazione Interfaccia