Migliori sistemi di griglia negli strumenti di progettazione dell'interfaccia utente.

I progettisti devono essere in grado di esplorare visivamente le conseguenze delle griglie, non solo nel codice.

Nella prima parte di questo articolo, "I sistemi a griglia sono ancora rilevanti nella progettazione di prodotti digitali?", Ho dato un'occhiata alla storia dei sistemi a griglia e ai loro vantaggi pratici. In breve: le griglie sono ancora utili per la progettazione dell'interfaccia, ma lo schermo è molto più complesso della pagina stampata, poiché sia ​​il supporto di output che il contenuto sono altamente variabili.

Quindi cosa c'è che non va nelle griglie negli strumenti di progettazione dell'interfaccia utente?

Gli sviluppatori software hanno strumenti per aiutare a gestire la complessità del layout dello schermo: sistemi di vincolo come AutoLayout di iOS e ConstraintLayout di Android, Flexbox e persino framework specifici per la griglia come la prossima griglia CSS. Ma le decisioni di layout dovrebbero essere prese dai progettisti, non delegate agli sviluppatori. Sono fondamentali per la forma e la funzione di un'interfaccia. I progettisti devono essere in grado di esplorare visivamente le conseguenze delle decisioni sul layout della griglia, non solo nel codice.

Il 75% dei progettisti di interfacce utilizza principalmente Photoshop, Illustrator o Sketch. Ognuno di questi strumenti è stato creato attorno alla metafora della pagina, non allo schermo. Non sorprende che i metodi per lavorare con le griglie in questi strumenti si basino anche sulla tradizione della stampa. Per i progettisti di prodotti digitali, questo porta ad alcuni punti critici nell'uso quotidiano.

di risposte

Per creare una griglia, in genere si impostano parametri come larghezza totale, numero e larghezza di colonne, grondaie e margini:

Controlli della griglia di Sketch e Photoshop

Questo crea un ponteggio a griglia che viene disegnato come un insieme di linee guida sulla parte superiore della tavola da disegno. Gli elementi possono quindi essere agganciati manualmente a queste linee guida:

Funziona benissimo per la stampa. Il designer sa che la loro pubblicazione utilizzerà, diciamo, le dimensioni del foglio A4. Ma cosa succede in digitale, quando è necessario simulare una dimensione del dispositivo diversa? La modifica delle dimensioni della tavola da disegno significa che la griglia è troppo grande o troppo piccola:

La soluzione più comune a questo problema è la creazione di più tavole da disegno, ciascuna corrispondente a una categoria di dispositivi unica, come smartphone, tablet e desktop. Le singole griglie possono quindi essere create separatamente per ciascun dispositivo / tavola da disegno:

Simulazione reattiva: la creazione di griglie per dispositivi di dimensioni diverse può essere d'aiuto, ma i dettagli continuano a passare.

