Design di interfacce

design-di-interfacce

Navighiamo moltissimi siti web pieni di risorse interessanti ogni giorno e ogni giorno ci rendiamo conto di come sia importante organizzare i contenuti. L’organizzazione dei contenuti ci permette di rendere i nostri utenti abili a trovare le informazioni che cercano nel minor tempo possibile e con soddisfazione, evitando che abbandonino il nostro sito e facendo provare loro un senso intrinseco di soddisfazione. Perfetto, ma dal punto di vista visual come possiamo ottenere un buon risultato? Con il design di interfacce vi rispondo!

Il design di interfacce ci permette di stabilire una gerarchia visuale degli elementi presenti in pagina, questa gerarchia fa si che gli utenti trovino nell’immediato la risposta alla loro domanda iniziale e rimangano soddisfatti.

Ma ci sono dei problemi relativi al design!

Quando state navigando attraverso un sito e arrivate su una pagina avete il bisogno di sapere dove siete, cosa potete trovare e dove potete andare! Queste indicativamente sono le tre priorità che come utenti si ha quando si arriva sulle pagine di un sito: orientarsi. Pensate che più o meno noi possiamo considerarci degli advanced user quindi in un modo o nell’altro anche se atterrassimo in una pagina molto confusa forse riusciremmo a trovare una via di uscita per arrivare dove vogliamo, ma un utente non esperto?

Il nostro compito deve essere quello di rendere disponibile le risposte alle tre domande poste prima; senza queste risposte gli utenti rimbalzano via e lasciano la nostra pagina, non approfondiranno la ricerca, ma semplicemente andranno via.

interfacce-design

Esiste una soluzione

La soluzione risiede nel design delle interfacce e nel definire una gerarchia visiva: lo user che trova immediata risposta alle tre domande fondamentali non abbandona il sito!

Le tre domande

  • dove siete?
  • cosa trovo?
  • dove posso andare?

Jeffrey Veen (2001) ha suggerito che queste tre domande possono essere pensate come tre zone differenti di una pagina web (la figura dell’articolo)

  • il primo rettangolo in alto nella parte superiore della pagina, definiamolo come testa o header, ha il compito di rispondere alla prima domanda ‘dove sono?’ è il luogo predisposto a far sì che noi si spieghi agli utenti come sono arrivati fino a quel punto e gli consenta di orientarsi
  • il rettangolo più grosso, quello che occupa la parte maggiore dello schermo, definiamolo corpo o body, ha il compito di rispondere alla domanda ‘cosa trovo?’ 
  • il pannello posto a sinistra, menu laterale , è quello che risponde alla domanda ‘dove posso andare?‘ e dovrebbe consentire allo user di spostarsi dal punto in cui si trova.

Questa rappresentazione non è immobile o meglio non la dovete pensare come incisa nella pietra, può ovviamente essere modificata, ma rappresenta di per sé una struttura classica, una impostazione di visual design che rispecchia i comportamenti degli utenti.

La modalità con cui gli uomini si rapportano con i computer, con i programmi e ancor più con le interfacce, rapporto definito dalla human computer interaction, è basato su una serie di elementi e fattori, non esaustivi nel loro complesso, ma che devono essere presi in considerazione nel momento in cui si progetta il design delle interfacce. Lo stesso Krug (2006) ha suggerito che il web design deve stabilire delle gerarchie visive ben chiare per definire le pagine web.

Le gerarchie servono a suddividere la pagina in elementi ben precisi all’interno del quale posizione gli elementi che possono essere manipolati per ridurre il rumore e disordine visivo; la gerarchia aiuta a comunicare nel modo migliore il nostro contenuto agli utenti, rende chiaro il messaggio che stiamo passando e soprattutto, la definizione di un corretto visual design aiuta a rispondere alle tre domande.

Perché dobbiamo scegliere una gerarchia visiva?

Per organizzare i nostri contenuti secondo un ordine preciso e coerente, immaginate di porre a caso i vostri contenuti… sarebbe il caos visivo: non è possibile posizionare gli elementi a casaccio, creeremmo solo entropia all’interno della pagina, pensate alla impostazione visiva di un giornale, gli elementi, tutti gli elementi, trovano una loro collocazione spaziale ben precisa e che viene mantenuta e cambiata di rado, se non per qualche ristrutturazione del sito.

Implementare una gerarchia visiva?

  1. Implementate in home page degli elementi visivi che la rendano riconoscibile, come per esempio il logo azie in home page il banner e utilizzare anche altri elementi o scritte per far capire il luogo di atterraggio dell’utente, sicuramente nella pagina principale inserire logo e nome azienda è una scelta da privilegiare… e che siano ben visibili e chiari.
  2. Il contenuto è il re, lo sappiamo bene, quindi poniamo attenzione a quelli che sono i nostri contenuti e offerte; se siamo una azienda o un blog che offre risorse web forniamo magari all’utente un menu superiore con le indicazioni dei nostri contenuti scaricabili liberamente, una barra di navigazione che consenta loro di muoversi fra le risorse.
  3. determinate quello che gli utenti possono fare sul vostro sito, se volete che abbiano la possibilità di navigare verso una altra pagina inseriti dei contenuti visivi come menù o selettori.
  4. spaziate i contenuti in modo che la loro posizione all’interno della pagina sia ben definita, inserite le giuste etichette e testi per differenziare gli argomenti
  5. siate logici posionate i contenuti con criterio che sia in base allo schema di Veen oppure no, basta che abbia un senso logico.

Qualunque tecnica voi decidiate di seguire dovete essere sicuri che in pochi secondi gli utenti sappiano rispondere alle tre domande fondamentali, altrimenti abbandoneranno le vostre pagine e rimbalzeranno via.

tratto da Interaction Design

Scritto da mtderiw

mtderiw

Information Architect and Social Media Strategist, Experienced Test Manager, un edile dell'Informazione imprestato all'informatica o viceversa, scegliete voi! Un pazzo scrivente che ama l'informatica, la comunicazione e... le moto!

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *