Estetica vs usabilità: un mito da sfatare
La sfida di oggi mi entusiasma particolarmente: voglio infatti sfatare un mito che sento aleggiare qua e là, e che mi lascia decisamente perplessa. Lo farò servendomi di valide prove capaci di avallare la mia tesi, e non vi nascondo che sono veramente curiosa di vedere cosa pensate al proposito e se siete d’accordo o meno con me.
Sto parlando dell’assioma per cui un sito bello da vedere deve per forza di cose essere non usabile, una teoria che tende a giustificare layout dal design poco curato e dalla grafica sciatta e che suona pressappoco cosi: “Non è una bellezza di sito, ma un sito non deve essere bello, deve essere usabile”.
A tal proposito, ho accennato brevemente il mio pensiero in questo articolo, di cui riporto un piccolo sunto:
D’altra parte, laddove i concetti dell’estetica e del bel vedere sono solo teorie poco concrete – si fa sempre più piede l’idea che una buona grafica non sia un dettaglio fondamentale di un sito funzionale, anzi. Si mormora quasi che la grafica sia un’inutile distrazione, un disturbo che rende le pagine di un sito pesanti, non accessibili, poco usabili, lente da caricare….eccetera eccetera.
Il commento generale, elargito quasi come un alibi? “Forse i siti che faccio non sono propriamente belli, ma almeno sono usabili!”, come se una cosa potesse in qualche modo escludere l’altra.
La realtà é che un sito efficace é si un sito usabile e di semplice consultazione, ma non solo. Una pagina bianca con del contenuto testuale, priva di immagini e con una navigazione elementare, é senz’altro di semplice fruizione e lettura, ma cosa sarebbe il web se ogni sito fosse una schermata bianca contenente testo e null’altro?
In realtà – come avremo modo di vedere più avanti – un sito può essere bellissimo, un vero capolavoro di estetica, senza peccare minimamente di scarsa usabilità. Il mito avrebbe ragione di esistere se una buona estetica fosse sempre sinonimo di grafica eccessiva, effetti Javascript intrusivi e colori e font usati in modo eccentrico e fuori dal comune. Ma non è cosi.
Un design può essere piacevole e curato nei dettagli, e allo stesso tempo agevolare l’user experience dei visitatori del vostro sito. Una buona grafica può dare un’impronta di professionalità e competenza alla vostra azienda e spingere l’utente all’azione da voi desiderata, sia questa l’acquisto di un prodotto o servizio o il semplice contatto.
Con la scusa della ‘grafica non usabile’ vedo continuamente siti web dall’aspetto sciatto e trascurato, siti che non hanno la benché minima verve creativa e che sono di fatto incapaci di attirare l’utente. E se un sito come Google può permettersi un lusso simile, un sito web che mira alla vendita deve per forza di cose tenere conto anche dell’aspetto estetico della sua pagina web.
Sto parlando di form, pulsanti e moduli di contatto non formattati e lasciati con lo stile di default, anche se questo stile fa a pugni con il resto del layout. Sto parlando di colori mal abbinati, scelti con chissà quale criterio e con giochi di contrasti ai limiti della decenza. Sto parlando di immagini di scarsa qualità, e di una tipografia poco curata, con un’interlinea capace di rendere poco leggibile un qualsiasi testo e font amatoriali che nel 2011 dovrebbero essere banditi dal web.
Eppure basterebbe poco per coniugare in modo equilibrato usabilità ed estetica ed ottenere un sito efficace e d’impatto. Non occorrono particolari doti grafiche (anzi, una grafica eccessiva o troppo particolare rende in ogni caso la consultazione dei contenuti poco semplice) ma solo una cura dei dettagli più mirata, senza nascondersi dietro l’alibi del sito usabile per giustificare un design amatoriale e di dubbio gusto.
Sul web è possibile trovare alcuni siti che possono fornirci ottimi spunti di analisi, siti capaci di dimostrare come sia possibile progettare layout dalla grafica mirata ed estremamente accattivante e come questo non comprometta affatto l’usabilità del sito stesso, anzi. Vediamone alcuni!
Inkd
Inkd ha una grafica abbastanza lineare e pulita, una scelta che definirei ottimale in un sito e-commerce, che necessita di un occhio di riguardo particolare per tutto ciò che concerne usabilità e accessibilità. I colori utilizzati sono una scelta eclettica ma che funziona: chi di voi avrebbe scommesso sul binomio azzurro acceso/marrone del menu di navigazione?
Lo slider presenta delle immagini estremamente accattivanti dei prodotti in vendita e la tipografia è curatissima. Nel complesso si presenta quindi come un sito bello da vedere e semplice da consultare.
Zappos
Anche Zappos è un e-commerce, anche se la mole dei prodotti in questo caso è decisamente più massiccia. Zappos è uno stupendo esempio di come usabilità e design possano sposarsi in un layout coinvolgente, di semplice consultazione e d’impatto. Molto belli i colori, gradevole la tipografia e le immagini dello slider, e notevole la semplicità di fruizione del sito, grazie al footer super informativo, al megamenu e alle varie call to action disseminate nella pagina.
Mailchimp
Mailchimp ha una bellissima grafica, fondamentalmente abbastanza semplice, e resa gradevole da una tipografia mirata e da illustrazioni vettoriali. La home page è molto informativa e l’interfaccia è di semplice consultazione.
Philadelphia
Il sito della città di Philadelphia è realizzato da Happy Cog, l’azienda di Zeldman: un nome, una garanzia. Lo slider mostra immagini di impatto, il megamenu e la tab sotto lo slider informano l’utente in modo immediato e senza un eccessivo scrolling del mouse e nel complesso la resa estetica è decisamente gradevole. E usabile, of course.
A Book apart
Se A list apart ci ha affascinato con un ottimo uso di spazi bianchi, tipografia e minimalismo, il suo ‘fratellone’ A Book Apart non è da meno. Una grafica pulita, essenziale, senza fronzoli. Una straordinaria tipografia, ottimi accostamenti di colore, carini i pulsanti ed elegante lo stile di formattazione dei testimonial. Un esempio in cui sono i dettagli a fare la differenza.
ThemeForest
Il layout di ThemeForest è praticamente perfetto, sia dal punto di vista prettamente estetico, sia per quanto concerne l’usabilità. Il design è accattivante, pulito e curatissimo nei dettagli (lo stile dei form, le icone utilizzate nel pannello utente, lo schema colori, la tipografia) e la navigazione, cosi come il processo di registrazione e di acquisto dei temi, è estremamente intuitiva.
Fineco
Il sito della banca Fineco è estremamente usabile e pulito. Il look è moderno e alcuni dettagli di colore, oltre alle particolari immagini dello slider, rendono il layout molto gradevole. Le icone danno un taglio fresco e giovanile alla pagina e il footer è uno spazio utile, che riassume la struttura del sito e i link utili all’utente.
Un buon uso degli spazi bianchi e delle griglie fanno si che l’intera pagina sia ben proporzionata e i testi di facile lettura.
Bakeca
Siamo sempre in Italia e parliamo di uno dei siti di annunci più conosciuto sul web. Il sito di Bakeca, recentemente rivisitato, è piacevole e ha uno stile web 2.0 moderno e accattivante. Molti gli accorgimenti che rendono il sito più che usabile, dai tooltip che aiutano l’utente nella ricerca ai tips che guidano l’utente nell’inserimento di un annuncio, evidenziando ogni singola fase.
L’interfaccia è semplice e molto carina: le icone, i colori utilizzati, la tipografia curata…tutto estremamente ordinato e, di conseguenza, bello da vedere e facile da usare.
Tips & Tricks: usabile, ma anche bello da vedere
Vediamo qualche piccolo consiglio per migliorare l’aspetto estetico del sito, senza comprometterne l’usabilità.
Stile ai form
E’ un consiglio che vi ho già dato, ma non mi stancherò mai di ripeterlo: formattate i vostri form e i moduli di contatto, non lasciate gli stili di default! Aumentare la dimensione e il padding dei form, utilizzare un buon font per le label, settare i colori sulla base del layout, aggiungere delle piccole icone o anche solo lavorare sullo stato focus…sono tutte modifiche che non compromettono l’usabilità del sito, ma che a livello visivo fanno veramente la differenza.
Fig 01 - lo stile dei Form di Fineco: una resa estetica davvero accattivante
Fig 02 - un form con lo stile di default: visivamente non è proprio un granchè.
Pulsanti e call to action accattivanti
Le call to action svolgono un ruolo essenziale in un sito, perciò cercate di avere un occhio di riguardo per i colori che scegliete: va bene che devono essere accesi e catturare l’occhio dell’utente, ma non esagerate con le tinte fluo!
Aggiungete un effetto hover, anche leggero, per aumentare l’interattività del layout e renderlo più dinamico: costa poco e l’effetto è molto gradevole.
Per quanto riguarda i pulsanti dei form, anche in questo caso evitate di lasciare lo stile di default e create pulsanti personalizzati sulla base del design.
Breadcrump & co
Le ‘briciole di pane’ e tutti gli altri tips per guidare l’utente nella navigazione del sito e nei processi di registrazione, acquisto & co sono essenziali in un sito usabile, specialmente se la mole dei contenuti da consultare è notevole. Aggiungiamo dunque questi elementi, ma facciamolo con stile: nessuno ci vieta di usare una formattazione gradevole per le nostre breacrump, quindi evitiamo di progettare questi dettagli a caso, senza pensare minimamente alla loro resa estetica.
In conclusione
I siti inseriti in questo articolo sono solo alcuni dei tanti siti che riescono a coniugare con successo estetica e usabilità. Il consiglio, al solito, è: occhio ai dettagli! lavorate sul layout con cura, evitando di tralasciare – per inerzia o per mancanza di tempo – quelle piccole cose che possono fare la differenza e rendere la pagina veramente accattivante.
Ora passo la patata bollente a voi: cosa ne pensate? L’estetica è un aspetto fondamentale per la riuscita di un buon progetto web, o è un aspetto secondario che possiamo sottovalutare senza troppe recriminazioni?
Letture consigliate
– Un tocco creativo in più ai nostri layout: ecco qualche dritta
– Come evitare di realizzare siti amatoriali?
– Web e tipografia: gli errori da non commettere
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
30 commenti
Trackback e pingback
-
Raccolta di articoli della settimana 9/10/2011 | Saverio Gravagnola
[...] Estetica vs usabilità: un mito da sfatare (Your Inspiration Web) [...]
Secondo me bisogna sviluppare di pari passo l’estetica e l’usabilità, quindi riservare ad ognuna il 50% del totale. Solitamente il cliente punta sull’estetica (flash e gif animate fino a far esplodere il monitor) mentre il programmatore sull’usabilità; ecco che il webdesigner deve coniugare entrambe le cose, fornendo un prodotto bello da vedere e semplice da utilizzare… No?
Pienamente d’accordo con te.
Sta a noi trovare la soluzione a determinati problemi che possono sorgere durante la progettazione di un sito, e sta a noi trovare il giusto equilibrio tra estetica e funzionalità.
diciamo che spesso se ne dice il contrario, declinandolo sull’accessibilità: i siti usabili e accessibili sono tutti brutti. come dici tu invece la cosa non è assolutamente vera, mi trovi d’accordo :)
però i link sottolineati e non solo colorati, sono un must che qui su youinspiration continua a mancare ;)
per giustificare il mio intervento sui link, anche se offtopic, mostro una simulazione di come vedrebbe il sito mio padre che ha una banalissima e comunissima daltonìa: http://dl.dropbox.com/u/923888/nolink.jpg
il link non esiste più…pensateci :)
Si, sono piccoli miglioramenti che dobbiamo fare e che correggeremo in un prossimo mini-restyling.
Ps. Pensaci anche tu, comunque..nella home page del tuo blog vedo molti link verdi e senza sottolineatura ;)
hai ragione! tema nuovo, sviste epocali :D li ho corretti negli articoli, ma nel box di presentazione mi sono sfuggiti ;) grazie!
L’estetica è fondamentale.
Non è necessario stravolgere il panorama grafico italiano con grafiche da urlo, è sufficiente curare i particolari, anche i più piccoli, dell’intero progetto web. Proprio come hai detto nell’articolo.
I siti che hai riportato come esempio sono tutti ben curati, con una grafica pulita e lineare. Utilizzano una struttura standard, il menu principale ad esempio è sempre (giustamente) in vista nella classica posizione orizzontale.
Vedo però molti designers, anche i cosiddetti “guru”, che realizzano grafiche d’impatto trascurando totalmente l’usabilità. Ti vedi costretto a cercare il menu principale, a girovagare per il monitor cercando elementi interattivi e via dicendo …
Oppure siti che “scorrono” … pure troppo! In verticale, poi in orizzontale …
Quindi, se troppa grafica “stroppia” significa che oltre alla cura dei particolari non si può andare? Significa grafiche e strutture tutte simili?
Ad oggi il mio punto di riferimento sono proprio quelle grafiche pulite ed usabili, simili ai siti che hai riportato, però mi chiedo come potrà essere la prossima evoluzione del settore.
No, non penso sia cosi. Credo che siano centinaia di varianti (menu a destra, menu a sinistra, il tipo di slider, i colori, ecc) con cui possiamo giocare, e che non sia necessario mantenere un tipo di struttura standard per non peccare di scarsa usabilità.
Io amo i siti puliti, ma mi piace anche giocare con i colori e con effetti grafici particolari per dare un tocco originale ai layout..ovviamente stando ben attenta che il disegno rimanga intuitivo e di semplice consultazione.
Ciao!
Io amo i siti con una grafica che mi stupisca, anche se devo poter leggere al meglio, navigare con estrema facilità e senza fatica, trovando tutto con la bacchetta magica!
Ci devono essere anche i contenuti però! A volte blog e siti di persone comuni possono essere esteticamente un po’ latitanti, ma molto “umani”. Se così posso definirli.
I minimali hanno il loro fascino, ma a volte danno la sensazione di essere un po’ snob…! ;)
La vostra grafica a me piace: forse ve l’ho già detto, la trovo allegra.
Ho letto con piacere il tuo articolo… A presto!
I minimal vanno bene solo in determinati casi, perchè sono molto ‘freddi’ e impersonali. Ogni caso è a sè, ogni sito ha i suoi colori, uno stile e una grafica sulla base di ciò che deve rappresentare e del target che deve colpire. :)
ps. grazie!
Estetica e usabilità sono due facce della stessa medaglia, un sito web non è completo se non ha entrambe.
L’estetica deve contribuire a rendere il sito piacevole da visitare e soprattutto ad esaltarne l’usabilità.
Dal mio punto di vista l’usabilità e/o l’estetica fini a se stessi sono inutili, devono andare di pari passo per contribuire a rendere il sito migliore e rendere migliore l’esperienza che un utente ha nell’usare quel sito.
Vedo con piacere che siete tutti ‘dalla mia parte’ :)
Oddio credo che essere contrari sia una cosa da pazzi XD
Può essere contrario chi fa questo lavoro per divertimento o passatempo oppure non gliene frega niente di fare le cose per bene.
Chi lo fa con professionalità e passione difficilmente pensa a fare un sito o solo bello o solo usabile.
Ciao Sarah, è sempre un piacere leggere i tuoi articoli! ;)
Questa è una discussione che va avanti da un nel po’, e se non convince i clienti almeno i web designer dovrebbero essere d’accordo! Magari rientra nelle cose che si ‘vorrebbero fare’ ma tra tempi ridotti e richieste strampalate ci si dedica scarsa attenzione.
Non è facile catturare l’attenzione con un bel design e allo stesso tempo consentire una facile navigazione su pc e altri supporti.
Ma è questo il lavoro che bisogna fare, e con il quale ci presentiamo. Non è il massimo proporsi con lavori poco curati..ne passi uno, ma perseverare non aiuta noi per primi! ;)
La discussione va avanti perchè continuo a leggere commenti del genere:
“Si, vabbè, è bellissimo, ma un sito deve essere usabile, mica un’opera d’arte”
e puntualmente mi inalbero. E poi tedio voi con questi articoli :)
Per quanto riguarda i miei gusti personali, un sito usabile è sempre stato bello. Lo stile dei siti che hai preso come esempio, è proprio quello a cui aspiro e che più mi piace vedere.
In generale però, esiste il mito che un sito usabile non sia bello. Ripeto, per me non è mai stato così, ma è difficile levare certe convinzioni dalla testa di qualcuno. Ma è anche vero, come hai fatto notare tu parlando dei form non personalizzati, che esistono esempi che non fanno che rafforzare questa tesi: ho capito l’usabilità e la semplicità, ma un po’ di sforzo per fare un passo verso l’estetica non guasterebbe di certo!
…Si vede che ne hai visti pochi, di siti usabili :D la maggior parte dei web designer che sbandiera ‘siti usabili’ nel proprio portfolio ha lavori inguardabili dal punto di vista estetico!
Non mi sono spiegato bene!
Mi sono sempre piaciuti di più i siti semplici, usabili e belli da vedere, piuttosto che i siti stupendi dal punto di vista grafico.
Non quelli “solo” usabili e che molto spesso (non sempre) sono orrendi!
Ottimo articolo come sempre ma sopratutto ottime risorse.
Grande Sarah!
Grazie :)
ps. Ma lo sai che assomigli tantissimo ad un ragazzo che faceva le medie con me? :D
Scusate se faccio un commento del tutto fuori dall’articolo, ma chi è che vi realizza i fumetti per ogni articolo? volevo farli i complimenti!
I fumetti sono acquistati su Fotolia, poi sono io che li unisco, combino, modifico e aggiungo i testi sulla base dell’articolo. :)
Applaudo all’articolo………..un piccolo appunto va al sito di themeforest………lodi alla grafica e all’usabilità niente da dire………ho sempre trovato tutto quello che cerco con non più di cinque click………ma con banda inferiore a 1 mega…….è come caricare macigni con il cucchiaino da caffè :) ………..tutta quella grafica e molto fascinosa..poi si paga………..
Credo che ThemeForest si rivolga ad un pubblico che difficilmente naviga con una banda simile :)
ps. Hai fatto il restyling del tuo sito zitto zitto senza dirci niente!!! pagherai per questo :D
tentativo di restyling fatto a rate diciamo :D…………..insomma sto cercando di finirlo dalle 23 a mezzanotte :D
“Credo che ThemeForest si rivolga ad un pubblico che difficilmente naviga con una banda simile :)” Bè ti assicuro che noi poveri webbisti provinciali qui………..siamo messi mooolto ma mooolto male a banda :)……ieri sera andavo alla stratosferica velocità di mezzo mega :)………..pensa te aggiornare un portale a sta velocità che pacchia :D
Mi unisco a Francesco per i complimenti sulle vignette ad ogni inizio articolo.Brava Sarah. Riguardo all’articolo, oggi disponiamo degli Standard Web che permettono di creare in egual misura siti usabili e belli graficamente, una componente non esclude l’altra, a mio avviso. Credo non si debba esagerare nei due sensi, cioè non soffermarsi solo a creare siti usabili ma qualitativamente brutti in grafica o belli da vedere ma pessimi a livello usabilità/accessibilità.
@sarah lo prendo per un complimento :P
Ottimo articolo presentato bene anche graficamente con dei buoni esempi. Il contrasto infinito stile “BENE/MALE” tra usabilità e bellezza penso non finirà mai.. ma si cercherà di fare il meglio possibile…ad ogni modo se poi il “parlaparla” degli utenti fa andare al top un sito che non è nè usabile nè bello ma ha argomenti interessanti come la mettiamo?
Ottima riflessione la tua Sarah e anche quella di altri qui nel post. Grazie
Penso che un equilibrio è la cosa migliore. Acquista la sottoscrizione di temi eleganti, ed è un disastro, ho perso i miei soldi. Forest Theme è il posto migliore.