Modulo e programma Il visual design finalizzato alla comunicazione implica lo sviluppo di programmi: sistemi di organizzazione globale. I programmi si basano sulla ripetizione di grandezze e proporzioni (moduli) – aspetto quantitativo forme, colori … (temi) – aspetto qualitativo che apportano regolarità e strutturano l’esperienza dell’utente.

Modulo e programma I diversi aspetti del programma sono applicati all’intera gamma dell’attività di design: corporate identity libro o brochure a stampa sistema di GUI (on e off line) merchandising …

Modulo e programma Il designer deve definire un programma dotato di flessibilità per dar spazio alle singole parti componenti. Le parti devono essere modellate affinché rientrino in un sistema comprensibile.

I benefici Struttura Il modulo è correlato alla struttura: il modulo trae giustificazione dai requisiti strutturali la struttura è rivelata e rinforzata dalla ripetizione del modulo Es. segnaletica stradale sistema di icone per le diverse discipline sportive dei giochi olimpici Prevedibilità Il design programmato semplifica il compito comunicativo: prepara l’utente a rispondere in modo prevedibile a poche e familiari configurazioni la semplicità e la regolarità facilitano l’apprendimento e la memorizzazione anche con scarsa attenzione

I benefici Efficacia Il design modulare consente una grande economia di produzione: grandi quantità di prodotti in poco tempo e con bassa expertise

La griglia La griglia Divide le pagine in un piccolo numero di unità primitive lungo le 2 dimensioni. Comprende suddivisioni orizzontali e verticali. Consente di posizionare in modo consistente nelle diverse pagine importanti elementi strutturali. Specifica l’ampiezza delle colonne e degli spazi tra queste.

Design basato sulla griglia La griglia aiuta il designer a mantenere un programma coerente nelle diverse pagine, schermate… La griglia aiuta l’utente a trarre beneficio dalla propria esperienza, consentendogli di prevedere dove reperire un’informazione

Design basato sulla griglia La griglia non è una camicia di forza: non inibisce lo sviluppo di nuove soluzioni all’insorgere di un’anomalia. La griglia consente al designer di concentrarsi sul contenuto. La griglia favorisce la propagazione della variazione a tutto il sistema. La griglia è applicabile al design 2d e 3d. La griglia è indispensabile nel design di grandi sistemi d’informazione.

Principi Focus La griglia fornisce un quadro di riferimento per i diversi elementi di un sistema. Questo scheletro ha un focus concentrato su una o poche unità modulari, che rivelino la soggiacente logica spaziale. Es. www.ideo.com

Principi Flessibilità La flessibilità nell’affrontare situazioni inattese è un fattore di successo. Le griglie non devono limitarsi a costruzioni semplicistiche e regolari fino al limite della rigidità, possono essere variate per adattarsi all’unicità di un compito.

Principi Flessibilità Nelle GUI la flessibilità è ancora più indispensabile perché l’utente può scalare la finestra a piacimento. Flessibilità di supporto ad un layout dinamico. Espressione delle misure in percentuale e non in unità assolute. Es. X Window

Principi Applicazione consistente Il programma di progetto, per essere efficace, dev’essere usato consistentemente ovunque. Es. Sistema delle banconote

Principi Applicazione consistente Nella corporate identity è fondamentale l’uso consistente di colori immagini caratteri tipografici … espressione visiva dei valori e della cultura di un’azienda. Gli elementi del programma devono essere applicabili con minime alterazioni a una vastissima gamma di artefatti.

Principi Applicazione consistente Nelle GUI le problematiche sono simili. L’utente desidera sapere in anticipo cosa aspettarsi quando si apre un dialog box. La consistenza di posizionamento ed apparenza lo aiuta a rispondere alle situazioni nuove. Scansione rapida di menu, palette, bottoni...

Errori comuni Posizionamento e dimensionamento arbitrario dei componenti posizionamento casuale e grandezza variabile dei bottoni, proporzionali alla lunghezza delle etichette bottoni grossi corrispondono a comandi più importanti di quelli piccoli? mancano gli allineamenti.

