Web Design Trends 2010 (II parte)

Posted by Dany in Web Design | 4 comments

Continuiamo con la seconda parte dell’articolo di Smashing Magazine. Se vi siete persi la prima parte, cliccate qui.

3. Navigazione contestuale

La navigazione contestuale è essenzialmente una navigazione (spesso aggiuntiva rispetto a quella principale) che dipende dal contesto nella pagina (per esempio, varia a seconda cosa gli utenti stanno facendo). Il maggiore vantaggio è che si possono eliminare le distrazioni, controllando ciò che è irrilevante per l’utente nel contesto del momento. La navigazione contestuale mostra le opzioni solo quando l’utente ne ha realmente bisogno. Ovviamente, questo paradigma sarà particolarmente utile ai designer di interfacce utente: può aiutare a sgombrare le interfacce e concentrare l’attenzione dell’utente sulle azioni che sta svolgendo.

Questo approccio è stato usato per anni nello sviluppo web, ma da quello che abbiamo visto, sembra essere più presente nei siti odierni. Vimeo è un esempio classico di navigazione contestuale: i controlli video scompaiono una volta che il video parte e appaiono ancora a richiesta (quando l’utente passa con il cursore sopra il video)

Quando si implementa una navigazione contestuale, bisogna essere sicuri che sia realmente disponibile quando gli utenti ne hanno bisogno. Serve ipotizzare varie impostazioni e possibilità, e fare test anche per i casi peggiori.  Per i controlli video, gli utenti con interfacce touch (ad esempio iPhone e iPad) non riusciranno ad usare i comandi perchè nel touch non esiste il passaggio del cursore. In questo caso, sarebbe meglio pensare ad un gesto compatibile col tocco.

Vimeo
Vimeo è una piattaforma di condivisione video, mostra i controlli finchè l’utente non inizia a guardare il video. Una volta che il video è partito, i controlli scompaiono e appaiono nuovamente solo quando si passa il cursore sopra l’area del video. Un esempio classico di navigazione contestuale. Questa navigazione viene usata sempre più spesso per i siti che contentono materiale multimediale, come ad esempio Blip.fm.

New York Times

Il New York Times mostra intelligentemente articoli correlati a quello che si sta leggendo. Piuttosto che promuoverli nello spazio dell’articolo in lettura, i designer li hanno spostati in un contesto più appropriato: un box che appare nell’angolo in basso a destra quando l’utente arriva alla fine dell’articolo: conveniente e utile. In più si può notare come cliccando su una parola qualsiasi di un articolo (eccetto i link) appaia un “?” che ci permette di cercare la parola in questione sul dizionario. Questo servizio ha molto più senso presentato in questo modo che non inserito in un menu di navigazione nella sidebar.

Reuters

I menu a scomparsa sono un altro elemento comune della navigazione contestuale. Il menu a scomparsa di Reuters è piuttosto avanzato: non permette solamente di accedere alle opzioni di navigazione, ma mostra anche informazioni utili, come argomenti importanti che vengono mostrati così in modo immediato. Da notare anche il pulsante “open” della sidebar di destra. Quando viene premuto, un box di informazioni dettagliate (inizialmente nascosto ma disponibile istantaneamente se richiesto) sostituisce la pagina corrente e mostra le informazioni rilevanti. Reuters permette anche agli utenti di seguire i loro argomenti preferiti e salvare gli articoli per una lettura successiva. La personalizzazione arriva sul web.

DailyMile
DailyMile ha un’interfaccia attraente e pulita. Le più importanti opzioni di navigazione vengono mostrate nella sidebar di sinistra. Quando l’utente passa sopra un’icona appare una targhetta che spiega il link. Si può notare anche che il “more” nella parte bassa della sidebar, offre delle opzioni secondarie di navigazione: è disponibile solamente se l’utente cerca attivamente quelle opzioni, altrimenti rimarranno nascoste.

