“Ma la musica è d’effetto, ci vuole per il mio sito supercool!” o “Il mio sito è quello di una discoteca, ci vuole il giusto background emotivo!” o ancora “Il mio sito di filosofia zen ha bisogno del giusto mood di accompagnamento!“. Risposta: NO.

Perchè?

1. Se l’utente vuole ascoltare della musica, avrà già la sua di sottofondo, e sentire una musica che si sovrappone con sgradevole cacofonia alla propria è irritante. Ancor peggio se si trova in un ufficio o luogo di lavoro e gli parte la musica: chiuderà instantaneamente il sito!
2. L’utente potrebbe avere gli altoparlanti disabilitati (vedi: uffici, luoghi pubblici, biblioteche o per volontà propria perchè desidera silenzio): prettamente inutile e rallenta il caricamento della pagina.
3. L’utente è un nerd che visita più pagine contemporaneamente, o ancora sta scegliendo una discoteca/locale/ristorante: indovinate qual è il sito che verrà chiuso perchè si sovrappone alla sua musica se non quella degli altri siti? e indovinate su quale si soffermerà? bravi. non il vostro.
4. Infine, se il sito è un sito di multimedia, video, o di un cantante/musicista, diamo comunque la scelta all’utente di scegliere quando sentire la musica, se vuole. Non è detto che stia visitando il sito perchè vuole ascoltare la musica del cantante che già ben conosce, ma perchè vuole vedere le date dei suoi prossimi concerti!
5. Infine ma non ultimo: bisogna pagare i diritti alla SIAE per tutto il periodo in cui rimarrà online se non si è titolari dei diritti sulla canzone pubblicata!

Oltre al mio parere, quelli di:

• Annalisa Riggio di EpidemiaLab
• Mirko D’Isidoro di Blographik
• Tommaso Baldovino di Tomstardust
• Francesco Gavello di FrancescoGavello
• Sara Presenti di YourInspirationWeb
• Antonio Fullone di AntonioFullone
• Massimo Mastromarino di DesignMultimedia

Grazie ancora a Julius (a cui ho preso anche in prestito l’immagine di presentazione dell’articolo)!

Mio marito prova questa fantastica esperienza con Top Host, e ve ne rendo partecipe.

Ha “ereditato” un forum amatoriale, in phpbb3, con 58 utenti, ripeto 58, già hostato su Top Host.

A parte i continui rallentamenti sperimentati, talvolta con l’impossibilità di interagire quando c’erano più di 5 utenti contemporaneamente (“too many connections” citava l’errore), e con down frequenti anche di qualche ora, una settimana fa si giunge al patatrack.

All’improvviso, l’8 aprile, sono stati riscontrati errori, down del server e pezzi interi del database completamente persi: utenti cancellati e topic spariti nel nulla. Impossibile comunicare con loro per recuperare il database, poichè anche il servizio di ticket funziona a singhiozzo.

La loro giustificazione:

Il servizio di ticket è momentaneamente sospeso. Ritornerà in funzione non appena possibile.

Tutto il personale tecnico e’ impegnato nella risoluzione di un guasto che sta causando rallentamenti a macchia di leopardo al servizio di posta e database di alcuni nodi. Contiamo di ripristinare la situazione entro oggi.

Aggiornamenti in tempo reale sulla situazione li trovate a questo indirizzo: http://www.tophost.it/aiuto/

Questo a distanza di una settimana…inutile dire che sta migrando tutto su Aruba.

Immaginate un servizio del genere con un cliente: che vergogna, anche perchè la faccia ce la rimettiamo noi, e non Top Host, in prima battuta. Allora non è meglio far spendere al cliente 30 euro in più all’anno (ripeto 30!) ma avere un servizio, non dico superprofessionale, ma almeno base? Sono una delle fortunate che con Aruba non ha mai avuto problemi e che ci lavora da almeno 8 anni. Ovviamente per servizi come Magento o che richiedono qualcosa di più sostenuto si ricorre a servizi più costosi e dedicati, ma per un WordPress Aruba va benissimo (tra l’altro io non riuscii ad installare nemmeno un Wp su Tophost, mi dava “too many connections” proprio in fase di installazione, figurarsi!)

