Informatica e grafica per il web - parte Gabbiadini

Informatica e grafica per il web

All’interno di questo corso, l’obiettivo è portarci a progettare una interfaccia web per desktop quindi solo in visualizzazione tramite un monitor/computer.

Lo facciamo da un punto di vista differente da come lo fanno gli informatici.

Uno dei problemi più grossi dalla nascita del web è che le pagine venivano fatte da programmatori, quindi, era più un esercizio di programmazione ma ci si dimenticava che questo prodotto doveva essere usato dalle persone. Questo “dimenticare” portava a delle difficoltà di utilizzo perché al centro dell’attenzione non veniva posta la persona, l’utente, ma veniva messo il sito web in quanto tale.

To design = progettare

In italiano la parola migliore per tradurre la professione del designer è progettista. Prima della nascita della figura del Web Designer, i siti web erano inutilizzabili perché al centro della progettazione veniva messo il sito in sé e NON l’utente.

Oggi, nello sviluppo di un sito web sono coinvolte 2 figure:

• Web designer → Si occupa dello sviluppo dell’interfaccia utente, cercando di massimizzare la sua esperienza in quanto l’utente deve fare quello per cui il sito nasce; Egli ha conoscenze di user experience, interaction e user interface, e, pertanto, è in grado di progettare un sito. Deve saper progettare un’interfaccia grafica e deve saperla strutturare per soddisfare i bisogni dell’utenza. Prima vengono fatti degli sketch con carta e penna per delineare i tratti principali del tipo di interfaccia che si sta sviluppando poi si passa a una definizione più formale con i wireframe → Wireframes: Prototipazione di un primo scheletro di interazione con l’utente.
• Coder → Programmatore. Traduce il progetto in qualcosa di funzionante.

Ad esempio, sono la PA di un comune e ho bisogno di comunicare con gli anziani che sia attivato il corso della terza età, allora creerò un sito web che sia in grado di rispondere alle esigenze di queste persone. Potrei usare dei caratteri un po’ più grandi, uso un certo tipo di linguaggio/messaggi. Il progetto del web è orientato al target di comunicazione. È chiaro che il web designer deve masticare entrambe le lingue ovvero deve saper progettare una interfaccia grafica e saperla progettare.

Le 2 figure sono interconnesse tra di loro e, quindi, entrambi i soggetti che ricoprono questi ruoli, devono avere un minimo di competenze trasversali ed è per questo che, spesso, nelle agenzie meno strutturate, le figure sono ricoperte dalla stessa persona.

Filosofia di lavoro

La filosofia che si deve seguire è:

Coinvolgere gli utenti finali durante tutto il corso della progettazione e dello sviluppo del sito, il che assicura che esso sia utilizzabile e fornisca un’esperienza utente coinvolgente e piacevole.

La progettazione centrata sull’utente o User-centered design (UCD) = una filosofia di progettazione e un processo nel quale ai bisogni, ai desideri e ai limiti dell’utente sul prodotto finale è data grande attenzione in ogni passo del processo. Inoltre, si cerca di mettere al centro non il sito web in quanto tale ma l’utente. Il focus non è la tecnologia ma la persona che usa la tecnologia, in quanto se produciamo la miglior tecnologia del mondo ma è inutilizzabile dalle persone questa sarà inutile.

Il ruolo web designer non è essenzialmente quello di programmare il sito web ossia di svilupparlo ma è la figura che sta dietro al progetto di comunicazione legato al sito web. È colui che ha elementi di User-experience, interaction e interface. È una figura che sa come le persone interagiscono davanti a un’interfaccia web e quindi è in grado di progettare un sito affinché i bisogni dell’utente vengano risolti da questo sito web.

La prima domanda da porre al cliente è perché vuole aprire un sito web. Se la risposta è perché l’hanno tutti allora il sito non serve, se invece dietro la risposta c’è una motivazione, ad esempio, perché devo comunicare una determinata cosa, perché ho bisogno di vendere ecc. allora ha senso sviluppare un sito web. Ha quindi senso nel momento in cui il committente cerca di risolvere un bisogno della propria utenza.

