web usability - 3 | webmaster & webdesigner

24
Web Usability [3] Matteo Magni

Upload: matteo-magni

Post on 11-Nov-2014

363 views

Category:

Technology


1 download

DESCRIPTION

Terza lezione modulo Web Usability del corso per WebMaster & WebDesigner

TRANSCRIPT

Page 1: Web usability - 3 | WebMaster & WebDesigner

Web Usability [3]Matteo Magni

Page 2: Web usability - 3 | WebMaster & WebDesigner

Come guardiamo i siti internet?

Page 3: Web usability - 3 | WebMaster & WebDesigner

Come guardiamo i siti internet [2]

http://www.sito-perfetto.it/nc/aggiornamenti-articoli-comunicazione-web/aggiornamenti-disponibili/articolo-selezionato/novita/il-layout-del-sito-web-ideale-45.html

Noi navigatori analizziamo i contenuti di qualsiasi sito più o meno come faremmo con quelli di un giornale. Li scansioniamo cioè molto rapidamente partendo dall’angolo in alto a sinistra, oppure dall’ultimo punto in cui stavamo guardando nella pagina precedente , per poi cercare di individuare le aree o i testi di nostro maggior interesse. (@Gianps)

Page 4: Web usability - 3 | WebMaster & WebDesigner

Come guardiamo i siti internet [3]

Se il sito ci è già noto e vogliamo sfruttarne una funzionalità, la nostra attenzione andrà senza indugio alla zona in cui sappiamo esserci la nostra “porta d’ingresso”, altrimenti cercheremo testi o elementi grafici collegati al nostro obiettivo originale o in grado di farcelo cambiare: immagini accattivanti, testi con parole chiave di nostro interesse, oppure, elementi grafici in forte contrasto con il resto del layout.

(@gianps)

Page 5: Web usability - 3 | WebMaster & WebDesigner

Come guardiamo i siti internet [4]

A meno che non ci si trovi di fronte a interfacce estremamente creative o a siti già ben noti all’utente, lo schema di analisi seguirà di solito un percorso ad “F”, che parte dall’estremità superiore sinistra della pagina (oppure da quella destra per chi legge da destra verso sinistra).La scansione nella generalità dei casi seguirà i trend evidenziati nell'immagine seguente.

(@gianps)

Page 6: Web usability - 3 | WebMaster & WebDesigner

Elementi

• testo esteso in cui si propone direttamente tutto il contenuto (magari evidenziando le frasi chiave);

• testi di sintesi con link di approfondimento, in cui si propone una breve introduzione con link di approfondimento che punta a una pagina interna;

• voce di menù o link testuale;

•link grafico, collegamento con immagine o mappa di immagini o con altri elementi grafici (principalmente box animati o statici, banner e icone);

•box interattivo, offre normalmente video o contenuti multimediali ed è caratterizzato da segni grafici che identificano il player (sostanzialmente il triangolo di play e la barra di scorrimento in basso), si differenzia dai precedenti link grafici perché gli utenti sanno che cliccandoci sopra vedranno o sentiranno qualcosa rimanendo nella stessa pagina.

-

@SitoPerfetto

Page 7: Web usability - 3 | WebMaster & WebDesigner

Chi attira la nostra attenzione

• Le icone

• I visi (soprattutto quelli femminili)

• I menù di navigazione

• Gli elementi grafici che contrastano con il

• contesto che li circonda

• Le parole collegate a quello che stiamo

• cercando

• I link, i grassetti e il testo evidenziato

Page 8: Web usability - 3 | WebMaster & WebDesigner

Fonte: Marketing Sherpa

Page 9: Web usability - 3 | WebMaster & WebDesigner

Formattazione

• 1 e 2 testo denso con e senza interruzioni

Lettura frammentaria (inizio e fine)

• 3 elenco puntato

Lettura più in profondità (anche primo punto)

• 4 elenco puntato con testi grassettati

Massimo approfondimento e lettura più diffusa

• 5 testo lungo con fotografia

Attenzione su viso e lettura del testo più stretto

@Gianps

