Upload
maurizio-sasso
View
218
Download
2
Embed Size (px)
Citation preview
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...