Progettare con i wireframe

Progettare un sito non è cosa semplice. Bisogna avere innanzitutto radicati nella propria esperienza alcuni meccanismi di navigazione che bisogna aver studiato, approfondito e fatto propri. Lo User Centered Design fa parte proprio di questi studi e fa riferimento al punto di vista di navigazione dell’utente finale, quello cioò a cui è destinato il sito.

Viene pertanto da sé che progettare secondo questi parametri è cosa buona e giusta, ma per giungere ad un modello utile e definitivo bisogna ragionare su vari piani quali: la destinazione d’uso del sito, le esigenze particolari del sito, la tipologia di utenti che vi navigheranno, creare modelli e prototipi che possano aiutare a confrontarsi e migliorare gli standard, e infine testare il tutto.

La parte che ci interessa è proprio quella che sta nel mezzo: creare cioè un modello semi-grafico più o meno accurato che ci permetta di definire navigazione, strumenti, contenuti e interazione del sito in oggetto.

La fase antecedente alla creazione del wireframe

Pochi semplici passi ci possono aiutare a comprendere e definire l’aspetto che dovrà avere il sito finale, sebbene alcuni tratti piuttosto standard siamo già in grado di definirli a priori, come vedremo successivamente.

1. Un primo meeting con il cliente è ciò che ovviamente può chiarirci le idee sui primi punti precedentemente esposti, attraverso un brainstorming in cui si definiranno obiettivi e funzionalità.
2. Un’analisi dei siti concorrenti ci aiuterà inoltre a definire alcuni meccanismi e le strategie vincenti da attuare, per capire cosa porta più utenti e/o vendite.
3. Definite inoltre tramite delle simulazioni di navigazione (detti “profili utente”) o degli “scenari” (situazioni combinate di un particolare tipo di utente / compito da svolgere) i metodi di interazione con l’interfaccia del sito e gli obiettivi che volete raggiungere.

Ma prima di passare alla fase vera e propria di creazione del wireframe, studiamo alcuni standard di fatto.

Definire i componenti di una pagina

Ciò che non può mancare mai in una pagina web, che sia una homepage di un blog o un e-commerce, o ancora un sito vetrina o aziendale è:

• Testata, dove vi sia un titolo o logo identificativo ed eventualmente un sottotitolo, slogan o tagline.
  È molto importante che l’utente capisca al primo impatto sul sito di chi ci troviamo e, dato che sul web non abbiamo l’interazione fisica fra persone, è il logo a svolgere questo compito di interfaccia, deve essere il nostro punto di riferimento sempre e comunque all’interno di tutte le pagine del sito. Normalmente per i siti occidentali viene posizionato in alto a sinistra, che è l’area su cui l’occhio cade subito. Ovviamente per gli orientali, la cui scrittura parte da destra verso sinistra, vale il ragionamento contrario.

• Un sottotitolo, slogan o tagline (termine prettamente “da stampa”) è importante per far comprendere al visitatore di che parla il sito. Molte volte capita di entrare in un sito, vedere il logo, ma non capire assolutamente neanche dai contenuti, di cosa si parla, gli scopi di quel sito. Sceglietelo accuratamente con il copywriter se non esiste già uno slogan aziendale.
  Eventualmente in quest’area è opportuno spesso inserire il menu principale di navigazione, anche se non sono deprecate alcune pratiche più creative, come metterlo in una colonna laterale o in posizioni più strambe, a vantaggio però sempre di un’immediatezza e chiarezza nella navigazione.
  Spesso la testata conterrà anche le cosiddette “briciole di pane” o breadcrumbs, che ci serviranno a determinare il “dove siamo” nelle navigazioni più profonde e complicate.
• Contenuti. Il corpo, la vita del sito, che a seconda del suo uso avrà differenti caratteristiche.
• Il footer, o “piè di pagina”, dove saranno contenute informazioni riepilogative su titolo, sottotitolo, diritti copyright o eventuali licenze, nonchè la partita iva, da scrivere obbligatoriamente in Italia per i detentori.

Figura 1 – Ecco come si presenta il wireframe di base

Termina qui la prima parte. Nella seconda vedremo con esempi concreti come strutturare al meglio il nostro wireframe.

Caratteristiche tipiche di alcuni siti

Alcuni siti si differenziano da altri per alcuni elementi tipici. Fin da subito, anche a sito privo di contenuti, vi verrà naturale intuire su che tipo di sito state navigando.

I siti principali in cui vi potrete imbattere sono: siti aziendali, siti vetrina, e-magazine, e-commerce, blog e possono avere strutture differenti, a una, due o tre colonne.