The Black Harbor
Di default, la sezione delle immagini non mostra nessun contenuto salvo l’immagine stessa. Ma quando l’utente passa sull’immagine appaiono il titolo, la descrizione e il numero di commenti. Notare anche il bottone “Share” nella parte in alto a destra: passandoci sopra scorre e mostra i link a Twitter, Facebook, Digg e StumbleUpon. Tutte queste informazioni vengono mostrate solamente quando il mouse passa su un’area specifica, e spariscono automaticamente quando il mouse si sposta.

Letture e risorse

Sarà molto interessante vedere come la navigazione contestuale cambierà nei prossimi mesi. Possiamo aspettarci interfacce più pulite e meno sovraccariche, dove gli elementi appariranno solo a richiesta, a seconda delle intenzioni e del comportamento dell’utente.

• Controlli CSS Hover per l’iPhone
  L’iPhone usa il touch screen, quindi non si può usare il meccanismo del passaggio del mouse in nessun modo. Piuttosto che il passaggio, l’utente potrà cliccare su un area per far apparire i controlli. Quest’area dovrà essere un link.
• Guida di riferimento al Touch Gesture
  Questa guida contiene un set unico di risorse per designer e sviluppatori di software che lavorano su interfacce basate sul touch.

4. Adattamento rapido al CSS3

Con il miglioramento del supporto CSS3 nella maggior parte dei browser moderni, la comunità del design sembra essere molto impaziente di sfruttare le nuove possibilità e migliorie. Tutti sembrano in fase di sperimentazione con il CSS3; la trasparenza RGBa, i selettori avanzati CSS3 e altri attributi. Il risultato è veramente notevole: stiamo assistendo a design più belli, più avanzati, più versatili e più robusti di prima, con meno problemi di compatibilità.

Le caratteristiche più popolari del CSS3 sembrano essere il border-radius, le animazioni, gli sfondi multippli e il box-shadow.  E’ piuttosto comprensibile, dato che possono essere utilizzati per sostituire le soluzioni precedenti che richiedevano un lavoraccio e strumenti esterni per riuscire nell’impresa. In più anche il @font-face sta acquistando rapidamente popolarità, ma tenete in mente che non si tratta di una caratteristica del CSS3, era già stata proposta nel CSS2 e implementata nelle versioni precedenti di Internet Explorer (e in altri browser successivamente — FF 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+). Questo è il motivo per il quale oggi si può usare senza problemi il  @font-face.

La cattiva notizia sul CSS3 è che per essere sicuri che le caratteristiche siano funzionanti nella maggior parte dei browser, dovremo aspettare che muoia Internet Explorer 8 (e se contiamo che ancora si combatte con la versione 6, stiamo freschi…). Resta anche da vedere come Internet Explorer 9 supporterà i nuovi standard (puoi informarti sul supporto CSS di Internet Explorer 9 in questa pagina Internet Explorer 9: Testdrive). I browser più popolari attualmente supportano solamente l’attributo box-sizing del CSS3. IE 7/8 supportano in genere i selettori ([att$=val], [att^=val], etc.), combinators (E~F), ma non supportano le pseudo-classi del CSS3 (:nth-child(), :last-child, etc.). Internet Explorer 9 (che verrà rilasciato come minimo alla fine del 2010) supporterà almeno le  CSS3 media queries, i colori CSS3 (HSL, HSLa, RGBa), i selettori CSS3 e il border-radius. Nel frattempo, dobbiamo usare il CSS3 con i browser moderni e integrare con alcuni trucchetti la compatibilità con IE. Eccone alcuni.

Cose che sembravano impossibili un anno fa verranno implementate con il CSS3, alimentato dalle menti creative della comunità del design. Potremmo essere entrati in un’epoca piuttosto fertile per il web design, dove nasceranno alcune tecniche fondamentali del CSS, qualcosa di simile al periodo tra il 2003 e il 2005. Abbiamo un paio d’anni estremamente creativi da affrontare.

(Se usate Internet Explorer, come si può dedurre dal discorso di prima, non garantisco che riusciate a vedere correttamente gli esempi…)

SxSW Beercamp