Questa è una simulazione piuttosto scadente dei supporti di output, poiché rappresenta solo tre potenziali risoluzioni del dispositivo. (Nell'esempio sopra, sono l'iPhone 7, l'iPad e un Macbook Pro da 13 ". Le decisioni sulla griglia sono ancora valide su un Google Pixel o un iMac 5K? Che ne dici di orientamenti orizzontali o viste divise?

Lavorare con poche configurazioni di griglia fisse ti consente di perdere facilmente i problemi mentre lavori. O lo sviluppatore li troverà durante l'implementazione, il che richiede molto fastidioso avanti e indietro, oppure i layout rotti finiranno nel tuo prodotto finale.

Propagare cambiamenti

Nell'influente Grid Systems in Graphic Design, Josef Müller-Brockmann chiede di specificare le griglie all'inizio di un progetto, prima che si verifichi qualsiasi layout di pagina. In effetti, Müller-Brockmann suggerisce di conoscere tutte le variabili di un progetto prima di specificare la griglia:

Prima di poter iniziare i lavori […] è necessario chiarire le domande relative al formato, al testo e alle illustrazioni, al carattere tipografico, al metodo di stampa e alla qualità della carta.

Queste variabili, ovviamente, possono avere un impatto sul sistema a griglia. Ad esempio: la distanza di lettura influenza le decisioni sulla dimensione dei caratteri e le dimensioni dei caratteri influiscono sulla larghezza delle colonne e sulle altezze delle righe. Nella stampa, queste variabili sono conoscibili e in genere non cambiano. Un libro non diventa improvvisamente un giornale.

Quindi non sorprende che gli strumenti di progettazione visiva legacy non siano mai stati progettati per gestire questo tipo di modifiche. Sottraendo alcune unità di larghezza dalle grondaie o aggiungendo un paio di colonne in più, significa che devi riallineare manualmente tutti gli elementi alle nuove linee della griglia:

Per i progettisti dell'interfaccia utente, le modifiche alla griglia sono spesso necessarie. Non è possibile tenere conto di ogni output e variabile di contenuto prima di iniziare la progettazione visiva.

Inoltre, mentre i progetti di stampa sono completi quando vanno in stampa, le interfacce software non vengono mai "completate". Vengono costantemente ripetute e migliorate.

Come mostrato sopra, tuttavia, una semplice modifica alla griglia significa riallineare manualmente ogni elemento in un disegno. Moltiplicato per centinaia di schermi, una modifica della griglia può significare ore (o giorni) di miserabile spinta dei pixel.

Sperimentazione

Durante la costruzione di una nuova griglia, Müller-Brockmann avrebbe realizzato piccoli schizzi a mano di potenziali configurazioni. La difficoltà tecnica del processo era evidente anche a lui:

“Nello schizzo di una griglia, è necessario assicurarsi che lo schizzo corrisponda il più fedelmente possibile alle proporzioni del formato finale stampato. [...] Solo in questo modo è possibile acquisire gradualmente la capacità di produrre, anche in schizzi molto piccoli, modelli tipografici che sono realistici, cioè che possono essere trasferiti al formato finale senza difficoltà. "
 - Josef Müller-Brockmann, Grid Systems in Graphic Design, pag. 94, 49
Alcuni degli schizzi a mano di Joseph Müller-Brockmann di Grid Systems in Graphic Design.

Ovviamente, questo era l'unico modo per Müller-Brockmann di sperimentare a buon mercato con possibili layout di griglia: non aveva accesso al computer nel 1981. Tuttavia, è quasi sconcertante che quasi 40 anni dopo, gli strumenti di progettazione basati su computer siano ancora non facilitare questo tipo di sperimentazione.

Per la maggior parte del tempo, si desidera dividere rapidamente alcuni elementi nello spazio disponibile, in modo uniforme o proporzionale. Questa è una griglia come qualsiasi altra, ma definire uno scaffold di griglia per farlo sembra prematuro nel primo processo di esplorazione dei layout.

È ora di scoppiare la calcolatrice. Ottieni la larghezza dello spazio di contenimento, sottrai il numero di grondaie moltiplicato per la loro larghezza, quindi dividi il resto per il numero di elementi. Disegna un elemento con il risultato, duplicalo per ogni colonna, quindi distribuiscili tutti in modo uniforme:

Questo è abbastanza semplice, ma fare manualmente calcoli come questo non tiene il passo con la velocità del pensiero. Quando inizi a fare domande del tipo "Sarà troppo piccolo se inserisco 8 foto in questa riga anziché 6?", Fare i calcoli ogni volta è noioso e scoraggia la rapida sperimentazione.

Come potrebbero essere i migliori strumenti della griglia?

Tutti questi punti critici portano a una conclusione: i progettisti di UI / UX hanno bisogno di modi migliori per lavorare con le griglie durante la progettazione visiva. Kevin Lynagh e io abbiamo lavorato su alcune soluzioni nel nostro strumento di progettazione dell'interfaccia utente, Subform. Diamo un'occhiata ai principi (ed esempi) che abbiamo escogitato finora. (Tutte queste demo sono state registrate direttamente dalla sottomaschera.)

Le griglie dovrebbero essere sensibili per natura.

Affinché i sistemi di griglia funzionino su molti dispositivi diversi, dovresti essere in grado di specificare valori in percentuali e proporzioni flessibili, non solo pixel esatti.

Questi valori consentono di creare una griglia reattiva semplice molto rapidamente, senza eseguire alcuna aritmetica. Devi semplicemente impostare un numero di colonne e dire a ciascuna colonna di allungarsi. Le colonne quindi dividono uniformemente lo spazio disponibile, in base alla larghezza della tavola da disegno:

Le colonne estensibili possono essere mescolate con colonne fisse, grondaie e margini. Le grondaie nell'esempio sopra sono impostate su 12px, quindi la loro larghezza rimane fissa durante il ridimensionamento della tavola da disegno.

Una colonna estensibile può anche accettare proporzioni. Questo apre interessanti possibilità per le griglie non uniformi, come specificare che una colonna dovrebbe essere sempre tre volte più ampia delle altre:

Lavorare in questo modo semplifica notevolmente la comprensione di come funzionerà una griglia su diverse dimensioni e orientamenti dei dispositivi, oltre a rilevare eventuali casi limite prima che vengano passati al team di sviluppo.

Dimentica le guide e gli snap: gli elementi dovrebbero avere una relazione formale con la griglia.

Negli strumenti esistenti, la griglia è solo una raccolta di linee guida che si sovrappongono alla tavola da disegno. Gli elementi possono essere allineati a scatto a queste guide, ma questo è tutto. Gli elementi non sanno nulla della loro più ampia relazione con la griglia.

Il fatto è che una griglia è la relazione tra elementi. Le linee guida sono un trucco visivo che aiuta a creare queste relazioni manualmente. È molto meglio costruire direttamente queste relazioni.

Ad esempio, dovresti essere in grado di posizionare un elemento usando una regola come "inizia nella colonna 2, quindi estendi 4 colonne". Questo può essere fatto implicitamente tramite manipolazione diretta o esplicitamente usando una scorciatoia come 2 / span 4. Ora quando la griglia cambia, gli elementi si ridimensionano automaticamente e preservano i loro allineamenti:

Ciò apre anche nuove possibilità per la manipolazione diretta della griglia stessa, come il ridimensionamento di grondaie e colonne:

Le griglie dovrebbero consentire una rapida sperimentazione.

Essere in grado di definire le griglie in modo informale mentre si lavora, senza usare una calcolatrice, è anche una caratteristica molto necessaria. Potresti voler aggiungere alcuni elementi alla tavola da disegno che dividano automaticamente lo spazio disponibile, quindi inserire tra loro grondaie di dimensioni uniformi:

Avere lo strumento di progettazione che esegue questi calcoli al volo - invece di fare meticolosamente la matematica a mano - rende la sperimentazione veloce e visiva. Domande come "quante foto dovrebbero essere visualizzate in fila sullo smartphone?" Possono essere facilmente provate in pochi secondi, piuttosto che dopo un sacco di scrupolosi e noiosi pixel push:

Le griglie bidimensionali non devono essere trascurate.

Le griglie delle colonne coprono molti casi d'uso, ma molti layout richiedono colonne e righe, simili alla griglia modulare di Müller-Brockmann. Dovresti essere in grado di descrivere elementi in entrambe queste dimensioni: “Orizzontalmente, questo elemento dovrebbe iniziare nelle colonne 3 e 2. In verticale, dovrebbe iniziare nella riga 1 e terminare nella riga 2. "

Come per le griglie monodimensionali, il ridimensionamento della griglia in entrambe le direzioni consente di ridisporre automaticamente il contenuto. Il sottomodulo può anche calcolare le modifiche alla griglia, come l'aggiunta di grondaie, in tempo reale:

Tutto dovrebbe essere in grado di contenere una griglia.

Gli strumenti esistenti consentono solo di definire una griglia per l'intera tavola da disegno, ma questo è un limite arbitrario. Le griglie sono utili per risolvere molti problemi di progettazione, non solo il layout a livello di schermo.

Qualsiasi elemento rettangolare dovrebbe essere in grado di contenere una griglia. Una tabella, ad esempio, potrebbe aver bisogno di una struttura a griglia separata dallo schermo su cui vive:

La possibilità di utilizzare più griglie e nidificarle apre anche molta espressività creativa per il progettista. (Karl Gerstner ha svolto un lavoro piuttosto interessante con più griglie sovrapposte per Capital Magazine nel 1962.)

Conclusione

Durante la creazione di Subform, Kevin ed io esploriamo costantemente come possiamo creare uno strumento che mantenga l'immediatezza e l'espressività del design visivo, ma che aggiunga il potere dinamico del calcolo.

In Media for Thinking the Impensable, Bret Victor propone che per pensare a sistemi complessi, siano necessarie nuove rappresentazioni - rappresentazioni più potenti del supporto cartaceo. Le rappresentazioni che stiamo sviluppando per il layout basato sulla griglia sono, speriamo, un passo nella giusta direzione.

E forse sono persino qualcosa che Joseph Müller-Brockmann potrebbe riconoscere: strumenti di progettazione per la "qualità chiaramente comprensibile, obiettiva, funzionale ed estetica del pensiero matematico".

Se sei interessato a saperne di più su Subform, il nostro strumento di progettazione dell'interfaccia utente, consulta il sito Web. Assicurati di registrarti per ottenere l'accesso anticipato e ricevere aggiornamenti occasionali come questo articolo. ️