#siti usabili. good web design VS bad web design

Transcript

1 #siti usabili good web design VS bad web design

2

3 I motori di ricerca cercano continuamente di migliorare i risultati forniti agli utenti, selezionando i "migliori" tra tutti i risultati possibili. Nonostante il concetto di risultato "migliore" sia soggettivo, i motori riescono a determinare con buona precisione il tipo di pagine e di siti in grado di soddisfare le ricerche effettuate dagli utenti. Questi siti condividono di norma alcune caratteristiche:

4 sono facili da utilizzare, da navigare e da capire forniscono informazioni dirette e pertinenti per le ricerche effettuate hanno un design professionale e risultano accessibili a tutti i browser moderni (sia desktop che mobile) forniscono contenuti credibili e di alta qualità

5 Come progettare siti usabili? good web design VS bad web design

6 #usabilita' good web design VS bad web design

7 Modello di usabilita di D. Norman good web design VS bad web design

8 Modello di usabilita di D. Norman good web design VS bad web design

9 Un esempio good web design VS bad web design

10 Formare lo scopo voglio accendere la luce Formare l intenzione Voglio premere un interruttore per accendere la luce Golfo dell esecuzione quale dei due interruttori è il corretto? Eseguo l azione schiaccio un interruttore fra i due disponibili Percepire lo stato del mondo Guardo in camera se la luce si è accesa Interpretare lo stato del mondo la luce in cucina si è accesa, ma non quella in camera (che in realta volevo accendere) Golfo della valutazione cosa e successo? come e cambiato lo stato del mondo? Valutazione del risultato good web design VS bad web design

11 PROGETTARE PER L'usabilitA good web design VS bad web design

12 1. Ridurre l ampiezza del golfo dell esecuzione fare in modo che le azioni possibili corrispondano in modo evidente alle intenzioni AFFORDANCE 2. Facilitare l esecuzione delle azioni 3. Ridurre l ampiezza del golfo della valautazione fare in modo che lo stato fisico del sistema sia interpretabile in modo univoco e immediato FEEDback

13 affordance La proprietà di un oggetto d influenzare, attraverso la sua apparenza visiva, il modo in cui deve essere usato Un oggetto che possiede una buona affordance invita chi lo guarda a utilizzarlo nel modo per cui è stato concepito. Il compito del progettista è progettare oggetti con buona affordance, per ridurre l ampiezza del golfo della esecuzione

14 good affordance: esempi good web design VS bad web design

15

16

17 bad affordance: esempi good web design VS bad web design

18

19 MAKE IT OBVIOUS! good web design VS bad web design

20 affordance nelle interfacce good web design VS bad web design

21 GOOD affordance example good web design VS bad web design

24 BAD affordance example??

25 BOTTONI O TITOLI? good web design VS bad web design

26

27 feedback La risposta che otteniamo a seguito delle nostre azioni (in italiano: retroazione ) Il progettista deve progettare oggetti che ci diano feedback facilmente percepibili ed interpretabili alle azioni che compiamo su di essi, per ridurre l ampiezza del golfo della valutazione

28 GOOD feedback example good web design VS bad web design

31 bad feedback example Schermata reale tratta da Microsfot SQL Server

32 USABILITa': DEFINIZIONE ISO9241

33 Usabilita: L efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obbiettivi in determinati ambienti d uso. ISO9241 good web design VS bad web design

34 L'USABILITa e' relativa L usabilità è quindi un concetto relativo, che dipende da tre variabili Ambienti d uso Utenti Obbiettivi

35 L'USABILITa e' misurabile Usabilita: L efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obbiettivi in determinati ambienti d uso. ISO9241

36 Efficacia: l accuratezza e completezza con cui raggiungo l obbiettivo Efficienza: le risorse spese per ottenere tale risultato Soddisfazione: il comfort e la accettabilità del sistema Possiamo definire delle metriche per misurare la usabilità

37

38 Un esempio di usabilita misurabile

39 Metriche per l usabilità della manopola della doccia efficacia capacità di regolazione fine (Δlitri al sec per ogni giro completo) efficienza momento torcente (max numero di giri) soddisfazione gradimento soggettivo (voto da 0 a10)

40 approfodniamo la definizione Usabilita: L efficacia, efficienza e soddisfazione con cui determinati utenti possono raggiungere determinati obbiettivi in determinati ambienti d uso. ISO9241 Ma quando? In che momento dell esperienza utente? La prima volta che uso il sistema, o dopo che l ho utilizzato a lungo?

41 evoluzione dell'utente good web design VS bad web design