Errori comuni Grandezza e layout delle finestre variabili casuale il design programmato di finestre secondarie e di dialog box è raramente considerato. poiché compaiono sullo schermo isolatamente non sono considerati come parte di una serie. l’utente ne incontra decine se non centinaia al giorno, con grave danno funzionale ed estetico.

Errori comuni

Errori comuni Dimensione e aspetto delle icone non coordinato le icone e i bottoni, sono presentati in array, quindi devono essere dimensionate in modo consistente per evitare i problemi di allineamento. spesso variano anche per layout, carattere tipografico, scala, punto di vista, densità delle immagini.

Errori comuni Inconsistente presentazione dei controlli Questo problema è molto attenuato nello sviluppo di GUI per applicativi, ma molto urgente per il multimedia on e off line. Qui non esistono standard di ampia condivisione: il regno della creatività.

Errori comuni Inconsistente linguaggio visivo Quando il linguaggio visivo non è applicato in modo consistente in tutto l’ambiente applicativo perde in forza comunicativa. Distacchi radicali dagli standard spesso producono effetti dannosi ben al di là del caso specifico.

Tecniche Modulo e programma sono particolarmente importanti nelle GUI. Qui sussiste una molteplicità di formati: finestre primarie e secondarie, dialog box, toolbox, palette ... Tre tecniche servono ad apportare regolarità e prevedibilità: Creare dei layout sulla base di griglie Definire delle unità modulari Rinforzare la struttura attraverso la ripetizione

Tecniche La griglia canonica 1 - definire il modulo-base orizzontale e verticale. Questi parametri (altezza riga, larghezza colonna, numero di colonne) definiscono la griglia canonica. 2 - schizzate velocemente un layout che si avvicina alle dimensioni, posizioni e orientamento degli elementi principali 3 - utilizzate la griglia canonica per adattare la grandezza e la posizione degli elementi sulle righe. Allungare gli elementi troppo corti, estendere sui più moduli quelli troppo lunghi. Stabilire allineamenti consistenti. Disporre simmetricamente e bilanciare i controlli.

Tecniche La griglia canonica 4 - per i layout dinamici, identificare la grandezza minima ammissibile è meglio che ri-calcolare il layout per grandezze (piccole) arbitrarie.

Tecniche La griglia canonica

Tecniche Definire unità modulari 1 - definire l’unità verticale. Nelle GUI ciò significa definire l’altezza standard dei controlli e la loro spaziatura. 2 - l’unità verticale deve consentire che 2 controlli siano posizionati vicini, una spaziatura appropriata tra controlli multi-linea e gruppi di controlli. Se le labels devono essere posizionate sopra invece che di fianco, l’unità verticale deve permetterlo. 3 - definire l’unità orizzontale. Larga abbastanza per contenere la maggior parte delle labels di 1 parola. Almeno 3 volte l’unità verticale.

Tecniche Definire unità modulari 4 - l’unità orizzontale ideale divide in 5-7 parti la larghezza della schermata. Può essere moltiplicata o suddivisa. 5 - evitare l’impiego locale di moduli più piccoli del normale per accogliere una densità particolare di dati.

Tecniche Rinforzare la struttura attraverso la ripetizione L’uomo tende a percepire la regolarità (leggi di unificazione figurale). Il designer può scegliere un elemento la cui ripetizione faciliti la comunicazione e fornisca un senso di confortevole familiarità.

Tecniche Rinforzare la struttura attraverso la ripetizione 1 – anche qui cominciare con uno schizzo sommario della serie (per intero) dei layout da produrre. 2 - cercare elementi funzionali comuni che devono essere percepiti con chiarezza nelle diverse schermate. Arrangiare le schermate singole in modo da assicurare la posizione consistente dei principali elementi Strutturali (header, footer, nav_bar…) 3 - identificare gli elementi molto spaziati che dovrebbero essere visivamente correlati, ma che non possono stare vicini. Ad esempio tramite il colore. Oppure… ?

Tecniche Rinforzare la struttura attraverso la ripetizione 4 - identificare il percorso dell’occhio dell’utente. La ripetizione di elementi strutturali marca il territorio e guida l’utente nella navigazione. 5 - utilizzare la localizzazione standard e uno stile di presentazione consistente per testi, immagini, bottoniere...