Web Design Trends 2010 (I parte)

Posted by Dany in Web Design | 0 comments

Oggi vi proponiamo la libera traduzione di un articolo (riveduto e tagliuzzato) pubblicato da Smashing Magazine, che ci aggiorna su alcune novità del Web Design. Buona lettura!

Nel precedente articolo Web Design: le tendenze del 2010, abbiamo parlato della forte influenza del design cartaceo, della tipografia e del design estetico. Il web design al giorno d’oggi si sviluppa molto rapidamente, superando i limiti degli approcci convenzionali ed esplorando le possibilità delle nuove tecnologie emergenti. I designer non stanno solo sperimentando nuove tecniche e nuovi approcci al design, stanno migliorando la qualità dei loro lavori sia dal punto di vista tecnico che concettuale.

I siti moderni hanno un diversi punti forti: la flessibilità, la compatibilità su diversi browser e la personalizzazione; ma cosa ancora più importante, sono sempre più semplici e intuitivi. Il web oggi è sempre più complesso, ma paradossalmente sempre più semplice da usare.

In questo articolo esploreremo alcuni nuovi approci al design e tecniche da cui prendere spunto per i propri progetti. Presenteremo design insoliti e poco convenzionali e proveremo a capire ciò che è veramente interessante e come possiamo applicarlo al web design moderno. Entrando nello specifico, discuteremo di:

• metafore della vita reale applicate al web
• diminuzione delle difficoltà
• interattività
• navigazione sensibile al contesto
• adattamento rapido al CSS3

1. Metafore della vita reale e diminuzione delle difficoltà

Probabilmente una delle caratteristiche più interessanti delle applicazioni e dei servizi moderni del web è che creano un’esperienza molto ricca per l’utente. L’interazione in questi sistemi sta diventando sempre più semplice e intuitiva, addirittura “nativa“. Ma questo senso di intuitività non nasce dall’applicazione dei principi tradizionali del buon design o della migliore architettura informatica. Abbiamo studiato diversi web design dove gli elementi del design imitano la vita reale, o diminuiscono la difficoltà, attraverso la scelta di portare gli utenti verso un numero minore di scelte e decisioni più semplici.

I bottoni sono un buon esempio di somiglianza alla vita reale. Nel web design oggi, i bottoni interagiscono con gli utenti proprio come i bottoni del mondo reale. Spesso hanno un aspetto molto realistico: risaltano, hanno colori vibranti e hanno una risposta immediata. Quando l’utente passa o clicca sopra un bottone, spesso danno una risposta visiva.

L’affordance (quell’insieme di azioni che un oggetto “invita” a compiere su di esso. Il termine affordance infatti può, in questo contesto, essere tradotto con “invito”; questo concetto non appartiene né all’oggetto stesso né al suo usufruitore ma si viene a creare dalla relazione che si instaura fra di essi. E’, per così dire, una proprietà “distribuita”. Ad esempio l’aspetto fisico di un oggetto permette all’utilizzatore di dedurne le funzionalità o i meccanismi di funzionamento – Wikipedia) è la chiave per la qualità degli elementi nativi. Si riferisce all’aspetto di un oggetto o di un ambiente che permette all’utente di compiere alcune azioni. L’affordance crea degli “indizi” per le azioni da svolgere, l’utente sa quindi cosa fare solamente guardando: nessuna spiegazione è necessaria. Più familiari sono gli elementi contenuti nella pagina, più è facile che l’utente li associ ad alcune azioni concrete da svolgere.

Questo approccio non è solamente un invito all’azione che vale per i bottoni: come vedremo, si tratta anche di usare le giuste metafore per consigliare il significato e l’intento di certi elementi di design in generale. Ovviamente, questo approccio riduce la complessità delle interazioni. Un’altro modo per raggiungere questo risultato è minimizzando l’impatto estetico degli elementi o, per essere più precisi, dargli un contesto diverso o diminuire il loro peso all’interno della pagina.

Ecco alcuni siti nativi e intuitivi.

Metafore della vita reale

C. L. Holloway
Un approccio simile di Candice Holloway. Mette i suoi lavori su un “muro”. La navigazione orizzontale è usata come metafora di una passeggiata per una galleria d’arte.

Dripping in Fat
Questo negozio online di magliette usa la metafora degli abiti appesi alle grucce. E’ un’idea interessante se non si hanno tanti prodotti da vendere, ma poco adatta se ce ne sono tanti.

Apple
L’interfaccia utente dell’iPhone utilizza per la scelta di on-off un interruttore. Questa immagine è molto chiara e intuitiva, soprattutto per l’utilizzo con sistemi touch.

Diminuzione della difficoltà

SlideDeck
Gli Slideshow sono per natura un ottimo modo per diminuire la difficoltà, perchè riorganizzano le informazioni in un’area interattiva. SlideDeck è un ottimo esempio di soluzione che integra la navigazione orizzontale e verticale in un unico elemento. Il layout è semplice e permette di avere una chiara idea delle possibilità.

