Web Design: raccomandazioni

Sei qui: blog » Web Design: raccomandazioni

La seguente tabella raccoglie le raccomandazioni riguardo alle scelte che si dovrebbero compiere nel design di una home page. Le raccomandazioni si basano su due ordini di considerazioni: l’approccio più efficace al comportamento degli utenti ondine, e le convenzioni più affermate nel design delle home page.

Uno dei risultati più importanti, derivante da molti studi di usabilità, è che i siti funzionano meglio se si adeguano alle convenzioni che gli utenti hanno incontrato in altri siti (persino se una convezione non fosse ottimale da un punto di vista teorico, in pratica funzionerebbe bene per il motivo che gli utenti sanno come funziona).

Legenda:

*** Alta priorità:è una raccomandazione essenziale, a cui dovrebbero conformarsi pressoché tutti i progetti; può essere violata solo a fronte di test che dimostrino concretamente la validità di una scelta alternativa in rapporto al contesto scelto;

** Media priorità:è una raccomandazione discretamente forte, a cui dovrebbero ottemperare la maggior parte dei progetti; si può discostarsene solo se si ha una buona ragione per credere che il sito in questione abbia requisiti differenti;

* Bassa priorità: è una scelta di default, a cui ci si può attenere tranquillamente, salve che venga sostituita da qualcosa di meglio.

Elemento	Priorità	Raccomandazione
Tempo di download	*******	Al massimo 10 secondi, in base alla velocità media di connessione degli utenti (per connessioni via modem analogico: dimensione massima 50 KB)
Larghezza pagina	**	Ottimale: 770 pixel (ma adattabile da 620 a 1024)
Layout liquido/fisso	**	Liquido (adattabile a differenti dimensioni della finestra)
Lunghezza pagina	**	Ottimale: una, massimo due schermate verticali (1000-1600 pixel)
Frame	*******	No
Logo: posizione	*******	In alto a sinistra
Logo: dimensioni	**	80x68 pixel
Ricerca	*******	Da offrire nella home page,mediante casella dedicata
Ricerca: posizione	*******	In cima alla pagina, preferibilmente in un angolo (destro o sinistro)
Ricerca: colore casella	*******	Bianco
Ricerca: etichetta pulsante	**	“Cerca” (anche “vai”)
Ricerca: ampiezza casella	**	Minimo 25 caratteri, ottimale 30 caratteri
Ricerca: tipo	**	Ricerca semplice (con eventuale link a ricerca avanzata)
Navigazione	**	Uno dei quattro sistemi principali: barra verticale sinistra, linguette in alto, link in alto, categorie a centro pagina
Navigazione: footer	*	Da utilizzare per link in stile “note a pie’ di pagina”: copyright,contatti etc. Al massimo 7 link a fondo pagina, su una sola riga in una finestra di normali dimensioni
Link alla mappa del sito	**	“Mappa del sito” (se disponibile)
Routing page	**	No
Splash page	*******	No
Login	*	Se il sito ha contenuti protetti/riservati, la funzione di accesso va chiamata preferibilmente “login”
Informazioni sull’azienda	*******	Includere sempre questa voce
Informazioni sull’azienda: link	**	“Chi siamo”
Contatti	**	Includere questa voce e chiamarla “contatti” o “contattaci”
Privacy	*******	Se il sito raccoglie dati personali, è obbligatorio pubblicare un’informativa sulla privacy (con link nella home page)
Privacy: link	**	“Informativa sulla privacy”, in home page
Offerte di lavoro	**	Se il recruiting è importante, inserire un link “offerte di lavoro” o“opportunità di lavoro” o “lavora con noi”. In alternativa, includere queste informazioni nella pagina del profilo aziendale
Help	*	Da non includere, a meno che la complessità del sito lo renda indispensabile
Help: posizione	**	In alto a destra
Musica in esecuzione automatica	*******	No
Animazioni	**	No
Grafica/illustrazioni	*	Da mantenere entro il 5/15% dello spazio
Pubblicità	**	Al massimo 3 banner o contenuti pubblicitari
Testo: colore	**	Nero
Testo: dimensioni	*	12 punti
Testo: dimensioni fisse	*******	No. Impostare sempre dimensioni relative, in modo che gli utenti abbiano la possibilità di ingrandire/ridurre il testo tramite le opzioni del browser
Testo: tipo di carattere	*	Lineare, sans serif
Colore di sfondo	**	Bianco
Link: colore (non visitati)	**	Blu
Link: colore (visitati)	*	Viol
Link: colore differente (visitati/non visitati)	*******	Sì. I link non visitati devono avere un colore più saturo. I link visitati devono avere un colore meno saturo o meno evidente (ma non grigio chiaro)
Link: sottolineatura	**	Sì, eccetto (eventualmente) le liste di link nelle barre di navigazione