Esercitazione 1 - Usabilità Blog "www.splinder.com"

Riccardo Pier Camplani - Giacomo Fosci - Andrea Puddu

Usabilità del sistema di creazione, pubblicazione e gestione blog www.splinder.com

1. 1. Introduzione

a. L’usabilità

b. Individuazione piattaforma di blog da esaminare

c. Individuazione fasi operative

2. 2. Valutazione euristica

3. 3. Passeggiata cognitiva

a. Iscrizione al servizio

i. Accesso

ii. Registrazione

b. Creazione blog

c. Creazione e gestione post

i. Inserimento titolo

ii. Inserimento prima immagine

iii. Inserimento testo

iv. Inserimento video

v. Inserimento seconda immagine

vi. Modifica post

vii. Help

4. 4. Utenti e test

a. Scheda utenti

b. Esecuzione test

5. 5. Risultati del test e statistiche

6. 6. Conclusioni e possibili soluzioni

1. INTRODUZIONE

a. L'Usabilità

L’Usabilità è definita dall'ISO come l'efficacia, l'efficienza e la soddisfazione con le quali determinati utenti raggiungono determinati obiettivi in determinati contesti. In pratica definisce il grado di facilità e soddisfazione con cui l'interazione uomo-strumento si compie.

Il termine Usabilità infatti non solo lo si può ritenere onnicomprensibile, ma è anche entrato nell’uso comune. Inoltre l’omnicomprensibilità di un sito è ciò che essa predica, e per questo appare opportuno
usare tale neologismo.

b. Individuazione della piattaforma di blog da esaminare

Abbiamo scelto come sistema di gestione e creazione di blog la piattaforma di blog Splinder, in quanto tutti e tre i valutatori del gruppo non erano a conoscenza di tale servizio.
La piattaforma Splinder, presente dal 2001 sul Web, avente come target principale il mercato italiano conta già circa 450 mila utenti registrati.
Splinder offre 2 modalità di accesso, una free e una a pagamento che offre un maggiore spazio disco e alcune funzioni dedicate.

c. Individuazione fasi operative

Lo scopo del nostro lavoro è quello di valutare l'Usabilità di un sistema che permetta la creazione e gestione di un blog, nello specifico di quello fornito dal sito Web www.splinder.com.
Le fasi operative della valutazione saranno:

• Individuazione della piattaforma di blog da esaminare
• Passeggiata cognitiva
• Individuazione e analisi dei partecipanti al test
• Esecuzione del test
• Analisi dei risultati
• Iscrizione alla piattaforma
• Creazione e Gestione del Blog
• Creazione e Gestione del Post
• Statistiche test e utenti
• Tabella soluzioni
• 
  

Catalogazione gravità problemi

I problemi che gli utenti hanno riscontrato durante l’esecuzione del test son stati classificati in 3 tipologie:

Problema superficiale: non costituisce un ostacolo rilevante per lo svolgimento dell’azione dell’utente.

Problema importante: ostacola l’operato dell’utente in maniera rilevante. L’utente in difficoltà è portato a pensare più a “come effettuare l’azione da svolgere” piuttosto che “al compito che stava svolgendo”.

Problema critico: problema irrisolvibile che porta l’utente a rinunciare all’operazione che stava svolgendo.

2.VALUTAZIONE EURISTICA

Affinché un sistema risulti usabile deve seguire determinati principi, le linee guida a cui faremo riferimento fanno parte dei 10 punti di Nielsen.

1. Visibilità dello stato del sistema: è molto importante mantenere gli utenti informati sullo stato delle loro azioni. Il sistema dovrebbe sempre tenere informati in tempo ragionevole gli utenti su quello che succede per mezzo di un feedback.
2. Corrispondenza tra il sistema ed il mondo reale: è sempre bene conoscere ed utilizzare il linguaggio degli utenti finali. Questo accorgimento assicura una migliore comprensione e memorizzazione dei contenuti a chi visita il sito ed evita che l'utente interessato ad informazioni esca dal sito senza averle visionate, perché ingannato da una terminologia e da immagini che non riesce ad associare alle informazioni che sta cercando.
3. Dare all'utenza controllo e libertà: in genere, è bene lasciare agli utenti il controllo sul contenuto informativo del sito, permettendo loro di accedere agevolmente agli argomenti presenti e di navigare tra essi, a seconda delle proprie esigenze. E ' fondamentale segnalare i link in modo adeguato, senza ambiguità di significato e posizionandoli nella pagina dove l'utente si aspetta di trovarli rispetto alle pagine precedenti.
4. Consistenza: è fondamentale riportare in ogni pagina elementi grafici sempre uguali, che riconfermino all'utente il fatto che si sta muovendo all'interno dello stesso sito. Se, ad esempio, passando da una pagina all'altra, gli utenti incontrassero uno stile grafico diverso da quello della pagina appena visitata, sarebbero costretti ad analizzare ogni oggetto presente per verificare se si trovano ancora nello stesso sito (e se sì, in quale settore), o se ne sono usciti per errore.
5. Prevenzione dall'errore: occorre evitare, di porre l'utente in potenziali situazioni critiche o di errore ed assicurare la possibilità di uscirne tornando alla stato precedente. E ' bene segnalare chiaramente in quali pagine conducono i link e cosa vi si troverà, così da non generare false aspettative, poi disilluse, o confusione nella scelta del link da visitare, rendere inoltre sempre disponibili le funzioni per uscire dal programma o per ritornare alla homepage.
6. Riconoscimento più che ricordo: è consigliata la scelta di layout semplici e schematici, per facilitare l'individuazione e la consultazione delle informazioni sulle pagine. E ' bene quindi segnalare sempre chiaramente i link, ed altri elementi utili alla navigazione, per evitare che gli utenti debbano "scoprirli" da soli ogni volta che entrano nel sito.
7. Flessibilità ed efficienza: è bene dare agli utenti la possibilità di una navigazione differenziata all'interno del sito, a seconda della propria esperienza nell'utilizzo del Web e della conoscenza del sito stesso. Gli utenti non esperti, ad esempio, amano essere guidati passo per passo, mentre gli utenti più esperti preferiscono utilizzare scorciatoie, delle quali anche utenti non esperti, man mano che aumenta il loro livello di esperienza, possono usufruire.
   Un altro aspetto dell'efficienza è anche il tempo di risposta del sistema alle azioni dell'utente, problema che nelle applicazioni web è tra i più critici. Nei siti web, il tempo massimo di attesa non deve superare i 10 secondi, tempo oltre il quale gli utenti non mantengono più l'attenzione sul dialogo e iniziano a passare ad un altro sito.
