italia / design-docs

DEPRECATED - DO NOT EDIT

DEPRECATED - DEPRECATO

Questo repository è stato sostituito da https://github.com/italia/design-linee-guida-docs.

Linee guida di design per i servizi digitali della PA

Questo repository contiene il testo delle Linee guida di design per i servizi digitali della PA in formato reStructredText.

Le linee guida per il design dei servizi digitali della Pubblica Amministrazione sono uno strumento di lavoro per la Pubblica Amministrazione e servono ad orientare la progettazione di ambienti digitali fornendo indicazioni relative al service design, alla user research, al content design e alla user interface. Per discutere sul design dei servizi pubblici è disponibile il nostro forum. Per collaborare alle linee guida è possibile usare gli strumenti descritti di seguito.

Sviluppo collaborativo

Le linee guida sono un documento pubblico, e chiunque può partecipare al processo di revisione e aggiornamento attraverso gli strumenti messi a disposizione attraverso GitHub, in particolare le issues (per le discussioni) e le pull request (per le proposte di modifica).

I contenuti delle linee guida sono scritti in file .rst e possono essere aggiornati via GitHub. Qui è disponibile una guida alla sintassi RST

Altre risorse per l'editing in formato .rst sono:

• Editor per il testo
• Editor per le tabelle
• Estensione Chrome per Google spreadheet
• Altro

Sviluppo programmato

Le linee guida di design seguono le roadmap di evoluzione pubblicate in ciascuna delle sezioni di Designers Italia

Version control e release della documentazione

Le linee guida beneficiano del version control system di GitHub, per cui esiste una traccia pubblica di tutte le modifiche effettuate e dei relativi autori.

Le linee guida di design adottano un sistema di release basato sui tag di GitHub. Ogni release è etichettata secondo un sistema basato su anno e versione. Le versioni sono espresse attraverso un numero progressivo. Il sistema delle release è in vigore dal 2017, quindi la prima release delle linee guida è 2017.1 (prima release del 2017).

I nuovi contenuti e le modifiche a contenuti esistenti dopo essere approvati vengono pubblicati nella versione latest delle linee guida, disponibile per una discussione pubblica e revisione da parte della community ma priva di valore ufficiale.

Solo successivamente, in occasione di una nuova release delle linee guida, il team di Designers Italia decide di consolidarle e farle confluire, dopo eventuali modifiche, nella versione ufficiale stable delle linee guida.

Stile della documentazione

Le linee guida sono scritte seguendo la style guide di redazione dei testi pubblici. In particolare:

• linguaggio semplice e comprensibile ad un pubblico ampio
• brevità e uso di elenchi
• ricorso ad esempi, meglio se supportati da immagini e link

Nella guida usiamo delle etichette per evidenziare alcuni passaggi, specificando se l'applicazione della indicazione è obbligatoria o facoltativa, come segue

• si deve (devi)
• si può (puoi)
• si dovrebbe (dovresti)
• best practice

Consultazione della documentazione

La documentazione è disponibile su Docs Italia, la piattaforma di gestione della documentazione pubblica creata da Team per la Trasformazione Digitale.

Le funzioni di hosting e di ricerca sono basate su ReadTheDocs e la documentazione viene pubblicata attraverso il tool Sphinx e il linguaggio RST.

Tutti i documenti di Docs Italia possono essere fruiti anche in formato .epub e .pdf

Kit di sviluppo e di design

Il progetto di design dei servizi pubblici digitali prevede che oltre al rilascio di linee guida ci sia il rilascio di kit di sviluppo e di design per i siti pubblici (ad es. icon kit, kit di sviluppo, ecc.).

I kit - e la documentazione dei kit - possono essere citati all'interno delle linee guida, ma non sono contenuti all'interno di questo repo. I kit sono espressione delle linee guida, ma il versionamento delle linee guida e quello dei kit sono processi indipendenti.

Altre informazioni sui kit sono disponibili sul sito Designers Italia

design-docs's Issues

Menu di navigazione generale e menu contestuale

Buongiorno,
non riesco a trovare nelle linee guida quale sia la soluzione ottimale per la gestione dei menu contestuali su display al di sotto dei 992 px.

