Fon­da­men­ti del web design: facilità d’uso

La facilità d’uso di una pagina è una parte fon­da­men­ta­le della di­sci­pli­na co­no­sciu­ta come “usability en­gi­nee­ring”, che si basa proprio sulla usability di cui si parla in ambito della na­vi­ga­zio­ne sul web. In questo caso, l’usabilità si riferisce al facile utilizzo dei siti per i vi­si­ta­to­ri. In generale, una pagina facile da capire e dalla na­vi­ga­zio­ne intuitiva viene con­si­de­ra­ta “user-friendly”. Per questo bisogna attenersi alle con­ven­zio­ni del web design e non tra­scu­ra­re le ca­rat­te­ri­sti­che tecniche ne­ces­sa­rie per un buon fun­zio­na­men­to. L’ac­ces­si­bi­li­tà di un sito web, in inglese “ac­ces­si­bi­li­ty”, ricopre un ruolo im­por­tan­te nell’ambito della facilità d’uso. L’ac­ces­si­bi­li­tà di una pagina è de­ter­mi­na­ta dal fatto che può essere uti­liz­za­ta da tutti gli utenti, in­di­pen­den­te­men­te da limiti fisici, cognitivi, lin­gui­sti­ci, tecnici o altri. Per saperne di più, potete con­sul­ta­re le linee guide per l’ac­ces­si­bi­li­tà dei contenuti sul sito dell’or­ga­niz­za­zio­ne W3C.

Ciò che è valido per l’aspetto di un sito web, vale anche per la sua usabilità, quindi cercate di mantenere la na­vi­ga­zio­ne facile e chiara. Una buona na­vi­ga­zio­ne si con­trad­di­stin­gue per la sua velocità e in­tui­ti­vi­tà; gli utenti devono ri­co­no­sce­re subito la struttura del menu e com­pren­der­la. Un’unica barra di na­vi­ga­zio­ne è suf­fi­cien­te nella maggior parte dei casi e bisogna evitare di riempirla di troppe voci e sottovoci. Se uti­liz­za­te un menu a tendina, deve essere chiaro. Una struttura di na­vi­ga­zio­ne chiara e unitaria agevola l’usabilità e ga­ran­ti­sce che i vi­si­ta­to­ri del sito man­ten­ga­no una veduta di insieme.

Anche le voci del menu devono essere ri­co­no­sci­bi­li come tali. Strut­tu­ra­te i link di na­vi­ga­zio­ne ad es. tramite l’utilizzo di icone. Inoltre, potete fare in modo che le voci del menu o il puntatore del mouse cambino colore quando gli utenti ci passano sopra con il mouse (effetto hover). In egual misura bisogna fare at­ten­zio­ne ad assegnare delle de­no­mi­na­zio­ni il più possibile brevi e chiare alle sottovoci. Infine, as­si­cu­ra­te­vi che le pagine linkate offrano veramente ciò che è pre­an­nun­cia­to dalle voci del menu.

La rea­liz­za­zio­ne tecnica di un sito è estre­ma­men­te im­por­tan­te. Basilare per un facile utilizzo della pagina è il ca­ri­ca­men­to senza problemi dei contenuti del sito. As­si­cu­ra­te­vi che i contenuti siano op­por­tu­na­men­te curati: messaggi di errore o errori di ca­ri­ca­men­to sono poco pro­fes­sio­na­li e non fanno una buona im­pres­sio­ne. Se i contenuti hanno bisogno di pre­sta­zio­ni elevate per essere vi­sua­liz­za­ti, ne con­se­guo­no dei tempi di ca­ri­ca­men­to lunghi e spia­ce­vo­li. La pazienza del vi­si­ta­to­re viene così messa a dura prova e sul web non è proprio ac­cet­ta­bi­le. Con­trol­la­te perciò co­stan­te­men­te che la vostra pagina sia priva di errori e che venga vi­sua­liz­za­ta senza dif­fi­col­tà.

Le richieste fatte all’hardware degli utenti sono un altro fattore tecnico da tenere in con­si­de­ra­zio­ne. Teo­ri­ca­men­te un sito web deve poter essere ri­chia­ma­to su ogni di­spo­si­ti­vo che si connetta a Internet e deve avvalersi dei requisiti minimi richiesti dagli standard della tec­no­lo­gia attuale. Di con­se­guen­za, l’in­di­pen­den­za della piat­ta­for­ma e l’ac­ces­si­bi­li­tà di una pagina sono molto im­por­tan­ti. Ciò significa che un sito web funziona in­di­pen­den­te­men­te dal sistema operativo in uso su un de­ter­mi­na­to di­spo­si­ti­vo. Non deve essere ne­ces­sa­rio in­stal­la­re alcun software strano per la vi­sua­liz­za­zio­ne dei contenuti. Inoltre, il ca­ri­ca­men­to della pagina non deve ri­chie­de­re pre­sta­zio­ni elevate, al­tri­men­ti verranno esclusi gli utenti che uti­liz­za­no dei di­spo­si­ti­vi con pro­ces­so­ri lenti.