8. Estetica e progettazione minimalista: le pagine di un sito web non dovrebbero contenere elementi irrilevanti o raramente utili. Gli elementi grafici inseriti nelle pagine se troppo colorati, elaborati e di dimensioni troppo grandi rispetto ai testi, rischiano di mettere in secondo piano il contenuto informativo della pagina: gli utenti saranno infatti troppo impegnati ad individuare il significato delle immagini e a cercarne la coerenza con i restanti elementi del sito, per dedicarsi all'analisi dei contenuti informativi delle pagine.
9. Aiutare gli utenti a riconoscere, diagnosticare ed uscire dalle situazioni di errore: i messaggi di errore dovrebbero indicare con precisione il problema e suggerire una soluzione costruttiva. Ad esempio, qualora l'utente non avesse compilato correttamente uno o più campi a disposizione sulla pagina, il messaggio successivo all'invio dovrebbe segnalargli quali errori sono stati commessi, cosi da permettergli di recuperare con facilità all'invio successivo.
10. Aiuto e documentazione: è meglio che il sistema si possa usare senza documentazione, ma questa resta necessaria. L'aiuto dovrebbe essere facile da ricercare e focalizzato sulle attività dell'utente, elencare azioni concrete eseguibili e mantenere dimensioni contenute.

3. PASSEGGIATA COGNITIVA

Tramite la passeggiata cognitiva (cognitive walkthrough) saranno riscontrati i principali errori di progettazione dell’interfaccia. L’analisi è stata divisa in 3 sezioni principali:

a. Iscrizione al servizio

i. Accesso

ii. Registrazione

b. Creazione blog

c. Creazione e gestione post

i. Inserimento titolo

ii. Inserimento prima immagine

iii. Inserimento testo

iv. Inserimento video

v. Inserimento seconda immagine

vi. Modifica post

vii. Help

a. Iscrizione al servizio

i. Accesso

L’area di login è posta in alto a destra, come spesso accade in molti siti che pretendono l’iscrizione al servizio, ciò è abbastanza visibile e intuitivo. Il link alla registrazione risulta esser visibile dalla homepage.

i. Registrazione

Per registrarsi viene richiesto l’inserimento di determinati valori in una form sufficientemente semplice e di immediata comprensione. I campi da riempire sono:

- User, deve avere una lunghezza compresa tra i 5 e i 15 caratteri alfanumerici.

- E-mail, è richiesto l’inserimento 2 volte.

- Password, deve avere una lunghezza compresa tra gli 8 e i 10 caratteri, ciò potrebbe produrre una difficoltà per l’utente nella scelta di una parola facilmente memorizzabile.

I dettagli per l’inserimento dei valori son visibili, ma non troppo, in quanto l’attenzione dell’utente che effettua l’iscrizione è focalizzata sui campi di inserimento. Inoltre le informazioni fornite risultano esser troppe e viene utilizzato un font troppo piccolo. Meglio poche ma più visibili (esempio eclatante e-mail).

Per completare la registrazione è richiesto spuntare alcune opzioni, operazione consueta quando si effettua una registrazione a un nuovo servizio; sono 2 condizioni su 3 disponibili quelle obbligatorie, di cui solo una è evidenziata con un font in grassetto e con un differente colore rispetto al resto del testo.

La ricezione dell’e-mail per la conferma dell’avvenuta registrazione è immediata, seguendo il link di attivazione si viene automaticamente indirizzati alla pagina del profilo personale che permette di modificare il proprio profilo. Non è ben chiaro se le informazioni da inserire sono obbligatorie o opzionali, non viene esplicitato da nessuna parte.

Nell’inserimento della nazione, l’Italia è al primo posto della “select”, l’utente che non la nota è portato ad effettuare uno scroll verticale in quanto le restanti nazioni risultano esser ordinate alfabeticamente, non trovandola nella posizione sperata.

Per quanto riguarda questo task non son stati riscontrati problemi importanti e critici ma solo alcuni problemi classificati come superficiali.

b. Creazione Blog

A seguito dell’iscrizione l’utente che vuole effettuare la creazione di un nuovo blog potrebbe esser disorientato poiché l’indicazione riguardante la pagina attuale è troppo piccola e mal evidenziata e può non notarla a causa delle molteplici informazioni e link alle sezioni presenti nella pagina (punto 8 Nielsen).

La dicitura “Ricordati di disabilitare i feed altrimenti i tuoi contenuti saranno comunque visibili da un aggregatore” è ambigua in quanto l’utente può non sapere cosa siano i “feed” e quindi non sapere neanche in che modo si disabilitano, costituisce un problema superficiale (punto 2 Nielsen).

La dicitura di aiuto riferita alla URL “Questo è l'indirizzo del tuo blog” non è completa in quanto non vengono indicati i caratteri che non possono esser inseriti, questo può generare un errore.

Dopo aver cliccato sul pulsante "Crea" il browser reindirizza l’utente alla pagina della scelta del layout.

La pagina è di facile utilizzo, un appunto che si può fare riguarda il pulsante per la scelta del layout, il quale utilizza la dicitura inglese "Click to choose" , è anomalo in quanto rappresenta l’unico elemento scritto in lingua inglese che potrebbe non essere compreso da un utente che conosce solo l’italiano (punto 2 Nielsen).