Ma immagino che i frequentatori di Iwd non usino TopHost, vero? E’ un po’ come chiedere chi ha votato Berlusconi XD

Innanzitutto il layout fluido è detto in questo modo poichè si compone di box o colonne di dimensione calcolata in percentuale e che si adattano alla larghezza del browser con il quale vengono visitate. Inizialmente pensati per dare più “accessibilità” al sito, in realtà si sono rivelati portatori di effetti negativi, come vedremo di seguito.

I layout fissi invece hanno una grandezza espressa in pixel e da tale larghezza non si spostano.

Vantaggi del layout fluido:

- le colonne si adatteranno sempre alla grandezza del browser utente (ma è poi davvero un vantaggio?)

Aspetti negativi:

- proprio per questa sua caratteristica risulta impossibile gestire al meglio la grafica in modo omogeneo

- con l’avvento dei nuovi monitor, sempre più grandi, il layout rischia di ridursi ad una riga di testo illeggibile

- i testi contenuti nei box o colonne risultano meno leggibili poichè distribuiti su poche righe di larghezza

Vantaggi del layout fisso:

- la grafica, così come viene progettata, rimarrà sempre la stessa ad ogni risoluzione

- il testo risulta più leggibile poichè contenuto nelle gabbie originariamente pensate per esso, così come le immagini di contenuto

Svantaggi:

- la grafica, proprio perchè fissa, a grandi risoluzioni risulterà “vuota” ai lati, ma sta alla nostra bravura far sì che ciò non succeda

I layout fluidi e la pubblica amministrazione

In realtà i layout fluidi sono previsti dai requisiti WCAG 1

Requisito n. 12

Enunciato: La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.

Riferimenti WCAG 1.0: 3.4

Ora non ricordo se siano enunciati nelle WCAG 2, ma a mio parere bisognerebbe lasciare libera interpretazione alla cosa. Tale requisito dovrebbe limitarsi a dire che i contenuti devono essere fruibili senza sovrapposizioni di oggetti, senza suggerire il modo in cui farlo (in questo caso, secondo loro, il layout fluido risolverebbe la situazione).

Nella mia esperienza un layout misto, con alcune colonne fisse e la colonna dei contenuti fluida, potrebbe essere un buon compromesso, ma se per seguire delle regole, devo infrangere dei principi fondamentali, preferisco infrangerle.

Voi che ne pensate?

Layout Gala, che propone diversi layout preimpostati, e che per primo fa uso di un layout liquido (immenso)

Da quando frequentai il corso di webdesign nel lontano 2002, grazie al mio magnifico prof, imparai che molta della bellezza di una foto non la fa il soggetto, la luce, i colori…ma la composizione. Foto in bianco e nero di Henri Cartier Bresson hanno stupito il mondo perchè parlavano da sole.

La regola dei due terzi della sezione aurea direi che è la base per una fotografia fatta bene. Quante volte da turisti avete trovato una bellissima giornata di sole, il soggetto con la luce giusta, spettacolare, da immortalare. Centrate il soggetto e…tac, quando guardate la foto, non vi comunica proprio niente di niente. Sapete dove avete sbagliato? Avete centrato il soggetto, esattamente nel mezzo del vostro rettangolo.

Seguendo le regole della sezione aurea, posizionando cioè il soggetto, all’incrocio dei 2/3 di uno dei 4 lati del rettangolo, la composizione assume carattere, e nonostante l’occhio non si perda su altri particolari raccolti dalla foto, il soggetto rimane la parte più importante, ma ripresa nel contesto in cui esso E’ veramente importante. Immaginate un Duomo di Milano al centro del nulla. Sì, sarà ugualmente spettacolare, ma dove sarà il pathos, l’emozione?

Guardate qui e ditemi cosa vi trasmettono queste stupende foto:

La risoluzione di un monitor, e di conseguenza del browser sono differenti da computer a computer. Pertanto ne dobbiamo tenere conto quando progettiamo un sito internet. Sarà capitato, ai più inesperti, con un computer ultima generazione e un mega schermo fantastico, di progettare il primo sito bellissimissimo e di presentarlo al cliente con le migliori intenzioni, e poi sentirsi dire che fa schifo perchè è innavigabile. Stupore: come mai, che è così bello ed accessibile?

Avete forse tralasciato il discorso risoluzione. Essì, perchè se avete un monitor intergalattico e progettate un sito affinchè occupi in modo armonico un 1920×1200, scoprirete con sorpresa che sul monitor del vostro cliente compaiono doppie barre di scorrimento e vedrete solo una porzione di quanto pensavate. Tutto ciò perchè il vostro cliente ha un monitor 1024×768 nella migliore delle opzioni.

La regola

La regola impone che si progetti perlomeno per una risoluzione MASSIMA di 1024×768, pertanto con una larghezza massima di 960px. Perchè 960? perchè è studiato che siano i pixel giusti affinchè ci sia anche un po’ di margine dai bordi del browser, quale esso sia, lasciando respiro e perchè esistono anche griglie preimpostate che ci permettono di avere colonne e margini omogenei, ma siete liberi di gestirvi poi gli spazi anche senza griglia, come meglio credete.

Questa è però la migliore delle ipotesi. Esistono purtroppo ancora persone che possono usufruire di monitor a risoluzione 800×600 (scuole, università, etc) pertanto, se orizzontalmente è ancora accettabile “perdere” 160px* (la differenza fra 960 e 800px), poichè supponiamo che sia lo spazio occupato da una terza colonna di contenuti secondari o pubblicità, non è plausibile che verticalmente, nei primi 600px, non vi siano alcuni elementi fondamentali come:

• il logo
• il menu principale di navigazione
• se presente, almeno uno “spicchio” di menu secondario di navigazione

Questo perchè, come è intuibile, se avessimo una risoluzione 800×600 e ci ritrovassimo una bella slide di immagini, magari anche con il logo del sito, ma senza opportunità di accedere al menu principale di navigazione, state sicuri che quell’utente lo perderemo.

I nuovi media

Le risoluzioni inferiori a 800×600 però, continueranno ad esistere nelle nostre statistiche. Non però perchè alcuni abbiano un monitor ante-guerra, ma perchè anzi significa che il nostro sito è stato navigato da palmari, cellulari e iphone. Come comportarci in questo caso?

Alcuni siti, se progettati in modo fluido (con dimensioni delle colonne non fisse) e senza molta grafica, potrebbero continuare ad essere fruibili anche senza ulteriori accorgimenti. Si tende però di solito a creare una versione “mobile” per i siti che andiamo a creare, ed in genere ciò si fa associando un foglio di stile adeguato e semplificato per tali risoluzioni. Semplificato nel senso che si tendono ad eliminare elementi di abbellimento o inutili per chi naviga da un cellulare e si rendono fruibili i puri contenuti, presentati seppure sempre in modo gradevole.

Con WordPress è possibile usare il plugin Mobilepress che ci crea un foglio di stile standard applicabile quando si naviga da mobile (lo riconosce automaticamente), ma per i siti statici o dinamici che siano, è sufficiente in realtà usare un attributo particolare nello scrivere il tag “link”:

<link rel="stylesheet" type="text/css" media=" handheld" href="stile.css" />

media=”screen” risponde al classico schermo, mentre
media=”handheld” risponde ai dispositivi mobili.

Conclusioni e risorse

Progettiamo pertanto fin dall’inizio con le dimensioni giuste in testa, e testiamo comunque le varie risoluzioni una volta buttato giù l’html, in modo da verificare che tutto funzioni correttamente.

Browize ci permette di ridimensionare il nostro browser in modo automatico. Sarà poi sufficiente navigare la nostra pagina per testarla.

