usabilità

Mail obbligatoria? Prima ci provo senza!

0.00 avg. rating (0% score) - 0 votes

Del perché si creda che gli utilizzatori di un servizio siano stupidi non c’è memoria storica. E’ da sempre così: chi progetta o sviluppa tende ad etichettare le persone come “utonti” (sì, la “o” è voluta) salvo poi commettere errori banali che complicano l’esperienza d’uso e riducono il tasso di conversione. La considerazione del titolo di questo post, sicuramente superficiale, è nata proprio dall’analisi di una mia dimenticanza.

Il fatto

Succede che pubblico la nuova versione di un sito che raccoglie diverse migliaia di iscritti al giorno, ma durante alcuni test mi segnalano che il form di registrazione non funziona correttamente su Google Chrome. Nello specifico il form è stato realizzato in Flash (per motivi storici che ora non sto a spiegare) e sembra che con il browser citato non sia possibile digitare il carattere “@” nel campo della mail. Piuttosto controproducente, no? 😉
Non c’è tempo di cercare soluzioni o di rifare i form in Flash, questo per via della necessità di un rilascio immediato e anticipato rispetto la scadenza (ricordate il discorso sullo stress della pubblicazione?). Con il gruppo di lavoro optiamo quindi per il workaround più veloce, cioè l’utilizzo della versione alternativa del form in HTML/CSS. Realizzato, testato, pubblicato.

Qualcosa non torna

Analizzando le statistiche del sito nelle ventiquattr’ore seguenti e confrontando i numeri con le nuove anagrafiche in DataBase si evince che ci sono più tentativi di registrazione per ogni utente registrato con successo. Indagando meglio scopriamo che non abbiamo inserito alcun controllo sui dati “lato client”, ma solo “lato server” (dannata fretta!). Cosa significa? Semplice: il form in questione conteneva una serie di campi pre-compilati tramite tendine select ad eccezione di uno, la mail, che le persone non riempivano con il loro indirizzo. Cliccando per procedere il sistema inviava i dati allo script il quale avvisava l’utente della dimenticanza, questo tornava indietro, riempiva il campo mail e procedeva, completando di fatto la registrazione.

Imparare dagli errori

Mea culpa: ho dimenticato di far sviluppare un controllo preventivo sui dati inseriti nel form, cosa che invece era presente nella versione in Flash. Detto questo cerco di vedere il bicchiere mezzo pieno – e svincolarmi con classe dalla dimenticanza 🙂 – aggiungendo che abbiamo inavvertitamente sottolineato un comportamento tipico: l’avversione nei confronti dei form da compilare e soprattutto del fatidico campo mail (l’oro del web).
Su circa 10.000 conferme/errori abbiamo circa 3.000 registrazioni a buon fine, significa che come minimo il 30% di chi ha compilato il form ha provato a proseguire senza inserire la propria mail. Insomma quando l’obbligatorietà del campo mail è poco chiara, nel dubbio, l’utente prova a non metterla. Allo stesso modo quando l’obbligatorietà di un dato non viene esplicitamente indicata, l’utente preferisce non riempire tale campo.

Da questo si deducono tre importanti insegnamenti:
1- quando l’inserimento di un dato è facoltativo conviene proprio non metterlo nel form (migliore esperienza utente, maggiore conversione, l’infinitesima percentuale di persone generose non offrirebbe alcun vantaggio)
2- se proprio bisogna inserire anche i campi facoltativi conviene indicare sempre e con estrema chiarezza quali sono invece obbligatori
3- in base all’obiettivo del form è bene inserire anche dei controlli sui dati “lato client”

Zzub: analisi sito Telecom Italia

0.00 avg. rating (0% score) - 0 votes

Disclaimer: pippone più noioso del solito, se si può. 😀 Ho partecipato ad una campagna di Zzub nella quale si richiedeva di navigare il nuovo sito di Telecom Italia per dare un giudizio personale, qualche feedback, suggerimenti e segnalare eventuali errori o imprecisioni (dannato fiscalino!). Oggi sono usciti i nomi dei vincitori: purtroppo per me non sono tra questi, ma complimenti a loro. Condivido con voi una parte degli appunti che avevo preso durante la navigazione del sito Telecom Italia ed inviato a Zzub… considerata l’entità del soggetto e la superficialità della mia analisi direi che non sono pochi, no?

Menu network

Il menu per l’accesso ai siti del network inizia con “TI Network” dove “TI” non sono puntate e quindi non identificano l’acronimo. Tuttavia, anche se lo fossero, potrebbero non essere chiari per chiunque e, in ogni caso, sarebbe necessario un piccolo sforzo di ragionamento. Dato che c’è spazio converrebbe includere la dicitura completa “Telecom Italia Network”, cosa che agevola anche l’identificazione e l’indicizzazione sui motori, essendo questa la prima parola valida della pagina (per posizione nel codice HTML).

