[<a href=“#”>] Strumenti per il web design.

Presentazione sul tema: "[<a href=“#”>] Strumenti per il web design."— Transcript della presentazione:

1 [<a href=“#”>] Strumenti per il web design

2 l'usabilità* *a cosa serve un determinato sito web?
/strumenti per il web design [+] L'usabilità è un concetto che nasce negli anni 60 nell'ambito degli studi sull'ergonomia cognitiva in relazione a qualunque interazione uomo-artefatto. l'usabilità* è il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso. 1993 il modello mentale di chi ha progettato il sito (design model) corrisponde (il più possibile) al modello mentale del funzionamento del software così come se lo costruisce l'utente finale (user model) *a cosa serve un determinato sito web? *chi lo userà e cosa si aspetterà di trovarci?

3 user centered design (UCD)
/strumenti per il web design [+] Alla base della realizzazione del disegno di un’interfaccia dunque, dovrà esistere un processo noto come user centered design (UCD) Modello del progettista (design model): concettualizzazione che il progettista si crea di come l’attività dovrebbe essere svolta. Significato del sito: ciò che il sito è in grado di comunicare all’utente relativamente al proprio modo di funzionare. Modello dell’utente (user model): concettualizzazione che il bambino ha dell’attività che dovrebbe essere supportata dall’interfaccia; nel momento in cui interagisce si aspetta di ritrovare il proprio modello concettuale, nonché le proprie conoscenze e preferenze personali. Attraverso l’interazione va a raffinare il proprio modello sulla base di quello che intuisce circa il funzionamento del sistema.

4 /strumenti per il web design [+]
Come fare a sapere se un design è buono o cattivo? Scansione della pagina Uno dei criteri che spesso vengono chiamati in causa per capire se siamo o meno di fronte ad un buon design è il Tempo che l’utente impiega per consultare la pagina e ricercare l’informazione deiderata. Il buon design deve essere in grado di condurre verso le informazioni desiderate ed essere un ponte tra : l’utente e l’informazione La grafica forte e colorata intorno ai blocchi di contenuto consente all’occhio di orientarsi e individuare le aree con le informazioni rendendo la pagina gradevole, ma senza interferire sulla comprensione.

5 /strumenti per il web design [+]
Navigazione intuitiva La navigazione principale del sito deve essere chiara e visibile. Tale navigazione non può e non deve cambiare da una pagina all’altra, nè nell’aspetto, nè nella posizione. Navigazioni secondarie, campi di ricerca, link, non devono invece essere dominanti. Se li rendiamo facili da trovare, ma separati dal contenuto, permetteremo agli utenti di concentrarsi sulle informazioni.

6 /strumenti per il web design [+]
Homepage La homepage rappresenta il centro nevralgico, il cuore del sito e ne dichiara immediatamente carattere e obiettivi. Per permettere ciò deve rispondere sostanzialmente a tre criteri: *Fornire informazioni sul luogo in cui il bambino è arrivato e le finalità per cui il sito stesso è nato. *Aiutare nella navigazione interna al sito, sottolineando sezioni e percorsi possibili. *Fornire informazioni su servizi e contenuti offerti. Occorre fare molta attenzione nell’organizzazione della home, perché l’eccessiva quantità di informazioni, può rendere più difficile ad un bimbo la comprensione in merito alle possibilità che gli si presentano. In generale è preferibile privilegiare semplicità dei contenuti. Overload cognitivo

7 /strumenti per il web design [+]
Homepage Tutti i siti web sono organizzati attorno ad una homepage che rappresenta il punto d'ingresso logico nel sistema di pagine web. La home è la pagina più visitata e su questa si basa la prima impressione dei vostri utenti. L'alta visibilità della homepage la rende anche il posto migliore per inserire un menù di collegamenti o un sommario del sito. La maggior parte degli utenti visualizzerà il sito su un monitor con dimensioni da 14 a 17 pollici, quindi per una navigazione efficiente, il numero di collegamenti nella parte superiore della home page deve essere massimo.

8 /strumenti per il web design [+]
Homepage Non è possibile sapere il modo in cui gli utenti visualizzeranno le pagine. La gamma di risoluzioni visualizzabili dipende dalla caratteristiche del monitor e della scheda video installata nel computer. Le tre risoluzioni più utilizzate sono: 640x480 pixel | 800x600 pixel | x768 pixel È necessario decidere come realizzare il sito in modo da gestire più risoluzioni. Alcuni progettisti sostengono che si dovrebbero sviluppare le pagine basandosi su un minimo comune denominatore. È anche possibile progettare una pagina web che si adatti alle varie risoluzioni dello schermo. (liquid) Adottare questa tecnica è un'ottima soluzione ma è sicuramente più impegnativo che sviluppare un layout dalle dimensioni "fisse". Si può anche pensare di realizzare diverse versioni delle pagine per ogni risoluzione e far scegliere all'utente quale utilizzare, ma si tratta di una tecnica laboriosa e poco usata.

9 /strumenti per il web design [+]
Contenitore - wrapper Brand, slogan,concept logo navigazione navigazione contenuti Elementi di una pagina web white space footer

10 /strumenti per il web design [+]
Contenitore - wrapper Ogni pagina web possiede un contenitore. La larghezza del contenitore può essere “fissa” (fixed) oppure, adattarsi alla larghezza della finestra (liquid) Logo Il logo è l’immagine, il simbolo che identifica il nostro sito, individua immeditamente, all’occhio di chi gurda l’ente o il soggetto al quale il sito si riferisce.

11 /strumenti per il web design [+]
Navigazione È essenziale che la navigazione si facile da reperire ed usare. Gli utenti solitamente si aspettano di trovare la navigazione in alto a destra, se usiamo dei menu a tendina, diversamente si trovare la navigazione sul lato sinistro (menu orizzontale) Content I contenuti sono l’elemento fondamentale delle pagine. Non dimenticate che gli utenti non sono sul vostro sito per contemplarlo ma per interagire con i suoi contenuti . È importante rendere evidente, il blocco principale della pagina che al suo interno continene le informazioni più importanti.

12 Usabilità/ Footer White space
È il piede della pagina. Solitamente contiene le informazioni di copyright, crediti, partita iva e link vari. Separando I contenuti dal piede gli utenti hanno piena comprensione di essere a fondo pagina e dunque di trovare solo informazioni di servizio. White space Gli spazi bianchi anche definti “negative space” Sono gli spazi che occorre ritagliare all’interno di una pagina per farla respirare

13 Sequenzialità /circolarità
Usabilità/ Sequenzialità /circolarità Questa disposizione dei contenuti, si sviluppa secondo un percorso circolare (in senso orario), e pertanto è considerata più appropriata ai bambini. In base al tipo di contenuti infatti, le modalità di visualizzazione delle pagine e l’orientamento dello sguardo tendono a cambiare. Quando una pagina è composta da ampie porzioni di testo, la scansione avviene da sinistra verso destra e dunque a capo similmente ad un foglio di carta, (fig.a) Al contrario, la scansione delle pagine composte da una maggiore presenza di elementi grafici, animazioni e minori porzioni di testo avviene secondo un movimento circolare ed orario .a .b

14 Usabilità/ Struttura Il sito dovrà avere una struttura ben definita, specie se costituito da molte pagine e differenti livelli, al fine di evitare che i bambini possano avere problemi di ricognizione. Le modalità di organizzazione più diffuse in rete, si possono riassumere in tre : Struttura piramidale: organizzazione gerarchica: il vertice costituito dalla home e a seguire i diversi livelli e le rispettive pagine di contenuto. Struttura reticolare: da ogni pagina collegamenti diversi che diramandosi costituiscono una rete verso tutte le altre. Struttura sequenziale: prevede dei percorsi semi obbligati e sequenziali. (usata per percorsi formativi)

15 /strumenti per il web design [+]
Progettiamo? Bene, spegni il computer e disegna… Prima di lavorare con il pc è necessario progettare sulla carta. 1* Disegnamo il nostro contenitore, le dimensioni vere e proprie non contano per ora è solo uno schizzo. 2* Quindi dividiamo il rettangolo verticalmente in tre parti uguali. Fare la stessa cosa anche orizzontalmente. 3* Dividere i nove riquadri creati sia orizzontalmente che verticalmente.

16 /strumenti per il web design [+]
Progettiamo? Bene, spegni il computer e disegna…

17 /strumenti per il web design [+]
Bilanciamento Il concetto bilanciamento visivo si verifica quando in un’interfaccia gli elementi sono gli stessi sia su un lato che su un altro, lungo un asse orizzontale.

18 /strumenti per il web design [+]
Bilanciamento Esistono anche altre forme di bilanciamento simmetrico meno diffuse nelle pagine web: Simmetria bilaterale: quando il bilaciamento si riferisce a più di un asse Simmetria radiale: quando gli elementi sono disposti in modo equidistante intorno ad un punto centrale (bilanciamento informale) è generalmetne più interessante sul piano visivo. I siti che si rifanno a questo bilanciamento generalmente presntano degli elementi grafici consistenti che assumono un ruolo prepondersante sull’apetto estetico del sito Bilanciamento asimmetrico

19 /strumenti per il web design [+]
Unità Le teorie sul design considerano l’unità come il modo in cui elementi differenti all’interno di un’interfaccia interagiscono con l’utente come se fossero un tutt’uno È fondamentale che tale unità non esista soltanto all’interno di un elemento della pagina, ma in tutta la pagina. Esisono degli “espedienti” per consentire l’unita all’interno di un layout: la vicinanza e la ripetizione Il principio della prossimità (gestalt) afferma che la vicinanza nello spazio di due o più elementi induce l’individuo a considerarli con buona probabilità come una figura unica. Si attiva un processo percettivo che opera un raggruppamento di questi elementi Osservando le figure a lato .a e .b si può notare come alcuni elementi vengono considerati come indipendenti e come invece quelli fra loro vicini come delle unità. Prossimità

20 /strumenti per il web design [+]
Contrasto Per contrasto si intende la giustapposizione di elementi grafici dissimili. Si tratta di uno dei modi più frequenti per dare enfasi ad alcuni elementi del nostro layout. Il concetto è abbastanza semplice: più è grande la differenza fra un elemento grafico e il suo sfondo, più l’oggetto in primo piano tenderà a risaltare. Woot, è un sito di e-commerce che vende un solo articolo al giorno. Con un layout di questo tipo la prima cosa che l’utente nota è l’oggetto promosso quel giorno. Il secondo elemento che il nostro occhio nota è Il bottone “I want one!” di un colore che ricorre sporadicamente all’interno della pagina.

21 /strumenti per il web design [+]
La navigazione Colonna sx La colonna di sinistra come luogo destinato alla navigazione può essere considerato uno standard. Tale spazio diventa il blocco principale della navigazione Oltre ad essere uno standard, rappresenta anche una sicurezza, perchè qualunque sia la risoluzione con cui è costruita la nostra pagina, il posizionamento del menu di navigazione a sinistra, garantisce, sempre, una corretta visualizzazione L'aspetto negativo dei siti che utilizzano la colonna di navigazione a sinistra è che sembrano mancare di creatività: sono ormai stati realizzati in tutti i modi possibili per cui si ha l’impressione di guardare qualcosa di già visto…

22 /strumenti per il web design [+]
La navigazione Colonna dx È decisamente più raro incontrare siti con strumenti di navigazione a destra, è più facile invece, trovare dei siti che posizionano su questo lato menu di secondo livello Resta comunque una scelta del designer anche in relazione all’aspetto estetico e al progetto che sta realizzando. Oggi con lo sviluppo di siti basati su css e piattaforme open source (wordpress, joomla ecc ecc) è frequente la presenza di una sidebar (solitamente a destra) con tutti i “widget” del caso. Non si tratta però di strumenti di navigazione in senso stretto.

23 /strumenti per il web design [+]
La navigazione 3 colonne La tipica configurazione a tre colonne consente di disporre di una vasta colonna centrale per i contenuti affiancata da due colonne di navigazione. Attraverso questa configurazione, le due colonne laterali possono ospitare non bottoni di navigazione , ma anche brevi contenuti. Solitamente le tre colonne esistono solo nella home, all’interno si ripropone la sola navigazione a sinistra oppure in alto.

24 /strumenti per il web design [+]
Expansive footer È una nuova tendenza che va diffondendosi sempre di più, usare dei footer molto “alti” all’interno dei quali riproporre non solo crediti e informazioni di copyright, ma vere e proprie porzioni di navigazione, photogallery, badges.