Il web designer deve saper progettare un’interfaccia grafica e deve saperla sviluppare. In agenzie grandi queste figure però sono diverse ossia abbiamo sviluppatori ossia programmatori puri, fanno solo codice, graphic designer che si concentra sullo sviluppo dell’interfaccia dal punto di vista grafico e poi abbiamo il progettista che parla entrambe le lingue quindi sa quali sono i bisogni dell’utenza e comunica con il graphic designer in modo che l’interfaccia sia efficace per quel target ma comunica anche con i programmatori per suggerire che tipo di interazione ci deve essere con il sito.

Si incomincia ad abbandonare il termine “intelligenza artificiale” e si inizia ad usare intelligenza aumentata ovvero tutta una serie di tecnologia che coadiuvano le persone nelle loro attività quotidiane.

Lo user centered design pone al centro i bisogni delle persone, capire come le persone davanti a una interfaccia grafica interagiscono e in tutte le fasi della progettazione bisogna chiederci come l’utente raggiungerà questi goal. Una domanda che si fa chi fa l’e-commerce è “come l’utente cercherà il prodotto che sto vendendo e come lo acquisterà?”

Nel progetto d’esame bisogna sempre tenere in mente quali sono i bisogni comunicativi dell’utente/committenza.

Processo di progettazione basato sull’user centred design

Il processo di progettazione basato sull’user centred design è:

1. Stabilire una strategia di comunicazione → cosa voglio comunicare/vendere e come lo devo fare?
2. Requirements → punti fondamentali che dobbiamo risolvere nella nostra progettazione. Bisogna raccogliere dei requisiti ovvero quali sono le necessità del committente, il goal, e quali sono le specificità del target a cui mi rivolgo mediante focus group o analizzando la concorrenza.
3. Strutturare l’alberatura del sito → fondamentale per far sì che l’utente non si perda.
4. Progettare la gerarchia informativa ovvero quali sono le info più importanti e quali meno perché noi sappiamo come l’utente si muove su una pagina web. Le statistiche dicono che noi ci giochiamo l’interesse dell’utente in meno di 3 secondi. Quindi io ho meno di 3 secondi per fargli capire che quell’argomento lì è quello che gli interessa. Quindi nella gerarchia visiva i contenuti più importanti vanno messi all’inizio e man mano scendo con le info meno importanti.
5. Tradurre tutto questo in una interfaccia che permette di veicolare tutta questa fase progettuale.

In tutto ciò non compare la parte del codice. Ma mera traduzione in un codice di programmazione non fa parte nel processo di progettazione incentrato all’utente, essendo solo uno strumento per sviluppare tutto il progetto precedente.

Questo prende il nome di user experience. Qui non è presente la fase di traduzione in codice.

Queste fasi, tradotte in un'altra maniera, design methodology →

1. Pianificazione strategia di comunicazione e si fa attraverso l’osservazione, comprensione e analisi del mercato dei competitor. Qui vengono coinvolti il committente sia il product manager, ovvero chi segue tutto lo sviluppo del sito.
2. Progettazione → qui ci si concentra su requisiti, struttura e su come le informazioni vengono presentate. Per entrare nel target che userà il sito si usano gli user cases o user personas che sono degli strumenti progettuali che permettono al progettista di calarsi nei panni di determinati utenti e di declinare questi utenti dentro specifici casi d’uso.
3. Sviluppo del visual design ossia la parte dell’interfaccia utente che viene poi tradotta in linguaggio di programmazione → test.
4. Test di usabilità per verificare la qualità del progetto e per vedere se eventuali criticità sono state risolte. Si verifica la qualità del progetto con utenti test, Beta Tester. Il sito internet viene messo online e vengono fatte correzioni: la vita di un sito web è circolare attraverso delle modifiche in corso d’opera di errori che prima non erano considerati o perché sono cambiati i tempi. Se le modifiche sono più dei contenuti del sito stesso si pone fine al ciclo di vita del sito stesso perché è più conveniente riprogettarlo in quanto non risponde più alle esigenze. Esempio: siti delle attività commerciali durante il lockdown.

Sulla base di questo si procede con una serie di schizzi disegnati a mano cercando di delineare la struttura del sito e quando è delineata si traduce in wireframe ossia un linguaggio grafico visivo più strutturato che permette di definire gli ingombri in una pagina web.

Come si comporta un utente online?

