Master in Architettura dell'Informazione IED 2012

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012

Marcello Miceli

COMUNICAREv.tr.(dallat.Communicàre:rendercomune,condividere)faraltripartecipidiunacosa,darenotizia,ragguagliare.SIN.Diffondere,partecipare.

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marcello Miceli

Web Comunità

Il web: il nuovo mondo

TecnologiaCosti“bassi”Mercatoconcorrenziale

LibertàCredibilitàFiduciaTrasparenza

Struttura

Valori

Il web: il nuovo mercato

Architetturadell’Informazione

“Lecomunitàgiàesistono,pensapiuttostoacomeaiutarleafarequelchevoglionofare.”

MarkZuckerberg(Facebook)

Il web: il nuovo “luogo”

Daniele Zennaro

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro

Componenti del design di un prodotto

Estetica Pratica Usabilità

Estetica

Chiarezza Elasticità Semplicità

Usabilità

Insiemedifattoricherendonounsitofunzionalee

soddisfacente,neitempid’uso,richiestipercompierele

azionichegliutentidesiderano.

Stadioinizialedellaprogettazionepersuggerirei“comportamentid’uso”.

Usabilità preventiva 1/2

Processoiterativo.

Osservarelemossedegliutentipercapireinqualipuntipossonotrovarsiindifficoltà.

Usabilità preventiva 2/2

Tempi di risposta delle operazioni.

Struttura dei contenuti e delle informazioni.

Navigabilità di un sito.

Funzionalità del design.

Indici di qualità

Qualità del design

Efficienza d’uso

Feedback dagli utenti

Fattori di controllo

Facilità di memorizzazione

Criteri di usabilità

Compatibilità.

Risorse a disposizione dell’utente.

Coerenza.

Feedback.

Semplicità.

Psicologia applicata al web

Velocitànelle

operazioni

Effettosorpresa

Serendipity

Analisideicomportamenti

sociali

Manuele Forcucci

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci

Human-centered design (HCD)

Sonoidestinatarifinali.

Lepersoneprimaditutto.

Progettiamoperloro.

Lepersonedevonosentirsiall'altezzadelcontestoincuistannonavigando.

Design Thinking

E' un processo collaborativo, che allarga gli orizzonti del design, non relegandolo semplicemente alle forme e agli oggetti.

Design Thinking

Sitrovaunasoluzioneattraversolestorie,leesperienzecomuniecomplementari.

Design Thinking

Definiscenuoveopzioniesoluzionianuoviproblemi.

Design Thinking

Spazioallaco‐creazione,albrainstormingeall’ideazionediscenarifuturibili

Design Thinking

Sicostruisconoprototipi,sicreanoleipotesiesiverificano.

Design Thinking

Spazioaitest:l'ideafunziona?

Design Thinking

User Experience (UX)

LaUserExperienceèl'insiemedituttigliaspetti

comportamentali,affettiviedemozionalilegati

all'esperienzadellepersoneinundeterminatocontesto.

Abbassare il rumore informativo (dare spazio alle informazioni fondamentali, esplicandole in maniera chiara).

Creare percorsi facili da percorrere.

Facilitare i flussi di navigazione.

Creare piacere, non stress nelle persone.

Leesperienzeinretehannounsequelnellenostrevite.

LaUXèovunqueecicirconda.

Service Design

Organizzazionedelle

infrastruttureedelleinformazionidiunservizio.

E'strettamentelegatoall'IApervasiva.

Service Design

L’informazioneèunservizio.

Service Design

Ilservicedesignnondisegnal'esperienzama“per”

l'esperienza.

Antonella Spartà

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà

IDEA RILASCIO

Analisi As-is Business analysis

Formalizzazione progetto

Marketing Sviluppo IT

Definizione obiettivi

Definizione requisiti

Progettazione operativa

Sviluppo grafico

La storia di un’idea

I nostri clienti e la loro idea

Vorreicheilportalefosseunluogo,perlepersonestranierecomeme,permantenerelamemoria…

Cipiacerebbechelepersone

pubblicasserolelororicette…

…leradiciattraversoil

Vorreichepersonedidiverse

nazionalitàsiraccontasseroconilcibo.

…personeitalianeestraniere

Unsitochecipermettadifarconoscereevendereonlineinostriprodotti.

Saper ascoltare le storie

Brainstorming

Definizione degli obiettivi

2 AvvicinareallaculturaNordafricanaviaggiatoriepersonecuriosecheabbianovogliadisaporidiversi.