Page 10: Web usability - 3 | WebMaster & WebDesigner

Cosa ci spinge ad approfondire?

Page 11: Web usability - 3 | WebMaster & WebDesigner

Ci spingono ad approfondire

• I periodi corti, ben separati e i punti elenco (sono una promessa di testo facilmente scansionabile e interpretabile)

• I titoli azzeccati ( con parole “sensibili” e brevi anche quelli)

• La pulizia dell’interfaccia (equilibrio tra pieni e vuoti)

• Le offerte speciali (se adeguatamente evidenziate)

• I menù snelli, evidenti con aree cliccabili belle grandi e con parole dal senso inequivocabile

• I testi “progressivi” (prima generici con link di approfondimento)

Page 12: Web usability - 3 | WebMaster & WebDesigner
Page 13: Web usability - 3 | WebMaster & WebDesigner

Colori

• Aumentare la leggibilità

• Evidenziare

• Ottenere uniformità o difformità informativa

• Cercare le associazioni emotive

http://www.shinynews.it/usability/0604-colori3_app.shtml#1

Page 14: Web usability - 3 | WebMaster & WebDesigner

Colori

contrasto = colori opposti sulla ruota

contiguità = colori vicini

Page 15: Web usability - 3 | WebMaster & WebDesigner

Colori - suggerimenti

• Combinazioni familiari/gradevoli (massimo 3-4 colori)

• Uniformità di uso in tutto il sito

• Contrasto per attirare l’attenzione (call to action, offerte speciali, servizi importanti, ecc.)

• Contiguità per invitare ad approfondire la

• lettura di testi lunghi

@Gianps

Page 16: Web usability - 3 | WebMaster & WebDesigner

Caratteri

• Maiuscolo o minuscolo (alto/basso)

– I caratteri con solo l’iniziale in maiuscolo sono molto più leggibili di quelli tutti maiuscoli

Page 17: Web usability - 3 | WebMaster & WebDesigner

Il Presi ente Sarà Sicu amente Prese te

Page 18: Web usability - 3 | WebMaster & WebDesigner

IL SE RETARIO SIC RAMENTE NON CI S RA'

Page 19: Web usability - 3 | WebMaster & WebDesigner

Con o senza grazie ?

• per i monitor > meglio senza fregi

• per la carta > titoli sans serif e testi serif

• Generalmente per i testi non troppo lunghi (ad es.: i titoli, le voci di menù, ecc.), a rapido scorrimento (ad es.: le newsletter, i siti web o i cartelli stradali) o in condizioni di stress visivo (ad es.: nei monitor dei computer) risultano più leggibili caratteri senza grazie.

• Invece nei testi piuttosto lunghi (ad es.: E-book o schede prodotto molto dettagliate), stampati su carta (ad es.: libri), molto piccoli o ben contrastati (scritte nere su fondo bianco) risultano più leggibili caratteri con le grazie.

Page 20: Web usability - 3 | WebMaster & WebDesigner

Famiglie di caratteri web safe

Arial

Esempio di testo in Arial

Courier

Esempio di testo in Courier

Georgia

Esempio di testo in Georgia

Times New Roman

Esempio di testo in Times New Roman

VerdanaEsempio di testo in Verdana

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Page 21: Web usability - 3 | WebMaster & WebDesigner

Animazioni

Animazioni e video

• Limitare gate e intro animate

• Non più di 1-2 elementi in movimento

• Evitare nei menu

Page 22: Web usability - 3 | WebMaster & WebDesigner

Sosacroniro????

Page 23: Web usability - 3 | WebMaster & WebDesigner

Domande a cui dobbiamo rispondere

• domande a cui deve rispondere un sito

• chi c'è dietro il sito?

• cosa viene offerto e come?

• Dove posso trovarlo?

• ci posso contattare e come?

• quello che viene offerto e come?

• chi lo ha provato è soddisfatto?

• Ci sono informazioni di dettaglio?

• interessante! come posso mantenere un contatto?

Page 24: Web usability - 3 | WebMaster & WebDesigner

Domande

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]