Appunti di progettazione web


Ci sono dei segreti che possiamo imparare dai siti Web meglio progettati al mondo?
Sì. In questo articolo, vedremo tre pratiche da adottare per migliorare la qualità e l'utilizzo dei vostri progetti.

Rendere il sito facile da usare
C'è una cosa che molti progettisti web non gradiscono ammettere ed è: “Non possiamo predire il comportamento degli utenti”. Purtroppo, per molta gente, essere un progettista di web significa saper predire il comportamento degli utenti. Bene, non è esattamente così. Però ci sono alcuni trucchi che possiamo imparare dai siti Web ben progettati per rendere il nostro sito facile da usare, in particolare per gli utenti da mobile.
Mobile Friendly La prima cosa da metter in pratica per i dispositivi mobili touchscreen è di assicurarsi che tutti gli elementi interattivi sul vostro sito Web o nella vostra interfaccia utente abbiano dimensioni sufficienti. Che cosa intendiamo per “sufficienti”? Persone differenti daranno risposte differenti. Apple suggerisce che l'area touchable ideale dovrebbe essere 44px. Microsoft dice che è 34px. Sulla base della mia esperienza, la buona regola empirica è di usare 48px, o 3 em (o corpo16px per i link testuali). È inoltre buona idea usare almeno 6px di padding per creare un certo spazio intorno all'elemento ed impedire che l’utente tocchi l'elemento contiguo.
Navigazione adeguata La navigazione può essere un tasto dolente quando si progetta una nuova UI per il vostro sito Web. Se il vostro sito ha una navigazione complessa, con molti collegamenti, progettare può diventare difficile. Esaminando alcuni esempi all’interno di siti Web premiati notiamo che non c'è un approccio standard. A esempio alcuni siti Web stanno mostrando la tendenza a nascondere il menù di navigazione dietro un certo genere di icona (hamburger). Questo accade poiché tanti progettisti realizzano siti onepage dove quasi tutte le informazioni principali si trovano scorrendo in basso il browser così da rendere meno importante le voci del menu. Troviamo questa formula soprattutto nei siti ecommerce, in quanto si cerca di non distrarre l’utente dalla pagina principale con i prodotti incoraggiandolo ad utilizzare una certa gerarchia di navigazione per condurlo il prima possibile verso il carrello, quindi l’acquisto.
Ecco perché vedrete sempre etichette tipo “i prodotti relativi” o “clienti che hanno comprato questo oggetto hanno visto anche...” . A nostro avviso questo è un difetto, poiché quante probabilità ci sono che un utente voglia compare parecchi prodotti della stessa categoria? Supponiamo pochi.
Un altro fattore da discutere è l’utilizzo smodato di icone per la navigazione, laddove il progettista vuole fare sfoggio di creatività, ma se queste sono progettate male diventano invece un boomerang controproducente, poiché mette in difficoltà il navigatore.
Per rendere al vostro sito Web facile da usare il vostro scopo dovrebbe essere quello di renderlo il più naturale possibile. Evitate quindi sorprese scomode quali icone o etichette sconosciute. Fidatevi, l'utente lo apprezzerà.
Call to action su dispositivi mobili. Quando date un'occhiata ad sito Web ben progettato, vederete spesso che la maggior parte delle call to actions (CTAs) è posizionata nella parte superiore della pagina. L’utilizzo di questa strategia è conseguenza dell'esplosione di nuovi dispositivi e della varietà di risoluzioni possibili, che rendono più difficile predire dove il maggiormente l’utente porrà la sua attenzione.
Un'altra ragione per collocare le call to actions nella parte superiore della pagina è che gli utenti mobili sono nella maggior parte dei casi in movimento. Inoltre non dimentichiamo che gli utenti mobili hanno spesso tempo limitato, come pure larghezza di banda. Inserendo le CTAs alla parte superiore della pagina e il relativo contenuto, possiamo risparmiare tempo agli utenti e rendere la loro esperienza migliore.
Il maggiore esempio di questo approccio è proprio nel commercio elettronico. Questi siti Web in primo luogo mostrano le immagini dell'anteprima, il nome del prodotto, il prezzo e la CTA per comprare. Tutti le informazioni di dettaglio, le caratteristiche di prodotto, possano essere visualizzate anche successivamente, collocandosi quindi quasi sempre above te fold.
Ricordiamo quindi che la parte della pagina che è nella vista iniziale dovrebbe contenere il contenuto più importante. Che cosa è il contenuto più importante? Pensiamo al perché l’utente si trova sul nostro sito, a cosa vuole raggiungere. Soltanto quando conoscete i vostri utenti e capite i loro bisogni e le loro motivazioni potrete distinguere fra che cosa è importante e che cosa non lo è.

Orientarsi sulle prestazioni
Quasi tutti i siti Web ben progettati sono incentrati sull'ottimizzazione delle prestazioni. Bene, non tutti. Ci sono alcuni siti Web che sono più belli di un quadro, ma sono incredibilmente lenti. Anche se il vostro sito Web non è il Louvre, in ambito di progettazione, facendo uso delle seguenti pratiche, potete raggiungere buone prestazioni.

