|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Fino ad oggi Web = Successo. |
|
Oggi il pubblico è in grado di distinguere l’
utile dall’ inutile. |
|
Web design ha significato per molto tempo
appagamento di estetica ma mancanza di funzionalità. |
|
Web ambiente multidisciplinare:
Programmazione, contenuti, grafica, comunicazione… |
|
Siti fotocopia, visualizzabili da un solo
Browser, home page lentissime, registrazione lente, contenuto introvabile… |
|
|
|
|
Internet e il Web portano cultura nuova con
proprie regole, la rete è esplosa quando ha incontrato l’ ipertesto. |
|
L’ ipertesto e la rete sono gli strumenti della
progettazione, l’ usabilità è il suo obbiettivo. |
|
Il Design senza progettazione non serve a nulla,
progettare senza vincoli è incompetenza. |
|
Nel mondo della rete gli utenti hanno il comando
mediatico ed una volontà autonoma. |
|
Oggi i siti che tengono conto dell’ architettura
dell’ informazione e dell’ usabilità sono quelli vincenti. |
|
|
|
|
E’ l’ usabilità a governare il web, se un
cliente non trova un prodotto non lo comprerà. |
|
Il Web da potere all’ utente che con il mouse
decide tutto, i vostri concorrenti sono ad un click di distanza. |
|
100 ml di siti fine 2002, vasta possibilità di
scelta e capacità di movimento.
1) Impazienza.
2) Gratifica immediata.
Un minuto per capire come usare il sito o se ne vanno! |
|
|
|
|
Usabilità importanza fondamentale:
a) Nel processo di beni materiali (videoregistratore) e software i clienti
prima pagano e poi hanno a che fare con con l’ usabilità.
b) Sul Web i clienti hanno prima a che fare con l’ usabilità e poi pagano.
Nella progettazione del web l’ usabilità è la più importante. |
|
|
|
|
Esistono due tipi di approccio al Design:
1) Artistico
2) Progettistico |
|
L’ obbiettivo principale della maggior parte dei
progetti web è rendere semplice alle persone lo svolgimento di attività
pratiche.
L’ approccio ingegneristico ha il vantaggio di risolvere i dubbi con
domande rivolte agli utenti.
Per elaborare idee progettuali
adeguate, dovete osservare gli utenti e scoprire quello che apprezzano, ciò
che trovano facile ed i punti in cui si arenano. |
|
|
|
|
|
|
Il sito web di una azienda diventa l’
interfaccia principale con i suoi clienti. |
|
Per chi fa e-commerce, il sito è l’azienda. |
|
Il sito è marketing, vetrina, negozio,
personale, supporto post vendita. |
|
Una bassa usabilità equivale ad avere un negozio
al 17° piano, aperto solo il mercoledì dalle 3 alle 4 del mattino con un
commesso scortese. |
|
Noi metteremo al centro della nostra strategia
Web le esigenze dei clienti. |
|
|
|
|
Modello di Business:
NOà Trattare il web come
una Brochure.
SI à Processo che
cambierà il business |
|
Gestione del progetto:
NOà Gestione del come
progetto aziendale
SI à Progetto di
interfaccia verso il cliente. |
|
Gestione del progetto:
NOà Gestione del come
progetto aziendale
SI à Progetto di
interfaccia verso il cliente. |
|
Ottimizzare esperienze utente in circostanze
realistiche. |
|
Scrivere con uno stile ottimizzato per gli
utenti web. |
|
Non costruire un web come un isola felice ma
renderlo interattivo con gli altri siti. |
|
|
|
|
|
|
|
|
Per l’ usabilità è importante la progettazione
della pagina e non della singola pagina. |
|
Il sito
deve essere costruito tenendo conto delle esigenze degli utenti. |
|
|
|
|
Molti siti dedicano più spazio alla navigazione
che al contenuto. |
|
La navigazione deve essere ridotta al minimo. |
|
La % di pixel per pagina web dedicata al
contenuto va solitamente dal 14 al 20% (Navigazione, Browser e Spazio
Vuoto)
Lo spazio vuoto può essere utile ma va controllato o finalizzato alla
pagina e non presente solo perché questa non si adatta alla finestra. |
|
Il contenuto dovrebbe coprire tra il 50 e 80%
della pagina, la navigazione tra il 15 e il 20%. |
|
|
|
|
La pubblicità deve rientrare nella Navigazione
(15/20%) |
|
La semplicità vince sempre, ogni byte
risparmiato si guadagna 1 millisecondo. |
|
L’eliminazione degli spazi vuoti può portare a
claustrofobia. |
|
|
|
|
Interfacce grafiche à Controllo Totale |
|
Sul Web il controllo è in mano all’utente che
può scegliere qualsiasi percorso.
(In mezzo al Sito con MR) |
|
I progettisti web si devono adattare a questa
situazione cercando di facilitare l’ utente nella navigazione. |
|
Non essere troppo esigenti sui Font da
utilizzare per la pagina WEB. |
|
Per fare concentrare gli utenti sull’ essenziale
togliete quanti + fronzoli potete. |
|
|
|
|
Nella progettazione tradizione c’ è un fattore
di interfaccia grafica 6
(Portatile vs Workstation) |
|
Lella progettazione Web:
Fattore 6 (Fisso vs Portatile)
Fattore 100 (Palmare vs Fisso)
Fattore 1000 (Palmare vs WebTV) |
|
Le pagine devono essere progettate per
funzionare con tutti questi fattori. (*28)
Devono essere specificate in modo che il browser possa adattarle alle
condizioni specifiche di ciascun utente. |
|
Usare i principi base dell’ HTML |
|
|
|
|
Usare % e Fogli di Stile su tutte le pagine Web |
|
|
|
|
Usare icone funzionabili a diverse
risoluzioni |
|
|
|
Usare sempre codice HTML standard per
assicurare una interpretazione corretta. |
|
|
|
|
|
|
Le pagine web vanno ottimizzate per il più alto
numero di Browser possibile. |
|
I primi tempi l’aggiornamento dei BW avveniva al
ritmo del 2% alla settimana. |
|
Il passaggio in futuro si abbasserà per i
seguenti motivi: |
|
Compatibilità |
|
Se i BW vecchi funzionano perché cambiarli. |
|
Da pionieri entusiasti a massa di pochi esperti. |
|
Non progettare mai per versioni Beta.(*34) |
|
Esistono i superutenti |
|
Collezionare i Browser vecchi |
|
|
|
|
Separando il significato dalla presentazione è
possibile che l’ utente riceva e visualizzi le informazioni in base alle
sue apparecchiature. |
|
H1 à Intestazione Massima Semantica |
|
|
|
Codifica basata sulla Presentazione
vs
Semantica |
|
Presentazione finchè è possibile prevedere o impostare il comportamento dell’
utente.
(1991-2 Browser Testuali e 93- 94 Mosaic 95-96 Netscape Navigator) |
|
Semantica dall’ ingresso di IE nel mercato. |
|
|
|
|
Da Testuali a Mosaic (30% Mese) |
|
Da Mosaic a Netscape (25% Mese)
Netscape guadagna 80% mercato. |
|
Da Netscape a Explorer (30% 97à 99) |
|
|
|
La codifica semantica permette all’
apparecchio di ottimizzare l’ impaginazione alle proprie possibilità |
|
L’ interfaccia vocale è favorita dalla codifica
semantica. |
|
Il cambio costante dei BW non garantisce alle
presentazioni una visualizzazione standard se non affidata ai Fogli di
Stile |
|
Separare sempre il contenuto dalla presentazione
che deve avere inserendola in un CSS separato. |
|
Una stessa pg può essere connessa a diversi CSS |
|
|
|
|
Gli utenti richiedono con insistenza di rendere
veloce il caricamento delle pagine. |
|
Tempi inferiori al secondo per passare da una
pagina all’ altra (futuro) |
|
L’ obbiettivo è quello di rimanere massimo nei
10 secondi.
(Limite del mantenimento concentrazione) |
|
Modem 36.6 à 36,6 kbps |
|
1/10 Secondo (il sistema da segni di
risposta)
1Secondo (Il flusso del pensiero utennte non _________percepisce
ritardi.Non è interrotto)
10 Secondi (Non perde la concentrazione sulla __________navigazione del
sito) |
|
|
|
|
Soddisfazione Utente =
Aspettative + Tempi di risposta |
|
La variabilità dei tempi di risposta
caratteristica intrinseca del web deve essere ridotta al minimo con l’
usabilità. |
|
Per attese maggiori di 10 secondi indicare
vicino al link il peso del file da scaricare; l’utente se sceglie di
procedere si è creato un aspettativa. |
|
Il tempo di risposta percepito si determina tra
Server e Browser.
a) HW server per smaltimento richieste.
b) Connessione Server a Internet (T1 o T3)
c) Colli di Bottiglia (Ore punta o Estero)
d) Connessione utente a Internet
e) Capacità di impaginazione del BW |
|
|
|
|
Le pagine Web progettate per essere veloci
devono avere la grafica ridotta al minimo. |
|
Un immagine vale 2000 parole. |
|
Togliendo la grafica aumenterà il traffico. |
|
Colorando le celle, utilizzando i font ed i
fogli di stile si può ottenere molto. |
|
Utilizzare + volte le stesse immagini già
memorizzate nella cache (bottoni,frecce) |
|
Max dimensioni di pagina consentite:
34 kbytes
A)
Pagine dim. 32/33 Kbyte à 7/10% Abbandono
B) Pagine dim. 40 Kbytes à 25/30% Abbandono |
|
Nelle pagine che linkano ad una Directory
comprendere sempre “/ ” alla fine dell’ indirizzo |
|
|
|
|
L’ utente deve iniziale a visualizzare subito le
prime informazioni della pagina, altre immagini o animazioni possono essere
caricate con un lieve ritardo. |
|
L’inizio della pagina deve essere il più
significativo possibile e con + testo che immagini. |
|
Tutte le immagini della pagina devono riportare
l’ indicazione ALT=“..” |
|
Fornire tutte le informazioni necessarie per l’
impaginazione; Altezza e Larghezza Immagini. |
|
Usare + Tabelle – complesse. |
|
|
|
|
La prima versione del protocollo HTTP era nata
per pagine semplici composte per la maggior parte da testo, avvia una nuova
connessione TCP-IP con il Server per ogni HIT presente nella pagina.Ogni
piccola icona richiederà una nuova connessione tra Browser e Server; per
immagini piccole > tempo di connessione che di scaricamento. |
|
La versione del protocollo HTTP 1.0 >
predispone una sola connessione Keep Alive tra Server e BW per il tempo
necessario al trasferimento dei file che compongono la pagina.Il tempo di
scaricamento si dimezza. |
|
|
|
|
Link Strutturali o di Navigazione:
muoversi nel sito per e raggiungere pagine secondarie. |
|
Link Associativi o per Contenuto:
parole sottolineate che portano a pagine di approfondimento di argomenti
specifici |
|
Link di rimandi Alternativi:
rimandano a pagina alternative per dare la possibilità all’ utente di
trovare altre informazioni di approfondimento
I link devono essere applicati a poche parole significative in modo che l’
utente possa definire all’ apertura della pagina tutte le possibili vie. |
|
|
|
|
Devono apparire come i richiami della carta
stampata: 2/3 parole significative che attirino l’ attenzione dell’ utente. |
|
Link a pagine esterne che trattano lo stesso
argomento incrementano l’ uso del sito. |
|
Una breve spiegazione del link prima che venga
selezionato anticipa agli utenti la destinazione facilitando l’ usabilità e
diminuendo il disorientamento verso la pagina di arrivo.
<a href=“http//….” title=“…”>
a) Ci si fa un idea di
dove si sta andando.
b) Nome sezione di destinazione.
c) Dettagli aggiuntivi sulla pg di destinazione e sulle sue relazioni con
quella di partenza.
d) Avvertimento su eventuali Pbm. |
|
Max 60 caratteri meglio < |
|
Il titolo Link ritarda il caricamento di 0,5
Secondi, non usare titoli che ripetono il testo. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Note