Sempre in questo menu, ma questa volta a livello concettuale-grafico, la linguetta/tab che identifica il sito sul quale stiamo navigando è incoerente rispetto alla dimensione del menu stesso. Lo sfondo nero infatti dovrebbe essere largo tanto quanto la larghezza del browser in uso, pur lasciando centrati i contenuti, questo per rendere credibile la metafora della linguetta/tab.

Cambio lingua

Il menu in alto a destra per lo switch tra le lingue potrebbe essere più chiaro: “EN” e “IT” potrebbero diventare “ENG” e ITA”, oppure “English” e “Italiano” o, meglio ancora, essere sostituiti da una bandierina. Quest’ultima soluzione manterrebbe gli spazi e garantirebbe la comprensione a chiunque, compresi gli utilizzatori di tecnologie assistive grazie all’attributo ALT. Nel caso rimanessero testuali il carattere pipe “|”, utilizzato per separare le due lingue, trae in inganno la vista somigliando ad una lettera L minuscola o I  maiuscola: conviene quindi utilizzare un trattino “-“, un altro espediente grafico o nulla.

Dimensione caratteri

L’etichetta del link per variare la dimensione dei caratteri è sempre in inglese “text size” anche quando la lingua selezionata è l’italiano. Considerato poi il suo scopo, ovvero agevolare la visione dei caratteri per chi ha problemi di vista, non dovrebbe essere di colore grigio su sfondo bianco in quanto il basso contrasto la rende invisibile a questa tipologia di persone.

Cliccando sulle varie “A” per modificare la dimensione dei caratteri del sito succede che i testi nell’animazione Flash ed i menu non cambiano dimensione.

Modulo di ricerca

Cliccando subito sull’icona per avviare la ricerca, senza inserire alcun termine, il sistema effettua una ricerca per la keyword “cerca”. Dovrebbe invece generare un errore con una descrizione utile, in grado di guidare l’utente verso il corretto uso della ricerca.

Quando poi il sistema non trova risultati per una determinata chiave di ricerca mostra l’errore “Nessun risultato $keyword” che è decisamente migliorabile. Anche solo a livello di sintassi italiana con un “Non ho trovato risultati per la tua ricerca su ‘$keyword’, prova ad inserire un altro termine”.

Quando il sistema non trova risultati la colonna di sinistra sembra più corta in quanto non c’è testo nella colonna di destra (che ha grossomodo lo stesso colore di sfondo del sito).

Nella pagina che mostra i risultati della ricerca compare un altro form, identico a quello posizionato in alto a destra in ogni pagina del sito e con le stesse funzionalità: questo crea un dubbio nell’utente su quale sia giusto usare. Tra l’altro, nel caso non ci fossero risultati, solo il secondo contiene la chiave ricerca appena effettuata.

Nella colonna di destra, sotto la voce “Lingue”, compare “italian” invece di “italiano”.

Nella colonna di destra credo sia meglio scrivere “PDF – Portable Document Format” in quanto l’acronimo “PDF” è più conosciuto del suo significato.

Nella colonna di destra i numeri degli elementi risultati potrebbero essere allineati a destra evitando quindi la parentesi e rendendo più chiara la lettura di tutte le opzioni.

Nella colonna di destra l’attributo title dei link “filter results” è sempre in inglese anche navigando il sito in italiano.

Nella colonna di destra nell’etichetta “Tipo Documento” la “d” dovrebbe essere minuscola.

La paginazione dei risultati, in fondo alla pagina, è sempre in inglese anche navigando il sito in italiano.

Tra i risultati della ricerca si trovano anche risultati in lingua inglese pur navigando il sito in italiano.

Il permalink della ricerca ha un indirizzo URL poco comprensibile o indicizzabile, in questo senso se ci fossero degli URL tipo http://www.telecomitalia.it/tiportal/it/cerca/$keyword si potrebbe pensare anche ad un elenco delle parole più cercate in quanto identificherebbero un preciso bisogno degli utenti (e quindi anche degli utenti a venire).

Manca una funzionalità per la ricerca avanzata, ad esempio solo in una sezione del sito o per uno specifico contenuto.

La ricerca non offre i risultati ordinati per rilevanza e se lo fa non lo indica chiaramente, infatti cercando “offerte” non ottengo quello che mi aspetto. L’etichetta a sinistra di ogni risultato “HTML” non è comprensibile a molte persone, potrebbe invece essere modificata in “pagina”.

