Modulo e programma

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.

Il visual design finalizzato alla comunicazione implicalo sviluppo di programmi: sistemi di organizzazioneglobale.

Modulo e programma

• corporate identity• libro o brochure a stampa• sistema di GUI (on e off line)• merchandising• …

I diversi aspetti del programma sono applicati all’interagamma dell’attività di design:

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 moduloEs. 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 propriaesperienza, consentendogli di prevedere dove reperireun’informazione

Design basato sulla griglia

• La griglia non è una camicia di forza: non inibisce losviluppo di nuove soluzioni all’insorgere di un’anomalia.

• La griglia favorisce la propagazione della variazionea tutto il sistema.

• La griglia consente al designer di concentrarsi sul contenuto.

• La griglia è applicabile al design 2d e 3d.

• La griglia è indispensabile nel design di grandi sistemi d’informazione.

Principi

• FocusLa griglia fornisce un quadro di riferimento per idiversi elementi di un sistema.

Questo scheletro ha un focus concentratosu 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 costruzionisemplicistiche 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ù indispensabileperché 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 consistenteIl programma di progetto, per essere efficace,dev’essere usato consistentemente ovunque.

Es. Sistema delle banconote

Principi

• Applicazione consistenteNella corporate identity è fondamentale l’usoconsistente di • colori • immagini• caratteri tipografici …espressione visiva dei valori e della cultura diun’azienda.

Gli elementi del programma devono essere applicabilicon minime alterazioni a una vastissima gamma diartefatti.

Principi

• Applicazione consistenteNelle GUI le problematiche sono simili.L’utente desidera sapere in anticipo cosa aspettarsi quando si apre un dialog box.

La consistenza di posizionamento ed apparenzalo 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 controlliQuesto problema è molto attenuato nello sviluppodi GUI per applicativi, ma molto urgente per ilmultimedia on e off line. Qui non esistonostandard di ampia condivisione: il regno dellacreatività.

Errori comuni

• Inconsistente linguaggio visivoQuando il linguaggio visivo non è applicato in modoconsistente 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 importantinelle 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, numerodi colonne) definiscono la griglia canonica.

2 - schizzate velocemente un layout che si avvicina alle dimensioni, posizioni e orientamento degli elementiprincipali

3 - utilizzate la griglia canonica per adattare la grandezza e laposizione degli elementi sulle righe. Allungare gli elementi troppo corti, estendere sui più moduli quelli troppo lunghi.Stabilire allineamenti consistenti. Disporre simmetricamentee 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 definirel’altezza standard dei controlli e la loro spaziatura.

2 - l’unità verticale deve consentire che 2 controlli siano posizionati vicini, una spaziatura appropriata tra controllimulti-linea e gruppi di controlli. Se le labels devono essereposizionate sopra invece che di fianco, l’unità verticaledeve permetterlo.

3 - definire l’unità orizzontale. Larga abbastanza per contenerela maggior parte delle labels di 1 parola. Almeno 3 voltel’unità verticale.

Tecniche Definire unità modulari

4 - l’unità orizzontale ideale divide in 5-7 parti la larghezza dellaschermata. Può essere moltiplicata o suddivisa.

5 - evitare l’impiego locale di moduli più piccoli del normale peraccogliere 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 ripetizionefaciliti 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 dovrebberoessere 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 territorioe guida l’utente nella navigazione.

5 - utilizzare la localizzazione standard e uno stile di presentazione consistente per testi, immagini, bottoniere...