2) progettare: Flashcards
variabili trasversali da valutare:
- tempi (durata del progetto);
- costi (risorse umane e finanziarie)
- qualità (rispondere alle esigenze dell’utente).
come strutturare il progetto:
- tipicamente la prima azione condotta è la raccolta del brief, cioè la definizione dell’idea del progetto: come vogliamo farlo, dove prendiamo i materiali, quali sono gli scopi… ; solitamente è il momento di incontro fra noi e il cliente
- fase di analisi e benchmark > verifica di ciò che mi viene chiesto rispetto alla fase del mercato: . ciò che mi sta chiedendo esiste già da qualche parte? come può posizionarsi il progetto nel mercato? se già esiste, la risorsa deve essere realizzata con elementi innovativi che le altre risorse non hanno. youtube o wikipedia non possono essere considerati siti di benchmark; su di essi troviamo già tutto. benchmark è un sito che esiste già e pala ci diò di cui voglio parlare io. al massimo, wikipedia può essere nella bibliografia, cioè lo spazio da cui vado a pescare contenuti usati per il nostro sito.
- elaborazione dei documenti > in un progetto vero sono 3: documenti di content strategy = doc in cui si stabiliscono le strategie per ottenere i contenuti, tecnico e di sviluppo = come realizzare il progetto, quali tecnologie usare, che framework, e di promozione = iniziamo a definire le strategie da mettere in atto per dare visibilità al progetto)
- una volta elaborati i documenti e approvati dal committente, si chiude la fase di progettazione e si avvia la fase di sviluppo, che va di pari passo con la fase di produzione dei contenuti. Qui inizio a realizzare le modalità che ho già descritto nel documento tecnico e di sviluppo.
- promozione: pr, social marketing, tutto ciò che mi permette di dare visibilità alla mia risorsa (principalmente attraverso i social)
in sintesi:
PIANIFICAZIONE (idea del progetto)> DESIGN (strategie per attuarlo) > SVILUPPO > LANCIO
come muoversi dall’inizio alla fine del progetto:
in:
* mappe concettuali per far capire al committente i concetti principali del sito; esse non corrispondono necessariamente alle pagine del sito, ma sono un’astrazione dei contenuti.
* elaborazione wireframe, cioè il disegno delle componenti di architettura di interfaccia, cioè come i contenuti devono essere mostrati non graficamente, ma dal punto di vista del posizionamento delle gabbie logiche entro le quali essi devono essere inseriti.
* labeling e copyrigthting = ogni informazione deve essere semanticamente autoesplicativa (ex. chiamare lo strumento di navigazione ‘home’ o di usare un’icona, la pagina catalogo che decideremo di chiamare ‘catalogo’, la zona informazioni chiamata ‘info’…). Inoltre, se si usano cose già esistenti dobbiamo controllare se possiamo usarle e se dobbiamo attribuire i diritti (copywrite) a qualcuno.
* creazione del mockup > grafica e layout. decidiamo lo sfondo della testata, il colore del testo, dei link, decidiamo le dimensioni delle componenti di interfaccia…
* web development > o si usano template esistenti, oppure ci può essere il bisogno di programmare parti del codice o applicazioni nuove
* content editing > editare i contenuti (ex. se presi da un libro cartaceo) per fare in modo che siano fruibili sul web
* ricerca iconografica > prendere immagini libere, o da un collettore già esistente (copywrite) oppure se bisogna scattarle/crearle. riguarda la ricerca iconografica anche la ricerca dell’icona del sito o delle componenti di interfaccia (ex. l’icona della home, le frecce, la lente di ingrandimento…)
* una volta editati i documenti, dobbiamo inserirli dentro al template (costruiamo prima le gabbie logiche in cui andranno i contenuti, e poi li inseriamo)
* rilascio > dopo aver stabilito il naming del sito (URI e URL)
* caricare le analytics, strumenti che mi permettono di analizzare le visite del mio sito (quanti lo hanno visto, da dove, da quale paese). il più famoso è quello di Google
* site tuning > facciamo girare il sito e vediamo se ci sono bug o problemi (ad esempio, se tutti i browser leggono il sito correttamente)
altri tipi di modelli di project management:
- ANALISI
✓ Analisi dello scenario di mercato
✓ Analisi di settore e studio della presenza sul web
✓ Analisi delle aziende leader (best pratices)
✓ Analisi del posizionamento competitivo
✓ Definizione degli obiettivi strategici ed operativi del sito - WEB DESIGN
✓ Progettazione ed implementazione dell’architettura informativa
✓ Progettazione ed implementazione del modello di navigazione
✓ Definizione del labeling (etichettatura)
✓ Definizione e realizzazione delle “gabbie logiche”. - VISUAL DESIGN
Ideazione e progettazione della Digital Identity
✓ Ideazione e progettazione dei layout grafici
✓ Definizione e progettazione della guida di stile
✓ Costruzione del template del sito - PROGETTAZIONE
APPLICAZIONI
✓ Definizione dei modelli di comunicazione uomo/macchina
✓ Definizione e progettazione dei sistemi di interazione
✓ Progettazione ed implementazione di sistemi di comunicazione interattiva - CONTENT DESIGN
✓ Definizione e redazione del piano editoriale
✓ Definizione del tono e dello stile di comunicazione
✓ Ideazione e realizzazione dei contenuti del sito
✓ Gestione dei contenuti testuali e multimediali
✓ Aggiornamento continuo
il piano di progettazione per realizzare la documentazione:
- Idea ( = l’abstract; può essere messo per iscritto o averlo a mente; è l’ultima cosa che si scrive poiché è una sintesi del progetto)
- Brief (scrittura pianificazione)
- Benchmark (esistente e competitors)
- Struttura (elaboro mappa, schema e categorie)
- Layout (architettura e wireframes)
- Usabilità (efficacia, grafica e tipografia)
- Servizi (browsing e interazione)
- Bibliografia e sitografia di progetto
l’idea:
= cosa ho in mente di fare?
in questa fase dobbiamo:
* contemplare TUTTI i livelli del progetto:
1. contenuto
2. caratteristiche
3. funzionalità
4. strumenti
5. accesso
* verificare che non esista già qualcosa di identico
il brief:
Il brief è il primo confronto con il progetto al fine della pianificazione del lavoro. E’ necessario confrontarsi con i seguenti aspetti.
- finalità e obiettivi del progetto
- pubblico di riferimento
- accesso alla risorsa (PC, tablet, smartphone)
- modalità di raccolta dei contenuti e dei dati
brief: obiettivi informativi:
qual è il contenuto? E quindi quale obiettivo informativo si pone il mio progetto?
È necessario in questa fase definire, sulla base di questi interrogativi, quali sono i materiali (e gli oggetti) che andranno a popolare le pagine del progetto.
Contenuto e obiettivo informativo rimandano alla nozione di genere o ambito e quindi di tipo:
* Ambiti disciplinari (meglio anche più di uno): letteratura, arte, storia, spettacolo, cinema, etc.
* Tipo: sito personale, edizione di testi, raccolta di immagini, collezione di risorse, rivista, etc.
brief: pubblico di riferimento/utenza:
A chi è rivolto il messaggio? È necessario stabilire l’audience, cioè definire a quale comunità di utenti si rivolge, quali sono i bisogni informativi del pubblico cui la risorsa sarà destinata.
Bisognerà allora riflettere sulla scelta dei materiali e sulle modalità della loro organizzazione, anche alla luce delle possibili tipologie di lettori (accesso profilato).
brief: accesso alla risorsa:
qual è il mezzo di comunicazione prescelto? (PC, tablet, smartphone).
L’integrazione dei media costituisce uno dei punti di forza di una risorsa digitale: testo, immagini, suoni, video, animazioni.
Si tratta di oggetti che possono essere integrati in una pagina HTML, ma ricordando che è necessario valutare anche le disponibilità tecnologiche dell’utente finale e il tipo di device pensato per l’accesso.
Come è pensato l’accesso alla risorsa Web? Con quali devices? Solo da computer fisso o da mobile o tablet? Importanza del design multipiattaforma sulla base del target utente.
brief: modalità di raccolta dei contenuti e dei dati:
testi, immagini, audio e video è possibile prenderli dal Web. Copiare non è un peccato a patto di conoscere le licenze e saper citare (cfr. Strumenti > Diritti di utilizzo in ‘Google immagini’ https://support.google.com/legal/answer/3463239?sa=X&ved=2ahUKEwj_786Gts_eAhUFDMAKHXCuDZ0QlZ0DegQIARAB) risorse online liberamente riusabili (licenza CC-BY -https://creativecommons.org/licenses/?lang=it).
E.g. WIKI family: WikiCommons per elementi multimediali; Wikipedia per i testi; Wikidata per le categorie descrittive di unoggetto.
Ma anche (alcuni esempi):
✓ YouTube
✓ GoogleMaps
✓ InternetArchive
benchmark:
analisi dell’esistente, ovvero googlare rispetto alla mia idea;
Benchmark significa analisi di mercato (competitors). Tale analisi avviene a livello di:
* idea
* contenuti esistenti (testi, immagini, audio e video)
* design (template di pagina e architettura, colori, font, etc.)
* tecnologie (tools, ambienti, infrastrutture, linguaggi)
Ci sono siti che già parlano dello stesso contenuto? E se sì perché c’è bisogno di qualcosa di nuovo?
Nella fase di benchmark è anche consigliabile individuare piattaforme, layout, tools, design, servizi, strumenti che ci piacciono e che è possibile riusare.
struttura: la mappa concettuale:
Il primo passo per la progettazione è costituito dall’elaborazione della rete delle correlazioni che sussistono fra i concetti coinvolti in un progetto digitale.
Si parla di mappa concettuale per definire il rapporto che intercorre fra le varie unità logiche di informazione.
La mappa ragiona per parole chiave, e ha l’obiettivo di permettere di definire quale tipo di connessione logica esista fra tali parole.
Popolare il sito con i contenuti è momento successivo a quello della mappa, che scaturisce dalla riflessione su quali siano i temi che si intendono affrontare, e rappresentare, e quali siano quindi le associazioni che, tra tali contenuti, è possibile stabilire.
E’ una sorta di rappresentazione dell’idea in forma grafica.
la mappa concettuale è finalizzata a individuare e disporre graficamente i contenuti del progetto tramite parole chiave.
> tradurre il brief attraverso una resa di carattere visuale espressa attraverso parole chiave fra di loro legate.
ex. la mappa dell’arte nella preistoria, o del neoclassicismo in letteratura.
le parole chiave sono relazionate o gerarchicamente, o le relazioni possono essere specificate (ex. nella freccia).
Nelle mappe non sono necessarie le immagini.
Costruiamo attraverso concetti posti fra loro in relazione il nostro progetto. E’ un momento che viene prima della realizzazione del sito; non sono presenti le pagine del sito, ma l’idea.
La mappa NON è pensata per uno specifico output (e.g. libro, articolo in rivista, capitolo di volume a stampa o digitale o ancora sito web), ma ci permette di ragionare sui CONCETTI chiave di una narrazione attraverso una struttura a grafo.
La modellazione concettuale, come definita nel campo della progettazione di una base di dati, può essere utilizzata anche per descrivere un progetto Web.
Il modello E/R può essere una notazione funzionale alla rappresentazione dei concetti e delle relazioni che documentano il progetto e il suo obiettivo di ricerca.
Cfr. https://it.wikipedia.org/wiki/Modello_E-R
Esso è un concetto proveniente dal mondo dei database. Il modello E-R (modello entità-relazione) possiede un’entità = concetto (in rettangolo) legato a un’altra entità attraverso una relazione (nel rombo).
in più, rispetto al modello concettuale che vedevamo prima, il modello e-r ha gli attributi, essi specificano determinate caratteristiche di un’entità.
Dante (1 entità) è nato (relazione) a Firenze (2 entità).
di fianco al modello e-r c’è un modello pratico, pensato per la realizzazione di un database.
Si può usare per entità astratte ex. studente x di indirizzo y; oppure con entità vere e proprie, ma solitamente ciò viene fatto in un secondo momento.
attributi = sottolineati; solitamente gli attributi sottolineati sono le chiavi di identificazione univoca (ex. il num di matricola per lo studente).
esempio modello e/r > sito dedicato alla musica. il fatto che si parli di genere può trasformarsi, nella realizzazione pratica, in un filtro che permette di filtrare in base al genere.
pallini = attributi.
struttura: schema dipendenze:
- la struttura gerarchica (ad albero) delle dipendenze > è normalmente il passaggio successivo alla mappa concettuale, in cui si inizia a strutturare l’ordine delle pagine. La struttura gerarchica ad albero può essere spezzata tramite collegamenti trasversali (ex. i link o altri strumenti di ricerca). Diventa dunque una struttura a grafo.
- storyboard: come ripensare ai concetti della mappa per costruire le pagine Web e metterle in relazione gerarchica
di solito la struttura gerarchica di un sito la deduciamo dagli strumenti di navigazione del sito.
struttura: categorie:
tipicamente oggetti che appartengono a una certa raccolta sono identificabili come facenti parte di categorie e queste categorie possono dipendere gerarchicamente da categorie di livello superiore.
possiamo qualificare gli oggetti attraverso categorie, che possono dipendere da un’altra categoria.
ex. un enfiteusi, appartenente alla categoria elementi paleografici, appartiene alla macrocategoria di oggetto culturale > CATEGORIZZARE o CLASSIFICARE una collezione o raccolta di oggetti che condividono delle proprietà (quando il digital asset diventa uno strumento di organizzazione della raccolta degli oggetti del mio progetto).
Quali sono le categorie pertinenti degli oggetti della mia raccolta?
Bisogna sempre fare una selezione.
layout: architettura di interfaccia:
Con architettura si intende l’organizzazione di una risorsa informativa attraverso 2 elementi:
* elementi della pagina, le componenti logiche in cui si articola ogni singola unità di lettura. La struttura della pagina generalmente è composta da almeno 4 zone distinte: la testata; il corpo; la barra di navigazione principale;il piè di pagina.
* strumenti di navigazione, il cui scopo è da un lato fornire al lettore un’idea dei contenuti proposti e dall’altro far capire le modalità con cui è stato costruito e strutturato il progetto; elementi necessari quindi per poter orientare il lettore fra i materiali
elementi della pagina:
- main (corpo) = il testo deve essere chiaro, leggibile, usabile
- header (testata) = deve essere uguale in tutto il sito. Meglio associare un’immagine (e magari un logo) che evochi il contenuto principale del sito
- nav (barra di navigazione) = sempre nella stessa posizione nel sito, evocative, semanticamente pertinenti
- footer (piede di pagina) = estinato ad accogliere le indicazioni sul copyright e riportare le informazioni relative alla data di creazione e aggiornamento dei contenuti
- facoltativo, aside (lato)
i tipi di navigazione:
-
Navigazione principale o globale (i canali) = la barra di navigazione è una delle componenti più importanti della pagina perché consente all’utente di avere una percezione chiara dei contenuti e di navigare la struttura senza perdersi.
Elemento fondamentale della navigazione principale è che le voci del navigatore devono avere un nome significativo che evochi immediatamente i contenuti della destinazione.
Questa considerazione è valida in generale per ogni tipo di link ipertestuale: il lettore deve sempre comprendere quale sarà la destinazione del collegamento (importanza del LABELING). -
Navigazione secondaria (i sottocanali) = è un sistema di navigazione secondario separato da quello di navigazione principale, che comprende le sotto sezioni in cui è suddivisa ogni singola area, cioè i livelli gerarchicamente dipendenti dalla navigazione primaria.
Può essere un menù aggiuntivo che compare entrando sul canale di navigazione primaria oppure può essere collocato in una diversa area dello specchio della pagina.
Deve comparire solo quando viene aperta la voce di navigazione primaria. -
Navigazione contestuale (link aggiuntivi) = fa parte della navigazione secondaria la navigazione contestuale: un sistema di navigazione che collega concettualmente un documento ad un insieme più vasto di documenti, a formare un gruppo tematicamente coerente.
Può essere classificato come navigazione contestuale la serie dei link che collegano fra loro le pagine (innesto delle rete oltre la gerarchia) e i box di approfondimento laterali. Tali box si chiamano contestuali perché sono specifici per la pagina corrente. Devono quindi cambiare al cambiare della pagina. -
Briciole di pane (struttura gerarchica del sito) = le briciole di pane (facoltative) indicano all’utente in quale punto della struttura si trova, rispetto ai diversi livelli in cui è organizzato il sito.
Costituiscono un sistema di navigazione attraverso cui il lettore percepisce la struttura dell’informazione mediante l’associazione fra la pagina corrente in cui si trova e il percorso effettuato per arrivarci.
La briciole di pane mostrano il percorso dalla home (pagina principale di apertura del sito o nodo radice) alla pagina corrente nella forma: Home > NavPrinc> NavSec > Paginacorrente. Tutte le voci delle briciole di pane devono essere collegamenti attivi fatta eccezione la Pagina_corrente. -
Metanavigazione (o navigazione di servizio) = sezione della pagina in cui vengono messi a disposizione dell’utente strumenti di aiuto e funzionalità generali: dai contatti all’eventuale motore di ricerca, dalla guida alla navigazione alla mappa dell’ipertesto, dal copyright alle licenze, dai credits al multilinguismo, da un login utente all’iscrizione a una newsletter (il Web Project Plan stesso è una pagina che va resa accessibile attraverso un link nello spazio di metanavigazione).
La sua collocazione è sopra o sotto la testata del sito e/o collocata nel piè di pagina.
Tipicamente i link di metanavigazione a livello di testata sono DIVERSI da quelli nel piede di pagina.
regole generali di progettazione del menù di navigazione:
- coerenza. = il testo nel menù è anche il titolo della pagina e la voce delle briciole di pane
- feedback. = i menù attivi (o anche i pulsanti) cambiano di stato (ex. colore) (es. quello attivo non è linkabile ed è di colore diverso)
- memorizzabilità. Il box del menù principale non ha più di 5 collegamenti (max 6, compresa la home)
- learnability. = il menù di navigazione principale rispecchia il più possibile la struttura informativa del sito. Devo capire come è fatto il sito solo leggendo i menù
- orientamento. = gli strumenti di navigazione non devono mai cambiare di posizione all’interno delle pagine
- convenzioni. = usare icone standard e convenzionali
layout: i wireframes:
Wireframe = disegno degli spazi logici che ogni componente architetturale deve abitare
Il Wireframe ragiona non per singola pagina del sito, ma per templates (ovvero pagine che condividono un layout): Index (home), Pagine di primo livello, Pagine di secondo livello, Oggetto singolo, Etc
> per cui la posizione del box resta la stessa per ogni pagina; cambiano i contenuti, ma non il wireframe (1 template per la home, 1 per il catalogo e 1 per l’item > tutti gli item hanno lo stesso template, cambia solo il contenuto)
Diamo così una funzione ad ogni spazio logico, quindi non creiamo solo dei rettangoli, ma all’interno di essi inseriamo contenuti che ne rendano chiara la funzione.
Il mockup è l’arricchimento del wireframe con oggetti reali (colori (mentre il wireframe è in bianco e nero), font, immagini, testi).
spesso, esso viene fatto con programmi di grafica.
prototipo = vedere se il mockup fubnziona
il wireframe può essere parlante o no (vedi ex. slide)
usabilità:
= qualunque azione io faccia per rendere facile e coerente all’utente finale del mio progetto l’accesso ai contenuti.
Design di interfaccia, navigabilità, tipografia e scrittura, font e colori
* Web design, ovvero adeguata progettazione dell’architettura di interfaccia
* Stile di scrittura adeguato al medium (ovvero lettura a schermo)
* Attenzione alle strutture testuali (organizzazione dei contenuti all’interno dello specchio della pagina)
* Consapevolezza di tecniche e tecnologie della comunicazione
Sono tutti elementi alla base dell’usabilità, concetto che identifica i principi da rispettare per garantire efficienza ed efficacia della comunicazione ipertestuale
Usabilità secondo Nielsen:
La Web usability, il cui padre è riconosciuto in Jakob Nielsen http://www.useit.com/, riguarda la necessità di realizzare siti che vadano il più possibile incontro alle necessità dell’utente finale:
le 10 euristiche di Nielsen (eccessivamente astratte):
* funzionali nel layout e nello stile (e cioè facili da navigare + comprensibili nell’architettura + che adottino uno stile di scrittura chiaro e conciso)
* che rispondano alle esigenze di determinate classi di utenti
* sulla base della tipologia di sito realizzato
alcune strategie per un sito usabile: architettura:
- Non cambiare il posizionamento degli strumenti di navigazione quando ci si sposta di pagina
- Usare box di approfondimento laterali come associazioni contestuali
- Usare molti box nel corpo del documento per strutturare il più possibile i contenuti su isole tematiche o fasce di contenuto
- Non costringere mai l’utente finale ad usare il pulsante indietro del browser
- Usare le briciole di pane come strumento di orientamento rispetto alla gerarchia dei contenuti
- Dare sempre modo di tornare alla home (anche dal logo in testata)
alcune strategie per un sito usabile: colori, icone, font:
colori:
La teoria del colore nel web può essere suddivisa in tre parti principali:
* Contrasto: la scelta di un colore chiaro ed uno freddo facilita la leggibilità e richiama l’attenzione
* Complementazione: l’utilizzo di colori complementare può valorizzarli gli uni con gli altri e creare una combinazione efficace
* Vibrazione dei colori: la variazione tra colori caldi o colori freddi
In linea di massima è consigliabile limitarsi a tre colori.
Un colore principale utilizzato per la maggior parte del sito, un secondo colore per le aree secondarie e un terzo colore a contrasto per mettere in evidenza solo alcuni elementi all’interno delle pagine.”
Eventualmente usare il colore come strumento per distintivo (di una sezione, di un concetto, di una funzionalità) Vai a: https://www.happybrain.it/2018/04/11/significato-dei-colori-nel-web/
font:
E’ necessario usare font sicuri per il Web oppure è possibile usare un particolare font che ci piace, ma bisogna renderlo disponibile per la visualizzazione da parte del browser del nostro visitatore. Ci sono vari siti che ci aiutano nella scelta e diverse librerie a disposizione (ad esempio Google Fonts, che vedremo).
icone:
Le icone sono uno strumento comunicativo molto efficace e molto usato. Anche in questo caso esistono varie librerie (ad esempio Font Awesome, che vedremo).
Le icone sono uno strumento comunicativo molto efficace e molto usato. Anche in questo caso esistono varie librerie (ad esempio Font Awesome, che vedremo).
servizi: strumenti di browsing:
Un sito è pensato per essere una vetrina di contenuti, ma deve anche erogare dei servizi , che vanno contemplati in fase di briefing.
Dobbiamo mettere a disposizione dell’utente percorsi alternativi ai soli canali di navigazione primaria, secondaria e contestuale.
Alcuni esempi:
* Faccette - ovvero categorie concettuali (classi) -, per navigare attraverso un sistema di classificazione degli oggetti coinvolti nel progetto (basta pensare al catalogo di una biblioteca navigabile per autore, data, editore, genere, etc.)
* Mappe per navigare attraverso la nozione di spazio o di percorsi nello spazio (embedding della mappa da Google Maps. L’esempio più semplice)
* Linee del tempo per navigare attraverso la nozione di tempo
* Parole chiave, per navigare attraverso nuvole di parole (e.g. tag cloud), o per temi, concetti/soggetti, motivi
* Pagination: sequenziale (avanti e indietro); per pagina (google like); per lettera dell’alfabeto
* Indici: per data, luogo, persona, etc.