Less is more
Al giorno d'oggi, i siti Web contengono spesso gran quantità di scripts e stili CSS che rallentano il caricamento e sui dispositivi mobili a volte sono quasi inutilizzabili. Fortunatamente, c'è un approccio che possiamo imparare dai siti Web ben progettati. Possiamo tagliare gli stili o gli scripts in pezzi più piccoli e metterli in archivi separati. Poi, possiamo caricare soltanto l'archivio necessario per la pagina specifica con lo stylesheet che contiene soltanto gli stili principali per la pagina.
Ok, questo contraddice la best practice di concatenare gli archivi dello stesso tipo in un solo foglio per abbassare il numero delle richieste di HTTP. Questa pratica è stata creata per l'ambiente di HTTP/1. Tuttavia, con l'introduzione di HTTP/2, questa pratica può presto diventare obsoleta. HTTP/2 offre molti benefici; uno di questi benefici è che possiamo usare un collegamento per le richieste multiple. Invece di caricare uno stylesheet con migliaia di linee di CSS che non servono alla nostra pagina, si può usare uno stylesheet con gli stili “bassi” o scritti e poi caricare soltanto i moduli di cui abbiamo bisogno di al momento. Potete pensare a questa pratica anche come approccio differente al potenziamento progressivo.

Lazy loading
Un altro modo che i progettisti stanno utilizzando per migliorare le prestazioni è usare il lazy loading per le immagini, i video e perfino i contenuti. Quindi non dovete caricare ogni pezzo di contenuto ad ogni visita dell'utente sul vostro sito Web. Cosa realmente deve essere caricato è il contenuto above the fold, che è ciò che gli utenti vedono quando caricano la pagina. Tutto il resto che sia fuori dal campo visivo può aspettare. Il lazy loading permetterà di aumentiate la velocità del caricamento del sito Web. È inoltre molto possibile che alcuni utenti leggano soltanto la parte della pagina prima di andare su un’altra.
In quel caso, forzare gli utenti ad aspettare perché la pagina deve caricare tutto il contenuto, che probabilmente nemmeno sarà visualizzato, è di conseguenza un’assurdità. Pensate a quante volte avete visitato un certo sito Web per leggere soltanto il contenuto della parte alta della pagina.
Perché far aspettare quattro o cinque secondi per leggere appena alcune frasi? So che questo può sembrare estremo, ma tutti sappiamo la poca pazienza che hanno alcuni utenti (soprattutto su mobile). La procedura è semplice. Far caricare il contenuto above the fold in primo luogo. Poi, far caricare il resto del contenuto a poco a poco che l'utente scorre la pagina. Sebbene questo approccio richieda linee supplementari delle di Javascript, crediamo che ancora sia la migliore soluzione migliore per diminuire la velocità di caricamento della pagina, dovuta ai kb o persino ai mb supplementari del contenuto.
Quante linee ha il vostro Javascript principale o stylesheet di CSS? Che percentuali di peso hanno questi archivi? La dura verità è che molti siti Web si appesantiscono con il codice duplicato e ridondante. Migliorare CSS e Javascript richiede molto tempo. E questo tempo va pagato. Di conseguenza, molti clienti meno avvezzi all’investimento trascureranno questa lavorazione supplementare. Di conseguenza, il sito Web diventerà sempre più pesante col passare del tempo. Prima o poi questa situazione raggiungerà il livello che renderà il sito Web quasi inutilizzabile. Conseguenze? Utenti infastiditi, declino nei profitti, declino nelle visite del quotidiano e frequenza di rimbalzo che aumenta a dismisura.
C'è un modo evitare questa gente scomoda di situazione dietro i siti Web più ben progettati già sta usando. Dovete fare i controlli regolari del codice. Secondo la quantità di cambiamenti fatti sul sito Web, potete fare ogni mese questi controlli. Nel peggiore dei casi, farlo almeno semestralmente. Durante quei controlli Il codice ridondante ed obsoleto dovrebbe essere rimosso e il codice duplicato essere unificato. In questo caso, dovreste ricordare che la prevenzione è più facile ed anche più economica che correggere le conseguenze di un codice pesante.
È responsabilità dell’agenzia quella di spiegare al cliente che impatto un codice mal strutturato può avere sul suo profitto. E spiegare al cliente che non fare niente ora provocherà in futuro più lavoro e più spese.

