Interfacce utente per i variable font

Gli strumenti con cui facciamo design hanno un effetto peculiare sul nostro modo di lavorare: ci pongono vincoli e ci offrono possibilità mentre esploriamo, esaminiamo, creiamo. I variable font ci danno un nuovo, ampio spazio tipografico completamente aperto con cui lavorare. Invece di stabilire nel nulla il valore di singoli elementi di UI, dovremmo usare un approccio ibrido e calcolato nei confronti delle interfacce dei variable font. Come strutturare i nostri tool di design perché si adattino ai nuovi vantaggi che ci forniscono i variable font?

Nonostante fossero in anticipo sui tempi, i precursori dei variable font, Multiple Master e GX, non sono stati ampiamente adottati per svariati motivi, tra cui il principale: la mancanza di interfacce utente efficaci che comunicassero la loro utilità creativa ai designer.

Fin dalla loro introduzione, i variable font si sono evoluti rapidamente, ottenendo vari gradi di supporto sperimentale tra i maggiori browser. Insieme a questo c’è l’esaltante capacità dei font di adattarsi in maniera responsive ai vari layout e contesti. Nonostante il responsive design sia diventato più standard, devono ancora essere adottate delle interfacce utente con variable font efficaci.

Numerosi approcci possono rendere i variable font (che possono di fatto ospitare un qualsiasi numero di variazioni) più semplici da capire e usare. Attraverso l’esplorazione del design e osservando degli esempi preesistenti possiamo vedere in che modo ogni elemento della UI abbia diversi benefici e svantaggi. Noi pensiamo che pochi pattern dovrebbero essere applicati ad ogni caso.

Abilitare i variable font#section1

All’interno dei nostri strumenti di design i variable font presentano una sfida unica: permettere agli utenti di selezionare e cambiare diverse proprietà del carattere che vengono presentate dal typeface designer. Questi cambiamenti avvengono lungo un asse di interpolazione, o una linea che riflette i valori di variazione di un font:

La preview di Dunbar, un variable font con due assi, di CJ Dunn in Fontview. AxisPraxis e Typeshift (il mio tool di design) sono degli ottimi posti per dare un’occhiata ai variable font!

Un variable font può avere un qualsiasi numero di assi, ma questi possono generalmente essere ridotti ad alcuni assi usati più comunemente e che è più probabile usare nel Responsive Design. Nella specifica, questi assi di default vengono chiamati registered axes . Ciascuno ha un diverso insieme di casi d’uso:

• Font Weight – (wght): per adattare il font weight alla dimensione del container, al weight di altri elementi, ai cambiamenti di gerarchia e alla risoluzione dello schermo
• Font Width – (wdth): per adattare la larghezza del typeface alla larghezza di un container
• Font Italicization – (ital): per cambiare il corsivo di un carattere
• Font Slant – (slnt): per cambiare quanto deve essere obliquo il carattere
• Font Optical size – (opsz): per adattarlo alla dimensione del container, al font size, agli aggiustamenti della gerarchia e al colore della tipografia

Questi assi sfruttano molti adattamenti basati sul layout forniti dai variable font. Alcuni di questi concetti vengono illustrati molto bene nel progetto di responsive lettering di Erik Van Blokland:

Oltre ad alcuni lavori incredibilmente belli finora realizzati da Type and Media:

In questi esempi, la scalatura ottica, il peso e la larghezza dei glifi cambiano contemporaneamente al ridimensionarsi della finestra. Sebbene una gran quantità di assi del variable font sia in correlazione diretta con il layout, il type designer può inoltre creare un qualunque numero di assi arbitrari e non registered, per un qualunque tipo di cambiamento del carattere in aggiunta all’interazione con il layout. Il typeface ornamentale Decovar di David Berlow è un esempio di questo portato all’estremo.

Decovar ha molte impostazioni per sistemare i terminali decorativi del font e lo scheletro del font. Il limite, qui, è l’immaginazione del type designer.

Nuovi spazi#section2

