Ciao a tutti, sto sviluppando un portale per la mia scuola che riguarda la gestione di tutta la procedura relativa all’Alternanza Scuola/Lavoro; dalla convenzione con le aziende, fino alle valutazioni finali.
Ora come ora l’interfaccia grafica la stiamo sviluppando con il framework Foundation, ma in futuro mi piacerebbe molto renderla conforme alle specifiche di Design consigliate sul portale Designers.
Mi farebbe comodo avere qualcosa in più di come il sito dovrebbe apparire, mi riferisco ad eventuali librerie/framework usati (Docker, Composer, NodeJS…), in modo da arrivare dritti al punto, senza incontrare ostacoli di tipo tecnico che mi impedirebbero di arrivare al risultato finale desiderato.
Un suggerimento (anche se mi rendo conto che sia una cosa lunga da fare) è quello di creare un Framework HTML/CSS/JS, il Foundation italiano, in modo che la creazione di siti web nel rispetto delle nuove linee guida sia più semplice ed immediato.
Grazie a tutti in anticipo per il fantastico lavoro che state facendo!
Ciao @pif,
ti anticipo che anche io sono nuovo di questo mondo ma i designer hanno realizzato una styleguide che pare descrivere molto bene la relazione tra i vari elementi e offre anche alcuni suggerimenti molto utili su come questi devono comportarsi assieme.
Detto questo non so neanche io quanto questo kit sia in linea con le direttive presenti nella guida, però mi sembra un ottimo punto di partenza dal quale poter partire.
Spero di averti indicato una strada utile da percorrere.
Linee guida e Web Toolkit sono disallineati da un po’ ormai, e purtroppo non ci sono indicazioni sull’evoluzione in una direzione o nell’altra…
Quanto all’uso di Bootstrap o Foundation, la scelta del Web Toolkit mi pare chiara (non se se opportuna) e punta in una terza direzione, quella di SUIT CSS con le sua classi di utilità https://github.com/suitcss/suit/blob/master/doc/api.md.
Buongiorno, scusate il disturbo.
Ho seguito le istruzioni nella pagina “Come iniziare” https://italia.github.io/ita-web-toolkit/docs/come-iniziare.html
Ho prelevato da github la cartella build, contenente una build funzionante con tutti i componenti js e css già compilati.
Nel file index.html ho sostituito il percorso alla riga:
con la mia path ma l’unica cosa che vedo quando apro l’ index.html da browser è: “{{ yield|safe }}”
Ciao a tutti. provo a rispondere brevemente per far un po’ di chiarezza.
La reference implementation attuale delle linee guida di web design dei siti della PA è in effetti quanto trovate qui https://italia.github.io/ita-web-toolkit/
Fa le funzioni di un framework, quindi sostituisce la necessità di usare bootstrap o foundation.
Ci piacerebbe che in futuro esistesse (nuovamente) anche una implementazione basata su bootstrap 4 delle linee guida, ma al momento non è a piano. Vi consigliamo quindi ove possibile di usare il toolkit e di non entrare nell’eterno dibattito bootstrap/foundation!
Se state implementando le linee guida in bootstrap o foundation o altri framework, sarebbe bello poteste condividere il codice e ci raccontaste come sta andando. Ma per ora non possiamo garantire il mantenimento di altre soluzioni oltre al tookit…
In effetti alcune componenti del toolkit sono disallineate rispetto alle linee guida. Lo sappiamo bene. Stiamo lavorando alla roadmap di evoluzione del toolkit, ma contiamo di allineare, consolidare e pubblicare la beta entro fine luglio al massimo. E’ una nostra priorità.
Per i casi specifici vi prego di aprire issue su github: nel caso qualunque PR è benaccetta!
@matteo.desanti potremmo intanto anticipare qualcosa in merito ad alcuni disallineamenti:
visibilità del burger su desktop: secondo evidenze raccolte dai test di usabilità e considerando i feedback, risulta più efficace l’utilizzo del menu orizzontale (da sempre presente anche nel toolkit e nei siti pilota) o un megamenu (una novità presente al momento solo nel toolkit) in sua sostituzione. i testi delle LG saranno rivisti di conseguenza.
nuovo aspetto del selettore dei linguaggi (diverso rispetto all’originale proposta tutt’ora contenuta negli screenshot e nei testi delle LG): stesse considerazioni; è più efficace la versione con il dropdown visibile nel toolkit. saranno rivisti di conseguenza gli screenshot e i testi delle LG.
colore della fascia superiore (dalle LG: « Il colore della barra superiore è sempre #303030. »): dai feedback raccolti quelle su colori specifici vengono percepite come indicazioni troppo restrittive / limitanti, pertanto il colore attualmente indicato come ‘prescritto’ verrà indicato come ‘consigliato’
colori del footer (dalle LG: « Indipendentemente dalla tipologia di sito valgono le seguenti indicazioni per i colori del footer: #30373d / #65dde0 / #c6cace »): stesso discorso, saranno colori consigliati e non prescrittivi.
Rimangono inoltre aperte alcune questioni (ovvero, tutt’ora in fase di discussione su cui ci piacerebbe rievere feedback), ne cito un paio:
aspetto della barra di navigazione ‘collassata’ dopo lo scroll (cambia un po’ l’interazione se si usa il megamenu)
posizione del bottone di accesso / login / entra con spid: è ipotizzabile proporlo accanto al selettore delle lingue (in alto a dx). il rischio è che l’area diventi un po’ affollata
In merito al primo punto una precisazione: il “problema” del menu orizzontale e del megamenu è l’essere visibili solo su desktop. In genere chi fino ad ora ha utilizzato il burger anche su desktop ha preso la corretta precauzione di proporre il menu anche in-page sulla home (es. il sito funzionepubblica.gov.it). Tale soluzione ha il pregio di essere immediatamente visibile sia su desktop che su mobile ed è pertanto consigliata anche per chi usa un menu orizzontale, in modo da mostrare anche su mobile i link più importanti (senza nasconderli dietro il burger).
Domanda per tutti: quali altri disallineamenti avete notato ?
provo a dire la mia: lascerei l’opzione di avere la sua visibilità (con scritta Menu) anche su desktop, così da “abituare” gli utenti a tale elemento che poi ritroveranno anche su tablet e mobile. Utile anche, perchè visibile nella versione “collassata” dopo lo scroll.
Il menù orizzontale lo trovo indispensabile in quanto immediatamente visibile.
Il colore del background del footer nella versione toolkit è stato modificato in #00264D. Lascerei la possibilità di scelta magari riducendo la possibilità di utilizzo a pochi colori (il colore originale #30373D lo preferisco).
lascerei l’opzione di avere la sua visibilità (con scritta Menu) anche su desktop
Presumo che, assieme a @bidda, molti altri trovino scomodo e perfino controproducente (indipendentemente da problemi di JS (*))
il menu “burger” che auto-scompaia.
Per quanto riguarda il menu che non funziona con javascript disabilitato, trattandosi di un dettaglio implementativo, posso segnalarlo ai fornitori che hanno lavorato ai diversi siti (e aggiungere che stiamo lavorando a un framework riutilizzabile in cui il problema non persiste).
Se JS non è disponibile, non funziona proprio il menu, resta soltanto l’icona e non è possibile alcuna navigazione né con mouse né con tastiera. Non so se è davvero il caso di stare a discutere della quantià di requisiti violati se la navigazione principale del sito è inibita.
Si vengono così a creare siti istituzionali nazionali dove (esclusa la questione del JS che li rende non navigabili in diversi casi) , la navigazione è inutilizzabile perfino da desktop :
Quanto trovate utile il nuovo menu burger rispetto a navigazione classica?
0 = perfetta navigazione classica
10 = perfetta navigazione burger
Nella valutazione tenete in considerazione: che generalmente sono siti corposi, con molti contenuti (quindi svariati livelli di menu che si aprono a mo’ di pop-up), e consultati da popolazione eterogenea (che 3 lineette già non lo associano a un menù)
0
1
2
3
4
5
6
7
8
9
10
0votanti
PS: Ho dovuto spezzare i link, altrimenti il sistema mi restituiva :
Spiacenti, i nuovi utenti possono inserire al massimo 2 collegamenti in un messaggio.
non sa in che sezione si trova (dove sta navigando)
non sa come passare in un’altra sezione relativa (solo a utenti avanzati viene in mente di cancellare parte dell’URL, che fortunatamente è friendly in quello specifico caso).
Altro specifico di quel sito:
“Per saperne di più” è un’altra cosa. Non fa comunque capire la navigazione.
E manca pure la mappa del sito sul footer (anche se per fortuna c’è http://www.politicheantidroga.gov.it/sitemapxml)
Il “Per saperne di più” implementa una navigazione di secondo livello interna ad una sezione, come dici tu è un altra cosa, la navigazione principale è nel megamenù.
Per mappa sul footer intendi un link nel footer che porti ad una pagina con un elenco delle pagine/sezioni? Con siti complessi (non che questo lo sia…) non serve a molto. Altro discorso è la sitemap.xml, che serve ai motori di ricerca.
Premessa: io non volevo focalizzarmi su quel sito specifico (visto il titolo del topic), ma rispondo alle osservazioni specifiche di seguito.
“Risultano” per chi?
“Poco pratiche” per il designer o per chi consulta?
Domande che valgono anche per la mappa sul footer [non la sitemap.xml che ho linkato io nel post precedente].
Per me sarebbero pratiche invece, e penso anche per altri; anche per questo ho aperto il sondaggio un mese fa ma ad ora ha risposto solo una persona.
Il megamenù che mi hai linkato non tratta come gestire le sottosezioni, né quindi come evidenziare il menù di conseguenza.
Se hai provato a cliccare sul link che portava a /competenze , capirai che obiettivamente non puoi capire dove ti trovi (al contrario della stramaggioranza dei siti web con più di 1 livello di navigazione).
E il megamenu’ non è di aiuto nemmeno dopo aver aperto - a mano - le diverse sezioni.
Ho visto che sul sito Designers, è stata pubblicata una pagina relativa ai siti web delle scuole.
Cosa cambierà rispetto ai siti web delle PA?
Sono ansioso di vedere le prime bozze, perché la mia scuola (informatica) ha un sito a dir poco vergognoso, che non riporto per salvarvi da un infarto sicuro ahahah
Spero che si faccia una particolare attenzione alle cose di cui hanno di solito bisogno le scuole, come una fruibile sezione circolari, orari scolastici ecc.
Perdonate se commento un thread datato, è possibile trovare i test effettuati e relativi risultati?
Sinceramente (e da vari feedback ricevuti) il megamenu è un mega passo indietro, esiste un sito che implementa il megamenu su cui è possibile effettuare i test e vedere come dovrebbe “reagire” nelle varie situazioni? Per esempio senza JS?
Grazie
ciao @ale, recentemente è stato pubblicato un post sui test di uabilità che tuttavia è stato effettuato su un sito che, oltre al burger, aveva già anche il menu orizzontale. Il primo sito su cui furono effettuati i test (e che presentava esclusivamente il burger come accesso al menu) fu quello di www.funzionepubblica.gov.it; i risultati di questo test produssero come evidenza un “disorientamento” degli utenti causato dall’accesso tramite icona burger.
