Web Style Guide – Second Edition

La guida di stile per il web di Patrick Lynch e Sarah Horton è tra i primi manuali di design e usabilità dedicati ad Internet.

“Guida di stile”, come ci hanno confermato gli autori nel corso di un’intervista, è in realtà un termine un po’ ambiguo.

Il manuale, giunto di recente alla seconda edizione, è una guida introduttiva alla progettazione e al design web, che tocca ambiti quali l’interface design, l’information architecture, l’usabilità, l’accessibilità e il web writing.

E’ quindi un aiuto per chi si avvicina al mondo della progettazione in internet e cerca un’introduzione alle discipline coinvolte nella realizzazione di un’applicazione web.

Il testo è suddiviso in 8 capitoli:

  • Process – Una spiegazione del ciclo di vita di un sito web, dalle considerazioni preliminari alla manutenzione
  • Interface Design – Come rendere le pagine tra loro indipendenti e come consentire la navigazione tra le pagine
  • Site Design – Un po’ di Information Architecture: come organizzare ed etichettare le informazioni, come aiutare gli utenti nelle ricerche e nella navigazione
  • Page Design – I template di pagina: larghezza, altezza, design liquido e griglie, conformità delle pagine agli standard
  • Typography – Le caratteristiche della tipografia nel web, i tipi di caratteri e la leggibilità, la consistenza degli stili
  • Editorial Style – Come scrivere per il web
  • Web Graphics – Quale formato grafico per quale uso, come ridurre il peso della grafica, come ottenere il miglior compromesso peso / qualità
  • Multimedia – Come e quando integrare video e suono nelle pagine web

Rispetto alla precedente versione gli autori presentano in ogni capitolo alcune considerazioni relative alle tematiche dell’accessibilità web e della loro influenza nel ciclo di vita di un sito.

Si parla anche di Css, anche se i fautori dello standard rimarranno delusi dal sapere che vengono utilizzati principalmente nel capitolo dedicato alla tipografia.

Il testo è quindi un’ottima guida introduttiva per i principianti, e non cambia di molto rispetto all’edizione precedente.

E’ in ogni caso ammirevole lo sforzo degli autori che nel sito dedicato al libro ne rendono disponibile gratuitamente l’intero contenuto.

Informazioni

Web Style Guide – Second Edition ¤ di Patrick J. Lynch e Sarah Horton ¤ lingua inglese ¤ pagine 220 ¤ prezzo 18.95 dollari ¤ edito da Yale University Press

Submit Now – Designing Persuasive Web Sites

Ci eravamo fatti una brutta impressione del libro guardando la sua copertina, e abbiamo sbagliato.

Abbiamo sbagliato per un errore di interpretazione del termine “persuasive“, che è facile associare all’immagine di imbinitori alle prese con clienti non troppo convinti.

In realtà il testo è un’ottima introduzione alla tecniche che consentono al vostro sito di mostrare tutta la professionalità di cui siete capaci, e ai vostri utenti di trovare velocemente ed efficacemente quello che cercano.

E’ una presentazione delle metodologie che aiutano l’utente ad avvicinarsi all’acquisto di un bene o alla registrazione di un servizio online.

I siti di cui si parla nel testo sono divisi in 6 categorie:

  • Retail: negozi che favoriscono l’aquisto di beni online
  • Professional services: per chi vende la propria professionalità (studi, dottori, consulenti)
  • Online services: servizi che vengono acquistati online
  • Financial services: siti di banche, istituti di credito, società finanziarie
  • Travel: prenotazione di vacanze e tutto quello che gira intorno al mondo del turismo
  • Marketplace: siti che mettono in contatto il compratore con il venditore, come ad esempio gli “head hunters

Uno dei pregi del libro sta nel fatto che queste categorie non vengono introdotte nel primo capitolo e poi dimenticate. Ogni volta che l’autore dà qualche suggerimento, sono visualizzate delle icone che corrispondono ai siti a cui è applicabile quanto detto.

Il testo si snoda principalmente intorno al tipo di pubblico che frequenta i siti, e che l’autore raggruppa in 4 tipi fondamentali:

  • Browsers – Sono gli utenti finiti nel vostro sito per caso o perché ne hanno sentito parlare. Non hanno un’idea precisa di che cosa vogliono, navigano tra le sezioni e si fanno un’idea di chi siete e di cosa potete offrire loro
  • Evaluators – Hanno un problema da risolvere o una necessità e vogliono sapere se il vostro sito può fare al caso loro, confrontando quello che offrite con la concorrenza. Sono molto esigenti
  • Transactors – Questi utenti hanno deciso che vogliono acquistare da voi e sanno anche cosa comprare. Vogliono che la procedura di acquisto sia veloce, sicura e chiara. Pretendono sconti
  • Customers – Una volta effettuata la transazione, l’utente vuole essere informato sullo stato del processo e sui passi successivi. Inoltre, chi ha già acquistato ed è intenzionato a farlo ancora, vuole che vi prendiate cura di lui, che gli proponiate delle offerte convenienti basate sui gusti personali