Se usate firefox, l’add-on Web Developer ci permette di ridimensionare il browser con un solo click sull’apposita funzione presente sulla nostra barra di navigazione del browser (oltre a contenere altre funzioni utilissime di progettazione).

*eppur mi mangerei le mani invece di perderli

Prometto di tornare con migliori suggerimenti e articoli al più presto.

Nel frattempo godetevi questo video creato da Yuki e Ryuichi che con ironia tratta la progettazione di un sito web (versione terribile e versione meravigliosa ma proprio per questo troppo irreale). Anche se avrei da commentare su ciò che loro ritengono una versione meravigliosa e sul fatto che debba essere il cliente a presentare briefing e tutto il resto. Spesso infatti il cliente non sa una mazza di quello che vuole, come proposto nella versione terribile, e proprio perchè siamo professionisti, siamo noi a dover fare le domande giuste per capire gli obbiettivi. Dopodichè sono d’accordo sul fatto che debbano farci fare il nostro lavoro

Voi che ne dite?

“Le prossime generazioni di designer potrebbero non rendersi conto dei danni causati da chi li ha preceduti. E via via che certi problemi diventano sempre più rari, cresce il rischio che le nuove leve debbano reimparare sulla nostra pelle il costo di antichi errori.”

A quattro anni di distanza internet non funziona poi così male. Se avete navigato negli anni 90 o nei primi anni 2000, potreste ancora serbare il ricordo delle cattive esperienze di navigazione tipiche dell’epoca. Tanti di noi poi hanno commesso almeno qualcuno degli errori qui riportati (io almeno 4 su 5), ma poi si sono redenti.

D’altra parte molte persone che si avvicinano oggi al web design non sono rimaste impigliate nella fitta rete del web fine anni 90, quindi perché non spiegare quali scelte sono davvero sbagliate ed i motivi che le rendono tali?
Senza contare che a volte il cliente chiede proprio cose di questo tipo, e sta a noi far capire perché è meglio evitare.

Pagine d’introduzione animata (ma anche no)*

La pagina d’introduzione animata è stata una delle cose più dure da estirpare. Ancora oggi se ne fanno. Si trattava, il più delle volte, di animazioni in flash in cui il logo dell’azienda di turno veniva animato. Quali sono gli svantaggi della pagina d’introduzione?

1. Un costo aggiuntivo inutile per il cliente, tempo sprecato per il designer: dopotutto l’animazione di per sé non porta nessuna informazione all’utente finale su come raggiungere l’azienda, indirizzo, numero di telefono, attività, e via dicendo.
2. La “pagina d’introduzione” esiste già: si chiama Home Page e non è solo la prima pagina del sito, da cui l’utente poi può raggiungere le diverse sezioni, ma è soprattutto la pagina in cui si presenta il sito con le sue funzionalità.
   Se ad esempio devo andare alla pizzeria “I 4 baffi”, dove non sono mai stato prima, mi aspetto di trovare l’indirizzo sulla loro Home Page o, almeno, un link ad una pagina dove chiaramente è contenuto l’indirizzo. Voglio insomma informazioni utili, e non delle animazioni.
3. Problemi tecnologici: non tutti i navigatori sono muniti di flash, non tutti i computer reggono una introduzione, non tutti sono capaci di far scorrere la rotellina per visualizzare il stato “salta l’introduzione” che si trova sotto il blocco che conterrà l’animazione.
4. Il cliente vi potrà dire che vuole l’introduzione per non fare attendere all’utente i tempi di attesa di caricamento della pagina: spiegategli che il sito non è un programma che deve caricarsi e la velocità di caricamento è istantanea, sicuramente più veloce di una noiosa ed inutile animazione*

Musica di sottofondo

La musica di sottofondo era, tanti anni fa, un file midi che partiva in automatico con il sito, e ripartiva ogni volta che si cambiava pagina. A volte era un file .wav e in epoca più moderna un file .mp3.
Fortunatamente è sempre più raro sentire musiche partire in automatico mentre si naviga. Vediamo perché:

1. Si tratta di un costo inutile: qualcuno dovrà pur realizzare la musichetta che si andrà ad utilizzare, e dubito che voglia farlo gratis. Dunque è una spesa in più per il cliente.
2. Gli utenti navigano da uffici e luoghi pubblici e spesso i dispositivi sono dotati di casse. Ovviamente se partono dei suoni non richiesti possono dare fastidio, senza contare che si attira l’attenzione su di sé, qualcosa che chiunque vorrebbe evitare, specie in ufficio.
3. Un suono improvviso può spaventare e spaventare i visitatori del sito non è una buona idea.
4. Se l’utente sta navigando più siti contemporaneamente non saprà immediatamente da quale sito arriva il suono. E quando lo saprà non si farà scrupoli a chiudere la scheda.
5. La musica di sottofondo del sito si può confondere con la musica che l’utente sta ascoltando, magari tenendo aperto youtube o winamp. Ricordate che il suo piacere ha la priorità su tutto il resto, e chiuso il sito considerato fastidioso se ne trovano mille altri concorrenti.
6. Si naviga anche di notte, magari con il volume alto. Pensate che brutto svegliare i coinquilini, il gesto istintivo è quello di chiudere.

Animazioni continue o lampeggianti all’interno del sito

Dieci anni fa circa non era insolito trovarsi in situazioni irritanti. Alcuni siti infatti presentavano gif animate, fatte di animazioni continue ed elementi lampeggianti. I motivi per non usare questi elementi sono pochi, ma decisamente solidi:

1. Sono causa di convulsioni nei soggetti che soffrono di epilessia fotosensibile, ed è pertanto un punto importante nell’adeguamento ai leggi sull’usabilità*
2. L’utente viene distratto. La maggior parte dei contenuti sul web è testo, e l’utente deve fare uno sforzo per leggere. Avere un tipo che gli balla a destra e un blocco di testo che lampeggia a sinistra non è il massimo per restare concentrati, infatti le persone lo trovano fastidioso, oltre che a concepirlo come un “pericolo”.*
3. Gli elementi che lampeggiano sembrano banner, e gli utenti tendono ad evitarli: quindi se volevate far lampeggiare, ad esempio, il link per acquistare forse dovreste rifletterci sopra.

Navigazione insolita

Qual è la caratteristica principale di tutti gli utenti web? L’impazienza. Sia usando i CSS o Flash si possono creare dei sistemi di navigazione alquanto insoliti. Ma in generale, quando si può, è meglio cercare di seguire la massa e fare i siti così come li hanno realizzati tutti gli altri. Perché?

1. Gli utenti potrebbero non voler capire come funziona l’innovativo sistema di navigazione che avete creato.
2. Gli utenti potrebbero non possedere capacità cognitive adeguate a capirne il funzionamento (vedi leggi sull’usabilità)*

Bisogna dunque cercare di capire quali sono i sistemi di navigazione più usati e come implementarli nel proprio sito.
Qualcuno potrà protestare dicendo che fare dei siti che funzionano tutti allo stesso modo rende i siti web banali e tutti uguali. Ma riuscire a rendere esteticamente originale, e funzionale, qualcosa di comune è molto più impegnativo e difficile di quanto sembri.

Nascondere le informazioni

All’epoca non era raro vedere negli e-commerce i prezzi nascosti. Per visualizzarli bisognava registrarsi. In teoria bisognava proteggere quella preziosa informazione, il prezzo, dalla concorrenza. In realtà la preziosa informazione non era affatto protetta, visto che bastava un indirizzo e-mail.
A dirla tutta ciò che si proteggeva era proprio la concorrenza, visto che si allontanavano i clienti dal sito che, volendo sapere il prezzo, andavano a cercarne un altro.
Non sempre si possono mostrare i prezzi, se si tratta di servizi ad esempio, ma la morale della storia è che non bisogna nascondere le informazioni agli utenti.
Se un utente arriva sul vostro sito si aspetta di trovare tutte le informazioni su prodotti e servizi disponibili immediatamente. Non vuole perdere tempo a compilare moduli e, soprattutto, non è propenso a lasciare i propri dati personali se non alla fine.
Salvo casi alquanto particolari non ci sono buone ragioni per nascondere delle informazioni esistenti dietro la richiesta di registrazione.