42 Novizio Principiante Competente Esperto

43 Learnability facile da imparare (per utenti novizi) Memorability facile da ricordare (per utenti occasionali) Alcuni sistemi sono progettati in modo che utenti novizi possano imparare ad usarli facilmente Altri danno priorità a un loro uso efficiente da parte di utenti esperti Altri ancora supportano due modalità d uso alternative (per novizi e per esperti)

44 MEMORABILITY E particolarmente importante per sistemi che vengono utilizzati di rado, ma che richiedono all utente sicurezza ed efficienza nell uso Esempio: sistemi di allarme(l allarme si verifica di rado, ma quando si verifica devo reagire in fretta, e non ho tempo di consultare manuali)

45 Ho una regola semplice per individuare il cattivo design. Tutte le volte che trovo indicazioni su come usare qualcosa, si tratta di un oggetto progettato male Donald Norman

46 Ma nel WEB?!? Dopo tanta teoria...come possiamo implementare le conoscenze che ora abbiamo sull usabilità, nella progettazione dei siti? Sistemi di feedback Sistemi di correzione dell errore Memorizzazione del lavoro gia svolto (ad esempio form di compilazione) Design che persegua l affordance (esempio bottoni) Pochi passi per raggiungere l obiettivo (per facilitare la memorability)

47 FEEDBACK: Messaggi live good web design VS bad web design

48

49 FEEDBACK: Messaggi live good web design VS bad web design

50 FEEDBACK:visivi good web design VS bad web design

51 RISPETTARE lo sforzo dell'utente avevo sbagliato solo la mail! Perche devo reinserire tutto?

52 RISPETTARE lo sforzo dell'utente good web design VS bad web design

53 LEGGIBILITA good web design VS bad web design

54 affordance good web design VS bad web design

55 gestalt good web design VS bad web design

56 UI/UX TEST good web design VS bad web design

57 #bad web design examples

58 good web design VS bad web design

61

62

63

64

65

66

67

68 #bello non vuol dire buono good web design VS bad web design

69

70

71

72 #cose da non fa r e MAI

73 menu a tendina con piu di 2 livelli Se avete bisongo di piu di 2 livelli, vuol dire che la categorizzazione delle informazioni non è ottimale

74 menu a piu righe / livelli good web design VS bad web design

75 animazioni solo "perche sono belle" good web design VS bad web design

76 #good web design examples chiaro (non devo pensare a cosa fare) consistente (stessa linea per diversi supporti) reattivo (ad ogni azione ho una reazione del sistema) efficiente (fa quello che deve fare) familiare (richiam modelli noti all utente)

77 un solo colore portante, less is more good web design VS bad web design

78

79

81

82 Chi di voi saprebbe tradurre in italiano il termine WEB DESIGNER? igw: informatica e GRAFIca per il web

83 igw: informatica e GRAFIca per il web

84 igw: informatica e GRAFIca per il web...ok, progettare... ma per chi? Per l utente. Per le persone. #progettazione user centered #tecnica #grafica per il web

85 #progettazione La Progettazione centrata sull utente o User-centered design (UCD) e una filosofia di progettazione e un processo nel quale ai bisogni, ai desideri e ai limiti dell utente sul prodotto finale e data grande attenzione in ogni passo igw: informatica e GRAFIca per il web

86 #tecnica Sectio aurea Rapporto fra due lunghezze disuguali, delle quali la maggiore e medio proporzionale tra la minore e la somma delle due la proporzione aurea,costituisce un canone estetico naturale, per la sua ricorrenza in natura, le sue proporzioni conferiscono uno straordinario senso di armonia igw: informatica e GRAFIca per il web

90 igw: informatica e GRAFIca per il web #tecnica e n fas i

91 igw: informatica e GRAFIca per il web #tecnica ritmo

92 #utente finale : noi igw: informatica e GRAFIca per il web

93 Ma l'usabilita cosa centra con il posizionamento? Siti e contenuti di maggiore qualita permettono di ottenere un numero piu elevato di link rispetto a siti e contenuti simili ma di minore qualita. piu un sito è ben progettato più se ne parla...

94 L usabilità rappresenta un fattore indiretto per il buon posizionamento di un sito. un motore di ricerca non puo infatti determinare a priori se un sito è usabile, ma si basa su alcune inferenze indirette: Quanto gli utenti si fermano sul sito Presenza di link orfani Immagini non ottimizzate Addatabilità ai device mobile (responsive web design)

