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


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

Test

La storia di un’idea


I nostri clienti e la loro idea

Vorreicheilportalefosseunluogo,perlepersonestranierecomeme,permantenerelamemoria…


Cipiacerebbechelepersone

pubblicasserolelororicette…

…leradiciattraversoil

cibo.

Vorreichepersonedidiverse

nazionalitàsiraccontasseroconilcibo.

…personeitalianeestraniere

Unsitochecipermettadifarconoscereevendereonlineinostriprodotti.

Saper ascoltare le storie


Brainstorming


Definizione degli obiettivi

2 AvvicinareallaculturaNordafricanaviaggiatoriepersonecuriosecheabbianovogliadisaporidiversi.

3 Vendereiprodottinondeteriorabilidelnegozio,faree‐commerce.

1

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

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


HOME

FACILE

RICETTECOMMUNI

TYSHOP SCUOLA

FESTIVITA’

INGREDIENTE

METODOFORN

O

D

C

B

A

…

…

PASQUA

NATALE

INTRO

FORUM

…

…

SCEGLI

PROPONITI

INTRO

INSERISCI

RICETTA

CHEFADOMICILIO

RACCONTAILDESERT

O

INTRO–CHI

SIAMO/DOVESIAMOPRODO

TTI

UTENSILI

CHISIAMO

ISCRIVITI

CERCA

NEWSLETTER

EVENTI

INTRO

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

HTML

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

Testi

Definiamo:


Titoli Marchio Sito Sito

Sito

I colori “evocativi”


• Evocativoedespressivo>Sitodicucina

• Affettivo>Nordafrica

• Piacevole>Originale,equilibrato

• Sintetico>Semplicità

• Adattabile>Head,favicon,iconeperapp

• Riproducibile>Supporticartacei,gadget…

USA

BILITA’

EMOZIONI

TONO

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

RA

ESEMPLIFICA

L’elaborazione


FAVICON ICONE PER APP PROFILO FACEBOOK

Saperi e sapori dal Nordafrica

Il marchio, tagline, icone




Saperi e sapori dal Nordafrica

Il marchio, tagline, icone


Vestiamo i wireframe: elementi


Vestiamo i wireframe: la creatività


Vestiamo i wireframe: la creatività


Screen font

Valore emotivo Capacità evocativa

Valore funzionale Leggibilità


colore: #67494D

Arial

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

24MLN

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


Adwords






Grazie a…

Technology

Master in Architettura dell'Informazione IED 2012