Orientarsi

ARCHITETTURA DEI CONTENUTI + VISUAL CUES



Carlo Frinolli

carlo.frinolli@nois3.it

Scaletta, storyboard e mappe

Analizziamo un po' l'esercizio che avete mandato.

Web è narrazione

Si tratta di un'esperienza non lineare, e non
strettamente cinematografica.


© Creative Layers

Stiamo smontando l'esperienza

... per poter disegnare un'interfaccia che funziona...

Per chi funziona.

User research e n/etnografia + user stories + personas

"Dove" funziona

i modi e i contesti d'uso della stessa.
La capacità di attenzione e cognitiva dell'utente.

User story: ripassino


As a <role>, I want <goal/desire> so that <benefit>



Le trame...


... e il viaggio


Il messaggio e la value proposition.

Ovvero l'essenza dell'azienda e la sua offerta unica
rispetto alla concorrenza

Come organizzare la narrazione

orientare le scelte e organizzare i contenuti


Double diamond














1. discover    2. define    3. develop    4. deliver

Architettura dell'informazione e

gerarchia visiva

Card sorting

ovvero:


come raggruppare contenuti semanticamente affini
e nel contempo arricchire la 3M.


“Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality.”


Per poter raggruppare,
dobbiamo sapere cosa.

Anche per questo è importante raccogliere il materiale precedente.

Trovabilità

e riduzione del carico cognitivo.

Una definizione


Findability is a term for the ease with which information contained on a website can be found, both from outside the website (using search engines and the like) and by users already on the website.


Carico cognitivo?

Dillo a tu' sorella.

Dimensione e disposizione
guidano la scelta?

La gerarchia visiva è necessaria, ma non è sufficiente.
Per guidare la scelta è necessario dare
delle indicazioni visive e visual cues


(esempi)

Don't make me think.

Riducimi il tempo di decodifica della pagina,
riduci il carico di informazione che devo elaborare.


Stabilisci una convenzione il più presto possibile,
e sii consistente con questa.

Discover

Avete presente il progetto di Malica? :)

Costruiamoci attorno il nostro lavoro.

Discover


  • Interviste sul campo
    • Definizione di personas
  • Benchmarking di altri siti
  • Ricerca e board su pinterest (segrete)

Define

  • Pay off
  • Value proposition
  • Card sorting
  • Mappa concettuale
  • Definizione di user stories
  • Definizione di user journey
  • Mappa del sito

Develop

  • Guida di stile
    • Palette di colori
    • Tipografia e abbinamenti
    • Pattern di animazione/interazione/effetti
    • Set di icone e linguaggio delle stesse
    • Tono di voce della comunicazione

Almost deliver

  • Sketch cartacei
  • Mockup / Wireframe con Foundation (interattivi)
  • Layout con Malica

Prossima volta

Interviste con gli utenti
(dovreste aver avuto da Macciacchini i PDF
con le linee guida delle interviste).

Orientarsi e organizzare i contenuti

By Carlo Frinolli

Orientarsi e organizzare i contenuti

  • 1,419