Gmail
Fare attenzione alle piccole cose può rendere più intuitiva e nativa l’esperienza. Se state scrivendo un’email attraverso il servizio di Google e manifestate nel testo l’intenzione di allegare un documento ma dimenticate di allegarlo realmente, il sistema se ne accorgerà e vi darà un messaggio avvisandovi. Questo è un ottimo esempio di applicazione creata avendo a cuore gli interessi dell’utente; la differenza tra una buona e un’ottima applicazione web.

Livestream
Molte applicazioni web hanno diversi prezzi a seconda del pacchetto di funzioni fornito, così come Livestream. Questo design comunica chiaramente quale piano è più adatto per determinate categorie di utenti. Un design semplice ed efficace.

Single Log-In and Sign-Up

Una soluzione per facilitare le cose è combinare due funzioni in una sola. Per esempio, piuttosto che avere due link separati a due pagine separate per il log-in e la registrazione, si può offrire agli utenti un unico modulo che funzioni per entrambe le cose. Nel caso l’utente selezioni il log-in ci sarà una voce per il recupero password e il bottone dirà appunto “Log-in”. Nel caso invece selezioni la voce per i nuovi utenti, la voce “password” diventerà “scegli una password” e il bottone dirà “inscriviti”.

Quiksilver
Quiksilver chiede ai propri clienti di fornire informazioni sul proprio peso, altezza, stile, clima. Al posto di mostrare dozzine di opzioni, le filtra quindi a seconda dei dati inseriti e mostra solamente quelli che sono adatti al profilo. Un buon esempio di come sia possibile concentrarsi sulle cose importanti nascondendo quelle non necessarie.

2. Interattività

Al contrario di quello che si dice in giro, crediamo che Flash abbia un posto nel web design moderno. Oggi possiamo notare una separazione netta di intenti tra i siti l’HTML/CSS e quelli in Flash. Mentre l’HTML/CSS è diventato lo standard di fatto per i siti basati sul testo, che si concentrano sulle informazioni, Flash domina nei siti di intrattenimento e multimedialità, con la sua possibilità di far interagire l’utente in un contesto ricco di effetti visivi e suoni.

Ma questo non significa che l’HTML/CSS sia ristretto solamente ai siti piatti e privi di interazione. Infatti, sembra vero l’opposto. Stiamo vedendo l’HTML/CSS diventare sempre più interattivo e coinvolgente. Più animazioni vengono usate per le risposte visive (ad esempio per i click e i passaggi sui bottoni), ed eseistono più effetti visivi per rendere l’esperienza dell’utente più reattiva. Chiaramente questi effetti vengono prodotti grazie alle librerie JavaScript, che alimenta l’interattività.

Comunque, i designer di siti basati sul CSS cercano di evitare l’interattività estrema e usano invece con parsimonia degli effetti leggeri e rifiniti. Usano l’interattività per supportare l’azione dell’utente, evitando effetti troppo travolgenti  che potrebbero creare inconvenienti nella struttura di navigazione.

WeightShift
WeightShift ha un approccio interessante al design, sviluppando la navigazione in modo più interattivo. I lavori recenti vengono mostrati in un box in risalto al centro del layout, mentre nello sfondo appare un’immagine pertinente. Quanto l’utente naviga, cambia anche lo sfondo. Nota che il box è semi-trasparente; una buona tecnica di design.

Jax Vineyards

Questo negozio di vini online ha un’interessante e unica navigazione orizzonatle, che parte quando inizi a navigare all’interno del catalogo di vini. Entrambe le immagini dello sfondo e della descrizione del vino scorrono in orizzontale. Vengo usati del semplice CSS e JavaScript. Un design bello e d’effetto.

Fuel Brand Inc.
La pagina ufficiale della Fuel Brand Inc. ha una varietà di animazioni sfiziose: immagini che si ingrandiscono al passaggio, sfondi che cambiano, slideshow usati per la navigazione e così via.

Malcolm Reading Consultants
Un’altra tecnica di design interessante per l’interazione: vengono mostrate tre immagini che scorrono verticalmente in modo automatico, cambiando le immagini di sfondo. Non è stato usato Flash.

LifeGear Mockup

Un modello dimostrativo per la pagina interattiva di un prodotto. Molte pagine di e-commerce stanno iniziando ad usare presentazioni più interattive; per esempio visualizzazioni a 360 gradi o istruzioni interattive, come in questo caso.

S P D
Un altro bell’effetto di hover. In questo portfolio, ogni oggetto occupa una cella. Ci sono 18 celle in tutto. Quando l’utente passa su una delle celle, questa si espande per riempire l’area delle 6 adiacenti, mostrando informazioni aggiuntive sull’oggetto selezionato. Non è stato usato Flash.

Duplos
Nel portfolio di Ricardo Mestre, gli elementi di design galleggiano lentamente nella pagina. C’è anche un pericoloso uccello di Twitter impossibile da beccare! Chiaramente non è stato usato Flash.

A domani per la seconda parte dell’articolo!

Altri articoli che potrebbero interessarti:

1. Web Design: le tendenze del 2010
2. 8 storie da seguire nel 2010