Il Web design nella Pubblica Amministrazione in 10 passi

45
Il web design e la PA Guida pratica galattica in 10 passi http://image.tmdb.org/t/p/original/kMf3ewax3ZeiSESaPQxBAReQzDD.jpg #wmf15

Transcript of Il Web design nella Pubblica Amministrazione in 10 passi

Il web design e la PAGuida pratica galattica in 10 passi

http://image.tmdb.org/t/p/original/kMf3ewax3ZeiSESaPQxBAReQzDD.jpg

#wmf15

Massimo AzzoliniRedTurtle - “Psicologo”

[email protected]

massimoazzolini

@massimoazzolini

– Massimo Azzolini

“Ebbene sì, è dal 1997 che fo’ i siti per la PA.”

Pubblica Amministrazione? Ma esattamente quale?1.

http://upload.wikimedia.org/wikipedia/commons/b/bd/Palazzo_Montecitorio_Rom_2009.jpg

Pubblica amministrazione

Piccolo comune

Comune medio

Provincia

Comune capoluogo

Regione

Ospedali

AUSLAgenzie

(es. Arpa)Camere di commercio

Partecipate

Ministeri

Pubblica amministrazione

centrale

what else?

Pubblica amministrazione

Hai presente la

frammentazione dei

device Android?

!

È uguale

http://media.idownloadblog.com/wp-content/uploads/2013/07/Android-fragmentation-devices-2013-.png

Chi è il tuo cliente?2.

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

Il mio referente

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

Il mio referente

Il “Cittadino”

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

Il mio referente

Il dirigente

Il “Cittadino”

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

Il mio referente

Il dirigente

Il politico

Il “Cittadino”

Studenti

http://upload.wikimedia.org/wikipedia/commons/2/27/President_al-Sisi_Listens_as_Secretary_Kerry_Addresses_Audience_of_Several_Thousand_Attending_Egyptian_Development_Conference_in_Sharm_el-Sheikh.jpg

Il mio referente

Il dirigente

Il politico

AnzianiIl

“Cittadino”TuristiGenitori

Giovani

Imprenditori

Operatori

Fuori il valore!3.

http://cdn.ninjamarketing.it/wp-content/uploads/2015/03/Pubblicita_online_come_funziona_e_quanto_spendere.jpg

• I privati vendono prodotti

Fuori il valore!3.

• I privati vendono prodotti

• La PA “vende”servizi e informazioni

Fuori il valore!3.

• I privati vendono prodotti

• La PA “vende”servizi e informazioni

• Call to action vs esplorazione

Fuori il valore!3.

Il processo (ehm.. la tattica) di DESIGN4.

http://careerrocketeercom.c.presscdn.com/wp-content/uploads/Job-Search-Game-Plan.jpg

LE REDAZIONIIL CMS

WIREFRAME VISUAL INTERACT TEMPLATE

GO!

WIREFRAME

VISUAL

INTERACT

TEMPLATE

Le tempistiche del progetto5.

https://static.pexels.com/photos/4090/time-train-station-clock-deadline.jpg

• Molti interlocutori

• Decisioni procrastinate

• Tempi dilatati

!

• Anticipa le esigenze

• Preparati al cambiamento

Le tempistiche del progetto5.

Il TEAM di progetto6.

http://cdn3.bigcommerce.com/s-j3xdnji/product_images/uploaded_images/33940-fan-made-the-avengers-comics-en-8mm-1920x1080.jpg?t=1430000152

• Product owner (aka PM)

• Information Architect

• Designer - Visual/UX

• Developer

• DevOps

• (Copywriter)

Il TEAM di progetto6.

• Product owner (aka PM)

• Information Architect

• Designer - Visual/UX

• Developer

• DevOps

• (Copywriter)

Il TEAM di progetto6.

• IL CLIENTE!!

Sono comunicatori, di mestiere7.

• Non vendono nulla: diffondono informazioni

Comunicatori7.

• Non vendono nulla: diffondono informazioni

• Parlano alle persone

Comunicatori7.

• Non vendono nulla: diffondono informazioni

• Parlano alle persone

• URP (aka Ufficio Relazioni con il Pubblico)

Comunicatori7.

• Non vendono nulla: diffondono informazioni

• Parlano alle persone

• URP (aka Ufficio Relazioni con il Pubblico)

• “Burocratese”

Comunicatori7.

La redazione8.

http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg

• Locale vs distribuita

http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg

La redazione8.

• Locale vs distribuita

• A volte sono coinvolti i Social Media Manager

http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg

La redazione8.

• Locale vs distribuita

• A volte sono coinvolti i Social Media Manager

• Training vs supervisione

http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg

La redazione8.

I contenuti: il TESORO informativo9.https://10222a2louise.files.wordpress.com/2013/09/gollum1.jpg

• Il CMS rulez

• Write once, read many

• Gli stessi contenuti su mobile o altre piattaforme

• Opendata

https://10222a2louise.files.wordpress.com/2013/09/gollum1.jpg

I contenuti9.

Accessibilità10.

http://1.bp.blogspot.com/_v6_DvVeWXKA/Swxx0vSIGwI/AAAAAAAAAG4/jNOk9E4yP6I/s1600/media_139.jpg

Hai presente la legge !Stanca?

4 Principi 12 Requisiti

PERCEPIBILE

Alternative testuali

Audio, video

Adattabile

Distinguibile

UTILIZZABILE

Tastiera

Tempo

Crisi epilettiche

Navigabile

COMPRENSIBILE

Leggibile

Prevedibile

Assistenza nell’inserimento

ROBUSTO Compatibile

WCAG 2 Valide in Italia dal 16-9-201310.

http://2.bp.blogspot.com/-vHtv2BNIbpQ/Uk7to6DeD4I/AAAAAAABLPg/NtlgN8cHgjc/s1600/HTML5.png

Accessibilità10.• Alcuni tool e referenze

• WCAG20 quick referencehttp://www.w3.org/WAI/WCAG20/quickref

• WAI-ARIA http://www.w3.org/WAI/intro/aria

• Validatore automatico VaMoLà http://www.validatore.it/vamola_validator/checker/index.php

• Screen reader!

• Voice over

• NVDA (nvda.it)

• Jaws 15

• Gli evergreen!

• Firebug

• Web Developer Toolbar

• Color contrast analizer

http://2.bp.blogspot.com/-vHtv2BNIbpQ/Uk7to6DeD4I/AAAAAAABLPg/NtlgN8cHgjc/s1600/HTML5.png

Tutto è molto più EASY se:11.

http://i.imgur.com/EuAsA4S.jpg

agisci come partner e consulenteA.

offri aiuto (riceverai riconoscenza)B.

1. Quale PA?

2. Chi è il tuo cliente

3. Il valore

4. Il processo di design

5. I tempi

6. Il team di progetto

7. Sono comunicatori

8. La redazione

9. I contenuti: il tesoro informativo

10. Accessibilità

Arrivederci e grazie per tutto il pesce

Continua su GT Master

Club

http://i.kinja-img.com/gawker-media/image/upload/eh6kecwcqns409lbm2tf.jpg

[email protected] @massimoazzolini