Animazione Flash

Nell’animazione principale mancano i “call-to-action”: non ci sono pulsanti nè messaggi che invitino all’azione (ad esempio un pulsante sulla foto tipo “Acquista ora” oppure “Scopri di più”). Anche se le immagini in generale sono sempre portatrici di clic in questo caso visitatori non sanno che cliccando sulla foto entreranno nella sezione apposita nè cosa succederà al loro clic.

Una delle slide previste nell’animazione Flash è un video che a sua volta contiene dell’audio che parte in automatico. Credo che la cosa possa spaventare alcuni visitatori del sito TI in quanto si trovano a visitare delle pagine all’inizio “silenziose”, ma dopo manciata di secondi, di colpo e senza preavviso “parlanti”. E’ vero che molti siti oggigiorno contengono elementi multimediali e che siamo abituati a situazioni simili, tuttavia in un sito corporate non mi aspetto per famigliarità di trovare una caratteristica del genere. Se si verifica che il maggior numero di accessi avviene in orario di ufficio è facile supporre che la cosa possa generare imbarazzo per alcuni utenti (ad esempio gli impiegati con le casse accese per altri motivi).

Link

Spesso mancano gli attributi title sui link, utili sia in ambito SEO che per i navigatori che possono sapere dove arriveranno cliccando su un determinato collegamento.

I titoli in home page, quelli neri nei 4 box, non sono cliccabili. Il link dell’ultimo box in home page è preceduto dal carattere “>” a differenza degli altri.

Il colore dei link non è omogeneo: a volte sono rossi e a volte sono azzurri anche per funzionalità identiche (cfr “Approfondisci” nei 4 box principali e “Approfondisci” nel CSR Online Award 2009).

Le due immagini “Network scuola impresa” e “Working Capital” non sono cliccabili a differenza di quelle presenti negli altri riquadri.

Menu footer

Il menu sembra essere dedicato al network invece che al sito del network che si sta visitando. I vari elementi delle liste menu non sono ben separati da spazi o elementi visivi, pertanto sembrano una frase unica piuttosto che un elenco di link.

Nella parte inferiore “Sitemap” e “Website Info” sono in lingua inglese invece che in italiano e in ogni caso la “I” di “Info” dovrebbe essere minuscola.

Sitemap

Alcune zone sono vuote, tipo “parla con noi”.

L’elenco non è ben indentato. Non si capisce come sono organizzate gerarchicamente gli elementi separati da pipe (alcuni poi sono addirittura su 2 righe quindi mancando l’indentazione complicano ulteriormente).

Metterei una riga di info sotto ogni link.

Javascript e Flash

Non è previsto un contenuto alternativo per i browser senza plug-in Flash, questo obbliga l’utente al download del plug-in per accedere ai contenuti relativi. Credo sia meglio permettere la visione delle informazioni e spingere all’aggiornamento. In ogni caso il messaggio che invita al download di Flash è in inglese nonostante stia navigando il sito in italiano ed il testo è piuttosto sterile e privo di informazioni per i non tecnici (ad esempio non viene detto che installare il plug-in è gratuito, semplice, etc).

Senza JavaScript non è possibile cambiare la dimensione dei caratteri del sito.

Navigazione

La maggior parte dei contenuti sono esterni al sito, pertanto potrebbe aver senso rendere più chiara l’icona presente a sinistra dei link, con l’aggiunta di un attributo title o in altro modo.

I link contestuali breadcrumbs non sono molto chiari, manca davanti la radice “Sei in”, e sono poco in vista. Inoltre in alcune sezioni non vengono riportate (es. Rassegna stampa), creando un problema per l’utente che ne ha fatto uso in tutte le altre pagine del sito.

Nella colonna di sinistra credo che abbia poco senso evidenziare il titolo della pagina in cui ci si trova a meno di, scelta più agevole, mostrare anche il resto del sottomenu allo stesso livello (es. in Privati – Fisso compare a sinistra solo il menu “Fisso” evidenziato in rosso, mentre avrebbe senso che ci fossero tutti gli altri figli gerarchici di “Privati”, ovviamente non evidenziati).

Varie (SEO, usabilità, etc)

La maggior parte degli URL del sito non sono SEO friendly e potrebbero invece essere ottimizzati (come anche gli URL delle ricerche). La cartella “tiportal” potrebbe essere evitata e comunque è diversa rispetto alla cartella in cui viene caricata la home page.

La favicon ha lo sfondo bianco invece che trasparente, su alcuni browser (come Firefox su Mac) si vede quindi un quadratino bianco in quanto lo sfondo del browser è grigio.