La gestione per l’organizzazione dei post è semplice, l’unica pecca son le scritte che utilizzano un font di piccole dimensioni.

Le altre operazioni eseguibili riferite al blog non sono intuitive, essendo delle operazioni avanzate dedicate ad un utente esperto.

Nel task 2 i maggiori problemi riscontrati son di livello superficiale, nessun problema critico ne importante.

c. Creazione e gestione post

i. Inserimento titolo

Risulta visibile all’interno dell’interfaccia messa a disposizione.

Il passaggio dal box dedicato al titolo alla area dedicata all’inserimento del testo può diventare lunga se si vuole utilizzare solo la tastiera, in quanto non sono stati messi i tabindex; premendo tab dal box titolo si viene portati su aggiungi foto e non sull’area dedicata al testo; ergonomicamente scomodo in quanto si deve utilizzare il mouse, o premere tab per 6 volte prima di giungere al testo.

ii. Inserimento prima immagine

Son possibili due modalità di inserimento, entrambe molto visibili (caricamento da remoto e inserimento dell’URL dell’immagine) ma possono sorgere i seguenti problemi:

· Visivamente potrebbe essere difficile comprendere la differenza tra "aggiungi immagine" "inserisci/modifica immagine" .

· Caricamento immagine:

ü La pubblicità presente nella finestra di pop-up che consente il caricamento dell’immagine rende la pagina molto fitta di contenuti (punto 8 Nielsen), ciò potrebbe portare l’utente a non leggere i suggerimenti che vengono proposti per il caricamento, non notando così la scritta che informa sulle dimensioni massime dell’immagine e sul tipo che può essere caricato.

ü La scelta del percorso dell’immagine dal pc è abbastanza intuitiva, ma il messaggio d’errore generato in caso di inserimento di file non valido non è preciso in quanto riporta tale frase: “Stai provando a caricare un file non valido, oppure il file che stai provando a caricare e' piu' grande di 15 MB.” Tramite tale informazione non si ha la certezza che l’errore dipenda dal formato del file o dalla dimensione dello stesso (punto 9 Nielsen), allo stesso tempo tramite l’utilizzo del colore rosso per il font la notifica risulta esser evidente.

• Vi è inoltre un problema riguardante l’accettazione delle condizioni sui diritti necessari a pubblicare i file su Internet, in quanto, nonostante ci sia un checkbox con a lato la scritta in rosso “ATTENZIONE!”, l’utente potrebbe non essere portato a spuntare la checkbox stessa, il messaggio d’errore generato risulta esser chiaro e evidenziato tramite l’utilizzo del colore rosso.

Se la procedura di inserimento è andata a buon fine si viene indirizzati in una finestra di dimensioni fisse nella quale:

C’è un errore grammaticale in quanto viene riportato questo messaggio “Il Foto è stato creato.”

• La casella di testo dove modificare il titolo della foto è sovrapposta con la casella di testo dei tags.

• E’ poco intuitivo comprendere cosa siano i tags, in quanto viene impostata una casella di testo e sotto una lista di checkbox che corrispondono agli interessi che sono stati inseriti in fase di iscrizione (punto 6 Nielsen).

• La dimensione della finestra aperta è troppo piccola e non viene visualizzato il pulsante “salva modifiche”, è necessario uno scroll verticale per notarlo, questo problema potrebbe portare l’utente a non capire cosa fare, potrebbe allora cliccare su "Aggiungi" e ritornare alla pagina di inserimento. Il pulsante in realtà serve per salvare la descrizione, l’eventuale modifica del titolo e l’inserimento dei tags, ma non è comprensibile in quanto potrebbe dare l’idea che serva per il salvataggio dell’immagine stessa (punto 1 Nielsen).

• Dal link "Post" è possibile visualizzare la sezione in cui si inseriscono le immagini all’interno del post. Tale sezione prevede prima la scelta dei parametri di formattazione dell’immagine (ossia l’allineamento e la grandezza), e poi l’inserimento effettivo dell’immagine avviene tramite un click sull’anteprima dell’immagine appena caricata (punto 1 Nielsen).

• Non è presente un pulsante “Inserisci”. L’ordine delle operazioni trae in inganno l’utente che potrebbe voler prima scegliere l’immagine e poi darle una formattazione. Se eseguisse tale operazione l’immagine verrebbe inserita senza la formattazione desiderata e l’utente sarebbe portato alla modifica della stessa dall’editor di testo.

• L’immagine inserita nell’editor di testo è di difficile formattazione in quanto, se selezionata, non è possibile centrarla coll’ opzione "Centra" . L’unico modo è quello di cancellare l’immagine, rientrare in “aggiungi immagine” che ti reindirizza nella sezione “Post” (ossia inserisci immagine nel post) ed effettuare le operazioni nell’ordine corretto (punto 2 Nielsen).

• Un’altra possibilità è quella di cliccare col tasto destro del mouse sull’immagine e andare su “proprietà immagine”. Viene aperta una finestra in pop-up (sempre che il browser sia abilitato a farlo, Mozilla ad esempio non lo permette) nella quale si verificano le seguenti complicazioni:

a. Le dimensioni dell’immagine possono creare dei problemi, in quanto è possibile settare una dimensione enorme, apparentemente infinita che può portare l’immagine a diventare una serie di “rettangoli neri” di grosse dimensioni.

b. E’ necessaria la conoscenza del linguaggio di mark-up HTML in quanto ci sono dei campi come style, hspace, vspace (punto 2 Nielsen).

c. E’ possibile da qui però modificare l’allineamento, centrare l’immagine e vederne un’anteprima.

• Immagine da link

Richiede l’inserimento dell’URL dell’immagine e presenta gli stessi problemi di formattazione elencati per il caso precedente.

iii. Inserimento testo