I variable fonts portano con sé un ampio spettro di possibilità e possono aprire interi spazi di design di opzioni creative per i type designer, i graphic designer e i web designer. Sulle prime questi non sono leggibili dagli umani: esistono come rappresentazioni matematiche. Tuttavia, sono stati proposti degli approcci per aiutarci a visualizzare e manipolare i variable font. Esplorando alcuni patter di user interface, possiamo capire meglio come fare luce negli esaltanti spazi all’interno di un variable font. Alla base di ciò, bisogna rendere i variable font coscienti del proprio contesto.

Mappare la UI: contesto#section3

Prima di osservare la UI, vale la pena notare che gli assi dei variable font possono essere collegati direttamente a una vasta gamma di input, che possono essere una qualsiasi combinazione di lettura di un sensore, input da controller e segnali ambientali. Alcuni registered axes, tuttavia, hanno più senso per il responsive design e HTML/CSS/JS. Gli assi width e weight di un font sono direttamente correlati al container in cui può stare una riga di caratteri. I variable font possono adattarsi alla dimensione del loro container, sia riempiendolo completamente sia occupandone una specifica proporzione impostata.

Un lavoro progressivo negli anni ha portato ai font che si adattano al loro container. FitText di Paravel e BigText di Zach Leatherman sono stati i primi esempi di testo che si ridimensiona per stare in un responsive container. Font To Width di Nick Sherman e Chris Lewis scambiava la versione widht e quella weight del font corrente per adattarlo al container. Molto del precedente lavoro di Erik Van Blokland e il progetto responsive lettering hanno cristallizzato l’idea di interpolazione per aggiustare il carattere alla larghezza, altezza e variazioni ottiche all’interno del responsive design. La dimostrazione AxisPraxis di Laurence Penney collega weight e width alla dimensione del container stesso, permettendo alle persone di manipolare la textbox invece del carattere direttamente. Tutte queste strategie puntano alle impostazioni del carattere in relazione al suo container.

Anche le variazioni di scalatura ottica possono essere messe in collegamento con la dimensione del font, permettendo ad importanti caratteristiche di risplendere a dimensioni ridotte del display minimizzandone contemporaneamente i dettagli per assicurare che il font rimanga robusto. Nel 2013, Nick (con David Jonathan Ross, Frank Grießhammer e Florian Hardwig) ha mostrato questa feature in Adobe InDesign.

Scalatura ottica automatica (Automatic Optical Sizing) in InDesign

Questa funzionalità delineata in InDesign è ora disponibile per i variable font, permettendo alle scalture ottiche di adattarsi in tandem con la dimensione del font dell’utente. Attraverso tecniche come queste i variable font possono aderire alle dimensioni del layout/container, alla font size e al contesto dell’utente.

Spesso tuttavia, il font stesso deve guidare il design e il layout (nel caso della maggior parte dei design tool come Sketch e Illustrator). In questo caso, abbiamo bisogno che la UI controlli direttamente il variable font. Le interfacce fanno affidamento sulle affordance per comunicare alle persone come funzionano. I pattern UI e UX portano con sé una varietà di assunzioni che le persone si sono costruite negli anni interagendo con controlli simili, sia fisici sia digitali. Possiamo scomporre alcuni di questi pattern e osservare i loro vantaggi e svantaggi.

Mappare la UI: controlli “single axis”#section4

I variable font single axis sono i più chiari e richiedono solo un controllo. Toggle, slider e knob sono tutti adatti a gestire i singoli assi. Il più elementare di questi (il toggle) può essere usato per limitare le opzioni in favore della chiarezza.

Toggle#section5

I toggle denotano l’“on” o l’“off” oppure una sola selezione:

Una toggle UI per saltare tra due punti su un asse

La semplicità di un toggle può ridurre le scelte a opzioni che interessano alla gente, come spostare la selezione dei serif da on a off (in cui i valori intermedi sono meno importanti). I menu basati sulla selezione single toggle esistono fin dalle prime interfacce di desktop publishing.

Aldus Pagemaker (rilasciato nel luglio del 1985) con l’opzione di menu della selezione dei font (font Bold e Italic)

Knob (manopole)#section6

Tipicamente le manopole comunicano una quantità di qualcosa che viene aggiunto a un tutto.