Per comprendere il comportamento degli utenti online, si utilizza un eyetracker, il quale è in grado di studiare i movimenti della fovea, parte dell’occhio che trasforma la luce in immagini, e comprendere dove l’occhio si sofferma maggiormente e quali movimenti compie all’interno della pagina.

Consiglio

Bisogna scrivere poco mettendo le key words all’inizio. Google premia quei siti che arrivano meglio all’utente. I testi, quindi devono essere lunghi a sufficienza per rispondere alle esigenze dell’utente. Non più di 7/8 righe di testo.

Questo tipo di lettura si chiama F-pathscanner.

Questo pattern si ritrova anche su display mobile? Ni, lì abbiamo un pattern più concentrato al centro.

Un altro metodo è Z-pathscan, scan globale di pagine di web →

Esiste un nuovo pattern Z pathscan, scanglobe di pagine web. Si parte in alto a sx poi ci si sposta verso dx poi la parte centrale non è attenzionata troppo poi ci si sposta in basso a sx per poi arrivare a dx.

Non è un caso che il logo si metta in alto a sx, si mette il menù a destra. Il primo blocco di contenuto, blocco e coinciso, e poi spostandosi sulla destra si inseriscono dei “bottom” chiamati call-to-action, servono che l’utente vengano coinvolti.

È importante che le voci siano disposte in modo da raccontarmi già il contenuto del sito.

In siti web lunghi, questo schema si ripete a fascia.

Alcuni esempi:

Da dove partire quando si progetta un sito web

• Obiettivi del sito.
• User centered design.
• Griglie di impaginazione.
• Draw sketches del sito.
• Interaction design.
• Layout.
• Grafica.
• Xhtml + css.
• Test.

Obiettivo del sito

• Per quale motivo si sta realizzando un sito.
• Quali sono gli obiettivi.

Queste sono le due domande da tenersi sempre in testa. Una volta chiaro il nostro obiettivo, dobbiamo lavorare di conseguenza.

• Vendere dei beni?
• Vendere dei servizi?
• Sponsorizzare un evento.
• Sito gadget.
• Sito divulgativo “Giochino”.

Esempi: Sito per la nuova Clio = Sito volantino di approfondimento del prodotto per il nostro sito, sponsorizzare, storia, design.

Quale audience?

• A chi ci stiamo rivolgendo?
• Qual è il target di riferimento?

Bisogna stilare un profilo demografico-tipo dell’audience, immaginarsi quale tipo di utilizzo verrà fatto del sito e chiedersi quali obiettivi avrà la nostra audience tipo.

Esempi:

• Sito dell’Università 3 età → Sito snello e con un linguaggio molto semplice e font grande;
• Sito per vendere le scarpe create da un trapper → Sito molto colorato e pieno, stile linguistico molto moderno.

User personas

Per andare ad inquadrare la nostra audience, si utilizza la tecnica dell’User personas, ovvero, si individuano 1/2/3 possibili personas che rappresentano gli utenti target del nostro sito: si definisce la loro fascia d’età, gli si dà un nome e si identificano quali sono i loro interessi principali e, infine, si immagina che utilizzo potranno fare del nostro sito.

Da questo punto di vista, ci si riesce a creare un sito che riesca ad attirare l’attenzione dei nostri utenti ipotetici.

Una volta raccolte le informazioni si costruiscono delle tavole sinottiche, al fine di poter confrontare i vari utenti e le loro esigenze.

#utentefinale: noi

Una volta chiari gli obiettivi, dobbiamo fornire una architettura informatica chiara.

Esempio: architettura informativa chiara

Spesso c’è una grossa discrepanza fra l’organizzazione dei contenuti esposta dal committente, che è un esperto del proprio dominio di business, e la maniera con la quale un utente si aspetta di leggere i contenuti del sito web, perché, il committente, ha una maniera di identificare e catalogare i propri prodotti che, di solito, è molto diversa da chi lo ricerca.

È necessaria quindi una chiara architettura delle informazioni, sempre dal punto di vista dell’utente e mai del committente!!

La prima metodologia per strutturare una architettura informativa è il card sorting: Metodo di classificazione usato spesso nello user-centered design per definire l’architettura informativa o schema di navigazione di un sito, che si basa sul coinvolgimento degli utenti per definire raggruppamenti, classificazioni, categorizzazioni, di contenuti.

