tra design e interattività:la progettazione dell’interfaccia web.

comunicare è facile, farsi capire è un’impresa16 novembre 2009

la prima cosa da tener presente nella progettazione di un sito web sono gli scopi funzionali che quest’ultimo si prefigge. naturalmente a seconda delle funzionalità il sito web presenterà l’interfaccia adatta a soddisfare le funzionalità stesse.

è quindi chiaro che, a seconda della destinazione d’uso, il sito web potrà essere impostato su una sorta di pattern non riconosciuto al livello teorico ma riconoscibile nei casi d’uso ed, in un certo senso, formalizzato da essi.

a tal proposito prima di progettare un’interfaccia web è fondamentale riconoscere dei modelli o pattern che siano vicini alle funzionalità e gli obiettivi che il sito si pone. un’accurata analisi di benchmarking ci aiuterà nella realizzazione del nostro progetto.

un esempio di interfaccia utente in cui è chiara la distinzione funzionale fra le macroaree e sono ben distinti gli scopi specifici del sito.

distinzione delle macroaree funzionali dell’interfaccia utente presa in esame.

header

focus news

box informativosu un argomentospecifico

approfondimentonews

approfondimentosu un argomento specifico.

box di serviziobox di servizio

box di servizio

altro esempio di best practice e di definizione delle macroaree funzionali; è individuabile un pattern differente data la diversa destinazione d’uso.

distinzione delle macroaree funzionali dell’interfaccia utente presa in esame.

header

box novità

box di servizio

box di servizio

elencocategoriee ricerca

area utenti

vetrina prodotti

focus prodotti

nel progettare un sito web un passo fondamentale è costituito dalla progettazione e razionalizzazione dei contenuti a seconda degli obiettivi che si vogliono ottenere.

nel caso che presentiamo oggi ci troviamo di fronte al sito istituzionale di un’azienda che offre ai clienti servizi a 360 gradi in ambito multimediale.

il progetto del sito deve tener conto innanzitutto di cosa vogliamo che l’utente percepisca ad un primo sguardo. bisogna in pochi istanti di visualizzazione della pagina far comprendere all’utente di cosa stiamo parlando, che servizio stiamo offrendo per aumentare la capacità di recapture del sito stesso.

abbiamo impostato il workflow di questo progetto creando un wireframe del sito che renda espliciti i contenuti. nel wireframe, sono presenti i contenuti del sito razionalizzati anche se la griglia non pone alcun limite al disegno della pagina, còmpito del designer.

funzioni principali del wireframe di un sito

1. stabilire i contenuti della pagina

2. stabilire le funzionalità tecniche e le connessioni tra le funzionalitàtecniche del progetto web

3. chiarire aspetti tecnici e di design

wireframe di progetto per il sito istituzionale di estensa: distinzione delle macroaree funzionali.

header

area comunicatiaziendali

area portfolio

area contatti

footer

focus servizi e prodotti

wireframe di progetto per il sito istituzionale di estensa: descrizione delle funzionalità e dei contenuti delle macroaree.

contenuti dell’header: marchio, menù di servizio, menù di primo livello (visibile su tutti i livelli di navigazione), accesso area riservata clienti, richiesta preventivo

contenuti area comunicatiaziendali: news, blog, banner di un prodotto in evidenza

contenuti area portfolio: alcuni brand individuati come case study

contenuti area contatti: newsletter, richiesta contatto per preventivo on line, direct line, estensa sui social network

contenuti area footer: link di secondo livello sempre visibili su tutti i livelli di navigazione, tag cloud, link consigliati da estensa. dati aziendali. menù di servizio footer.

contenuti focus servizi e prodotti: presentazione interattiva realizzata mediante framework javascript.

ed ora uno sguardo al sito.