La progettazione grafica: Patterns di layout e presentazione

Transcript

1 Corso Multimedia patterns aa Responsabile: Prof.ssa Franca Garzotto Tutor: Dott.ssa Deborah Agostini La progettazione grafica: Patterns di layout e presentazione

2 Dimensioni di design e Patterns di layout I patterns vengono classificati in base alla dimensione di design a cui vanno incontro: - Contenuto (C) - Navigazione (N) - Strutturazione del contenuto (S) - User Operation (U) - System operation (O) - Presentazione/Layout (P) - Accesso (A)

3 Patterns di layout - GRID LAYOUT - ABOVE THE FOLD - CLEAR FIRST READ - EXPANDING WIDTH SCREEN SIZE - FIXED WIDTH SCREEN SIZE - CONSISTENT SIDEBARS OF RELATED CONTENT - LANDMARK ORIZZONTALE - LANDMARK VERTICALE - LANDMARK MISTO

4 Grid Layout Problema È molto difficile organizzare molti elementi in una pagina web in modo chiaro e pulito, senza creare confusione o far provare una sensazione opprimente al visitatore.

5 Grid Layout Soluzione Creare una griglia di impaginazione* che può essere utilizzata per organizzare tutti gli elementi di una pagina web Provarne di diverse per verificare quale meglio si adatti agli elementi navigazionali e ai contenuti del proprio sito Effettuare dei test di usabilità con contenuti finti per verificare se gli utenti identificano gli elementi all interno della griglia proposta

6 Grid Layout *Griglia di impaginazione è una tecnica che viene utilizzata nel design grafico per organizzare le pagine di giornali, riviste o altri documenti. In una griglia la pagina viene divisa in righe e colonne, e ciascun elemento viene posizionato al loro interno. Gli elementi di design costanti, come titoli e loghi, compaiono sempre nello stesso spazio, conferendo consistenza ad ogni pagina.

7 Grid Layout Identificare quali sono gli elementi che si ripetono sempre nel proprio sito: decidere quali sono gli elementi essenziali come barre di navigazione, aree di ricerca etc. Raggruppare gli elementi relazionati e separare quelli isolati. Osservare come altri siti utilizzano le griglie di impaginazione

8 Grid Layout Abbozzare una prima griglia che combini gli elementi di base del proprio sito, in design che viene utilizzato costantemente. Creare delle semplici pagine web, con contenuti finti per verificare la correttezza e l usabilità della propria griglia, attraverso test reali

9 Grid Layout www: dandad.org

10 Grid Layout Esempi www: trevorvanm eter.com

11 Grid Layout

12 Grid Layout, altri esempi www: dandad.org ansa.it domusweb.it stockart.com/ fashion.net corrieredellasera.it freeonline.org

13 Grid Layout Patterns associati: viene presa in considerazione con i patterns Above the fold (quali elementi vengono visti dall utente senza scroll) e Clear first read (i primi elementi che vengono visti dall utente nella pagina)

14 Above the fold Problema L utente spesso non vede elementi di navigazione e contenuti se deve scrollare la pagina per vederli.

15 Above the fold Soluzione Fare in modo che gli elementi più importanti siano in alto nella pagina web, facilmente visibili e accessibili Osservare come si vede la pagina con differenti schermi e risoluzioni per verificare che gli elementi fondamentali siano sempre visibili

16 Above the fold Above the fold è un termine che deriva dal mondo dei quotidiani, che vengono piegati per la vendita. I quotidiani posizionano gli articoli più importanti in prima pagina, prima della piega. Nel web il termine sta ad indicare tutto ciò che è visibile all interno della pagina, senza che l utente debba scrollare.

17 Above the fold Approfondimento soluzione scegliere la risoluzione minima in cui il proprio sito web dev essere visibile: 800x600 px etc. determinare quali sono gli elementi che devono essere visibili prima dello scroll: considerare il titolo della pagina, il menu di navigazione, i contenuti più importanti etc.

18 Above the fold fare alcune prove per valutare qual è la soluzione più idonea al proprio sito ricordarsi che vi sono diversi stackeholders che possiedono obbiettivi diversi riguardo all ordine di importanza degli elementi (contenuti, funzionalità, banners )

19 Above the fold Esempi www: emsf.rai.it Ogni linea rappresenta una differente piega. Queste linee immaginarie segnano le diverse risoluzioni dello schermo dei diversi utenti.

20 Above the fold

21 Above the fold

22 Above the fold, altri esempi www: outpost.com repubblica.it freeonline.org

23 Above the fold Patterns associati: Clear first read (i primi elementi che vengono visti dall utente nella pagina)

24 Clear first read Problema Com è possibile progettare una pagina web in cui vi sono più elementi visuali che necessitano di attenzione?

25 Clear first read Soluzione Utilizzare la parte della pagina in cui di solito per prima cade l attenzione dell utente per trasmettere i messaggi e gli elementi più significativi Usare colori, font, dimensioni e posizioni per differenziare i diversi livelli di lettura Progettare per i display a bassa risoluzione e testare le impressioni di prima lettura con i propri utenti per verificare se coincidono con i propri intenti.

26 Clear first read First read è una tecnica che permette di fare ordine nelle pagine. Si basa sull idea della prima impressione e sulle leggi della gestalt. (dimensione, posizione, contrasto etc.) First read è l elemento visivo dominante che riunisce disparati elementi di una pagina web, elemento che il designer deve utilizzare per realizzare i propri obbiettivi.

27 Clear first read Step soluzione determinare gli elementi più importanti di ogni pagina: logo dell azienda, titolo della pagina, titoli di news etc. utilizzare mezzi diversi per differenziare la first read : colori, font, dimensione, posizione etc. progettare per monitor a bassa risoluzione, tenendo conto di barre di navigazione e scroll bar testare l effetto della first read progettata con utenti rappresentativi

28 Clear first read Esempi

29 Clear first read

30 Clear first read

31 Clear first read

32 Clear first read, altri esempi Esempi www: zefa.it adobe.it ducati.com repubblica.it moma.org

33 Clear first read Patterns associati: Above the fold, Grid layout, Expanding-whidth screen size

34 Expanding-whidth screen size Problema Molti siti web vengono impacchettati in base alle dimensioni minime di risoluzione, non sfruttando i vantaggi dello spazio a disposizione di quegli utenti che possono ingrandire la finestra del browser.

35 Expanding-whidth screen size Soluzione Progettare le proprie pagine web utilizzando dimensioni espandibili, attraverso le dimensioni relative delle tabelle in html Fissare gli elementi navigazionali di base e permettere l espansione delle aree con contenuti

36 Expanding-whidth screen size utilizzare tabelle relative per creare pagine espandibili utilizzare insieme tabelle a dimensione fissa e a dimensione relativa progettare la dimensione minima in base monitor a bassa risoluzione

37 Expanding-whidth screen size Lo spazio risultante dall espansione dello schermo offre la possibilità di disporre molti contenuti, riducendo lo scroll degli utenti. Figura. Esempi diversi di una stessa pagina con diverse possibilità di espansione. Le aree gialle rappresentano le colonne fisse e la parte centrale quella che contiene i contenuti.

38 Expanding-whidth screen size Esempi

39 Expanding-whidth screen size Patterns associati: Above the fold, Grid layout, fixed-whidth screen size

40 Fixed-whidth screen size Problema La dimensione del browser degli utenti influisce sulla qualità della visione del sito web. Alcuni contenuti divengono poco leggibili se la finestra viene allargata

41 Fixed-whidth screen size Soluzione Utilizzare dimensioni di progettazione dello schermo fisse, rendendo i lunghi tratti di testo più leggibili, perché costretti all interno di colonne di dimensione definita.

42 Fixed-whidth screen size Questa soluzione viene utilizzata in particolare per news, articoli, e altri lunghi contenuti testuali.