Ad ogni figura è dedicato un capitolo, in cui sono evidenziate le mosse vincenti che vi consentiranno di avvicinare sempre di più l’utente al momento del pagamento o dell’iscrizione.

Il testo è prodigo di esempi concreti: sono presentate a modello decine di siti, di cui sono chiaramente commentate le schermate più significative.

Non si tratta quindi di forzare il vostro utente per farlo acquistare, ma di porre i suoi bisogni al centro del sito e strutturarlo di conseguenza.

Il manuale secondo noi usa un buon mix tra interaction design, information architecture e usabilità. Se non siete degli esperti in questi campi, leggendolo probabilmente non vi accorgerete neppure dove finisce l’una e inizia l’altra, perché sono state sapientemente fuse.

Che vendiate prodotti, servizi o che miriate semplicemente ad aumentare il numero di iscritti al vostro sito, questa guida può rappresentare un valido aiuto, tenendo in mente che, come dice l’autore: “questo non è un manuale di regole, ma una fonte di ispirazione”.

Informazioni

Submit Now – Designing Persuasive Web Sites ¤ di Andew Chak ¤ lingua inglese ¤ pagine 340 ¤ prezzo 35.00 dollari ¤ edito da New Riders

Sito del manuale [nuova finestra] (scheda, errata)

Realizzare siti Flash più usabili dei siti Html

Intervista agli autori di “Skip Intro”, il manuale edito da New Riders dedicato alla costruzione di siti Flash usabili

  1. Parlateci di voi [Risposta 1]
  2. Di quali argomenti si occupa il manuale? C’è un sito collegato al libro? [Risposta 2]
  3. Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso? [Risposta 3]
  4. Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash? [Risposta 4]
  5. Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili? [Risposta 5]

Parlateci di voi

Michelangelo Capraro

Sono un multimedia designer dal 1993 e lavoro per la stampa, realizzando anche Cd-Rom, siti e interfacce web. Ho “giocato” con Flash fin da quando veniva chiamato FutureSplash, anche se utilizzavo Shockwave di Director per i lavori dei clienti. L’ho adottato definitivamente a partire dalla versione 4, e da allora è sempre migliorato. Adesso uso la versione 5 o Flash MX.

Oggi lavoro alla PalmSource, un’azienda che realizza il sistema operativo per Palm, Handspring e Sony. Sono a capo dello User Experience Group e mi occupo della progettazione grafica del sistema operativo.

Duncan McAlester

Lavoro con il web dal 95/96, dove mi occupo di programmazione o progettazione come libero professionista su un’ampia sfera di progetti, da siti di intrattenimento ad applicazioni web.

Top

Di quali argomenti si occupa il manuale? C’è un sito collegato al libro?

Michelangelo Capraro

Skip Intro è un libro rivolto ai progettisti Flash che vogliono realizzare interfacce usabili. Lo abbiamo scritto in risposta al sentimento anti Flash maturato dalla comunità che si occupa di usabilità e anche in risposta al sentimento anti usabilità della comunità Flash.

Skip Intro non è stato scritto per chi ha già familiarità con l’usabilità, ma è un’introduzione alle regole principali che i progettisti web dovrebbero adottare per realizzare un sito Flash che sia usabile.

Alcuni degli argomenti che affrontiamo usano scenari (scenarios) e persone (personas), così da permettere la stesura di una lista di requisiti. In questo modo si impara a pensare per prima cosa agli utenti e a costruire componenti che rendano i siti più usabili.

Abbiamo cercato di affrontare tutti gli ambiti di usabilità Flash, dalle rigide regole di usabilità all’uso di ActionScript per costruire interfacce Flash.

Esiste un sito [nuova finestra] per il libro, al quale stiamo aggiungendo pian piano dei contenuti e presto anche degli articoli. Renderemo disponibili anche delle librerie di componenti Flash, così che gli sviluppatori possano semplicemente “trascinarli” nelle loro animazioni e ottenere grandi effetti grafici e interfacce usabili.

Top

Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso?

Michelangelo Capraro

Il problema è la presenza di molti progettisti Flash che non si preoccupano dei loro utenti.

Realizzano siti con introduzioni composte da animazioni pesanti che richiedono parecchi minuti per essere scaricate e sono inutili da guardare.

Progettano interfacce che sono difficili da usare il cui solo scopo è impressionare altri progettisti, piuttosto che rendere la vita più semplice per le persone che utilizzano il sito.