I knob sono meno comuni nelle interfacce digitali ma li si può trovare nei plugin software per le Digital Audio Workstations. I knob hanno il vantaggio di essere compatti pur avendo una superficie di controllo più lunga per ospitare i valori in una data area quadrata. Un’altra proprietà interessante delle manopole è che possono essere periodiche, permettendo valori che si dispongono sull’intero controllo. Zeitung Flex di Underware ha introdotto i knob come metodo per controllare i variable font.

Dal momento che la superficie di controllo non è chiara, i knob digitali hanno una learning curve più alta. La maggior parte dei controlli a manopola la allevia permettendo alle persone di spazzolare su e giù per rotare la manopola una volta attivata o selezionata. A meno che non siano larghe abbastanza, le manopole possono anche essere difficili da usare con le interazioni touch.

Slider#section7

Tipicamente, gli slider orizzontali comunicano equilibrio e stabilità tra un range di due valori.

Gli slider orizzontali sono un pattern di UI comune nel web e nelle applicazioni native. iOS usa frequentemente questo elemento dell’interfaccia:

Gli slider digitali hanno il vantaggio di funzionare in maniera simile agli slider fisici e sono facili da apprendere. Gli slider mappano bene un range di due valori diversi ai lati opposti di uno spettro: gli utenti scelgono un valore nel mezzo. Per questo gli slider sono intuitivi sia con controllo via touch sia via mouse: le azioni avvengono in un movimento singolo e lineare.

Tipicamente, gli slider verticali comunicano la quantità di un valore specifico, a volte nel contesto di altri valori.

Tipicamente, possiamo trovare gli slider verticali nelle applicazioni audio dove è più importante esaminare e confrontare orizzontalmente i livelli dei controlli vicini. La maggior parte delle digital audio workstation li usa per i livelli del volume.

La Ableton Live DAW. Si noti come ogni riga degli slider del volume possa fornire il contesto alle altre. Gli equalizzatori e altri effetti usano spesso pattern UI simili

In generale, gli slider occupano più spazio ma fornisco un metodo chiaro e preciso per scegliere un valore specifico.

Ogni elemento di UI può essere utilizzato eccessivamente (sia slider sia knob) e applicato scorrettamente. Fondamentalmente, l’applicazione di controlli a singolo asse dovrebbe tener conto del tool di design e del variable font stesso. Una considerazione fondamentale è il modo in cui l’interfaccia si ridimensiona per tener conto di assi aggiuntivi del font. Le interfacce slider hanno un vantaggio in questa categoria essendo in grado di aprirsi naturalmente per supportare un pattern di controllo a due assi.

Mappare la UI: controlli a due assi#section8

È comune che i variable font abbiano due o più assi. In questi casi, funziona meglio un pattern a due assi per evitare un sovraccarico di elementi di UI e per dare al designer una visibilità migliore.

Pad#section9

I pad tipicamente comunicano un campo di opzioni.

I control pad permettono alle persone di aggiustare due assi del variable font allo stesso tempo. Questo pattern è stato usato sia nell’hardware che nel software audio per controllare parametri sull’asse X e Y.

Alcuni tool di hardware e software audio hanno pad con un asse X e Y per cambiare due parametri simultaneamente

I control pad sono meno comuni nelle interfacce digitali ma risultano familiari per via di analoghi pattern di tool di design come il color picker, il che fornisce anche persone con un campo di opzioni.

I control pad X/Y aiutano a rivelare una porzione più grande dello spazio di design di un font. Non hanno la chiarezza degli slider e delle knob, ma forniscono un modo per le persone per scorrere facilmente attraverso combinazioni di variazioni di font.

L’utilità di avere ogni asse mappato a un singolo controllo o una singola direzione diminuiscono rapidamente al crescere del numero di assi. A questo punto, troviamo che l’efficacia si sposta dalla manipolazione alla visualizzazione.

Mappare la UI: controlli multi-asse e visualizzazioni#section10

I font con tre o più assi (i variable font possono avere virtualmente un qualsiasi numero di assi) sono serviti meglio con differenti controlli e approcci di visualizzazione. Ogni asse può essere rappresentato matematicamente come una feature o una dimensione. I font con un singolo asse si mappano a uno slider o knob mentre i font con due assi possono sfruttare le interfacce utente pad. I variable font con tre assi possono avere i loro assi mappati su un cubo.

