Project Work Web Usability (4)
2.5 Un esempio:Adobe.com
Un progetto di navigazione particolarmente riuscito è il redesign del sito www.adobe.com , opera di Hillman Curtis,in cui non è stato modificato il precedente layout (presumibilmente per non disorientare gli utenti abituali).
La pagina si presenta così:
La software house dedicata alle soluzioni per la grafica professionale ha individuato dei sistemi logicamente e visivamente ben distinti per il proprio sistema di navigazione.
Accanto al logo vi sono due gruppi di navigazione distinti senza orpelli grafici (cornici, fondini),ma con il solo variare dei rapporti di vicinanza tra le voci.Vi è anche una variazione di colore,ma è ridondante:non necessaria per la comprensione.
Il primo gruppo presenta la navigazione principale, istituzionale,costituita da quattro voci: store, products, support e corporate ; queste consentono un efficace instradamento degli utenti sulla base delle categorie concettuali di informazione cui sono interessati.
Il secondo gruppo,invece, consiste in tre voci (due nella versione italiana,che non presenta la traduzione di Adobe Studio,una sezione dedicata a consigli d’uso per gli utenti dei propri prodotti),che non sono altro che facilities del sito: Adobe Studio,ricerca e contatti. A differenza del gruppo precedente,le voci sono divise da una barra verticale,si tratta di una scelta funzionale,resasi necessaria proprio per la presenza della voce “Adobe Studio”:etichetta verbale composta da due parole!Per raggruppare le due parole in maniera che non sembrassero due link ma uno solo,si è scelta la barra verticale come spaziatore,dato che la sola vicinanza poteva indurre a delle ambiguità.
La parte centrale della pagina è dedicata alle notizie,alle offerte e alle ultime release,qui vige ancora il principio di vicinanza nel rapporto tra le immagini rotonde e il testo relativo.Non si fa uso di altri espedienti per il raggruppamento delle informazioni, nessuna cornice,nessun fondino colorato (a parte quello che domina l’intera pagina e che rafforza la coerenza visiva dell’insieme!).Eppure non vi sono difficoltà nell’attribuire ogni testo alla relativa immagine!
Sulla destra,infine,un’ulteriore lista di voci categoriali,che rappresentano le categorie di prodotti:per il web design,per la stampa,l’animazione ecc…In questo modo si presume una segmentazione degli interessi dell’utenza all’interno del più generale interesse per la grafica,invece di scegliere la voce “prodotti” nella barra orizzontale,si consente a chiunque di approfondire la sezione che più gli interessa.Inoltre è sdoppiata la voce Adobe Store (già presente nella navigazione principale): un chiaro segnale che si tratta di una sezione che sta particolarmente a cuore alla Adobe!
Le strade per raggiungere le informazioni sono logicamente diverse nelle tre sezioni di navigazione:secondo una rigida struttura ad albero nel primo caso,secondo una modalità di ricerca testuale nel secondo caso e attraverso il tipo di prodotto nel terzo caso.In più le novità sono sempre adeguatamente segnalate nella parte centrale, ciò è importante per molti aspetti tra i quali:
- Economia visiva: non vi sono orpelli inutili
- Completezza: tutto è catalogato e raggiungibile
- Ridondanza: vi sono diversi possibili modi di accedere alle stesse informazioni.
L’apparente semplicità del sito Adobe è il risultato di un attento design della navigazione, che poggia su un’accorta proliferazione degli utenti e su una solida architettura informativa,pur essendo il sito composto di svariate centinaia di pagine. L’utilizzo di espedienti di raggruppamento figurale è messo al servizio di una struttura logica-economica, efficace ed efficiente senza trascurare uno stile figurativo elegante e sintetico,perfettamente funzionale agli scopi del sito.