L’inserimento del testo risulta esser banale per chiunque abbia una minima dimestichezza con un comune editor di testo, e il suo utilizzo appare fruibile e immediato anche per un utente novizio.

iv. Inserimento video

Le operazione che possono essere effettuate per inserire un file video sono:

a) Inserimento del codice dell’oggetto in embedded (ossia inserendolo nel codice html del post), si riscontrano i seguenti problemi:

• Un utente che non conosce l’html si troverà spiazzato vedendo il codice in quanto gli risulterà incomprensibile e non saprà dove inserirlo in modo che il video risulti in una determinata posizione (punto 2 Nielsen).

• Inoltre potrebbe rischiare di inserirlo in una posizione sbagliata all’interno del codice compromettendo la visualizzazione anche di altri elementi del post.

• Un utente più avvezzo al codice html risulterebbe confuso in quanto il codice che gli si presenta alla visualizzazione tramite il tasto "codice" dell’editor risulta essere poco pulito.

Può comunque non risultare palese che l’oggetto video vada inserito direttamente nel codice e che non sia presente una facility per un utente non esperto(punto 2 Nielsen).

b) Inserimento tramite l’opzione "aggiungi video" : l’errore può non risultare evidente in quanto la scritta nella parte superiore riferita a ciò che bisogna fare in quella pagina è sempre piccola e mal evidenziata, inoltre se si mette il codice dell’oggetto nel campo “percorso del file” il messaggio d’errore “Stai provando a caricare un file non valido, oppure il file che stai provando a caricare e' piu' grande di 15 MB.” risulta essere ambiguo perché l’utente può pensare che sia dovuto alla dimensione dell’oggetto che sta inserendo (punto 5 Nielsen).

c) Inserimento tramite oggetto flash: un utente, se pur esperto di Internet, non avendo mai realizzato un blog può pensare che l’oggetto video, essendo un contenuto flash, vada inserito tramite il pulsante "inserisci/modifica oggetto flash" presente nella barra degli strumenti dell'editor. Effettuata tale operazione, l'utente può risultare disorientato dal fatto che il box dell'oggetto flash venga effettivamente inserito nel post, ma contemporaneamente come risultato abbia un oggetto flash non funzionante.

v. Inserimento seconda immagine

Durante la fase d’inserimento del secondo file di tipo immagine i problemi elencati per l’inserimento precedente continuano a sussistere, però grazie al fatto che lo studio dell’interfaccia è già stato eseguito il compito risulta esser più semplice e veloce.

vi. Modifica post

Per modificare un post, dopo essersi loggato, bisogna selezionare l’opzione “Edita” dal sottomenu “Blog”. Le opzioni son quelle di aggiorna e eliminazione del post, entrambe facilmente visibili.

L’opzione elimina chiede conferma prima di effettuare l’effettiva eliminazione del post.

L’opzione aggiorna indirizza l’utente alla pagina per la modifica del post. Tramite l’opzione “pubblica post” vengono effettivamente salvate le modifiche.

vii. Help

Nella pagina principale il collegamento all’help è nel footer, si viene reindirizzati in una pagina, “il manuale di splinder” che da una panoramica su tutte le funzionalità sottoforma di post suddivisi in argomenti e una guida generale molto particolareggiata.

Non è una buona idea che l’help non sia ben visibile (punto 10 Nielsen).

Il manuale è impostato come un elenco in ordine alfabetico di argomenti a cui vengono associati dei tag.

La casella per inserire una ricerca all’interno della sezione manuale è ben visibile, ma non è ben specificato se si sta effettuando una ricerca all’interno del manuale o nell’intero sito. I risultati della ricerca son insoddisfacenti in quanto a parola chiave specificata il sistema risponde con argomenti poco correlati tra loro.

La pagina manuale/help presenta al suo interno troppe informazioni che disorientano l’utente (1° principio di Norman – Fornire visibilità … In ogni artefatto tutte le parti funzionali devono essere ben visibili così come

devono essere visibili le azioni disponibili. Od anche, il numero delle funzioni disponibili non deve superare eccessivamente il numero dei comandi utilizzabili …). Dovrebbe infatti esser caratteristica principale dell’help quella di aiutare l’utente a trovare nel modo più rapido e semplice la risposta al suo problema.

L’unico modo per ottenere la soluzione al quesito che si è posto l’utente è trovare il post all’interno del manuale che contenga come tag associato al post un tag pertinente al problema posto dall’utente.

Tale metodo è poco pratico e veloce in quanto son presenti molte informazioni e male organizzate.

Non son presenti collegamenti all’help nelle altre pagine e finestre del sistema, bensì solo nella pagina iniziale.

4. UTENTI E TEST

a. Schede utenti

Per valutare l'usabilità del servizio è stato effettuato un test su un campione di 5 studenti in possesso di laurea triennale in informatica. Il campione ha svolto il test all'interno del Laboratorio CATTID dell'università degli studi di Roma - "La Sapienza".

Descrizione del profilo dei singoli componenti del campione.

Utente 1

Età: 23

Sesso: M

Professione: Studente, specialistica Informatica

Familiarità con i blog: “So cosa sono ma non li frequento abitualmente”

Conoscenza di piattaforme per la creazione di blog: Si: myspace

Mai inserito un file video: Si

Mai inserito un immagine: Si

Esperienza nell’ uso di CMS: No

Esperienza nell’ uso di HTML: Si

Hai mai utilizzato un editor di testo: Si

Con che frequenza utilizzi:

Internet: Sempre

email: Spesso

Corsi e-learning: Mai

Lettore CD: Spesso

Lettore DVD: Spesso

Utente 2

Età: 23

Sesso: M

Professione: Studente, specialistica Informatica

Familiarità con i blog: “So cosa sono ma non li frequento abitualmente”

Conoscenza di piattaforme per la creazione di blog: Si: Tiscali

Mai inserito un file video: Si

Mai inserito un immagine: Si

Esperienza nell’ uso di CMS: Si, Joomla