• Al di sopra di questa soglia mi è tutto chiaro: barra orizzontale per i primi livelli e menu contestuale apero sulla spalla destra a presentare i livelli sottostanti (a meno che che non vengano vgià isualizzati come elenco di opzioni nel corpo della pagina; nel qual caso si lascia tutto il corpo della pagina alla griglia di opzioni con le relative icone/mmagini empatizzanti).
• Al di sotto dei 992, invece, mi è chiaro che la navigazione dei primi livelli viene demandato al burger che appare contestualmente alla sparizione della barra orizzontale. Quello che non mi risulta chiaro è il destino dei menu contestuali, essenziali per dare all'utente la percezione dell'articolazione dei sottolivelli offerti a partire dalla pagina in cui si è.

Su siti che fanno riferimento allo standard DesignItalia vedo diverse soluzioni, più o meno efficaci:

• meno efficaci: riportare il menu nel corpo della pagina, che spesso significa dopo così tanti blocchi di contenuto che l'utente non ha più la percezione dell'articolazione dei contenuti in cui quella sezione si sviluppa.
• più efficaci: doppio menu, con il menu burger tradizionale e un secondo menu "Navigazione" posto su una linea come sul sito del Ministero dello Sviluppo Economico : oltre al menu burger con i primi livelli, un altro menu con il livelli/pagine sottostanti e quelli (e solo quelli) superiori alla pagina su cui si è (es. aprire il menu contestuale sulla pagina sulla produzione di gas naturale su display sotto i 992px)

Chiedo se chi ha avuto modo di raccogliere i feedback delle varie realtà che si sono impegnate a implementare lo standard design Italia sui propri siti, abbia già tratto conclusioni su quale possa essere la soluzione più adeguata per tutte le PA.

Chiedo però se non vi sembra che due menu possano disorientare gli utenti meno scaltri. Dal punto di vista che sto pradicando io (siti di piccole amministrazioni locali con un numero limitato di livelli) mi piacerebbe molto che le due funzionalità dei due menu fossero riunite nel burger. Se può aiutare a chiarire la mia esigenza, vi mando un print screen del menu che abbiamo provato a svillupare con un piccolo intervento sul codice.

Mi scuso per la lunghezza e ringrazio anticipatamente chi potrà darmi un riscontro in modo che io possa investire tempo nella soluzione più solida e condivisa da chi sta lavorando sullo standard.

Formattazione Consigliata | Citazioni

Formattazioni Consigliate
https://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html#formattazioni-consigliate2

il testo della citazione dovrebbe essere
citazione: Titillium italic - corpo 18px, interlinea 1.55

Titillium Web font license

Hi, Titillium Web font is under OFL license so you have to report the font license and the copyright notice when you use/redistributed it.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1. Neither the Font Software nor any of its individual components,
   in Original or Modified Versions, may be sold by itself.

2. Original or Modified Versions of the Font Software may be bundled,
   redistributed and/or sold with any software, provided that each copy
   contains the above copyright notice and this license. These can be
   included either as stand-alone text files, human-readable headers or
   in the appropriate machine-readable metadata fields within text or
   binary files as long as those fields can be easily viewed by the user.

3. No Modified Version of the Font Software may use the Reserved Font
   Name(s) unless explicit written permission is granted by the corresponding
   Copyright Holder. This restriction only applies to the primary font name as
   presented to the users.

4. The name(s) of the Copyright Holder(s) or the Author(s) of the Font
   Software shall not be used to promote, endorse or advertise any
   Modified Version, except to acknowledge the contribution(s) of the
   Copyright Holder(s) and the Author(s) or with their explicit written
   permission.

5. The Font Software, modified or unmodified, in part or in whole,
   must be distributed entirely under this license, and must not be
   distributed under any other license. The requirement for fonts to
   remain under this license does not apply to any document created
   using the Font Software.

Titolo delle linee guida

Credo ci sia l’urgenza di togliere dal titolo della documentazione la parola web e di sostituirla con digitali.
Il titolo diventerebbe quindi Linee guida di design per i servizi digitali della PA.
A tendere il focus si sposterà sempre di più verso lo sviluppo di applicazioni e servizi digitali in genere, che col web (inteso come prodotti browser-baserd) potrebbero avere poco o nulla a che fare.
E' necessario verificare in quali altri punti della documentazione sia da effettuare la stessa sostituzione.