Il riquadro di Teleborsa in home page non ha titolo nè descrizione nè un suo riquadro che lo integri nell’interfaccia, risulta quindi estemporaneo, poco comprensibile e poco gradevole.

Nelle barre di scorrimento verticale, presenti in alcuni riquadri in home page, potrebbe non essere chiaro a tutto qual è la parte della barra da trascinare (io ad esempio mi sono posto la domanda ed ho usato la rotellina del mouse).

Non è stata pensata una pagina apposita per l’errore HTTP 404 che ora risulta essere quello generico di Apache.

Non esistono i documenti predefiniti per le cartelle, quindi richiamando ad esempio http://www.telecomitalia.it/content/tiportal/ ricevo un errore HTTP 403 non gestito.

Suppongo quindi che anche gli errori HTTP 500 etc non siano stati gestiti.

Manca il meta tag description in ogni pagina.

I title delle pagine non sono ottimizzati per i motori di ricerca nè per gli utenti, ad esempio – in quest’ultimo caso – quando entro in una sotto sezione nel titolo vedo solo il titolo di quella pagina, non anche quello dell’elemento padre (vedo ad esempio “Privati” invece di “Info & Assistenza – Privati”).

Il sito non risponde a telecomitalia.it, cioè senza il www davanti.

La validazione W3C per la sola home page genera 38 errori e 15 warning per l’HTML.

Semplice e stupido

0.00 avg. rating (0% score) - 0 votes

Quante volte ho sentito questa frase! La diceva un responsabile marketing americano con cui ho avuto modo di lavorare per qualche anno in riferimento al fatto che i servizi online devono essere così trasparenti da risultare banali (“Don’t make me think“, dicono). Che poi, anche e soprattutto per motivi contingenti e personali, è diventata in un certo senso una filosofia di vita.

E allora quando nell’aggregatore è comparso il post di Tambu ho pensato che non ci fossero parole migliori per descrivere come la penso su quest’argomento:

Ora, il fatto saliente è questo: non sarò un Dio dell’hacking, ma so leggere cinque guide, capire quali sono buone e quali no e so seguire le istruzioni passo-passo: a montare una ROM non ufficiale (magari la famosa CyanogenMod) ci metto un paio d’ore, a star tranquillo. Epperò non ne ho voglia, non ne ho più tanta voglia. Non ho più 15 anni e il tempo di passare una nottata a capire perché un driver non si caricava o a settare gli IRQ della scheda audio per far partire un gioco. Non ho voglia di infilarmi in un gorgo che mi porta via tempo, voglio semplicemente un telefonino da pigri: lo usi e ogni tanto compare il messaggio “c’è una nuova versione, la installo?” (che poi è esattamente quel che fa da sempre Google: mica ti chiedono di configurare nulla – vabeh, il minimo necessario – ti dicono di usare i prodotti e basta. Pensate un po’ se rilasciassero Gmail 3 ma il vostro fornitore di connessione a internet vi costringesse a usare sempre la 2!! ). Ho già un lavoro, un’attività in proprio, una famiglia e altri interessi per dovermi anche preoccupare di aggiornare il telefono.

Niente da fare: il tempo è importante e molte cose diventano secondarie. Le funzionalità, e in generale gli oggetti, non dovrebbero richiedere impegno o fatiche inutili, ma essere studiati solo per incentivarne l’uso. Basterebbe ricordarsi che sono le cose a lavorare al nostro servizio, non il contrario.

Sito web: ricerca per chiave parziale o per chiave esatta?

0.00 avg. rating (0% score) - 0 votes

Discutevo con un collega sulla modalità di ricerca che stiamo utilizzando per un sito web in lavorazione, nello specifico cercavamo di capire quale fosse il metodo corretto per semplificare la vita agli utenti offrendo loro i risultati migliori.

Due tipi di ricerca

Con ricerca per chiave parziale intendo quella in grado di restituire tutte le parole che contengono la chiave indicata, ad esempio cercando il termine “anno” potrei ottenere tra i risultati tutte le seguenti parole:
– anno, keyword uguale
annoverare, keyword all’inizio della parola (anno…)
pannolini, keyword in mezzo alla parola (…anno…)
capodanno, keyword alla fine della parola  (…anno)

Con ricerca per chiave esatta invece intendo quella in grado di recuperare esclusivamente le parole identiche alla chiave di ricerca, pertanto nell’esempio precedente otterrei solamente il primo risultato, “anno”.