Per il design di SxSW Beercamp gli autori hanno deciso, per ogni lettera, di usare la proprietà text-shadow 49 volte. In più sono state usate varie animazioni e trasformazioni, come box-shadow e HSLA.

Tapbots
Le caratteristiche del CSS3 funzionano bene quando vengono applicate ad un design pulito, semplice e significativo. Tapbots usa gli angoli arrotondati, animazioni hover e alcuni effetti di trasparenza, che sono difficili da notare a prima vista. Niente esagerazioni: solo un buon design funzionale.

going steady with stacey
La proprietà text-shadow è molto efficace quando viene usata con caratteri chiari su sfondo scuro, ma ci sono casi come questo nel quale funziona molto bene anche su sfondi chiari. La cosa importante è renderlo abbastanza forte da essere ben visibile.

CSS3 Drop Down Menu
Un approccio più pratico alle caratteristiche del CSS3, con l’uso del border-radius, box-shadow, dei gradienti e del text-shadow in un menu a tendina multi-livello. Nessuna immagine è stata usata.

Canny Bill
Il design di Andy Clarke usa box-shadow, -webkit-gradient per le sfumature, RGBa per l’opacità, border-radius per gli angoli arrotondati e animazioni Webkit per gli effetti di hover.

Faruk Ateş
Il blog di Faruk Ateş è un esempio pratico delle transizioni e animazioni CSS3 che creano un ottimo effetto hover (nella sidebar a destra).

Mindgarden

Mindgarden usa il CSS3 per mostrare layout differenti a seconda della risoluzione dell’utente: quelli con una finestra del browser grande avranno un layout a più colonne, mentre quelli con una finestra piccola vedranno un layout a colonna unica. Anche le dimensioni delle immagini vengono scalate automaticamente a seconda della dimensione della finestra. I web designer hanno usato codici JavaScript per anni per poter ottenere lo stesso risultato, ma ora possiamo usare soluzioni basate semplicemente sul CSS. Questo tipo di caratteristiche è supportato attualmente da Firefox 3.6+, Safari 4+, Opera 10+ e Chrome. Internet Explorer 8 non le supporta. Per maggiori informazioni consultate questa pagina Russ Weakley’s presentation “CSS3 Media Queries”.

Chirp
Il sito per la conferenza di The Chirp usa delle animazioni CSS per far ruotare le fotografie degli speaker.

Neography CSS3 Type Experiment
Nessuna immagine è stata usata qui, solamente CSS3 puro, con rotazioni, ombre e altri trucchetti.

CSS Posters
I designer stanno sperimentando diversi layout con diverse tecniche CSS3. Qui per esempio ci sono dei poster, disegnati con semplici regole CSS. In particolare viene usata molto la tecnica del @font-face per il font embedding.

David Desandro: Footer
David Desandro usa varie regole CSS3 nel footer del suo sito. Ombre, animazioni e transizioni sono molto vivide, colorate e affascinanti.  Sicuramente il contrario del minimalismo, ma nel caso di un portfolio come questo risultano più che efficaci.

Opera Logo with CSS3
Con un po’ di creatività artistica possiamo creare cose veramente straordinarie. Per esempio il logo di Opera qui sotto è disegnato completamente in CSS3: sfumature, box-shadow e border-radius.

Rain Drop
Un altro esempio interessante di effetto visivo creato esclusivamente con il CSS3.

Una triste nota a proposito della proprietà Text-Shadow

Un problema generale che abbiamo riscontrato con l’uso del CSS3 nella situazione attuale, è un crescente numero di design creati apposta per il gusto di usare il CSS3. Un esempio perfetto di questo problema è l’uso eccessivo della proprietà text-shadow, che a volte viene applicata pesantemente. Tenete a mente che il CSS3 è uno strumento potente e che proprio per l’efficacia che può avere va usato nella giusta misura, facendo attenzione ai problemi di usabilità e leggibilità. Sembra un consiglio veramente scontato, ma fa sempre bene ricordarlo: prima di aggiungere funzionalità CSS3 al vostro sito, assicuratevi che sia effettivamente un miglioramento sia estetico che di usabilità. Non cerchiamo di migliorare l’estetica compromettendo l’usabilità.