Un sito aziendale, ad esempio, avrà come contenuti un’esposizione più o meno creativa dei servizi o prodotti offerti, foto rappresentative, contatti. Idem per il sito vetrina, che si chiama in tal modo perchè espone proprio come in una vetrina virtuale, un prodotto, un servizio, un evento e raccoglie tutte le informazioni relative.

Un e-magazine, come è intuibile, avrà una struttura più ricca e costruita, per poter esporre nella sua homepage più informazioni possibili. Proprio come un quotidiano, infatti, avrà una notizia principale in evidenza con una grande foto, le ultime 5/6 notizie in ordine cronologico discendente, o ancora l’ultima per ogni tipologia, trafiletti e spazi pubblicitari nei punti più strategici. Molto similmente si comporterà un blog, che a seconda della sua complessità riporterà le ultime notizie e in una o due colonne laterali altre informazioni utili alla funzione sociale del blog, quali commenti, feed RSS, sondaggi, etc.

Un e-commerce avrà invece un’altra struttura tutta sua, piuttosto rigida ma necessaria, quale il richiamo alle categorie di articoli posti in testata o in una colonna, la scheda del prodotto in bella evidenza, box che racchiudono informazioni sul carrello e sulla navigazione e le procedure di acquisto o acquisizione dell’ordine. Più chiaro è, meno difficoltà avrà l’utente nell’interazione.

Ma non è detto che tali strutture non possano essere stravolte in modo creativo e innovativo, purchè si effettuino dovuti test di navigazione per valutarne l’efficacia. Se si è giunti a queste conclusioni oggi è proprio perchè vi sono stati test di usabilità nel corso di questi anni che hanno confermato l’usabilità di tali strutture, appunto.

La gestione degli spazi nella creazione di un wireframe

Definiti questi standard, diamo il via alla creazione del wireframe. Il primo passo è di prendere carta e penna (sì, carta e penna) e cominciare a buttare giù le prime idee tramite il cosiddetto sketch.

In questa fase noterete che avere un foglio bianco dinanzi a voi non pone limiti al posizionamento dei vari oggetti all’interno della pagina nè alla creatività. È in questa fase infatti che gestirete entrambi gli aspetti della creazione di un sito: struttura e presentazione. Tenete a freno il brainstorming definendo i punti fissi di cui abbiamo parlato precedentemente, e solo dopo sfogate pure la vostra creatività fino a raggiungere un giusto compromesso.

È arrivato ora il momento di “togliere”: tutto ciò che vi risulta inutile, ripetitivo, esagerato, toglietelo pure. E non abbiate paura di lasciare dei “buchi”. Le giuste proporzioni danno aria e respiro ad un layout che altrimenti risulterebbe affollato e non focalizzerebbe la giusta attenzione dove deve. La simmetria non deve essere la regola, ma la compensazione sì.

Dove vi sia uno spazio “bianco”, in simmetria, non è detto che vi debba essere allo stesso modo uno spazio, ma porvi dei contenuti può aiutare a porre la giusta attenzione sugli stessi proprio grazie al primo spazio “vuoto”. Meriterebbe poi un discorso a parte il discorso sulla sezione aurea, che aiuta a focalizzare l’attenzione dove è più necessario.

È ora di trasporre il wireframe in digitale. Photoshop, Illustrator, Gimp… qualsiasi strumento vogliate utilizzare vale, purché si cominci a ragionare in termini di pixel e di spazi più verosimilmente reali rispetto al tipo di griglia o di layout che abbiamo intenzione di usare. È sufficiente delineare i bordi o colorare le aree che racchiudono alcune informazioni principali. Simulare i testi (tramite il Lorem ipsum o con contenuti veri), considerare margini e padding come nella rappresentazione più veritiera possibile del sito.

È questa l’anticamera della nostra bozza grafica in scala reale. Ora possiamo dare sfogo alla grafica e definire l’aspetto finale del nostro sito.

L’utilità effettiva di un wireframe e il suo uso

Inutile dirvi che il cliente, se non è pratico del vostro mestiere, capirà ben poco dal wireframe che andrete a consegnargli per approvazione e che avrete steso in seguito ai primi colloqui conoscitivi. Il suo uso infatti, dovrebbe essere prettamente vostro o interno alla webagency per facilitare la comprensione del posizionamento degli oggetti del sito all’interno delle pagine.

Al cliente finale è sempre opportuno consegnare invece la bozza grafica, elaborata sulla base di questo wireframe. L’esposizione grafica, la simulazione del vero aspetto che avrà il sito è lo strumento di cui il cliente può più facilmente disporre e che può più facilmente comprendere. In questo modo se le modfiiche successive riguarderanno esclusivamente l’aspetto grafico, appurata che la “posizione” degli oggetti è e rimarrà quella, sarete sicuri al 99% che la struttura e quindi il wireframe è approvato. Buon lavoro!