Possiamo dire che la ricerca per chiave esatta restituisce sempre un sottoinsieme dei risultati della ricerca per chiave parziale, quindi un numero di risultati minore, ma perfettamente in linea con quanto cercato. Viceversa la ricerca parziale fornisce un numero di risultati maggiore però ad ampio spettro.

Lettere in legno (Scarabeo)

Qualche verifica

…Empirica: io. Ho provato ad analizzare il mio comportamento quando devo effettuare una ricerca. Su Google, ad esempio, cerco sempre con chiavi esatte (tranne in rari casi), invece quando ho davanti un testo e desidero cercare qualcosa lo faccio quasi sempre con chiavi parziali.

…Oggettiva: i motori. I form presenti su tutti i motori offrono come modalità predefinita la ricerca per chiave parziale, fermo restando che se trovano una corrispondenza esatta le danno maggior valore in termini di qualità del risultato. Sulle chiavi multiple poi la cosa è più chiara in quanto, per indicare la ricerca con chiave esatta, necessitano della sintassi con le doppie virgolette.

…Statistica: gli utenti. Non ho moltissimi dati, ma sulla base di 25.000 ricerche effettuate direttamente sul mio blog (per un totale di 3.000 chiavi diverse) scopro che nella top 50 per frequenza ci sono solamente 3 chiavi parziali.

Conclusioni

Probabilmente non esiste una risposta oggettiva e il metodo migliore dipende dal singolo caso (con propensione sulla ricerca per chiave esatta), però mi piacerebbe sentire qualche altra esperienza ed altri pareri in merito. Voi cosa dite?

ExperienceCamp: appunti dallo IULM

0.00 avg. rating (0% score) - 0 votes

A futura memoria, e con un po’ di ritardo, riporto alcuni degli appunti e spunti segnati durante l’Experiencecamp 2009 di Milano:

Experience Camp Milano 2009 IULM

 

Motivazioni Relazionali (ex Design Motivazionale)

Gianandrea Giacoma

  1. Competizione
    Difficile da gestire, es. Digg i top diggers sono stati accusati di manipolare i risultati e Digg ha dovuto rimuovere la pagina relativa alla classifica.
  2. Eccellenza
    Egocentrismo, autostima, bisogno di conferma delle proprie capacità, bisogno di approvazione. E’ diversa dalla competizione che invece rappresenta il desiderio di conquista e di vittoria, mentre l’eccellenza è il bisogno di riconoscimento (es. sistema di voto di Digg, semplice, ha solo voti positivi che però indirettamente “seppelliscono” le notizie meno interessanti.
  3. Curiosità
    Bisogno di conoscenza e controllo, istinto esplorativo. Sistema ricerca e gioco appagano questa motivazione es. ffffound! che associa a livello visuale i risultati e invita a seguire anche altre strade, immagini, collegamenti a persone affini.
  4. Appartenenza
    Le raccomandazioni rafforzano lo status e creano un reciproco riconoscimento, es. Linkedin.

La base del social network è quella di dare la paternità dei contenuti ed esplicitare i 6 gradi di separazione (grazie a te io posso conoscere il tuo network e tutto il mondo).

Slide

Un amore di hardware

Leandro Agrò

  • integrare gli oggetti con i social network, con la mobilità avanzata e con la internet degli oggetti.
  • instructables sito che da’ istruzioni per costruire cose http://www.instructables.com/ .
  • web1: dati in remoto, web2: applicazioni in remoto, web 3 o internet of things: hardware delocalizzati che creano network misti persone/macchine.
  • i forum hanno un tasso di mortalità alto, la gente vuole posti dove condividere.
  • “utenti lo metto tra virgolette perchè ormai non è più un termine valido”.

Slide

Diritto d’autore

Spataro

  • l’autorizzazione a voce è fasulla, per la legge italiana esiste solo la forma scritta
  • il diritto d’autore è automatico e inizia da quando l’autore crea non da quando ha l’idea.
  • consiglia di leggere le condizioni d’uso e la cessione dei diritti quando si carica un contenuto su un sito di proprietà altru. Ad eempio YouTube si appropria di tutti i diritti su ogni video caricato. Nella progettazione di un servizio web conviene prevedere per evitare le contestazioni.
  • Es. su Street View non c’è trattamento illecito se una persona compare nelle foto, quindi se si desidera la cancellazione basta chiederlo gentilmente senza indicare riferimenti di legge perché non esistono. L’illecito infatti prevede la rimozione e anche il risarcimento per danni.
  • “Concessione d’uso gratuito non esclusivo” significa che il servizio è precario e non avendo pagato per ottenerlo lo possono fermare in qualsiasi momento senza nulla dovere, come Facebook.

 

1 2 3 4 5 6  Torna su