Un’altra regola ovvia ma importante è questa: il vostro design non dovrà basarsi solo sul CSS3, ma dovrà arricchire. Ricordiamoci che le proprietà avanzate del CSS3 non sono ancora standard, si usano attributi proprietari come Webkit che probabilmente in un paio di anni saranno codice inutile. Conviene quindi creare un foglio di stile dedicato esclusivamente agli attributi CSS3, in modo da semplificarci eventuali modifiche in seguito. In più ricordatevi che dovrete aggiungere sempre la regola standard (ad esempio border-radius, non solo -moz-border-radius)così che anche nei prossimi anni, con un miglior supporto del CSS3, il tuo foglio di stile sarà ancora efficace nella maggior parte dei browser.

Ecco un paio di esempi di usi sbagliati del CSS3:

Tinder
Tinder usa la proprietà text-shadow per il testo. Alcuni utenti (anche quelli con una vista ottima) potrebbero avere difficoltà a leggerlo sul proprio schermo.

Brandon Cash
Brandon Cash usa la proprietà text-shadow per l’intero testo del sito. A seconda del browser può diventare difficilmente leggibile: guarda la differenza tra la visualizzazione in Chrome (sinistra) e Safari (destra). La differenza è notevole. E’ molto importante considerare che non tutti gli utenti usano lo stesso tipo di carattere per la visualizzazione standard o lo stesso font-smoothing per il testo. Come designer dovete tenerne conto.

Alcune risorse

• CSS3 Generator
  Questo tool online genera frammenti di codice CSS3 cross-browser che potete usare direttamente sul vostro sito. Potete anche vedere un’anteprima del codice.
• CSS 3, Please!
  Un’altro generatore e tester di CSS3.
• Linear Gradients CSS3 Generator
  Questo sito genera il codice per una sfumatura lineare in CSS3, molto comodo.
• We are ready for CSS3. But are we ready for CSS3?
• When can I use?
  Una tabella di riferimento dettagliata che spiega quali browser supportano cosa relativamente al CSS3 e all’HTML5, con raccomandazioni su quali proprietà è consigliabile usare attualmente.
• The Basics of CSS3
  Una buona introduzione alle basi del CSS3. Utile per chi è interessato alle possibilità delle nuove specifiche.
• CSS 3 Click Chart
  Una panoramica delle nuove caratteristiche e proprietà.
• Why CSS3 is worse than IE6 Debugging
  Un articolo provocatorio che racconta l’incubo del dover usare un foglio di stile con regole diverse a seconda del browser.
• CSS3 Solutions for Internet Explorer
• Internet Explorer’s Support of CSS
• Una guida dettagliata che spiega come Internet Explorer supporta ogni proprietà CSS (incluse quelle del CSS3) nelle varie versioni del browser.
• CSS3: Examples and Best Practices
  Una panoramica sulle regole più popolari del CSS3, con alcuni esempi e consigli per sfruttarle nel proprio design.

Conclusioni

Ci sono sempre nuove possibilità, ma nonostante più sono trendy più se ne abusa. Alcune regole di buon uso vengono incorporate velocemente nel web design, altre vengono usate eccessivamente per “sfogare” il desiderio di sperimentare le novità.

Le tendenze del design non esistono per essere seguite, esistono per essere infrante, modificate, abolite dallo spirito creativo che si sviluppa nella comunità. Per la propria natura, le tendenze non sono niente di buono: tendono a distrarre dallo scopo principale di COMUNICARE attraverso il design e distruggono l’equilibrio tra estetica e funzionalità. Piuttosto che seguire le tendenze, cercate di usare gli strumenti più appropriati al contesto seguendo lo scopo originario. Questo fa la grossa differenza tra un bel design e un bel design usabile.

Altri articoli che potrebbero interessarti:

1. Web Design Trends 2010 (I parte)
2. Web Design: le tendenze del 2010