3 Vendereiprodottinondeteriorabilidelnegozio,faree‐commerce.

Creareunacommunity,coinvolgerelepersoneimmigratenellaproduzionedicontenuti,didattica,curiosità,consigli,maanchenelconservarelamemoria.

Gustissimo.it Giallozafferano.it

Scopriamo chi sono gli altri

swotanalysis

Le analisi

qualitativa

• Homepage

Le analisi

• L’architetturainformativa

• Lafacilitàd’uso

• L’esperienzautente

• Lanavigazione

• Icontenutiinhomepage

• Illinguaggio

• L’organizzazionedelcontenuto

• Ititoli

• Iservizi

• L’aggiornamento

• Ilprocessodiaggiornamento

descrizionenarrativa

Le analisi

• Ilmenùdellericettedi1°e2°livellodeveesseremoltochiaro.

• L’ingredientedeveesserel’elementoprincipale,relazionatoallaculturaeallastoria.

• …

Il test d’usabilità nella fase d’analisi

• Spazilogico‐semanticibendefiniti.

• Inhomepagevogliamopochielementi,machiari.

• …

Il test d’usabilità nella fase d’analisi

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012

Dal progetto al design

Marzia Bianchi

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi

“Voglioricordareletradizionidellanostrafamiglia.Dapiccolanonnamiraccontavadelnostropaese.”

Allora chi sono le nostre personae

“Viaggiomolto.Vorreitrovareappassionatipercondividereesperienzediviaggioedisapori.”

“HounnegozioaRomadiprodottialimentaritipicidelNordAfrica.Vorreiespanderelamiaattività.”

Sono di orgine egiziana Ho la mia famiglia in Italia

Vorrei espandere la mia attività commerciale

Sono da solo in negozio

“Vogliopreparareunacenamarocchinapermiamoglie.

Amolacucinaetnica.Sonostufodeisolitipiatti

italiani.”

Scegliamo l’url

couscousmediterraneo.it

Tutte le nostre idee prendono una forma

e una direzione.

La mappa concettuale

Èilmomentodidefinireloschemadinavigazione

delnostrosito,conilcardsorting.

Il card sorting

Ilteamallavoro.

Il card sorting

Allafinecisiamoriusciti.

Il card sorting

FACILE

RICETTECOMMUNI

TYSHOP SCUOLA

FESTIVITA’

INGREDIENTE

METODOFORN

PASQUA

NATALE

SCEGLI

PROPONITI

INSERISCI

RICETTA

CHEFADOMICILIO

RACCONTAILDESERT

INTRO–CHI

SIAMO/DOVESIAMOPRODO

UTENSILI

CHISIAMO

NEWSLETTER

EVENTI

PARTECIPACONVIDEO

SEGNALAVIDEO

CONTATTI

ULTIMERICETTE>>

EVENTI>>NOVELLILORENSD’ARABIA

>> * PRODOTTO

QUESTOSITO>> *

FOOTERCREDITS

POLICY

ADVNOTELEGALI

Strutturadelsito.Navigazioneprimaria,

secondariaepaginecorrelate.

Mappa del sito

Diamounvalorealnostrocontenuto.

L’inventario dei contenuti

ricetta

Titolo

Procedimento

Attributi

Titolo della ricetta

Descrizione Sommario Foto Video

Portata

Ingredienti

Eventi

Metainformazioni

Antipasti Piatti di carne Piatti di pesce Piatti vegetariani Zuppe e minestre Insalate Salse Dolci Bevande

Tipologia Quantità Ingredienti per persona

Festività

Difficoltà Tempo di preparazione Origine

Esempio: la ricetta

Piùusabile

Fluido Google

Duraneltempo

Un contenuto di valore

I primi prototipi su carta

Carlo Simoncelli

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli

Cosa abbiamo imparato

Abbiamoimparatocos’èl’usabilità.

“L'usabilitàèl'efficacia,l'efficienzae

lasoddisfazioneconcuideterminate

personepossonoraggiungere

determinatiobiettiviinun

determinatocontestod'uso”.

Conmetodiesperti.

Conlepersone.

Come valutare l’usabilità

Analisi Euristica

1Coerenza dell’interfaccia

2Feedback adeguato

3Facilità di uscita da situazioni critiche

4Prevenzione degli errori

5Messaggi di errore semplici

6Linguaggio chiaro e comprensibile

8Presenza di scorciatoie

9Essenzialità ed estetica dell’interfaccia

10Presenza di help e manuali

7Facilità nel riconoscere le azioni da svolgere

