Dal Wireframe alla pubblicazione: sviluppo usabile di un sito
Upcoming SlideShare
Loading in...5
×
 

Dal Wireframe alla pubblicazione: sviluppo usabile di un sito

on

  • 3,995 views

 

Statistics

Views

Total Views
3,995
Views on SlideShare
3,670
Embed Views
325

Actions

Likes
5
Downloads
95
Comments
1

6 Embeds 325

http://www.marcolivetti.com 227
http://www.italianwebdesign.it 71
http://www.slideshare.net 13
http://onwebdev.blogspot.com 10
http://www.pentagono.it 2
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Abstract del semnario: http://www.culturasenzabarriere.org/2009/11/dal-wireframe-alla-pubblicazione-sviluppo-usabile-di-un-sito/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dal Wireframe alla pubblicazione: sviluppo usabile di un sito Dal Wireframe alla pubblicazione: sviluppo usabile di un sito Presentation Transcript

  • Dal wireframe alla pubblicazione: sviluppo usabile di un sito
    • Di Marco Olivetti
  • Premessa
    • Per poter creare un sito usabile (dove usabile ha significato anche di fruibile ) bisogna conoscere alcune cose come: Il modo in cui gli utenti usufruiscono del
          • sito
    • Capire quali sono le loro esigenze Conoscere gli obiettivi del sito
  • Architettura dell’informazione L’architettura dell’informazione assolve questo compito, cercando di creare un prodotto accessibile studiando il miglior modo per far coincidere i bisogni degli utenti con gli obiettivi aziendali Definizione: […] è la struttura organizzativa logica e semantica delle informazioni, dei contenuti, dei processi e delle funzionalità di un sistema o un'applicazione informatica. Wikipedia. Cosa è e che cosa fa?
  • Architettura dell’informazione Crea un prodotto accessibile, usabile, fruibile Gli utenti che navigheranno il sito non si troveranno spaesati e saranno guidati man mano nella navigazione. Il sistema rende di facile accesso tutte le informazioni di cui si può aver bisogno e fa guadagnare credibilità e fiducia al sistema sito/azienda. Crea prodotti adatti alle vere esigenze delle aziende Le aziende hanno strumenti molto potenti nelle loro mani che possono efficacemente trasmettere il loro modello di organizzazione sul web senza problemi o traumi. Perché è così importante?
  • Architettura dell’informazione Un processo in continuo movimento
  • La ricerca La comprensione come base per lo sviluppo
  • La ricerca La parola chiave di questa fase è: “ comprensione ”. Comprensione di cosa? Quali persone gestiranno il sito Quale è il target al quale si punta Esiste già un sito? Quale è il budget per il progetto? Ecc..
  • La ricerca Un approccio bilanciato
  • La ricerca Controllare attraverso le statistiche quali sono le pagine più cercate e perchè Scoprire quali sono i termini più utilizzati dagli utenti per poterli usare poi nella creazione dei vocabolari controllati. Tramite heatmap controllare quali sono i punti maggiormente cliccati e visualizzati del sito per scoprire e risolvere problemi Esiste già un sito web?
  • La ricerca
        • Analizzare le keyword
        • Interviste con i clienti attuali e potenziali
        • Test utenti
    Le aziende non conoscono i loro utenti
  • La ricerca Nell’analisi del sito potrebbero scoprire cose che sfuggono alla nostra osservazione. Ci fanno capire cosa piace e cosa non piace alle persone che navigano quel sito, e cosa vogliono o vorrebbero che facesse per loro. Fanno capire ai capi delle aziende l’importanza del processo di architettura dell’informazione. I test utenti nella ricerca
  • La strategia La cornice per strutturare e organizzare il sito
  • La strategia La strategia è il momento in cui ci si da una direzione per procedere in maniera coerente attraverso la progettazione. Muoversi nella direzione giusta
  • La strategia Dobbiamo definire gli obiettivi del sito e la direzione da prendere perché si realizzino. Queste scelte guideranno il processo fino all’implementazione, ovvero alla creazione fisica del sito web. Come muoversi
  • Il design Entrare nel vivo dell’azione
  • Il design Design = Progettazione Una premessa…
  • Il design Il design è il momento del processo di creazione di un sito dove possiamo iniziare a sfogare la nostra creatività. Se ci basiamo su quanto fatto finora il design non dovrebbe essere una fase di istinto e supposizioni, ma di mettere in pratica tutto ciò che si è appreso fino a questo momento . Processo creativo
  • Il design I vocabolari controllati sono elenchi di parole che verranno usati sia per definire le etichette e i metadati del sito, che nel contenuto. Questi vocabolari servono per dare coerenza al sito attraverso: Contenuti Metadati Motori di ricerca Come li creiamo? Attraverso le statistiche Analizzando i contenuti Studiando la concorrenza Vocabolari controllati
  • Il design Ipotesi : sito x, due fasce di utenza principale: Tecnica Generalista Soluzioni : Creare un vocabolario bianciato per entrambe le categorie Creare due vocabolari specifici per ogni categoria Vocabolari controllati: quanti?
  • Il design I vocabolari controllati servono molto durante la progettazione di motori di ricerca interni al nostro sito. Ad esempio un mdr interno potrebbe considerare “micro onde” e “microonde” come parole diverse e fornire quindi risultati diversi. I vocabolari controllati intervengono classificando le due parole come sinonimi e facendo restituire al sistema risultati identici per entrambe le query. Vocabolari controllati: motori di ricerca
  • Il design Le etichette sono tutte le intestazioni , voci di menù e i link del sito. Il sito che parla, le etichette
  • Il design Nella creazione delle etichette dovremmo porci diverse domande: La parole o le parole che ho scelto sono chiare per tutti (o quantomeno la maggior parte dei miei utenti)? Se non sono chiare, perché? Sono previste delle spiegazioni per aa queste etichette? Le etichette sono coerenti in tutto il sito oppure diverse pagine usano diversi sistemi di etichettatura? Perché non sono standardizzate? Domande da farsi sulle etichette
  • Il design Generalmente categorizziamo 4 categorie di etichette: Etichette come link Etichette come titoli Etichette come icone Etichette come menù Forme di etichette
  • Il design Le etichette usate come link nei contenuti , ovviamente diverse da quelle usate nei menù, sono tutti i link che sono presenti nel contenuto di una pagina. I link devono: Basarsi sul contesto Essere esplicativi Etichette come link
  • Il design Le etichette usate come titoli sono tutte quelle etichette che rappresentano intestazioni e blocchi di testo. Si definiscono etichette gerarchiche, poiché partono da grandi e importanti fino ad arrivare a piccole e poco rilevanti. Etichette come titoli
  • Il design Le etichette usate come menù di navigazione sono tutte quelle etichette che rappresentano link di sezioni e pagine non nel contenuto. Le etichette usate come menù dovrebbero essere uguali in tutte le pagine, e quelle principali raggruppate sempre nello stesso posto. Etichette come menu di navigazione
  • Il design Le etichette grafiche sono quelle che invece del testo vengono rappresentate da immagini. Vanno usate solo nel caso la convenzione sia nota a tutti (home > homepage | mail/@ > contatti). Se mal interpretate generano frustrazione e portano più facilmente l’utente ad abbandonare il sito. Etichette come icone grafiche
  • Il design I personaggi sono modelli di utente , con un loro background. Possono basarsi su persone reali , descrivere particolari categorie di utenti, oppure essere completamente inventati. I personaggi ci permettono di prendere le giuste decisioni di design . Stiamo progettando per i nostri utenti, non per noi stessi. Personaggi
  • Il design Mario Bianchi Possiede una piccola attività e ha una mentalità non portata alle nuove tecnologie. La sua azienda conta 6 dipendenti. Non naviga moltissimo su internet, a malapena sa come cercare una cosa su google e puntualmente scrive query chilometriche, e spesso salta il primo risultato per il secondo o il terzo se li ritiene più soddisfacenti. Clicca sugli annunci a pagamento purchè siano in prima posizione e appaganti. Esempio di personaggio
  • Il design Gli scenari invece sono dei modelli di comportamento, delle situazioni in cui gli utenti si possono venire a trovare visitando il sito che stiamo progettando. Mario sta cercando di comprare un gioco per sua nipote, e non conoscendo la terminologia di internet è un po’ confuso da tutte le icone colorate, sta solo cercando qualcosa che gli possa fornire rapidamente le informazioni che cerca. Scenari
  • Il design Mario vuole comprare un gioco per bambine. Mario vuole sapere che tipo di gioco andrà a comprare (descrizione, ecc) Mario ha bisogno di essere guidato nella scelta, ovvero cerca di capire se c'è una sezione dedicata ai giochi per bambine, non conosce le categorie dei giochi (logica a faccette). Mario ha bisogno di essere rassicurato su ogni passaggio, e non bisogna nascondergli nulla. Non ha intenzione di registrarsi al sito, e probabilmente non comprerà più sul sito o su internet in generale. Requisiti di scenario
  • Il design Basandoci sul lavoro dei vocabolari ed etichette, andiamo a creare tutto il sistema di navigazione del sito. Distinguiamo due categorie: Gerarchica Classica navigazione web, tassonomica Faccette Navigazione per argomento, aree di interesse... La navigazione
  • Il design È utile, data spesso la complessità dei siti, utilizzare diversi modi per raggiungere la stessa informazione (linkare due volte in maniera e categoria differente la stessa pagina). Quando creiamo un sistema gerarchico (fondamentale in ogni sito) dobbiamo considerare se creare un sistema profondo oppure superficiale . La navigazione gerarchica
  • Il design Sistema profondo o superficiale?
  • Il design Le faccette possono essere divise: Per argomento Prodotto Tipo di documento Utenza Geografia Prezzo Ecc.. La navigazione a faccette
  • Il design Le faccette vanno utilizzate quando abbiamo la necessità che gli utenti scorrano il contenuto in maniere diverse , saltando vari livelli di navigazione e anche la nostra impostazione. Quando usare le faccette
  • Il design Dopo che abbiamo creato le nostre categorie, andiamo a creare i diagrammi che mostrano le relazioni che le pagine hanno tra di loro. Ma questi diagrammi non mostrano solo le pagine, mostrano anche e soprattutto i percorsi degli utenti attraverso il sito. Possiamo creare quindi diagrammi che spiegheranno come usare un particolare servizio del sito, e fornire quindi diverse soluzioni al suo utilizzo. Diagrammi
  • Il design Diagramma dell’uso del sito Steve Krug
  • Il design Diagramma di un sito con relazioni di pagine Marco Olivetti
  • Il design Gli schemi vanno fatti vedere al cliente, perché può portare delle nuove idee e un nuovo modo di vedere le cose a cui voi non avreste pensato. Sono anche utili per determinare dei punti fissi nel progetto, da far approvare al cliente. Far vedere gli schemi al cliente
  • Il design A questo punto è utile per testare idee o quello che avete fatto finora (come il sistema di navigazione) piuttosto che l’intero sito. I prototipi non sono wireframes , non rappresentano il sito, ma vi aiutano a vedere come l’ai interagisce nel contesto della pagina. Vi aiutano a vedere come gli utenti usano i vostri modelli, e se sono corretti. Testare le idee
  • Il design I wireframe sono delle bozze che dispongono il contenuto e le funzioni del sito per blocchi. I wireframe ci indicano come vestire un sito , ovvero come e dove posizionare tutti gli elementi (grafici e non) nel sito vero e proprio. I wireframe
  • Il design Fedeltà dei wireframe
  • Il design Sono molto importanti per il sito perché per la prima volta abbiamo una struttura legata all'architettura dell'informazione, è la prima volta che vediamo il sito vero , dal vivo. L’importanza dei wireframe
  • Il design I contenuti sono tutti i file multimediali (video, immagini, ecc..) e non (testi). In questo momento andiamo a creare i contenuti e correlarli secondo le pagine. I contenuti possono presentare problemi di accessibilità nella misura in cui non utilizziamo il linguaggio del nostro pubblico. I contenuti
  • Implementazione Dal design alla grafica
  • Implementazione Adesso è arrivato il momento di parlare della grafica. Anche in questa fase però non dobbiamo abbassare la guardia, gli errori possono esserci sempre. Colori HTML/CSS Programmazione Grafica!
  • Rilascio Pubblicazione del sito e misurazione UX
  • Rilascio Fine?
  • Rilascio Feedback Ovvero raccogliere informazioni direttamenti dagli utenti su come migliorare il sito Sondaggi Chiedere agli utenti se un servizio funziona o meno Controllo statistiche Utile soprattutto per le etichette e i vocabolari controllati Test utenti Quale occasione migliore per testare il sito se non quando è online e funzionante? Heatmap Mappe di calore, per vedere quali aree del sito sono da migliorare Misurazione UX
  • Rilascio Heatmap http://usableworld.com.au
  • Risultati test d’usabilità 10 domande su ia, accessibilità e usabilità
  • Risultati test d’usabilità Quanto conta per te l’usabilità in un progetto?
  • Risultati test d’usabilità Quali metodi utilizzi per creare un sito?
  • Risultati test d’usabilità Usi i wireframe durante lo sviluppo del sito?
  • Risultati test d’usabilità Usi personaggi e scenari durante la creazione di un sito
  • Risultati test d’usabilità Quando inserisci i testi
  • Risultati test d’usabilità Controlli mai le statistiche durante il redesign di un sito?
  • Risultati test d’usabilità Fai mai test con gli utenti nel progettare un sito?
  • Risultati test d’usabilità Misuri mai l’user experience (UX) in un sito dopo averlo pubblicato?
  • Risultati test d’usabilità Quanto conta per te l’accessibilità
  • Risultati test d’usabilità Conosci e rispetti le varie leggi e guidelines per l’accessibiità che ci sono?
  • FINE Marco Olivetti [email_address] www.marcolivetti.com