Esperienza nell’ uso di HTML: Si

Hai mai utilizzato un editor di testo: Si

Con che frequenza utilizzi:

Internet: Sempre

email: Sempre

Corsi e-learning: Poco

Lettore CD: Poco

Lettore DVD: Poco

Utente 3

Età: 23

Sesso: M

Professione: Studente, specialistica Informatica

Familiarità con i blog: “So cosa sono ma non li frequento abitualmente”

Conoscenza di piattaforme per la creazione di blog: Si: Tiscali

Mai inserito un file video: No

Mai inserito un immagine: Si

Esperienza nell’ uso di CMS: Si, Moodle

Esperienza nell’ uso di HTML: Si

Hai mai utilizzato un editor di testo: Si

Con che frequenza utilizzi:

Internet: Sempre

email: Sempre

Corsi e-learning: Mai

Lettore CD: Poco

Lettore DVD: Spesso

Utente 4

Età: 23

Sesso: M

Professione: Studente, specialistica Informatica

Familiarità con i blog: “So cosa sono ma non li frequento abitualmente”

Conoscenza di piattaforme per la creazione di blog: No

Mai inserito un file video: No

Mai inserito un immagine: No

Esperienza nell’ uso di CMS: No

Esperienza nell’ uso di HTML: No

Hai mai utilizzato un editor di testo: Si

Con che frequenza utilizzi:

Internet: Sempre

email: Sempre

Corsi e-learning: Mai

Lettore CD: Poco

Lettore DVD: Poco

Utente 5

Età: 26

Sesso: M

Professione: Studente, specialistica Informatica

Familiarità con i blog: “So cosa sono ma non li frequento abitualmente”

Conoscenza di piattaforme per la creazione di blog: No

Mai inserito un file video: No

Mai inserito un immagine: No

Esperienza nell’ uso di CMS: No

Esperienza nell’ uso di HTML: Si

Hai mai utilizzato un editor di testo: Si

Con che frequenza utilizzi:

Internet: Sempre

email: Sempre

Corsi e-learning: Mai

Lettore CD: Spesso

Lettore DVD: Poco

Tra i partecipanti al test, 4 hanno un età di 23 anni mentre un componente ha un età di 26 anni, son tutti studenti del corso di laurea in Informatica. Hanno tutti una buona familiarità con il computer e con Internet, per quanto riguarda i blog, tutti hanno affermato di conoscerli e sapere di che si tratta, ma solo uno di essi (20%) ha avuto una precedente esperienza di creazione blog, mentre altri 2 componenti hanno creato un blog per scopi didattici.

a. Esecuzione test

Il test sottoposto al campione prevedeva l'esecuzione di 3 task principali, ovvero:

• Iscrizione al sito www.splinder.com;
• Creare un nuovo blog;
• Creare un post che avesse la seguente struttura:

5. RISULTATI DEL TEST E STATISTICHE

Al termine del test, si son analizzati i video di ogni componente del campione che ha effettuato il test, e nello specifico analizzando come son stati eseguiti i seguenti task:

- Iscrizione alla piattaforma
- Creazione e Gestione del Blog
- Creazione e Gestione del Post

Il test effettuato sul campione ha portato i seguenti risultati:

Per quanto riguarda il task 1 (iscrizione al servizio) il campione non ha riscontrato nessuna difficoltà evidente.

Il task 2, la creazione del blog, non ha evidenziato grossi problemi.
Per quanto riguarda il task 3 (creazione e gestione del post), l’80% del campione ha trovato chiare le specifiche per accedere al servizio e hanno trovato utili i suggerimenti proposti dal sistema.

Il 100% del campione ha trovato facile l'utilizzo dell'editor di testo messo a disposizione dal servizio, definendolo di facile comprensione e intuitivo.

Considerando l'inserimento di un immagine secondo le specifiche richieste all'interno del post si sono ottenuti i seguenti risultati:

I maggiori problemi son stati di comprensione su come inserire l'immagine appena caricata all'interno del post. Due elementi del campione hanno avuto problemi in quanto il sistema prevede 2 modalità differenti per l'inserimento delle immagini.

Per rendere conforme il post alle specifiche richieste son state ripetute alcune operazioni più di una volta, nello specifico:

Le maggiori difficoltà incontrate dai partecipanti al test son state nell'inserimento del file video, del campione solo un componente su 5 è riuscito a inserire il video all'interno del post in un tempo ragionevole.

Sarà ora mostrato il risultato dei task eseguiti dagli utenti:

Utente 1

Titolo: SI

Testo: SI

Immagini: SI

Video: SI

Formattazione richiesta: Testo, Immagini, Video SI

L’utente 1 nell’effettuare la registrazione trova i maggiori problemi nella compilazione dei campi password, in quanto non è immediata l’operazione di ricerca di una parola adatta a specifiche così restrittive (8-10 caratteri). Cerca di individuare i campi obbligatori per completare la fase di registrazione ma questi, secondo l’utente 1, non vengono evidenziati.

Durante l’inserimento dell’url del blog immette caratteri non ammessi dal sistema, poiché questi non vengono esplicitati nell’help fornito per la compilazione della pagina; solo dopo aver premuto il bottone “crea” viene segnalato il pattern di caratteri utilizzabili per il nome.

L’utente 1 non notando le icone per l’inserimento di file multimediali utilizza l’inserimento fornito dall’editor. Trova difficoltà nel capire come inserire la foto, infatti cerca di inserire un’immagine presente in memoria, non ci riesce e decide di copiare l’url di un immagine on-line.

