Guida Galattica in 10 passi. 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à

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

2. Massimo Azzolini
RedTurtle - “Psicologo”
massimo@redturtle.it
massimoazzolini
@massimoazzolini

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

4. Pubblica Amministrazione? Ma esattamente quale?1.
http://upload.wikimedia.org/wikipedia/commons/b/bd/Palazzo_Montecitorio_Rom_2009.jpg

5. Pubblica
amministrazione

6. Piccolo
comune
Comune
medio
Provincia
Comune
capoluogo
Regione
Ospedali
AUSL
Agenzie
(es. Arpa)
Camere di
commercio
Partecipate
Ministeri
Pubblica
amministrazione
centrale
what else?
Pubblica
amministrazione

7. Hai presente la
frammentazione dei
device Android?
!
È uguale
http://media.idownloadblog.com/wp-content/uploads/2013/07/Android-fragmentation-devices-2013-.png

8. 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

9. 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

10. 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”

11. 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”

12. 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”

13. 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
…
Anziani
Il
“Cittadino”
Turisti
Genitori
Giovani
Imprenditori
Operatori

14. Fuori il valore!3.
http://cdn.ninjamarketing.it/wp-content/uploads/2015/03/Pubblicita_online_come_funziona_e_quanto_spendere.jpg

15. • I privati vendono prodotti
Fuori il valore!3.

16. • I privati vendono prodotti
• La PA “vende”
servizi e informazioni
Fuori il valore!3.

17. • I privati vendono prodotti
• La PA “vende”
servizi e informazioni
• Call to action vs esplorazione
Fuori il valore!3.

18. Il processo (ehm.. la tattica) di DESIGN4.
http://careerrocketeercom.c.presscdn.com/wp-content/uploads/Job-Search-Game-Plan

19. LE REDAZIONIIL CMS
WIREFRAME VISUAL INTERACT TEMPLATE
GO!

20. WIREFRAME

21. VISUAL

22. INTERACT

23. TEMPLATE

24. Le tempistiche del progetto5.
https://static.pexels.com/photos/4090/time-train-station-clock-deadline.jpg

25. • Molti interlocutori
• Decisioni procrastinate
• Tempi dilatati
!
• Anticipa le esigenze
• Preparati al cambiamento
Le tempistiche del progetto5.

26. 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

27. • Product owner (aka PM)
• Information Architect
• Designer - Visual/UX
• Developer
• DevOps
• (Copywriter)
Il TEAM di progetto6.

28. • Product owner (aka PM)
• Information Architect
• Designer - Visual/UX
• Developer
• DevOps
• (Copywriter)
Il TEAM di progetto6.
• IL CLIENTE!!

29. Sono comunicatori, di mestiere7.

30. • Non vendono nulla:
diffondono informazioni
Comunicatori7.

31. • Non vendono nulla:
diffondono informazioni
• Parlano alle persone
Comunicatori7.

32. • Non vendono nulla:
diffondono informazioni
• Parlano alle persone
• URP (aka Ufficio Relazioni
con il Pubblico)
Comunicatori7.

33. • Non vendono nulla:
diffondono informazioni
• Parlano alle persone
• URP (aka Ufficio Relazioni
con il Pubblico)
• “Burocratese”
Comunicatori7.

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

35. • Locale vs distribuita
http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg
La redazione8.

36. • Locale vs distribuita
• A volte sono coinvolti i
Social Media Manager
http://www.abbadianews.it/wp-content/uploads/2014/11/Niemancopertina.jpg
La redazione8.

37. • 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.

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

39. • 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.

40. Accessibilità10.
http://1.bp.blogspot.com/_v6_DvVeWXKA/Swxx0vSIGwI/AAAAAAAAAG4/jNOk9E4yP6I/s1600/media_139.jpg
Hai presente la legge
!
Stanca?

41. 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

42. Accessibilità10.
• Alcuni tool e referenze
• WCAG20 quick reference
http://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

43. Tutto è molto più EASY se:11.
http://i.imgur.com/EuAsA4S.jpg
agisci come partner e consulenteA.
offri aiuto (riceverai riconoscenza)B.

44. 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à

45. Arrivederci
e grazie per tutto il pesce
Continua su
GT Master
Club
http://i.kinja-img.com/gawker-media/image/upload/eh6kecwcqns409lbm2tf.jpg
massimo@redturtle.it
@massimoazzolini