Data la rapida dif­fu­sio­ne di di­spo­si­ti­vi mobili con accesso a internet, la vi­sua­liz­za­zio­ne di un sito su ogni di­spo­si­ti­vo (computer, tablet, smart­pho­ne, ecc.) e su ogni tipo di schermo sta di­ven­tan­do sempre più im­por­tan­te. Prima le pagine web erano ca­rat­te­riz­za­te pre­va­len­te­men­te da un layout statico, cioè fisso e che non si adattava a tutti i tipi di schermo. Ciò com­por­ta­va ad esempio che gli utenti vedevano solo una piccola parte del sito sui piccoli schermi dello smart­pho­ne.  

Un layout adattivo è mag­gior­men­te uti­liz­za­bi­le poiché vengono offerti diversi formati per il sito, cioè uno per lo smart­pho­ne, per il tablet e per i pc. Tuttavia, le ri­spet­ti­ve versioni si orientano solo alle di­men­sio­ni degli schermi comuni per alcuni modelli di di­spo­si­ti­vi specifici. Non essendo fatti su misura per ogni formato possibile dello schermo, spesso viene sprecato inu­til­men­te dello spazio al momento della vi­sua­liz­za­zio­ne su questi ap­pa­rec­chi.

Il co­sid­det­to re­spon­si­ve web design è de­ci­sa­men­te più fles­si­bi­le. Infatti, la struttura della pagina viene modellata in modo per­so­na­liz­za­to alla di­men­sio­ne dello schermo del di­spo­si­ti­vo. Si tratta quindi di un web design reattivo (come sug­ge­ri­sce la parola “re­spon­si­ve”) che sfrutta nel miglior modo possibile lo spazio del display. Non per niente è diventato lo standard attuale nell’ambito del web design. Al contrario che nei web design statici o adattivi, il re­spon­si­ve web design utilizza uno schema di base variabile (chiamato anche “grid”) che non solo si adatta au­to­ma­ti­ca­men­te al formato dello schermo in uso, ma posiziona anche le in­for­ma­zio­ni più im­por­tan­ti e gli elementi di na­vi­ga­zio­ne in primo piano. Questo ga­ran­ti­sce un’alta usabilità del sito, in­di­pen­den­te­men­te dal di­spo­si­ti­vo in uso.

Gli errori fanno parte del processo di ap­pren­di­men­to. Tuttavia, se si vuole battere la con­cor­ren­za, anche nell’ambito del web design, sarebbe meglio evitarne alcuni:

• Finestre pop-up: fino a non molto tempo fa era ancora in voga che cliccando su un link si aprisse una nuova, piccola finestra. Ora questa pratica non è più ben vista dagli utenti e molti di­sat­ti­va­no com­ple­ta­men­te questa opzione grazie a un’esten­sio­ne del browser.

• Dati di contatto mancanti: offrite all’utente la pos­si­bi­li­tà di mettersi in contatto con voi. I dati di contatto do­vreb­be­ro essere trovati fa­cil­men­te e senza molti sforzi.

• Link che non portano a nulla: i link morti sono irritanti e aumentano con­si­de­re­vol­men­te la frequenza di rimbalzo del vostro sito, ovvero gli utenti saranno propensi ad ab­ban­do­na­re più in fretta la pagina. Una volta che il vostro sito sarà online, dovrete con­trol­la­re re­go­lar­men­te la presenza di link vecchi o errati.

• Contenuti non più attuali: molti siti hanno dei contenuti vecchi e non più attuali. As­si­cu­ra­te­vi di fornire sempre delle in­for­ma­zio­ni ag­gior­na­te.

• Una cattiva na­vi­ga­zio­ne: la velocità su internet è un fattore che viene dato per scontato, per questo se un utente non scopre ve­lo­ce­men­te come e dove può arrivare navigando sul sito, visita sem­pli­ce­men­te un’altra pagina, quella dei vostri avversari. Perciò in ogni sot­to­pa­gi­na dovrebbe esserci una barra di na­vi­ga­zio­ne che porta i vi­si­ta­to­ri a tutte le altre sezioni im­por­tan­ti del sito.

• Troppi tipi di font e colori: i siti do­vreb­be­ro avere un aspetto armonioso e unitario. I prin­ci­pian­ti tendono a voler sfruttare appieno la quantità enorme di font e colori messi a di­spo­si­zio­ne, mentre è fon­da­men­ta­le che non uti­liz­zia­te sulla vostra pagina più di tre font diversi così come non vanno scelti più di tre colori.

Se evitate tutti questi errori e seguite anche le regole fon­da­men­ta­li dell’usabilità, il vostro sito avrà già una struttura di base attraente. Otterrete un sito completo e corretto solo se la vostra pagina con­vin­ce­rà anche per forma e colori. Nell’ultimo articolo dedicato ai fon­da­men­ti del web design, ne saprete di più sugli effetti dei design e dei colori.