Web Usability [3]Matteo Magni
Come guardiamo i siti internet?
Come guardiamo i siti internet                        [2]http://www.sito-perfetto.it/nc/aggiornamenti-articoli-comunicazio...
Come guardiamo i siti internet              [3]Se il sito ci è già noto e vogliamosfruttarne una funzionalità, la nostraat...
Come guardiamo i siti internet              [4]A meno che non ci si trovi di fronte ainterfacce estremamente creative o as...
Elementi• testo esteso in cui si propone            • link grafico, collegamento con  direttamente tutto il contenuto (mag...
Chi attira la nostra attenzione• Le icone• I visi (soprattutto quelli femminili)• I menù di navigazione• Gli elementi graf...
Fonte: Marketing Sherpa
Formattazione• 1 e 2 testo denso con e senza interruzioni  Lettura frammentaria (inizio e fine)• 3 elenco puntato  Lettura...
Cosa ci spinge ad approfondire?
Ci spingono ad approfondire• I periodi corti, ben separati e i punti elenco (sono una promessa  di testo facilmente scansi...
Colori     http://www.shinynews.it/usability/0604-colori3_app.shtml#1• Aumentare la leggibilità• Evidenziare• Ottenere uni...
Coloricontrasto = colori opposti sulla ruota      contiguità = colori vicini
Colori - suggerimenti• Combinazioni familiari/gradevoli (massimo 3-4  colori)• Uniformità di uso in tutto il sito• Contras...
Caratteri    • Maiuscolo o      minuscolo      (alto/basso)      – I caratteri con solo        l’iniziale in        maiusc...
Il Presi ente Sarà Sicu amente Prese te
IL SE RETARIO SIC RAMENTE NON CI S RA
Con o senza grazie ?• per i monitor > meglio senza fregi• per la carta > titoli sans serif e testi serif• Generalmente per...
Famiglie di caratteri web safe   http://www.w3schools.com/cssref/css_websafe_fonts.asp                     Arial          ...
AnimazioniAnimazioni e video• Limitare gate e intro animate• Non più di 1-2 elementi in movimento• Evitare nei menu
Domande a cui dobbiamo            rispondere•   domande a cui deve rispondere un sito•   chi cè dietro il sito?•   cosa vi...
Domande?                  Slide:     http://cypher.informazione.me/                  Code:https://github.com/inFormazione/...
 Web Usability - 3 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in …5
×

Web Usability - 3 | WebMaster & WebDesigner

288
-1

Published on

Terza lezione del modulo Web Usability per il corso di WebMaster & WebDesigne

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
288
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Usability - 3 | WebMaster & WebDesigner

  1. 1. Web Usability [3]Matteo Magni
  2. 2. Come guardiamo i siti internet?
  3. 3. 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)
  4. 4. Come guardiamo i siti internet [3]Se il sito ci è già noto e vogliamosfruttarne una funzionalità, la nostraattenzione andrà senza indugio allazona in cui sappiamo esserci lanostra “porta d’ingresso”, altrimenticercheremo testi o elementi graficicollegati al nostro obiettivo originaleo in grado di farcelo cambiare:immagini accattivanti, testi conparole chiave di nostro interesse,oppure, elementi grafici in fortecontrasto con il resto del layout. (@gianps)
  5. 5. Come guardiamo i siti internet [4]A meno che non ci si trovi di fronte ainterfacce estremamente creative o asiti già ben noti all’utente, lo schemadi analisi seguirà di solito unpercorso ad “F”, che partedall’estremità superiore sinistra dellapagina (oppure da quella destra perchi legge da destra verso sinistra).La scansione nella generalità deicasi seguirà i trend evidenziatinellimmagine seguente. (@gianps)
  6. 6. Elementi• testo esteso in cui si propone • link grafico, collegamento con direttamente tutto il contenuto (magari immagine o mappa di immagini o con evidenziando le frasi chiave); altri elementi grafici (principalmente• testi di sintesi con link di box animati o statici, banner e icone); approfondimento, in cui si propone • box interattivo, offre normalmente una breve introduzione con link di video o contenuti multimediali ed è approfondimento che punta a una caratterizzato da segni grafici che pagina interna; identificano il player (sostanzialmente il triangolo di play e la barra di• voce di menù o link testuale; 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 -
  7. 7. 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•••
  8. 8. Fonte: Marketing Sherpa
  9. 9. 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
  10. 10. Cosa ci spinge ad approfondire?
  11. 11. 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)
  12. 12. Colori http://www.shinynews.it/usability/0604-colori3_app.shtml#1• Aumentare la leggibilità• Evidenziare• Ottenere uniformità o difformità informativa• Cercare le associazioni emotive
  13. 13. Coloricontrasto = colori opposti sulla ruota contiguità = colori vicini
  14. 14. 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
  15. 15. Caratteri • Maiuscolo o minuscolo (alto/basso) – I caratteri con solo l’iniziale in maiuscolo sono molto più leggibili di quelli tutti maiuscoli
  16. 16. Il Presi ente Sarà Sicu amente Prese te
  17. 17. IL SE RETARIO SIC RAMENTE NON CI S RA
  18. 18. 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.
  19. 19. Famiglie di caratteri web safe http://www.w3schools.com/cssref/css_websafe_fonts.asp 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 Verdana Esempio di testo in Verdana
  20. 20. AnimazioniAnimazioni e video• Limitare gate e intro animate• Non più di 1-2 elementi in movimento• Evitare nei menu
  21. 21. 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?
  22. 22. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×