Cognitive walktrought

Unmetodoesplorativocheconsistenel

valutareipassaggirichiestiperil

completamentodiuncompitoconlo

scopodiindividuaregliostacoli

riscontrabilinell’interfaccia.

Valutare l’usabilità con le persone

Itestd’usabilità

cercanounaricetta

Abbiamo osservato come le persone …

inserisconounaricetta

Inserisconounaricetta

Testsulprototipocartaceo

Testsulprototipointerattivo

inserisconounaricetta:

Conduzione

Neutralità

Comportamentodegliosservatori

Prototipo

cartaceo Prototipo

Quandovannoeffettuati

Qualivantaggioffrono Ruoliprincipali

Strumentidautilizzare

In sintesi…

Federica Scaraglio

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio

> DESIGN

EMOZIONALEComportamentale

VisceraleRiflessivo

“Chi ha detto che il piacere non è funzionale?”

Charles Eames

E ora, come “vestiamo” il nostro sito?

Emozioni positive: I luoghi > Senso di appartenenza

L’arredamento

Emozioni positive I mercati > Senso di Comunità

La cucina

ICOLORIMarchioTemaSito

Definiamo:

Titoli Marchio Sito Sito

I colori “evocativi”

• Evocativoedespressivo>Sitodicucina

• Affettivo>Nordafrica

• Piacevole>Originale,equilibrato

• Sintetico>Semplicità

• Adattabile>Head,favicon,iconeperapp

• Riproducibile>Supporticartacei,gadget…

BILITA’

EMOZIONI

Femminile Maschile

Giovane Maturo

Lusso Economico

Giocoso Serio

(informale)

Forte Tranquillo

SempliceComplesso

Delicato Manifesto

Linee guida per il marchio e non solo…

Sceltadiunlettering“evocativo”

Partiamo dal logo

Sceltadiunlettering“evocativo”

Partiamo dal logo

EVOCARE LE RADICI EVOCARE LA FUNZIONE

Studio elaborazione del pittogramma

> ELABO

ESEMPLIFICA

L’elaborazione

FAVICON ICONE PER APP PROFILO FACEBOOK

Saperi e sapori dal Nordafrica

Il marchio, tagline, icone

FAVICON ICONE PER APP PROFILO FACEBOOK

Saperi e sapori dal Nordafrica

Il marchio, tagline, icone

Vestiamo i wireframe: elementi

Vestiamo i wireframe: la creatività

Screen font

Valore emotivo Capacità evocativa

Valore funzionale Leggibilità

colore: #67494D

colore: #000000

A B C D E F G H I J K

L M N O P Q R S T U V

W X Y Z ( / ) ^ _ ‘ a

b c d e f g h i j k l

m n o p q r s t u v w

