Strumenti per il web design [ ]. /strumenti per il web design [+] l'usabilità* è il grado in cui...

Strumenti per il web design

[<a href=“#”>]

/strumenti per il web design [+]

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

L'usabilità è un concetto che nasce negli anni 60 nell'ambito degli studi sull'ergonomia cognitiva in relazione a qualunque interazione uomo-artefatto.

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?

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.


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

Tempoche 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.


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.


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

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.

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 | 1024x768 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.

Homepage


logo

navigazione contenuti

Brand, slogan,concept

navigazione

footer

Contenitore - wrapper

white space

Elementi di una pagina web


Ogni pagina web possiede un contenitore. La larghezza del

contenitore può essere “fissa” (fixed) oppure, adattarsi alla larghezza della

finestra (liquid)

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.

Logo

Contenitore - wrapper


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)

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.

Content


Usabilità/

FooterÈ 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.

Gli spazi bianchi anche definti

“negative space” Sono gli spazi che occorre ritagliare all’interno di una pagina per farla

respirare

White space

Usabilità/

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

Sequenzialità /circolarità

.b.a

Usabilità/

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)

Struttura

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.

Progettiamo?Bene, spegni il computer e disegna…


Progettiamo?Bene, spegni il computer e disegna…


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.

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

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à

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.

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…

La navigazioneColonna sx


La navigazioneColonna 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.

La navigazione3 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.

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.

Strumenti per il web design [ ]. /strumenti per il web design [+] l'usabilità* è il grado in cui...

Documents

Transcript of Strumenti per il web design [ ]. /strumenti per il web design [+] l'usabilità* è il grado in cui...