43 Fixed-whidth screen size Esempi

44 Fixed-whidth screen size Esempi

45 Fixed-whidth screen size, altri esempi www: savethechildren.it freeonline.org moma.org cnn.org

46 Fixed-whidth screen size Patterns associati: Above the fold, Grid layout, expanding-whidth screen size

47 Landmark verticale Problema Come disporre i links ai landmarks in modo tale che siano sempre ben visibili all utente e distinti sia dagli altri links che dai contenuti del sito.

48 Landmark verticale Soluzione Collocare i links ai landmarks (globali o locali) in una barra verticale, situata prevalentemente nel lato sinistro della schermata (più raramente nel destro) Tale barra dev essere uniforme in tutte le schermate del sito e deve mantenere la stessa posizione in modo tale da essere facilmente riconoscibile dall utente

49 Landmark verticale

50 Landmark verticale

51 Landmark verticale, altri esempi www: milanofinanza.it/immobiliare/mutui.asp moma.org guggenheim.com cnn.com

52 Landmark verticale Patterns associati: Landmark globale, locale, orizzontale

53 Landmark orizzontale Problema Come disporre i links ai landmarks in modo tale che siano sempre ben visibili all utente e distinti sia dagli altri links che dai contenuti del sito.

54 Landmark orizzontale Soluzione Collocare i links ai landmarks (globali o locali) in una barra orizzontale, situata prevalentemente nella parte superiore della schermata Tale barra dev essere uniforme in tutte le schermate del sito e deve mantenere la stessa posizione in modo tale da essere facilmente riconoscibile dall utente

55 Landmark orizzontale Quando vi sono più barre orizzontali in un sito vengono poste sia nella zona superiore che inferiore della pagina. Solitamente rappresentano o due livelli gerarchici semanticamente non correlati tra loro oppure rappresentano lo stesso menu ripetuto.** L utilizzo della barra orizzontale si rivela vantaggioso perché occupa poco spazio Svantaggio: se le voci di menu sono numerose non si rivela la soluzione ideale

56 Landmark orizzontale Esempi

57 Landmark orizzontale

58 Landmark orizzontale, altri esempi www: amazon.com alfaromeo.it

59 Landmark orizzontale/verticale I patterns landmark verticale e orizzontale vengono spesso combinati insieme Le due barre possono rappresentare o due livelli di landmark (globale e locale) o diversi tipi di landmarks dello stesso livello, ma non correlati tra loro La compresenza di due landmarks non disorienta l utente perché i links sono ben differenziati dal punto di vista grafico

60 Landmark orizzontale/verticale

61 Landmark orizzontale/verticale

62 Landmark verticale/orizzontale

63 Landmark orizzontale/verticale Patterns associati: Landmark globale, locale, orizzontale

64 Prova individuale Individuazione uso di patterns nel web PATTERNS PRESENTATI: Navigazione: 1. Guided Tour 2. Indice 3. Landmark Globale 4. Landmark Locale 5. Navigazione MISTA Layout: 6. Grid Layout 7. Above The Fold 8. Clear First Read 9. Expanding Width Screen Size 10. Fixed Width Screen Size 12. Landmark Orizzontale 13. Landmark Verticale 14. Landmark Misto

65 Prova individuale Individuazione uso di patterns nel web Domini applicativi in cui ricercare: Web/e-marketing/web-promotion Università e Ricerca Intrattenimento Design/Moda E-commerce Stampa

66 Prova individuale Per coloro che non svolgono il lavoro di gruppo: - scegliere un dominio applicativo di ricerca (tra quelli suggeriti) - scegliere 3 patterns (tra quelli presentati) - per ogni pattern cercare 3 esempi nello specifico dominio applicativo Cosa presentare: presentazione in power point - Indicare: dominio applicativo di ricerca - Per ogni pattern: 3 esempi (schermata) - per ogni esempio identificato: testo di discussione (perchè può essere considerato un esempio per quel pattern?)