È un metodo empirico che ha una tradizione molto lunga in campi diversi delle scienze sociali.

Come funziona? Si basa sull’utilizzo di post-it: si prendono i macro-argomenti da mettere nel sito, si scrivono sui post-it e si chiede alle persone di organizzare i contenuti per similarità, si sta chiedendo come strutturerebbero il menù di navigazione;

Di solito si danno anche dei post-it vuoti perché, l’utente, potrebbe aggiungere qualcosa che secondo lui manca. Spesso il progettista l’aveva previsto MA l’aveva chiamato in modo diverso.

È un metodo di coinvolgimento degli utenti per definire raggruppamenti, classificazioni, categorizzazione, di contenuti. Si scrive ogni contenuto su un cartoncino e si chiede a diversi utenti di classificarli per somiglianza.

Carriere dello studente e piano di studi: gli studenti non si aspettavano quel nome quindi nel card sorting si è capito che il nome usato non era quello che si aspettavano.

Si possono compiere diverse analisi sui raggruppamenti ottenuti. Fra queste:

• Cluster analysis.
• Analisi a coppie, pairwise analysis.
• Label analysis.
• Analisi del consenso fra i partecipanti.

Da queste analisi derivano le categorie di argomenti e quindi le sezioni del nostro sito.

Il processo a cui andiamo incontro per progettare un sito web è:

Siamo nella fase di ricerca.

User experience (UX) e user interface (UI)

Spesso si fa molta confusione fra usabilità, User Experience (UX) e User interface (UI). In realtà questi sono processi di una medesima disciplina, ovvero, l’usabilità, che è qualcosa che è riferita da un determinato settore, target individuato con l’user personas.

Prototyping: UX/UI e usabilità. Quale relazione? UX si occupa della interazione.

Questa progettazione si dovrà calare dentro a degli scenari → wireframe.

UI prende aspetti di appearance e non di struttura.

Sono i due pilastri della web usability → UX e UI mi determinano l’usabilità del sito.

Usabilità è riferita ad un determinato settore. Noi ci cerchiamo di enfatizzare l’usabilità per il target a cui mi sto rivolgendo.

L’usabilità e quindi i pilastri che la sostengono dipendono dal target e il target vengono identificati con le user personas.

Ma tutto questo bisogna essere testato.

Valutazione: user test

Dopo lo sviluppo e prima della delivery. User test for mobile.

Comunicazione 1 a molti. Successivamente nascono i siti con un minimo di interazione, molti a uno. Poi social web application dove non è solo consumatore di contenuti ma anche produttore di contenuti, prosumer.

Evoluzione dell’interazione

I primi siti web erano statici, dove il web designer progettava, metteva contenuti e metteva il sito online, questa era una comunicazione 1 a N. Oggi il web non è una relazione 1 ad 1 MA è qualcosa che oltre all’interazione 1 ad 1 permette una relazione 1 a molti, vedi social media:

• Con le prime web application era possibile creare un minimo di interazione.
• Social Web application → L’utente NON è più solo consumatore dell’informazione MA diventa anche produttore → Si parla di Prosumer = Consumatore che produce contenuti.

È possibile dunque studiare come le persone si pongono in un’interfaccia, e come le persone interagiscono tra di loro.

All’interno dei gruppi che si creano online si formano dinamiche. L’importanza della figura dello psicologico è perché sa come le persone si rapportano in una interfaccia e noi sappiamo anche le dinamiche che si creano all’interno del gruppo online, psicologia sociale.

Dietro al social media, c’è un sito web. Quindi le persone hanno due livelli di funzionamento ovvero percettivo e sociale.

L’usabilità

È una disciplina, un approccio molto più generale che viene declinato all’interno della progettazione web. È un aspetto generale perché gli stessi concetti si possono applicare a qualsiasi tipo di interazione umana.

L’interfaccia è il punto di contatto di due ambienti. L’interfaccia tra me e la stanza accanto è la porta. L’interfaccia tra noi e l’acqua che scorre è il rubinetto.

Rendere usabile un sito web solo per il computer è semplice. Ci sono tutti dei pattern che si sa che funzionano bene. Ma bisogna sempre pensare al caso peggiore, ad esempio, il sito di Trenitalia.