web usability - 3 | webmaster & webdesigner

of 23 /23
Web Usability [3] Matteo Magni

Author: matteo-magni

Post on 15-Nov-2014

373 views

Category:

Technology


0 download

Embed Size (px)

DESCRIPTION

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

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.htmlNoi navigatori analizziamo i contenuti diqualsiasi sito pi o meno come faremmocon quelli di un giornale. Liscansioniamo cio molto rapidamentepartendo dallangolo in alto a sinistra,oppure dallultimo punto in cui stavamoguardando nella pagina precedente , perpoi cercare di individuare le aree o i testidi 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 testo esteso in cui si propone link grafico, collegamento condirettamente tutto il contenuto (magari immagine o mappa di immagini o conevidenziando le frasi chiave);altri elementi grafici (principalmente testi di sintesi con link dibox animati o statici, banner e icone);approfondimento, in cui si propone box interattivo, offre normalmenteuna breve introduzione con link divideo o contenuti multimediali ed approfondimento che punta a una caratterizzato da segni grafici chepagina interna; identificano il player (sostanzialmente iltriangolo di play e la barra di voce di men o link testuale;scorrimento in basso), si differenzia daiprecedenti link grafici perch gli utentisanno che cliccandoci sopra vedrannoo sentiranno qualcosa rimanendo nellastessa [email protected] 7. Chi attira la nostra attenzione Le icone I visi (soprattutto quelli femminili) I men di navigazione Gli elementi grafici che contrastano con ilcontesto che li circonda Le parole collegate a quello che stiamocercando I link, i grassetti e il testo evidenziato 8. Fonte: Marketing Sherpa 9. Formattazione 1 e 2 testo denso con e senza interruzioniLettura frammentaria (inizio e fine) 3 elenco puntatoLettura pi in profondit (anche primo punto) 4 elenco puntato con testi grassettatiMassimo approfondimento e lettura pi diffusa 5 testo lungo con fotografiaAttenzione 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 promessadi 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 conparole 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 difformitinformativa Cercare le associazioni emotive 13. Coloricontrasto = colori opposti sulla ruotacontiguit = colori vicini 14. Colori - suggerimenti Combinazioni familiari/gradevoli (massimo 3-4colori) Uniformit di uso in tutto il sito Contrasto per attirare lattenzione (call toaction, offerte speciali, servizi importanti, ecc.) Contiguit per invitare ad approfondire la lettura di testi lunghi @Gianps 15. Caratteri Maiuscolo ominuscolo(alto/basso) I caratteri con sololiniziale inmaiuscolo sonomolto pi leggibilidi quelli tuttimaiuscoli 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, levoci di men, ecc.), a rapido scorrimento (ad es.: le newsletter,i siti web o i cartelli stradali) o in condizioni di stress visivo (ades.: nei monitor dei computer) risultano pi leggibili caratterisenza grazie. Invece nei testi piuttosto lunghi (ad es.: E-book o schedeprodotto 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 ArialEsempio 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 RomanVerdana 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. Domande a cui dobbiamorispondere 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. Domande?Slide: http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/ mail:[email protected]