Ecco perché molti guru dell’usabilità sono a ragione contro questo uso di Flash.

Flash può in realtà aiutare gli sviluppatori a realizzare siti web che siano più usabili dei normali siti costruiti con Html o Dhtml, anche se molti non se ne rendono conto.

Quel che è peggio è che i guru dell’usabilità non aiutano i progettisti Flash a capire come possono migliorarsi; si limitano a ridicolizzarli e a colpevolizzare il loro strumento: Flash.

A loro volta i progettisti Flash si offendono per le insolenze di qualche esperto di usabilità e così rifiutano di ascoltare i consigli che potrebbero aiutarli.

Duncan McAlester

Come per ogni tecnologia, è possibile creare un prodotto che sia usabile, ma anche esteticamente gradevole.

Flash è stato però presentato come uno strumento per realizzare animazioni e all’inizio è stato utilizzato soprattutto da chi da molta importanza all’aspetto grafico. Queste persone con tutta probabilità non davano molto peso o semplicemente non conoscevano l’importanza dell’usabilità. Anch’io all’inizio provavo le cose più accattivanti senza preoccuparmi degli utenti.

Accusare solo Flash, d’altro canto, è segno di miopia: per ogni sito Flash realizzato male, ce ne sono almeno 10 realizzati male in Html. La grande differenza è l’abuso che se ne può fare. È infatti molto più semplice abusare di Flash e realizzare degli orribili siti, per esempio includendo animazioni di 1 Mb come accadeva una paio d’anni fa; è più difficile commettere questi errori in Html.

La possibilità di creare queste enormi animazioni e altri effetti come il bottone back che non funziona, i motori di ricerca che non indicizzano le pagine, ecc. hanno dato ai guru dell’usabilità molti pretesti per criticare Flash. Sono comunque convinto che incolpare Flash non risolve il problema, ma al massimo riduce i danni, rendendo le animazioni da Mb più difficili da realizzare. Ma i problemi principali di usabilità non cambieranno, se gli sviluppatori non vengono educati.

Top

Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash?

Michelangelo Capraro

Una soluzione è avvicinare gli esperti di usabilità e i progettisti Flash così da far capire ad entrambi quanto Flash sia uno strumento che può migliorare l’usabilità di un sito.

Come sviluppatori Flash, dobbiamo capire che la parte più importante di ogni progetto è l’utente finale con le sue richieste ed aspettative. Se riusciamo a soddisfare le sue esigenze, con o senza Flash, allora abbiamo costruito un’interfaccia efficace.

Duncan McAlester

Molto dipende da come sono educati i progettisti. I progettisti vogliono di per sé realizzare interfacce che gli utenti possano usare. Se andate in qualsiasi scuola di design e date un’occhiata alla facoltà che si occupa dei processi di stampa, vi accorgerete che passano molte ore a parlare di leggibilità, composizione, layout, tipografia, ecc: tutte cose che hanno a che fare con il design per l’utente.

Il web è ancora un mondo nuovo (paragonato alla stampa) e così le scuole ancora non hanno adeguato i loro corsi perché si parli anche di usabilità.

Top

Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili?

Michelangelo Capraro

. Quando abbiamo scritto il libro, Flash MX (e in particolare le opzioni per l’accessibilità) era in fase di costruzione, così non siamo riusciti a parlare di accessibilità. Flash MX offre comunque qualche opzione per rendere i progetti Flash accessibili. Permette di utilizzare la tastiera per navigare gli “hotspot” e si interfaccia con gli screen reader così da permettergli di leggere a voce il testo.

Anche se è positivo che Macromedia abbia incluso queste opzioni in Flash, lo avrebbe potuto fare meglio. Penso infatti che gli sviluppatori non spenderanno tempo per cercare di rendere le loro animazioni fruibili anche dalle persone disabili, poiché Macromedia ha reso l’uso delle opzioni di accessibilità difficile da usare. C’è bisogno che Macromedia renda queste funzionalità più facili da controllare.

Duncan McAlester

Ci sono anche alcune caratteristiche di accessibilità che sono ereditate direttamente da Flash.

Prima di tutto Flash è basato sui vettori, così è facile zoomare tutto quello che c’è sullo schermo e ottenere delle immagini pulite e nitide. Con l’Html è possibile aumentare la dimensione dei font, ma non è possibile ingrandire un’immagine senza includerne più copie a risoluzione diversa.

Anche la gestione dell’audio è trasparente in Flash. L’audio sul web (Real, QuickTime o solo Midi) non è molto adatto ad aiutare gli utenti, poiché è difficile sincronizzarlo con i movimenti del cursore. Con Flash è molto facile capire cosa sta facendo l’utente e presentargli dei suggerimenti sonori per aiutarlo o indirizzarlo.

Top