95 Vi sono soltanto un numero limitato di variabili che i motori di ricerca prendono direttamente in considerazione per stabilire l'ordinamento dei propri risultati, questi includono: Presenza di parole chiave link ricevuti dall esterno struttura e volumetria del sito. Tempo di permanenza sul sito (frequenza di rimbalzo)

96 bounce rate, frequenza di rimbalzo Un'elevata usabilità ed esperienza utente permettono di aumentare la popolarità di un sito e di conseguenza di aumentare anche la qualità del sito agli occhi dei motori. Un'eccellente esperienza utente permette al sito di essere percepito in maniera positiva dai propri utenti, favorisce la condivisione, il bookmarking, le visite ripetute, ovvero MAGGIOR PERMANENZA ZUL SITO

97 Su quale sito posate prima gli occhi? good web design VS bad web design

98 Piu gli utenti si fermano su un sito, piu il motore di ricerca capirà che questi siti sono autorevoli. O meglio... Partendo da una chiave di ricerca effettuata dall utente, se egli rimane sul sito cliccato molto tempo vuol dire che il sito risponde alla domanda di partenza dell utente. Questo è oggi il fattore implicito piu importante per il posizionamento.

99 ad ognuno il proprio gusto Questo implica che dobbiamo offrire pagine che targhettizzino al meglio le potenziali ricerche. Esistono vari tipi di ricerche, e per ognuna dobbiamo predisporre il giusto contenuto e proporre la corretta esperienza utente riseptto al target di riferimento.

100 Ricerca verso un percorso Visita ad una destinazione pre-definita e individuazione della URL corretta Le ricerche verso un percorso sono eseguite con l'intento di giungere direttamente ad un sito specifico. In alcuni casi, l'utente, non conoscendo la URL esatta del sito in questione, utilizza il motore di ricerca come una specie di "Pagine gialle" con l'obiettivo di essere traghettato (si spera) alla corretta destinazione. ad esempio cercare su google Facebook.

101 Ricerca di informazioni Ricerche per informazioni rapide Le ricerche di informazioni includono un gran numero di ricerche diverse: previsioni meteorologiche strada corretta per il proprio tragitto in macchina, ricerca del nome del giocatore di calcio con maggiori presenza in serie A Sono ricerche di natura non commerciale l'informazione stessa é il fine della ricerca, nessuna altra interazione é richiesta oltre al click e alla lettura dell'informazione.

102 Ricerche commerciali Individuazione di potenziali clienti e/o partner raccolta di informazioni strategiche sui concorrenti scoperta di alternative per potenziali transazioni future. Esempi di indagini commerciali possono essere: ricerca di partner e distributori ricerca di concorrenti ricerca di nuovi competitor sul mercato Ci permettono di studiare la concorrenza e capire i loro punti deboli (ed evitare gli stessi errori) e copiarne i punti di forza

103 Vediamo un esempio Utente: pescatore a mosca Obiettivo: acquisto di una canna marca GREY S 9 piedi Che tipo di ricerche potrà fare il nostro utente per arrivare al suo obbietivo specifico?

104 Prima ricerca canne da pesca SITO INUSABILE

105 Seconda ricerca vendita canne da pesca online good web design VS bad web design SITO USABILE ma TARGET SBAGLIATO

106 Terza ricerca vendita online canna mosca grey s good web design VS bad web design SITO USABILE e TARGET CORRETTO

107 Ricerche transazionali convertire è cio che conta di piu! Sono ricerche che dovrebbero convertirsi in una transazione economica. Ricerca di una pizzeria locale per una uscita acquisto online... ma anche completamento di una registrazione.

108 Le ricerche transazionali non richiedono necessariamente l'utilizzo della carta di credito o un trasferimento monetario. La registrazione gratuita per accedere agli archivi del "Gazzettino del Levante" la creazione di un account Gmail la ricerca del miglior ristorante messicano del quartiere sono tutte ricerche transazionali. L obbiettivo è l acquisizione e quindi la conversione.

109 Quindi, il punto non è comparire SEMPRE nelle ricerche, ma comparire SEMPRE rispetto alle ricerche che ci interessano. Se vendo un oggetto, cerchero di lavorare a favore della ricerca commerciale (vendita online, shop online, negozio online...) Se offro informazioni lavorero affinche il mio sito si posizioni su specifiche chiavi informative (opinioni su..)

110 ZMOT: ZERO MOMENT OF TRUTH good web design VS bad web design

111

112 Un esempio reale: il caso Floorwash Target: clienti privati, grandi industrie, opinioni L azienda aveva la necessità di targettizzare tre segmenti target: utenti privati settore industriale ricerca informazioni Community social ben sviluppata (social media marketing)