Conclusione

In definitiva queste sono state le cose che più mi hanno angosciato nelle navigazioni passate.

Se state iniziando a creare siti web oggi tenetele bene a mente. Se il cliente ve le chiede usate pure le osservazioni di questo articolo per farlo desistere. Non abbiate paura, perché è proprio il vostro dovere fare in modo che il cliente abbia un sito web usabile e fargli capire vantaggi e svantaggi di determinate scelte.

E ricordate questo: per un visitatore i siti web sono tutti uguali e nessuno è essenziale. E se non troverà ciò che sta cercando andrà da qualche altra parte.

Link utili: Line-Height (ITA), useit (ENG).

*NB le parti in corsivo sono state aggiunte da Lauryn

Il cliente è colui che deve stare al centro dell’attenzione, pertanto tutto va incentrato su di lui e sulla fiducia che può nutrire nei confronti dello strumento che gli mettiamo a disposizione.

Ecco in ordine sparso alcune cose da tenere sotto controllo:

• il cliente deve poter capire chi siamo, cosa vendiamo, se la nostra attività ha una sede fisica e il modo in cui reperiamo materiali o i prodotti finiti. ricordatevi sempre di indicare un indirizzo, partita iva e un numero di telefono e email dove raggiungervi nel caso di problemi: seppur non dichiaratamente un numero di assistenza infatti, il cliente si sente rassicurato dal fatto che può venire a reclamarvi di persona nel caso di problemi.
• il cliente deve poter conoscere le modalità in cui può pagare, in quanto tempo e come gli verrà spedita la merce, ancor prima di iniziare un ordine. pertanto prevedete sempre una pagina dove evidenziate modalità di pagamento e spedizione.
• fatevi supportare da un avvocato e pensate a redigere anche pagine in cui trattate le privacy policy, condizioni del servizio, diritto di recesso, resi e sostituzioni, e tutto quanto può venirvi in mente possa andar storto con un cliente. anche questa è una questione importante: se il cliente perlomeno vede che queste pagine esistono (non è detto infatti che le legga tutte e sempre all’atto dell’acquisto) sa che in qualche modo siete tutelati entrambi, acquirente e venditore, e che quindi siete seri.
• dove possibile, permettete di lasciare commenti e feedback sui prodotti ordinati: le persone che sono dubbiose sconfiggeranno le perplessità vedendo un commento positivo sul vostro metodo di spedizione e sul prodotto stesso. ovviamente tenete sotto controllo quelli negativi e cercate di rimediare ad eventuali errori o difetti della merce!
• inutile dirvi che le modalità di acquisto ed ordine devono essere le più snelle possibile, chiedendo meno informazioni obbligatorie possibile e magari ottimizzando tutto in una o due pagine. La cosa migliore sarebbe di poter racchiudere tutto in 3 step: carrello -> dati e modalità spedizione -> pagamento. Se poi il vostro sistema prevede che durante l’inserimento dei dati, siate anche automaticamente registrati al sito, tanto meglio: dalla volta successiva il cliente potrà direttamente entrare con username e password ed acquistare, reinserendo solo le coordinate per pagare (se vi affidate ad un servizio esterno).

Queste sono solo alcune riflessioni, che spesso qualcuno sottovaluta, ma provate a mettervi nei panni dell’acquirente, come è capitato a me recentemente. Ho effettuato due acquisti su due siti differenti che non avevo mai visto in vita mia: uno italiano, uno persino americano. E sebbene non abbia speso cifre esorbitanti, ci ho riflettuto su un attimo, ho controllato i feedback, ho verificato termini e modalità, e non ho avuto soprese. Sarò stata fortunata? O sono stati bravi a farmi fidare di loro? a voi la parola