Uso più intelligente dei video e delle immagini
Questa ultima pratica di un uso più intelligente dei video e delle immagini non è usata spesso come dovrebbe. Molti dei siti Web ben progettati la stanno ancora trascurando! Quindi, questa è una vostra opportunità di stare avanti coi tempi. L'idea principale di questa pratica è di usare le query di media, la rilevazione di larghezza dello schermo e perfino gli script di rilevazione del dispositivo per servire la versione specifica dei contenuti. Il modo più semplice di implementare questa pratica è usando immagine differenti (come risoluzioni) per dispositivi differenti.
Mettiamo che qualcuno visita il vostro sito Web sullo smartphone. In questa situazione, il vostro sito Web dovrebbe caricare soltanto le immagini con risoluzione più piccola specifica per gli smartphone. Questa è una regola d'oro: non dovreste caricare mai la stessa immagine (risoluzione) per tutti i devices, ma scegliere la giusta risoluzione per gli smartphone, piccoli desktop, desktop medi, e desktop grandi.
Inoltre è ormai utilissimo creare anche le versioni per gli schermi retina.
Decidiamo di utilizzare cinque diverse risoluzioni — 480px per i telefoni cellulari (sì, questi ancora esistono) e smartphone, 768px per le compresse, 992 px per i più piccoli desktop, 1400px per il desktop medio e 1920px per i grandi.
Stesso vale per i video responsive: 720 pixel sono sufficienti per il mobile, per salire solo per monitor full HD se vogliamo sorprendere i nostri visitatori.
La conclusione è che la gente comprerà da voi principalmente per due ragioni. In primo luogo, la gente compra determinate cose perché ne ha il bisogno. In secondo luogo, la gente compra determinate cose perché vogliono. Quando realmente volete qualcosa, per qualsiasi ragione, potete decidere di comprarla. Tuttavia, quanti utenti “infastiditi” procederanno comunque all’acquisto?
Sicuro, la persone possono fare acquisti anche se infastidite da una cattiva UX, ma se il vostro sito Web è incredibilmente lento aumentano di molto le probabilità che l’utente acquisti da uno dei vostri concorrenti.

Focus sulla comunicazione visiva
Qual’è la prima cosa che salta agli occhi quando si apre un sito web ben progettato? Quando l'utente visita per la prima volta il vostro sito Web, le proprietà visive quali le immagini, la tipografia, lo spazio bianco, di colore, l'iconografia, ecc. sono le prime cose che vede.

Usare immagini di qualità
Potete dare un'occhiata alla quantità enorme di esempi dei siti Web ben progettati. Che cosa non vederete mai sono le immagini stock. Potete anche solo immaginare che una certa marca nota abbia usato le immagini stock? Probabilmente no. Tutti conosciamo almeno un sito Web che sta usando un’immagine di stock nella famigerata slide di apertura. I bravi progettisti sanno però che se vogliono che i loro lavori restino maggiormente impressi, devono usare immagini appropriate.
Trovare quindi un fotografo professionista ed aggiungere immagini originali e di qualità farà quindi la differenza.

Non avere paura del bianco
Molti progettisti sono impauriti nell’usare lo spazio bianco. La ragione è che spesso i loro clienti pensano che lo spazio bianco sia uno semplicemente uno spreco. La quantità adeguata di spazio bianco vi aiuterà a rendere il contenuto più facile da leggere e l’occhio faticherà di meno a trovare i contenuti che servono. Quindi un altro modo migliorare la comunicazione visiva del vostro sito Web è quello di dare il giusto spazio e la giusta disposizione ai contenti per “respirare”.

Iconografia e tipografia coerenti
L'ultima cosa che possiamo imparare dai siti Web ben progettati è di usare l'iconografia e la tipografia in maniera coerente. Vi aiuterà a migliorare l’esperienza utente. Uno dei modi per raggiungerla è mantenere determinate proprietà all’interno di ogni singola pagina. Queste proprietà sono famiglie di caratteri, fonte-dimensione degli elementi specifici di tipografia (intestazioni, corpo del testo, ecc.), linea altezze, icone, colori, navigazione e gioco intorno agli elementi appena per nominare alcuni.
Lo scopo principale di questa pratica è di creare l'ambiente naturale e prevedibile che risultati nell'esperienza ininterrotta. Come progettista, non volete incitare l'utente a capire dopo qualche cosa. Inoltre non volete confondere lui usando uno stile su uno e completamente differente su un altro. Tutte queste cose possono essere ragioni affinché l'utente lascino il vostro sito Web. Se volete creare questo ambiente facile da usare, tenga le maggior parti e gli stili di vostro sito Web coerente. Dovreste cambiare soltanto il contenuto, mai i suoi stili.
Il modo più facile implementare questo approccio utilizzato da molti dei siti Web più ben progettati nel vostro progetto è creando gli stili e la direzione bassi di progettazione del vostro progetto. Nel caso della tipografia, la procedura può essere: Seleziona una o due font che userete attraverso il sito Web, definire la dimensione e l'interlinea, definisca la dimensione, definire i colori per corpo del testo e delle intestazioni. Quando siete fatto con tipografia, scelga un insieme e stile delle icone e del bastone a. Usi lo stesso approccio per navigazione ed altre componenti riutilizzabili del sito Web. Ricordiamo che per i testi brevi quali i titoli si può utilizzare un carattere bastoni, mentre per i contenuti più lunghi è preferibile usare le grazie, che affaticano meno l’occhio. Una buona pratica è quella di organizzare un foglio di stile per i caratteri utilizzati, in modo da poterli modificare velocemente in futuro, anche se fosse qualcun altro a proseguire il lavoro.

BACK TO BLOG