Demo Reverse Noordzij Cube di DJR

Con tre assi, le cose si spostano dalla UI verso un approccio più di visualizzazione, dal momento che i controlli digitali omnidirezionali efficaci sono rari. Dai tre in su, o N-dimensionali gli spazi di design del font non sono intuitivi quando vengono mappati allo spazio fisico, quindi il modo migliore per pensare ad essi è come quantità di ingredienti in una ricetta. Per esempio, prendete una ricetta di una torta:

• 1 tazza di zucchero bianco
• 1/2 tazza di burro
• 2 uova
• 2 cucchiaini di estratto di vaniglia
• 1 1/2 tazze di farina
• 1 3/4 cucchiaini di lievito
• 1/2 tazza di latte

Ognuno di questi ingredienti rappresenta una diversa feature della torta. Combinati al calore, lavorano insieme per creare la torta finale. Gli assi o le feature del variable font funzionano nello stesso modo:

• 100% Font Width
• 25% Font Weight
• 5% Font Optical Size
• 10% Font Serifs
• 75% Font X-Height

Le persone possono aggiustare la posizione degli assi (o la quantità di ogni ingrediente) di un font variabile, ciascuno dei quali ha un effetto sull’aspetto finale del carattere. Alcuni assi, come font width e stroke contrast possono lavorare insieme in parallelo, mentre altri, come x-height e font width potrebbero essere più indipendenti gli uni dagli altri.

Progettare caratteri con più di 3 variazioni#section11

A un certo livello di complessità, il focus di un tool di design dovrebbe spostarsi per servire gli utenti più tecnici. I type designer hanno una loro categoria di sfide mentre progettano, controllano e testano i loro font con spazi di design intricati. Alcuni variable font potrebbero avere degli assi che non vengono esposti agli utenti. Ci sono altre strategie per visualizzare dei variable font complessi come questi.

Per questo, possiamo osservare la visualizzazione dei multivariate data, un argomento che è già stato ampiamente studiato. C’è un’ampia gamma di strategie esistenti, alcune delle quali può essere applicata ai variable font. Il seguente deck divide queste strategie in varie categorie:

• Tecniche di proiezione geometrica
• Tecniche basate sulle icone
• Tecniche pixel-oriented
• Tecniche gerarchiche
• Tecniche ibride

Appiattendo gli assi, i designer possono vedere molti aspetti di un variable font tutti in una volta. Lo star plot, una tecnica basata sulle icone, permette alla combinazione di più assi in un singolo grafico.

Ogni asse si estende dal centro, con la somma totale di tutti gli attuali setting di un dato variable font a creare la forma del poligono. Altre istanze del font possono anche essere stratificate sulla cima della visualizzazione con l’astrazione di colore.

Istanze (probabilmente master) di un variable font ipotetico mappato su un plot a stella. Notate la differenza nelle posizione dell’asse tra il font wide e quello narrow.

I layer ci permettono di vedere le relazioni tra le istanze dei variable font. Possiamo vedere in che modo certe proprietà variabili potrebbero essere correlate le une alle altre in uno spazio di design e tra i master. Approcci simili, come le coordinate parallele, sono meglio strutturati per mostrare relazioni tra gli assi.

Istanze (probabilmente master) di un variable font ipotetico mappato su coordinate parallele. Notate in che modo la visualizzazione rivela che ci sono solo due valori possibili per l’optical size (variazioni di display e testo distinte). Mostra anche una possibile correlazione a un x-height più basso (dal momento che un display master potrebbe avere dei counters più piccoli rispetto a una variazione di testo più orientata alla leggibilità).

La talk di Kai Chang sul visualizzare dimensioni multiple con coordinate parallele fornisce un’ottima introduzione sull’assegnare le dimensioni dei dati alle proprietà visuali e ai grafici. Altri approcci come Fontmap raggruppano le cose basandosi su feature arbitrarie.

Questi metodi ci aiutano a comprendere grandi quantità di informazioni con molte variabili correlate. In ultima analisi, lavorano limitando il nostro campo visivo e cambiando l’angolo attraverso cui osserviamo un insieme di varianti. Invece di cercare di vedere tutto insieme, possiamo suddividere le cose in fette gestibili. I controlli di interfaccia buoni ci permettono di cambiare rapidamente le nostre prospettive di visione e di organizzare gli assi. Questa UI è tanto importante quanto le visualizzazioni stesse.

