web usability - 3 | webmaster & webdesigner

of 24/24
Web Usability [3] Matteo Magni

Post on 11-Nov-2014

356 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

Terza lezione modulo Web Usability del corso per WebMaster & WebDesigner

TRANSCRIPT

  • 1. Web Usability [3]Matteo Magni
  • 2. Come guardiamo i siti internet?
  • 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 dallangolo in alto a sinistra, oppure dallultimo punto in cui stavamo guardando nella pagina precedente , per poi cercare di individuare le aree o i testi di nostro maggior interesse. (@Gianps)
  • 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 dingresso, 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. Come guardiamo i siti internet [4]A meno che non ci si trovi di fronte ainterfacce estremamente creative o asiti gi ben noti allutente, lo schemadi analisi seguir di solito unpercorso ad F, che partedallestremit 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. Elementi link grafico, collegamento con immagine o testo esteso in cui si propone mappa di immagini o con altri elementi grafici direttamente tutto il contenuto (magari (principalmente box animati o statici, banner e evidenziando le frasi chiave); icone); testi di sintesi con link di box interattivo, offre normalmente video o contenuti multimediali ed caratterizzato da approfondimento, in cui si propone una breve introduzione con link di segni grafici che identificano il player (sostanzialmente il triangolo di play e la barra approfondimento che punta a una di scorrimento in basso), si differenzia dai pagina interna; precedenti link grafici perch gli utenti sanno che cliccandoci sopra vedranno o sentiranno voce di men o link testuale; qualcosa rimanendo nella stessa pagina. @SitoPerfetto -
  • 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. Fonte: Marketing Sherpa
  • 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. Cosa ci spinge ad approfondire?
  • 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 dellinterfaccia (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. 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. Coloricontrasto = colori opposti sulla ruota contiguit = colori vicini
  • 14. Colori - suggerimenti Combinazioni familiari/gradevoli (massimo 3-4 colori) Uniformit di uso in tutto il sito Contrasto per attirare lattenzione (call to action, offerte speciali, servizi importanti, ecc.) Contiguit per invitare ad approfondire la lettura di testi lunghi @Gianps
  • 15. Caratteri Maiuscolo o minuscolo (alto/basso) I caratteri con solo liniziale in maiuscolo sono molto pi leggibili di quelli tutti maiuscoli
  • 16. Il Presi ente Sar Sicu amente Prese te
  • 17. IL SE RETARIO SIC RAMENTE NON CI S RA
  • 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. 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. AnimazioniAnimazioni e video Limitare gate e intro animate Non pi di 1-2 elementi in movimento Evitare nei menu
  • 21. Sosacroniro ????
  • 22. 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?
  • 23. Domande Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: [email protected]