Realizzare un sito esteticamente gradevole è sicuramente uno dei principali obiettivi di un web designer, ma in molti casi concentrarsi esclusivamente su questo aspetto può portare a realizzare un sito poco funzionale.
Design is not just what it looks like and feels like. Design is how it works.
Steve Jobs
Riuscire a bilanciare estetica e funzionalità non è sicuramente un’operazione banale e le complicazioni aumentano quanto più sono numerose ed eterogenee le informazioni da visualizzare in una pagina.
Decidere come e dove posizionare i vari elementi all’interno di una pagina Web ha sicuramente pesanti conseguenze sulla user experience delle persone che visitano quella pagina.
Spesso si ha la tendenza ad affidarsi al proprio intuito o a delle prassi consolidate per definire gli spazi nei quali inserire i vari contenuti. Prendendo ad esempio i blog, non è raro vedere elementi quali:
- l’elenco delle categorie nella colonna laterale,
- i link relativi al post precedente e successivo in fondo ad ogni post,
- l’elenco degli ultimi post nella colonna laterale.
Siamo sicuri però che queste siano le posizioni corrette e siamo certi che tali elementi siano realmente utilizzati dai visitatori? I base a quali fattori stabiliamo che un elemento debba essere inserito o meno in un template? Quali sono le logiche che ci portano a posizionare un link nell’header piuttosto che nel footer o nella sidebar?
L’intuito e l’esperienza ci possono sicuramente venire in aiuto. Personalmente però ritengo che avere dei dati a supporto delle proprie tesi sia il modo migliore per essere certi dell’efficacia di una soluzione.
Dati qualitativi e dati quantitativi
Per valutare la funzionalità di un progetto di web design si possono utilizzare diversi metodi, basati sia su dati qualitativi che quantitativi.
I primi prevedono l’uso di studi di usabilità basati su focus group, questionari …etc… I secondi invece sono generalmente condotti sfruttando strumenti di web analytics e A/B test, tanto per citare i più comuni.
I primi inoltre necessitano generalmente della collaborazione degli utenti, mentre i secondi possono essere svolti anche a loro insaputa. Questo permette quindi generalmente di ottenere dati più oggettivi e anche di poter svolgere un illimitato numero di test senza dover scomodare nessuno.
In questo articolo e nei successivi, illustrerò alcuni dei metodi quantitativi che è possibile utilizzare per migliorare il proprio sito, focalizzandomi principalmente sui siti basati su WordPress.
Lo scopo è quello di aiutarti a capire come vengono utilizzati dai tuoi utenti i vari elementi presenti nel tuo sito, in modo da poter prendere delle decisioni, supportate da dati oggettivi, che ti permetteranno di apportare delle modifiche al design del tuo template.
Utilizzare gli eventi di Google Analytics per analizzare il comportamento degli utenti
Google Analytics è sicuramente una della piattaforme di Web Analytics più utilizzate al mondo, sia per il fatto che è gratuito sia perché dispone di un incredibile numero di funzionalità.
Utilizzarlo però solo per misurare quante visite ci sono state sul tuo sito è sicuramente uno spreco, dato che questo strumento consente di fare cose ben più utili ed interessanti. Per sfruttare al meglio questo e anche altri strumenti di web analytics ti consiglio caldamente la lettura del libro “Web Analytics 2.0: Misurare il successo online nell’era del Web 2.0” di Avinash Kaushik.
Se utilizzi WordPress e Google Analytics, ti consiglio di installare il plugin Google Analytics by Yoast che ti permette di sfruttare in modo semplice alcune delle funzionalità avanzate di Google Analytics.
Dopo aver installato e attivato questo plugin, e ovviamente rimosso il codice di Google Analytics eventualmente inserito in precedenza nel tuo template, sarà sufficiente inserire il tuo UA code all’interno della pagina di configurazione del plugin.
Attivando la funzione “Track outbound click & downloads” potrai inoltre sfruttare gli eventi di Google Analytics per analizzare quali link esterni vengono più cliccati dai visitatori del tuo sito.
Il plugin dispone anche di ulteriori funzioni avanzate che vedremo in uno dei successivi articoli.
Attivando la voce “Track outbound click & downloads“, potrai vedere nella sezione Contenuti -> Eventi del pannello di controllo di Google Analytics quali sono i link esterni (inseriti nei tuoi post) più cliccati, classificati nella categoria “outbound-article”:
Gli eventi di Google Analytics possono essere infatti classificati per categoria, in modo da rendere più facile e chiara la loro interpretazione.
Se utilizzi Google Analytics (nella versione Universal Analytics) e desideri utilizzare gli eventi per monitorare anche altri link presenti sul tuo sito, è sufficiente effettuare una piccola modifica all’interno del codice utilizzato per il link, in questo modo:
<a href="http://www.pippo.com/" onClick="ga('send', 'event', { eventCategory: 'Categoria', eventAction: 'Azione', eventLabel: 'Etichetta'});">Clicca qui</a>
Al posto di Categoria inserisci un testo che ti consenta di identificare che cosa stai tracciando, ad esempio ‘footer-links’ per identificare tutti i link posti nel footer della pagina, come Azione puoi inserire ad esempio ‘click’ e come Etichetta un testo che ti permetta di identificare quel particolare link. Maggiori informazioni su questi parametri le puoi trovare nella guida di Google Analytics oppure può esserti utile questo strumento per la creazione del codice di un evento.
Utilizzare jQuery per inserire il codice di tracciamento degli eventi di Google Analytics
Ci sono però alcuni casi, soprattutto usando un CMS come Wordpress, in cui non è possibile modificare direttamente nel template il codice HTML relativo ad un link. Oppure vorresti usare un metodo più rapido per inserire il codice di tracciamento degli eventi su un numero elevato di link.
In entrambi i casi puoi sfruttare la libreria JavaScript jQuery che solitamente è presente in tutti i siti basati su WordPress.
Grazie all’utilizzo di JavaScript è infatti possibile inserire del codice in automatico senza dover intervenire sui singoli link. Ecco alcuni esempi:
$('.newsletter_button').on('click', function() { ga('send', 'event', 'button', 'click', 'newsletter'); });
L’esempio riportato qui sopra permette di tracciare il link relativo a un elemento (ad esempio il pulsante di iscrizione a una newsletter) che utilizza la classe CSS “newsletter_button”. Ogni qualvolta nel template sarà presente un elemento con questa classe, jQuery provvederà ad inserire il codice di tracciamento dell’evento indicato nell’esempio.
I clic su tale pulsante saranno poi conteggiati come eventi all’interno di Google Analtycs utilizzando la categoria “button”, l’azione “click” e l’etichetta “newsletter”.
Il principale vantaggio di usare jQuery però è quello di poter creare degli script per tracciare più di un link alla volta, senza doverli modificare manualmente uno a uno.
Utilizzando ad esempio uno script come quello seguente è possibile tracciare tutti i link del menu principale del sito, in questo caso racchiusi all’interno da un tag con id=”menu-primary-navigation”. Aggiungendo una variabile che cattura il contenuto dell’attributo href relativo a ogni link (il tag HTML a), è possibile differenziare il clic su ogni singola voce del menu.
$('#menu-primary-navigation li a').each(function(){ var url = jQuery(this).attr("href"); $(this).attr("onclick","ga('send', 'event', 'primary-menu', 'click', '"+ url +"');"); });
Grazie a un codice simile, su Google Analytics sarà possibile visualizzare tutti gli eventi collegati a ogni singolo clic sulle varie voci del menu, sapendo anche quali sono quelle più cliccate.
L’utilizzo di soluzioni simili permette di raccogliere preziose informazioni sul comportamento degli utente, aiutandoti così a decidere quali elementi mantenere sul sito e quali invece elminare, modificare o riposizionare.
In questo modo il tuo sito sarà molto probabilmente più pulito, ordinato e soprattutto funzionale.