Per l’inserimento del video l’utente 1 prova a inserirlo come oggetto flash, specificando l’url della pagina relativa al video di youtube, tentativo non riuscito. Come secondo tentativo ritenta di utilizzare l’oggetto flash inserendo il codice embed fornito da youtube come codice flash, anche questo tentativo non va a buon fine. Infine dopo aver controllato praticamente tutte le icone dell’editor trova quella relativa alla modifica del codice, inserisce quindi l’oggetto embed all’interno del codice; passa alla visualizzazione classica e non ottenendo nessun feedback sull’avvenuto inserimento pensa di non esserci riuscito, ritenta con il pulsante per il caricamento dei file multimediali presenti in memoria ma capisce che non è l’operazione corretta (non rispetta il 4° principio di Norman – Fornire un feedback … Chiunque interagisca con un sistema dovrebbe sapere in qualsiasi momento, e in modo chiaro, cosa sta succedendo e soprattutto se la sua azione ha avuto l’effetto desiderato …).

Decide di visionare l’anteprima del post accorgendosi che il video è effettivamente presente.

L’inserimento dell’immagine 2 avviene con le stesse modalità dell’inserimento della prima immagine.

Statistiche utente 1

task	Tempo (min:sec)
Iscrizione su splinder	04:10
Creazione blog	02:40
Inserimento immagine 1	02:00
Inserimento testo	00:30
Inserimento immagine 2	00:20
Inserimento video	07:00
Tempo totale	16:00

Statistiche Generiche utente 1

Operazione	Frequenza
Mouse click	257
Screen text	16875
Keystrokes	539

Utente 2

Titolo: SI

Testo: SI

Immagini: SI

Video: NO

Formattazione richiesta: Immagini SI – Testo NO

L’utente 2 ha riscontrato dei problemi con l’inserimento della password, in quanto ritiene che un range così ristretto (8-10 caratteri) renda l’individuazione di una password facilmente memorizzabile un’operazione ostica.

Per l’inserimento dell’immagine 1 l’utente 2 carica due volte la stessa immagine interpretando male l’opzione di caricamento, inoltre non nota il pulsante salva modifiche poiché il form che lo contiene è di piccole dimensioni e si è costretti ad effettuare uno scroll verticale per visualizzarlo.

I maggiori problemi vengono rilevati per l’inserimento del video. Per primo tentativo prova a copiare il codice embed del video di youtube direttamente nell’editor di testo (pensando alle precedenti esperienze con altri blog) senza ottenere nessun risultato; l’utente 2 ripete questa operazione più volte.

Prova tutte le opzioni disponibili sull’editor per includere il video all’interno del post senza mai riuscire nell’intento.

Inserisce due volte la seconda immagine in quanto, non riuscendo a centrarla mediante le opzioni messe a disposizione dall’editor, opta per il reinserimento.

Statistiche utente 2

Task	Tempo (min:sec)
Iscrizione su splinder	03:50
Creazione blog	02:40
Inserimento immagine 1	05:00
Inserimento testo	00:30
Inserimento immagine 2	01:30
Inserimento video	14:00
Tempo totale	28:00

Statistiche Generiche utente 2

Operazione	Frequenza
Mouse click	318
Screen text	19763
Keystrokes	874

Utente 3

Titolo: SI

Testo: SI

Immagini: SI

Video: SI

Formattazione richiesta: Testo, Immagini, Video SI

L’utente 3 durante la fase di registrazione i principali problemi son dovuti al fatto che non legge le scritte di help, trovandole troppo piccole, portandolo all’errore nella fase del doppio inserimento dell’indirizzo e-mail. Inoltre non capisce quali siano i campi obbligatori.

Dopo aver effettuato la registrazione non trova nessun feedback (4° principio (feedback) di Norman non rispettato) da parte del sistema dopo aver premuto il bottone “salva modifiche”.

L’utente 3 non trova chiaro dove iniziare la creazione del blog.

Durante l’inserimento dell’url del blog immette caratteri non ammessi dal sistema, poiché questi non vengono esplicitati nell’help fornito per la compilazione della pagina; solo dopo aver premuto il bottone “crea” viene segnalato il pattern di caratteri utilizzabili per il nome.

Per l’inserimento della prima immagine l’utente 3 effettua l’inserimento tramite l’icona di caricamento di immagine da memoria, riscontra problemi in quanto non spunta la condizione sull’accettazione dei diritti di pubblicazione dell’immagine; non trova il pulsante di inserimento e cerca di trascinare l’immagine all’interno dell’editor, riuscendoci ma perdendo la formattazione originale. Ripete l’operazione senza riuscire a mantenere la formattazione voluta. Risolve il problema utilizzando le proprietà dell’immagine.

Durante il primo tentativo per l’inserimento del video l’utente 3 utilizza l’icona di caricamento di file multimediale relativo al video inserendo il codice url al posto dell’indirizzo locale.

Come secondo tentativo prova a inserire il codice embed del video direttamente all’interno dell’editor, non viene prodotto nessun risultato. L’utente 3 presenta i primi momenti di frustrazione.

Come terzo tentativo analizza il codice rilevando problemi di leggibilità e comprensione dovuti al fatto che gli oggetti flash precedentemente creati, pur essendo stati cancellati, risultano aver lasciato tracce rendendo il codice html poco leggibile; inoltre gli elementi inutili relativi agli oggetti flash rilevati nel codice danno problemi di formattazione negli altri elementi.

Ritenta l’inserimento tramite l’opzione “aggiungi oggetto flash”, l’oggetto risulta presente ma non visibile, creando dubbi nell’utente che tenta quindi di scegliere un video più corto pensando che il problema sia dovuto alle dimensioni.

Cerca aiuto esterno utilizzando Google e consultando l’help messo a disposizione da splinder, senza ottenere nessun risultato.

Infine riesce a inserire il video attraverso un aiuto “molto esterno”.

L’inserimento della seconda immagine risulta esser immediato.

Statistiche utente 3

task	Tempo (min:sec)
Iscrizione su splinder	03:20
Creazione blog	04:00
Inserimento immagine 1	05:50
Inserimento testo	01:10
Inserimento immagine 2	01:00
Inserimento video	29:40
Tempo totale	45:00

Statistiche Generiche utente 3

