Progettare i wireframes: la gravità
Negli ultimi tempi sta prendendo sempre più piede fare test di usabilità e di eye tracking.
Anche guardando però dove gli utenti mettono maggiormente gli occhi a nessuno (o quasi) viene il sospetto o il dubbio di creare un flusso scorrevole per presentare il sito e le informazioni rilevanti in maniera da non appesantire la persona senza fargli fare su e giù con gli occhi.
Quando guardiamo una pagina, partiamo dalle cose più in alte (di solito il logo), e poi ci spostiamo sulle cose più colorate e sulle immagini, saltando da una sezione all’altra, dando una veloce lettura alle intestazioni per capire di cosa parla quel blocco e poi continuare nella nostra ricerca. Se quello che si cerca è in alto e magari in una posizione poco evidenziata, ci costringe a risalire con gli occhi e cercarlo, provocando uno sforzo che a lungo andare può aumentare il nostro stress, specie dopo molte ore e non si è più freschissimi.
Questo sito usa caratteri grandi e colori accesi per attirare l’attenzione, e infatti, nonostante i diversi passaggi, riusciamo a capire ben presto di cosa parla il sito, e quali cose possiamo fare, senza doverlo andare a cercare. Siamo guidati. I gestori del sito hanno messo infatti il pulsante “buy now” e “learn more” in diversi punti strategici nel sito. Se avessero lasciato il “buy now” solo nella parte alta del sito a destra, nessuno l’avrebbe visto e cliccato. Sarebbe rimasto invisibile ai più.
Questo sito fa uso dei colori per evidenziare un percorso, ma ovviamente non è l’unica via possibile, e ovviamente dipende da come si usa, a volte i colori possono distoglierci dal nostro obiettivo.
Youtube ad esempio usa i box con i video per attirare la nostra attenzione. Se fate caso, sul sito di youtube l’annuncio pubblicitario di Chrome è ripetuto due volte, nella sidebar e sotto tutti i video. Secondo voi quale potrebbe essere quello più cliccato? E ancora, pensate che mettere il form di ricerca così vicino al logo sia stato un caso?
Quando progettate un sito, in fase di design (progettazione, non disegno), pensate a come organizzare gli elementi in maniera sequenziale oppure distinguendoli in maniera lampante, facendo seguire un percorso “forzato” ai vostri utenti, così da poter migliorare la loro esperienza di navigazione nel sito (trovare quello che cercano senza sforzi) e aumentare le conversioni ai vostri prodotti o servizi.
L'Autore
Architetto dell'Informazione presso uno società di webdesign, ho sviluppato nel tempo conoscenze in interaction design e user centered design che cerco di condividere con gli utenti di ItalianWebDesign.
Add to Google
17 Commenti
ottimo articolo; io sull’argomento in rete ho trovato diversi case studies ma pochi tutorials.. qualche altro articolo/guida da suggerire? ,-D
Ottimo articolo!
@Matt: credo sia difficile trovare un tutorial, perchè è qualcosa di specifico per ogni progetto.
Credo che questi articoli, insieme all’analisi di siti come quelli proposti vadano più che bene.
ottimo post. Purtroppo a volte mi scontro con persone che vorrebbero mettere il logo della loro azienda sotto o al centro…un motivo per certe cose ci sarà no? In ogni caso è difficile fare una scaletta ben precisa tutto varia da progetto a progetto. E da cliente a cliente. Siam noi ad aver il difficile compito di guidarlo per la giusta retta.
oddio il logo sotto o al centro?
alla prossima richiesta del genere prendi un sito che non conoscono e fai come dicono loro, e poi chiedi loro di dirti di che sito si tratta. finchè è il proprio sito e ci si lavora sopra è ovvio che si capisce subito di cosa si tratta, ma quando è un esterno a farlo è dura se non è fatto con i controcrismi!
Bellissimo articolo, grazie Laura.
Io credo che spesso è sufficiente usare un pò di buonsenso quando andiamo a creare un’interfaccia (che va creata molto prima di decidere i colori).
Bisogna cercare di essere ridondanti e mettere le cose più importanti in diversi punti strategici del sito.
Ovviamente poi quando il sito (o il wireframe) è completo (ma se stiamo parlando di wireframe, dovrebbero essere ad altà fedeltà) lo navighiamo con gli occhi, e vediamo quale percorso seguiamo e vediamo cosa migliorare o modificare le informazioni o i blocchi.
Se il sito è già online invece basterà fare qualche test con gli utenti, e vedere, tramite eye tracking dove mettono maggiormente gli occhi, e focalizzarci su come migliorare quegli aspetti.
Ciao Lauryn, bell’articolo!
In effetti questa è una parte importante della progettazione e non sempre si riesce nell’intento.
Comunque nel web design credo valgano alcuni dei principi della grafica, in fondo è sempre comunicazione visiva!
Ultimamente sto leggendo un ottimo libro (“Capire la grafica” dell’editore LOGOS) e parla anche di questo.
Tra le altre cose, indica ad esempio alcune delle regole per risaltare le cose rispetto alle altre e creare una gerarchia visiva:
- Dimensioni: caratteri e immagini grandi attirano (questo è ovvio);
- Colori: i colori caldi attirano più di quelli freddi;
- Forma: una forma sinuosa o tonda in uno schema squadrato salta subito all’occhio, così come elementi che sbordano dai box e griglie;
- Contrasto: elementi messi a contrasto tra loro, magari vicini, sono più evidenti, si può creare contrasto di colore, dimensioni, forme, etc.
- Movimento: guidare l’occhio nel percorso che si vuole che faccia (che spieghi anche nel tuo articolo) con la grafica: tipo frecce, righe, illustrazioni, o usando i principi della “percezione visiva”.
Questa secondo me è la cosa più difficile da fare e non sempre viene immediata!
Ops… nella fretta! L’articolo è di Marco, complimenti a te, allora! A Lauryn li faccio sempre perchè questa community ormai è per me un punto di riferimento (sviolinata finale!)
http://www.feng-gui.com
se può tornarvi utile in riferimento al tema dell’articolo …
Ciao, interessante questo articolo. Sarebbe anche interessante un articolo che propone una scaletta in ordine cronologico dei passaggi che si devono fare per realizzare un sito web. O qualcuno l’ha gia fatta?
L’ho già fattooo:
http://www.italianwebdesign.it/dal-wireframe-alla-pubblicazione-sviluppo-usabile-di-un-sito-parte-1/
http://www.italianwebdesign.it/dal-wireframe-alla-pubblicazione-sviluppo-usabile-di-un-sito-parte-2/
ahhhhhhhh grazie mille
@DarioDN curioso il sito che hai postato!
Grazie per l’articolo…molto interessante. Tornando però a quello detto da aledesign.it io non sono del tutto d’accordo che il logo deve stare sempre in alto, anche se per ora ho sempre fatto così, se imposti bene i colori, caratteri e dimensioni a mio avviso il logo lo puoi posizionare dove vuoi…mi sbaglio?
@Marco Olivetti… ho letto i tuoi due post che mi avevi consigliato ma non è proprio quello che cercavo, io intendevo una scaletta del tipo:
1-incontro con cliente
2-studio della concorrenza
3-scelta del nome dominio
4-scelta del servizio hosting
…
8-wireframe
…
15-stesura codice html
16-stesura codice css
…
non so se mi sono spiegato ma vorrei sapere cosa un pò tutti i passaggi che in un tipico sito bisogna fare senza tralasciare nulla.
Diciamo, uno schema da seguire ogni volta.
Ovviamente capisco che non è una cosa semplice quella che vi chiedo ma mi sareste di grande aiuto.. grazie in anticipo
@Nicolò: noi potremmo anche dirti quale è la scaletta da seguire ma sarebbero tutte diverse fra loro e tu non ti troveresti bene forse con nessuna delle tante.
Se hai un’idea di come potrebbe essere il flow delle attività, mettilo nero su bianco e prova ad immaginare se potrebbe andarti a genio in un lavoro immaginario.
E’ molto soddisfacente creare il proprio metodo di lavoro. Te lo garantisco!
certo hai completamente ragione. Il problema è che sto cercando di imparare questo mestiere e ho paura di tralasciare cose importanti.