Mappare i controlli#section12

L’UI del variable font è più efficace quando si adatta con il carattere. Perciò, più informazioni può fornire un font variabile al programma di design meglio è. Gli assi simili possono essere raggruppati e uniti sotto categorie nella UI (per esempio, raggruppare gli assi che gestiscono i serif vs. font weight). Attualmente, ci sono discussioni sul permettere che certi assi siano flaggati (e idealmente ordinati e raggruppati) per mostrare e nascondere in maniera intelligente funzionalità avanzate attraverso il progressive disclosure all’interno di una app di design.

Come vengono mostrati gli assi e come vengono categorizzati si riduce a una combinazione dell’intento di un type designer e delle preferenze personali dell’utente. Entrambe sono relative ma importanti. I web designer/developer potrebbero volere certi tipi di assi per adattare il font al loro design responsive. I type designer potrebbero voler limitare il numero di assi disponibili per assicurare consistenza o semplificare il discorso delle licenze. In altri casi, i graphic designer potrebbero voler accedere a variable font potenti, creativi con un gran numero di assi (per esempio, abbinando stroke weight e serif alla thickness di altri elementi grafici). A causa di ciò, la UI dei variable font ha bisogno di smart default che traducano responsabilmente l’intenzione del type designer conservando la possibilità di fare modifiche da parte dei designer.

Seguendo questa linea di pensiero, ogni asse non necessita di mappare 1:1 il controllo corrispondente. Multipli assi di variable font possono essere assegnati a un singolo controllo macro. Dal lato del font/type designer, questo potrebbe assumere la forma di meta assi. Dal lato della dimensione dell’interfaccia, questo assumerebbe la forma di macro controlli assegnabili.

I macro controlli sono un pattern comune di UI nelle interfacce dei sintetizzatori software: permettono che parametri multipli vengano mappati ad una qualsiasi combinazione di controlli.

Una feature standard nei sintetizzatori software, i macro permettono alle persone di assegnare un qualunque numero di parametri a un singolo controllo. Notate in che modo la Macro 1 Knob può aggiustare i setting sia degli Oscillator A che B. Girare la macro knob ci dà anche delle informazioni periferiche sui cambiamenti nel tempo.

I controlli mappabili consentono alle persone di rompere ed organizzare uno spazio di design per soddisfare le proprie esigenze. Oltre a dare agli utenti la possibilità di ordinare e di alimentare più controlli, questo metodo può aiutare le persone a scoprire i rapporti tra gli assi. In questo esempio, modificando contemporaneamente il font weight e la dimensione ottica consentono di vedere e selezionare il giusto equilibrio dei due.

I dropdown di Typeshift permetto un rimescolamento dei controlli degli assi per Voto Serif. Notate come spostare gli assi ottici al controllo pad aiuti a mostrare come il font weight e l’optical size siano collegati gli uni agli altri.

Nonostante gli assi stessi siano indipendenti gli uni dagli altri, i risultati visuali che producono sono intrecciati. Font weight e optical size sono entrambe in relazione gli uni agli altri e dovrebbero essere considerati insieme quando si progetta. Questo scambio degli assi è comparabile al riordinare le dimensioni (si veda la sezione del riordino) nelle grafiche con coordinate parallele citate in precedenza. In entrambe i casi, l’interfaccia può fornire un’organizzazione smart e far emergere flessibilmente nuove combinazioni.

Interfacce dinamiche per font dinamici#section13

Le interfacce per i variable font dovrebbero adattarsi assieme ai font stessi. Non c’è un singolo pattern UI statico che funzioni come soluzione migliore per tutti i variable font. Invece di discutere di slider e knob, dovremmo esplorare le interfacce ibride che sfruttano quello che ogni elemento di UI ha da offrire. In maniera simile, la UI dovrebbe essere considerata nel contesto dei nostri tool di design con il riconoscimento che cambierà il nostro modo di fare design, influenzando le nostre scelte. Questo ci offre un’opportunità unica per far avanzare la creatività e l’utilità tipografica.