Operazione	Frequenza
Mouse click	624
Screen text	35547
Keystrokes	1882

Utente 4

Titolo: SI

Testo: SI

Immagini: SI

Video: SI

Formattazione richiesta: Testo, Immagine 1, Video SI – Immagine 2 NO

L’utente 4 al momento della registrazione si lamenta dei messaggi di aiuto scritti con un font troppo piccolo che ne impedisce un’immediata lettura, portandolo a non leggere il messaggio che avvisa l’utente di inserire l’indirizzo e-mail due volte. Inoltre non è gli è chiaro quali siano i campi obbligatori richiesti per terminare la registrazione.

Dopo aver ricevuto, senza riscontrare problemi, l’e-mail di avvenuta registrazione l’utente 4 passa alla pagina inerente il proprio profilo trovando il problema dovuto alla difficile individuazione delle indicazioni riguardanti il contenuto della pagina in quanto essendo troppo piccole e mal evidenziate sono difficilmente individuabili.

L’utente 4 sottolinea un contrasto all’interno del layout in quanto la scelta della grafica del blog avviene mediante un bottone contenente una scritta in inglese (“click to choose”).

Cercando di inserire un immagine all’interno del post l’utente 4 non individua l’icona che consente il caricamento delle immagini e quindi utilizza l’editor di testo per inserire la prima immagine, tramite questo metodo riesce a inserire un’immagine on-line e non una presente in memoria, inoltre viene disorientato dalla possibilità di modificare il layout in quanto non ne conosce il significato.

Non gli risulta chiara la differenza tra le due differenti modalità per l’inserimento dell’immagine presenti all’interno dell’editor.

Per l’inserimento del video l’utente 4 inizialmente cerca di utilizzare l’opzione di inserimento di un video come contenuto multimediale, dopo numerosi (5) tentativi si accorge che viene richiesto un video presente in memoria capisce che non è il metodo di inserimento giusto, arrivando alla conclusione che il codice embed fornito da youtube dev’esser inglobato nel codice.

Per l’inserimento della seconda immagine l’utente 4 non ha riscontrato grossi problemi, solo qualche incertezza per quanto riguarda la formattazione.

Statistiche utente 4

task	Tempo (min:sec)
Iscrizione su splinder	05:40
Creazione blog	09:00
Inserimento immagine 1	04:20
Inserimento testo	02:10
Inserimento immagine 2	01:50
Inserimento video	11:00
Tempo totale	34:00

Statistiche Generiche utente 4

Operazione	Frequenza
Mouse click	407
Screen text	27484
Keystrokes	1332

Utente 5

Titolo: SI

Testo: SI

Immagini: SI

Video: NO

Formattazione richiesta: Testo, Immagini SI – Video NO

L’utente 5 non ha avuto nessun tipo di difficoltà per quanto riguarda l’iscrizione e registrazione al servizio.

Non vengono rilevati problemi per la creazione del blog.

Per l’inserimento della prima immagine l’utente 5 effettua l’inserimento tramite l’icona di caricamento di immagine da memoria, riscontra problemi in quanto non spunta la condizione sull’accettazione dei diritti di pubblicazione dell’immagine. L’immagine risulta esser presente all’interno del post ma in un primo momento non riesce a formattarla secondo le specifiche richieste.

L’utente 5 per l’inserimento del video prova sia tramite l’aggiunta di un oggetto flash che tramite l’inserimento di file multimediali da memoria senza ottenere il risultato sperato. Prova inoltre con l’inserimento del codice embed direttamente all’interno dell’editor ma non ottiene nessun risultato.

A causa dei problemi dovuti all’inserimento del video l’utente 5 cancella tutto il lavoro svolto e riprende dall’inizio.

Inserisce la prima immagine con la formattazione richiesta; prova tutte le possibili modalità di inserimento del video senza mai riuscirci.

Non riscontra nessun problema per l’inserimento della seconda immagine.

Statistiche utente 5

Task	Tempo (min:sec)
Iscrizione su splinder	03:10
Creazione blog	05:10
Inserimento immagine 1	02:00
Inserimento testo	00:40
Inserimento immagine 2	01:00
Inserimento video	23:00
Tempo totale	34:00

Statistiche Generiche utente 5

Operazione	Frequenza
Mouse click	328
Screen text	14849
Keystrokes	718

Situazione ideale

È stato effettuato il test senza commettere nessun tipo di errore per verificare l’effettivo tempo necessario per compiere le operazioni richieste.

Titolo: SI

Testo: SI

Immagini: SI

Video: SI

Formattazione richiesta: Testo, Immagini, Video SI

Statistiche Situazione Ideale

Task	Tempo (min:sec)
Iscrizione su splinder	01:30
Creazione blog	00:50
Inserimento immagine 1	01:20
Inserimento testo	00:20
Inserimento immagine 2	00:40
Inserimento video	01:00
Tempo totale	05:40

Statistiche Generiche Situazione Ideale

Operazione	Frequenza
Mouse click	101
Screen text	7607
Keystrokes	248

Tabella riassuntiva

5. CONCLUSIONI E POSSIBILI SOLUZIONI

ISCRIZIONE AL SERVIZIO

• Accesso

Non ci sono particolari suggerimenti in merito a questa operazione perché essa appare chiara e intuitiva, sia per il valutatore che per il campione d’utenza scelto.

• Registrazione

Durante la registrazione sarebbe più opportuno evidenziare maggiormente le informazioni riguardanti i suggerimenti che vengono posti a lato dei campi di inserimento e ridurre al minimo indispensabile queste informazioni per evitare che l’utente sia frustrato da queste letture e opti per andare per tentativi. Sarebbe inoltre opportuno incrementare la dimensione massima del campo “password”, almeno 15 caratteri e non 10 come previsto in modo tale che l’utente possa avere un range più alto nel quale scegliere la propria password e quindi aver più facilità nel trovare una sequenza di caratteri facilmente memorizzabile.