x y z ( ! ? & > <

Titoli Sommari Testi

colore: #000000 colore: #67494D

Combinazione delle font

colore: #000000 colore: #67494D

Combinazione delle font

Body: Arial 15px

Titolo: Alice 36px

Sommario: Alice 18px

> GUIDA

DI STILE Accuratezza

Tono Usabilità

Ottimizzazione

Stile redazionale

L’immagine vale più di

1.000 parole

Qualità dell’immagine

Il taglio

Non inserire MAI

una foto 128549.jpg

I particolari

Ricordiamoci delle emozioni: le foto

Ricordati che dal titolo parte

ottimizzazione per motori di ricerca

Crea titoli accurati

Il “profumo” dell’informazione

Titoli predittivi

Crea titoli reali, non

troppo creativi o vaghi

Essere chiari: i titoli e sommari

Suddividere per

capoversi

Ricordati delle persone: usare

presente indicativo e dare del “tu”

Linguaggio semplice e chiaro

Un pò di storia

Ricordiamoci i bold

ottimizza il contenuto

Firmare le ricette

Troppo, poco, il giusto: il contenuto

Ricordati delle persone: usare

presente indicativo e dare del “tu” Gli ingredienti Dosi Difficoltà

Tempo di preparazione Origini La portata

SemplificalafruizionealvisitatoreSemplificalaricerca,dentroefuoridelsito

Le Meta informazioni

Giuseppe Curiale

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale

La produzione

Concept Design

TecnologieRisorse

SitemapContentInventory

WireframeFlowchartsFunctions

Delivery

Progetto

Database

Wordpress

TwentyEleven

CousCousMediterraneoWhiteLabel

SimpleTheme

Themes

Contentinventory

Sviluppo Wordpress

ContentInventorychange…

Sviluppo Wordpress

Database

Wordpress

TwentyEleven

SimpleTheme

Themes

Wireframe

Sviluppo Wordpress

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giseppe Curiale

TwentyEleven

SimpleTheme

Themes

Header.php

Style.css

Sviluppo Wordpress

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giseppe Curiale

• Set‐upinfrastructure:Domain,email,ftp

• Testallforms• Checkofsearchfunctionality• Checkloginpages• ValidationHTML,CSS,Javascript• Testanti‐spamfeatures

• Checkexternallinks• CheckRSSlinks• Privacy

Sviluppo Wordpress

Configuration&Test

ConceptDesigncontents

functionalitypersonas

SetupCMS

database

Development

Design Design1AI,FlussiWireframe

DevelopmentDesign1

DevelopmentDesign2

Design2Flussi

Wireframe

Design3Flussi,Wireframe

Usability1

Sviluppo Wordpress

Giulio Angeloro

I siti più visitati

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro

E adesso che esistiamo?

Fonte Audiweb

Gli utenti che nel mese effettuano ricerche, pari al 93% della popolazione.

55min Il tempo trascorso da un utente medio nel mese.

• MetaTag• Sitemap• Usarenomidescrittiviperlefotooimmagini• Linkpredittivi

Indicizziamo il nostro sito

Titolo Url DescrizioneParolechiave

http://www.couscousmediterraneo.ithttp://www.couscousmediterraneo.it/ricette/http://www.couscousmediterraneo.it/ricette/algeria/http://www.couscousmediterraneo.it/ricette/algeria/tajine‐di‐gamberi‐e‐zafferano

tajine-di-gamberi-e-zafferano.jpg

Immagine_001.jpg

Fareunsitoottimizzatoperimotoridiricercasignifica

fareunsitoaltrettantovalidopergliutentichene

usufruiranno.

Come e quando è visitato il nostro sito?

• WebMasterTools• Analytics• Insightsforsearch

Inserzionisti

L’ecosistema pubblicitario Google

SiticheospitanoannuncidiGoogleAdWordspercontenuti

textadvertisingsolutionsSistemapubblicitariobasatosullequerydiricercaeicontenutideisiti

EditoriSitichevendonoiproprispazipubblicitari

displayadvertisingsolutionsSistemaperottimizzarelevenditeegliacquistidispazipubblicitari

Adwords

Grazie a…

Master in Architettura dell'Informazione IED 2012

Technology

Invenzione, innovazione e architettura dell'informazione

Seminario di Architettura dell'Informazione AI.pdf · Seminario di Architettura dell'Informazione Monica Scarpa monicascarpa@virgilio.it Corsi di Telematica Avanzata e Telematica

Architettura dell'informazione pervasiva

Architettura dell'Informazione - 8. Realizzare Siti ...pages.di.unipi.it/.../AA1617-MasterTurismoICT/slides/8-Siti-Dinamici.… · I Siti su nanza aggiornati in tempo reale, home

Architettura dell'informazione e semplessità

Architettura dell'informazione

IED Madrid IED Moda Labmalusarbide.com/resources/IED_f_modalab-2.pdf · |ied moda lab | ied madrid ied madrid | ied moda lab | formaciÓn de calidad y vanguardia relaciÓn directa

Formati grafici Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Architettura dell'Informazione e Grafica

Architettura dell'Informazione - 13. Il Web 2pages.di.unipi.it/.../AA1617-MasterTurismoICT/slides/9-Web-2.0.pdf · Il Web 2.0 Il termineWeb 2.0viene utilizzato per indicare lo stato

Codici QR Presentazione 1.6 Architettura dell'informazione | Prof. Luca A. Ludovico

Formati grafici Presentazione 1.8 Architettura dell'informazione | Prof. Luca A. Ludovico

Banche dati citazionali Strumenti per la valutazione della ... · Ingegneria civile ed architettura Ingegneria industriale e dell'informazione RICERCATORI (2009) UNIV. ENTI RICE-RCA

Invenzione, innovazione e architettura dell'informazione (Italiano)

Codifica dell'informazione testuale Presentazione 1.4 Architettura dell'informazione | Prof. Luca A. Ludovico

La Sfida Della Trovabilità - Architettura dell'informazione

Dati e metadati Presentazione 1.3 Architettura dell'informazione | Prof. Luca A. Ludovico

Formati audio Presentazione 1.9 Architettura dell'informazione | Prof. Luca A. Ludovico

Teoria Dell'Informazione

Architettura dell'informazione pervasiva - Ecosistemi