styleguide e workflow documentazione

Proposta per testo testo introduttivo alle linee guida (e anche per aggiornamento readme del repo
https://github.com/italia/design-doc/blob/master/README.md
comprensivo di styleguide e workflow pubblicazione documentazione, dopo introduzione versionamento

Le linee guida di design
Le linee guida per il design dei servizi digitali della Pubblica Amministrazione sono uno strumento di lavoro per la Pubblica Amministrazione e servono ad orientare la progettazione di ambienti digitali fornendo indicazioni relative al service design, alla user research, al content design e alla user interface. Per discutere sul design dei servizi pubblici è disponibile il nostro forum. Per collaborare alle linee guida è possibile usare gli strumenti descritti di seguito.

Sviluppo collaborativo
Le linee guida sono un documento pubblico, e chiunque può partecipare al processo di revisione e aggiornamento attraverso gli strumenti messi a disposizione attraverso GitHub, in particolare le issues (per le discussioni) e le pull request (per le proposte di modifica).
I contenuti delle linee guida sono scritti in file .rst e possono essere aggiornati via GitHub. Qui è disponibile una guida alla sintassi RST

Altre risorse per l'editing in formato .rst
Editor per il testo
Editor per le tabelle
Estensione Chrome per Google spreadheet
Altro

Version control e release della documentazione
Le linee guida beneficiano del version control system di GitHub, per cui esiste una traccia pubblica di tutte le modifiche effettuate e dei relativi autori.
Le linee guida di design adottano un sistema di release basato sui tag di GitHub. Ogni release è etichettata secondo un sistema basato su anno e versione. Le versioni sono espresse attraverso un numero progressivo. Il sistema delle release è in vigore dal 2017, quindi la prima release delle linee guida è 2017.1 (prima release del 2017).
I nuovi contenuti e le modifiche a contenuti esistenti dopo essere approvati vengono pubblicati nella versione latest delle linee guida, disponibile per una discussione pubblica e revisione da parte della community ma priva di valore ufficiale.
Solo successivamente, in occasione di una nuova release delle linee guida, il team di Designers Italia decide di consolidarle e farle confluire, dopo eventuali modifiche, nella versione ufficiale stable delle linee guida.

Stile della documentazione
Le linee guida sono scritte seguendo la style guide di redazione dei testi pubblici. In particolare:
-linguaggio semplice e comprensibile ad un pubblico ampio
-brevità e uso di elenchi
-ricorso ad esempi, meglio se supportati da immagini e link

Nella guida usiamo delle etichette per evidenziare alcuni passaggi, specificando se l'applicazione della indicazione è obbligatoria o facoltativa, come segue

• si deve (devi)
• si può (puoi)
• si dovrebbe (dovresti)
• best practice

Consultazione della documentazione
La documentazione è disponibile su Docs Italia, la piattaforma di gestione della documentazione pubblica creata da Team per la Trasformazione Digitale. Le funzioni di hosting e di ricerca sono basate su Readhtedocs e la documentazione viene pubblicata attraverso il tool Sphinx e il linguaggio Rst.
Tutti i documenti di Docs Italia possono essere fruiti anche in formato .epub e .pdf

Kit di sviluppo e di design
Il progetto di design dei servizi pubblici digitali prevede che oltre al rilascio di linee guida ci sia il rilascio di kit di sviluppo e di design per i siti pubblici (ad es. icon kit, kit di sviluppo, ecc.). I kit - e la documentazione dei kit - possono essere citati all'interno delle linee guida, ma non sono contenuti all'interno di questo repo. I kit sono espressione delle linee guida, ma il versionamento delle linee guida e quello dei kit sono processi indipendenti.

Logo secondario / Logo UE

Riporto la issue aperta da @jdeyla sul repo design-web-toolkit e la relativa discussione (iniziata anche sul forum)

Il Logo UE è obbligatorio che sia visibile nella prima schermata, senza scroll e su qualsiasi dispositivo.
http://eur-lex.europa.eu/legal-content/IT/TXT/HTML/?uri=CELEX:32014R0821&from=IT

Dove lo si mette nei siti compliant questo kit?
Si segue l'esempio di http://www.lavoro.gov.it/Pagine/default.aspx
Non sarebbe il posto de cambio lingua, e non starebbe meglio in alto a sinistra, dove c'è il lnk all' "entità" superiore?
Vale la pena metterlo nel kit?

@pdavide:

Ciao @jdeyla,
il regolamento UE al quale ti riferisci mi sembra che si riferisca ai siti relativi a progetti finanziati con fondi comunitari. O sbaglio?
Siti come http://www.istruzione.it/pon/ o http://www.pongovernance1420.gov.it/it/ dovrebbero essere quelli soggetti all'obbligo di presenza del logo UE above-the-fold.
Al di là della questione specifica del logo UE, potrebbe essere utile aprire un confronto sul tema di un "secondary logo", ma direi di spostare la discussione sul repo delle linee guida.

@jdeyla:

ciao @pdavide apro le solite mie issue del venerdì pomeriggio. Parlo di siti sui fondi europei e siti di progetti finanziati dall'Europa. Nel nostro caso dobbiamo migrare ad AGID il sito del POR-FESR. e come noi tutte le Regioni avranno questo problema.
Sposta dove pensi sia meglio, io lo vedo bene in entrambi

CC @francescozaia (che ha già risposto sul forum) e @roby986 che sarà certamente interessata al tema.

Broken links in http://design-italia.readthedocs.io/it/stable/doc/user-interface/componenti.html

Broken links in http://design-italia.readthedocs.io/it/stable/doc/user-interface/componenti.html

Lana caprina: 3 icone social

Ciao,
vorrei un piccolo chiarimento.
Leggo
SI DEVE

Le icone per l’accesso alle pagine social sono posizionate a destra della testata, sopra il campo di ricerca. Quando il numero delle icone social supera le 3 è possibile aggiungere un’icona generica che dà accesso alle restanti.

Non ho capito bene cosa significhi. Se ne ho più di 3 di social:
1 - posso mostrarli tutti o scegliere di mostrarne solo 3 e poi mettere i puntini. (la leggo così)
2 - devo mostrarne 3 al massimo, mettendo i puntini

è solo un chiarimento

grazie

Segnalazioni dal forum su piccole incongruenze

https://forum.italia.it/t/piccole-discrepanze-nelle-linee-guida/1142

File not found

Segnalo errore: http://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html#esempio-di-tabella-con-css-di-default

Migrazione verso il nuovo tema Docs Italia

Per questa documentazione è necessaria la migrazione verso il nuovo tema Docs Italia.

Eliminare voce "Design management"

Eliminare questa sezione che è stata sostituita da
https://design-italia.readthedocs.io/it/stable/doc/service-design/design-management.html

Non serve più, perché i contenuti sono nella sezione (ora più ampia)https://design-italia.readthedocs.io/it/stable/doc/service-design/gestione-dei-progetti.html

Deprecated option in conf.py

sphinx-build reports html_use_smartypants option is deprecated.

Nuova issue di prova

titolo

corpo del testo della issue

@gunzip

#23

Mistyping hover => over

Mistyping
hover = over

Colore del testo
https://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html#colore-del-testo

esempio. Colore link hover #003366
hover => over

Architettura dell'informazione, prima figura

Nella prima figura della sezione "Architettura dell'informazione", l'intersezione dei tre ambiti viene denominata con "IA", probabilmente con riferimento all'inglese information architecture.
Dal momento che questo termine non viene mai usato, sarebbe bene correggere la figura mettendo AI al posto di IA.

Uso di https

In relazione al service design, dovremmo prevedere una sezione "sicurezza" che indichi le misure minime da adottare.
Un esempio banale è l'uso di https invece del vecchio http che sarà progressivamente etichettato come non sicuro dai browser.

Codici Colore | Ottanio duplicato

Palette Estesa
http://design-italia.readthedocs.io/it/stable/doc/user-interface/stile.html?highlight=colori#palette-estesa-delle-pubbliche-amministrazioni-centrali1

Due colori "ottanio scuro" e "ottanio medio" risultano con lo stesso codice colore.

Ottanio scuro Bottone Focus #004a4d
Ottanio medio Bottone #004a4d