Come atto conclusivo è richiesta l’accettazione di due delle condizioni sul totale di tre riportate come parametri necessari, queste due condizioni dovrebbero essere evidenziate rispetto all’altra in maniera simile in modo tale da rendere comprensibile all’utente che si tratta di condizioni indispensabili (alcuni utenti hanno infatti avuto difficoltà a comprendere quali campi spuntare).

Nella schermata di completamento della registrazione si dovrebbe segnalare quali campi si debbano compilare obbligatoriamente e quali no, vi sono varie operazioni valide per far ciò, si può, ad esempio, mettere un asterisco all’inizio o alla fine della “label” che identifica il campo o evidenziare la stessa.

Nella “select” di scelta della nazionalità si è scelto di porre nella prima posizione l’Italia per darle un’importanza maggiore ma tale scelta è controproducente nel caso in cui l’utente non la noti, risulta perciò opportuna se corredata dall’inserimento della stessa anche nella corrispondente posizione in ordine alfabetico.

CREAZIONE BLOG

A seguito dell’iscrizione l’utente che vuole effettuare un nuovo blog non viene reindirizzato automaticamente alla pagina dedicata a tale operazione ma viene reindirizzato alla pagina che permette la modifica delle opzioni appena impostate. Questa scelta piuttosto discutibile rende l’interfaccia piuttosto permissiva. Per l’operazione che l’utente deve eseguire (ricordiamo che si è iscritto al servizio per creare un nuovo blog), tale aspetto è nocivo, sarebbe stato meglio realizzare un’interfaccia “non permissiva” che reindirizzasse lo stesso direttamente alla pagina di creazione del blog, riducendo in tal modo lo sforzo mentale dell’utente che non sarebbe più costretto a cercare nei menu la voce opportuna. L’altro aspetto particolarmente importante da segnalare è il basso livello di contrasto tra l’area contenente i menu e il resto della pagina, per facilitare l’individuazione si potrebbe aumentare contrasto e dimensione dei menu.

Viene richiesto all’utente di disabilitare i feed, vi sono alcuni che non hanno coscienza di come espletare tale operazione, l’introduzione di un help immediato (magari con un link che apre una finestra a pop-up) che specifichi come realizzare tale operazione sul proprio browser potrebbe esemplificare il processo.

La dicitura di aiuto riferita alla URL “Questo è l'indirizzo del tuo blog” dovrebbe essere completata con l’indicazione dei caratteri ammessi.

A seguito del click del pulsante crea, si viene indirizzati alla pagina della scelta del layout, il pulsante “click to choose” dovrebbe essere modificato in “clicca per scegliere” o un’analoga soluzione in lingua italiana, in quanto la piattaforma Splinder è stata realizzata pensando ad un’utenza prevalentemente italiana che non potrebbe avere conoscenza della lingua inglese (tale problema è stato evidenziato anche da un utente nel corso della creazione del suo blog).

CREAZIONE POST

• Inserimento titolo

La box di inserimento del titolo è chiara e ben specificata, non ha perciò bisogno di modifiche.

• Inserimento immagine

L’utente che si trova nel box del titolo presumibilmente vorrà passare all’area di inserimento del testo, e vorrà farlo con un’operazione semplice, magari senza dover staccare le mani dalla tastiera, prendere il mouse, spostare il puntatore verso l’area di testo, effettuare un click del tasto sinistro del mouse e riportare le mani nella tastiera. La soluzione è impostare i “tabIndex”, in modo tale da permettere all’utente che si trova nella box del titolo di premere il solo tasto “tab” della tastiera per posizionare il cursore nell’area desiderata. Le differenze visive tra i due strumenti messi a disposizione per il caricamento delle immagini dovrebbero essere più marcate, in parte tale operazione è già stata eseguita inserendo la scritta “Aggiungi” prima di tutti gli elementi che possono essere caricati da pc. Si potrebbe migliorare la situazione proprio modificando tale scritta in “Carica da pc” (o una frase di egual significato), e separando (come per altro giustamente sono stati sistemati) questo tipo di strumento dagli altri.

- Inserimento immagine da pc

L’inserimento della pubblicità nella finestra di pop-up che consente l’inserimento di un immagine da pc, seppur ineccepibile sotto il punto di vista economico, dovrebbe essere eliminata per rendere la pagina facilmente leggibile e non scoraggiare l’utente dal prendere atto di alcune informazioni che sono importanti per la corretta esecuzione delle operazioni che permettono l’inserimento.

Risultando poco chiara l’azione eseguita cliccando il bottone “aggiungi” sarebbe meglio specificare il reale scopo dell’operazione, ad esempio precisando che l’immagine verrà aggiunta nell’album e non all’interno del post.

Un’immagine presente nell’album prima di esser inserita all’interno del post dev’esser formattata (allineamento e dimensioni) e poi selezionata, mentre sarebbe più logico effettuare prima la scelta dell’immagine da inserire, darle una formattazione e quindi inserirla nel post. Si potrebbe aggiungere un pulsante di inserimento che permette si inserire l’immagine, ovviando anche alla incomprensione (riscontrata da più utenti) dell’operazione da effettuare per inserire effettivamente l’immagine nel post.

- Inserimento immagine tramite

Il principale problema è nella comprensione di alcuni campi relativi alla formattazione dell’immagine in quanto per la compilazione di questi si richiedono nozioni di html, una possibile soluzione è quella di fornire un’interfaccia suddivisa in maniera più consona alle caratteristiche dei diversi utenti, in modo tale che i controlli più specifici siano indirizzati esclusivamente ad un’utenza più avanzata.

• Inserimento video

Le notevoli difficoltà riscontrate dagli utenti nell’inserimento del video ci hanno portato a considerare l’ipotesi che aggiungendo un’opzione di inserimento diretto del codice embed fornito dai servizi di videosharing potrebbe agevolare il compito di qualsiasi utente.