UX e Wireframe

Introduzione

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Autori:

Preferisci un video?

15 m

Cos'è la UX

La User eXperience è in generale quello che caratterizza appunto l’esperienza dell’utente come la velocità, la semplicità e l’emozione che provoca l’utilizzo del prodotto. 

Una buona UX quindi guida l’utente in modo chiaro e semplice, dandogli tutte le informazioni di cui ha bisogno nel modo in cui vuole riceverle. Più approfondirete le possibilità, più ne troverete. Il consiglio quindi è di non perdersi e rimanere sul semplice, non serve essere perfetti per ora.

Per raggiungere questi risultati, bisogna rispondere a delle domande chiave.

Scrivi su Miro

15 m

Interazione

Che sia un sito, un’ app o un prodotto, l’utente interagirà per fasi.

  • Prodotto fisico: unboxing, prodotto, attivazione, primo utilizzo, riutilizzo
  • Prodotto digitale: onboarding, sezioni in alto, sezioni secondarie, menu, login

15 m

Contenuti

Qualunque cosa sia, all’utente serviranno dei contenuti. Quali sono quelli principali con cui iniziare?

  • Prodotto fisico: fronte scatola, retro, depliant interno, manuale, app…
  • Prodotto digitale: home, landing page, chi siamo, servizi…

15 m

Azioni

Quale vogliamo che sia la prima azione dell’utente? Questa dovrà essere quasi inevitabile. 

Es. Aprire il pacco (in che modo?), scrollare verso il basso, cliccare un pulsante

Quale la seconda? E quale una sua alternativa? Queste dovranno essere guidate in modo chiaro e visivo, con priorità.

Es. Appoggiare l’oggetto, scannerizzare un codice QR, cliccare un pulsante, provare il prodotto

15 m

Messaggi

Nel caso dei siti web, è importante inserire almeno questi messaggi:

  • Titolo
  • Messaggio primario
  • Messaggio secondario
  • Messaggio di collegamento tra i due

 

Il tutto dovrà essere mostrato con gerarchia visiva: più è grande ed evidente, più ha importanza.

15 m

Grafica

Nei Wireframe, benchè non si faccia grafica, va previsto lo spazio per la grafica. Che siano immagini, vettoriali, icone o semplici elementi, saranno utili a comunicare. 

Importante: lasciare anche “spazio bianco”, i contenuti hanno bisogno di respirare. 

15 m

Disegna

Ancora una volta, Miro è lo strumento ideale. Potrete usare la penna a mano libera, i campi di testo e le forme:

  • rettangoli sbarrati per le immagini
  • rettangoli arrotondati per i pulsanti
  • cerchi o steline per loghi e icone
  • righe per i testi
 

Suggeriamo inoltre di usare i frame per racchiudere le singole “pagine”, come nello screenshot di seguito. Ovviamente le pagine possono rappresentare anche le facciate di una scatola o dei dettagli di un prodotto fisico.

Disegna su Miro

15 m

Ripeti per ogni contenuto

Cosa vuoi dirci?