No. 216

Se avete lavorato al design di un sito web con un team o un cliente piuttosto grande, ci sono buone probabilità che avrete passato del tempo a discutere (litigare?) su come dovrebbe apparire la homepage o quale dipartimento deve essere presente nella navigazione di primo livello, magari dimenticandovi che molti dei visitatori potrebbero anche non vedere mai la homepage se arrivano al sito tramite una ricerca.

Nessuno arriva al vostro sito web solo per guardare la homepage o per navigare attraverso l'architettura dell'informazione che avete creato. Le persone arrivano al vostro sito perché vogliono fare qualcosa.

Troppo spesso si dà la colpa al cliente per il mancato raggiungimento di una buona user experience: non capisce che la cosa importante è che l'architettura dell'informazione sia semplice da comprendere, cosa che non otterrete mai se ogni singolo dipartimento ottiene un proprio pulsante sulla homepage.

È giunto il momento di assumerci le nostre responsabilità. Solitamente, indipendentemente da quanta user research facciamo o quanto meticolosamente abbiamo trattato la digital strategy, cominciamo le nostre interazioni con i clienti mappando l'architettura dell'informazione o facendo delle bozze della homepage. Se queste sono le prime cose che mostriamo al cliente, non c'è da stupirsi se crederà che questi siano i pilastri dell'intero sito web. In effetti, molti pochi utenti riescono a raggiungere i propri obiettivi proprio sulla homepage di un qualunque sito, perciò pochissime organizzazioni raggiungeranno i propri obiettivi, men che meno quelli dei loro utenti, concentrandosi solo sulla homepage.

Ben prima che “mobile first” o “content-driven design” diventassero termini molto in voga, l'architetto dell'informazione Are Halland cercò di risolvere questo rompicapo introducendo il core model, presentandolo allo IA Summit 2007. Sette anni dopo, questa presentazione è ancora piacevole e molto importante. In breve, i siti web devono essere progettati dall'interno verso l'esterno, con il focus primario sui core task che i suoi utenti devono portare a termine.

Quando in Netlife Research abbiamo usato la tecnica del core model per cominciare il redesign mobile-first e content-driven del sito web della Norwegian Cancer Society (NCS), abbiamo passato meno tempo sui cavilli del contenuto della homepage e più tempo a cercare di capire in che modo avremmo davvero potuto aiutare gli utenti e la NCS ad ottenere quello che cercavano sul sito, ottenendo dei grandi risultati.

Il core model ci assicura che stiamo pensando ai bisogni dell'utente durante tutto il processo di design del sito web, riflettendo in maniera olistica sugli obiettivi piuttosto che gerarchicamente. Invece di demandare agli utenti “Dove potresti trovare questa informazione all'interno del sito NCS?”, il core model ci spinge a chiederci, in maniera più generosa, “Come può aiutarti la NCS?”

Un punto di partenza diverso

Con il core model, si comincia il processo di design mappando tutto il contenuto che abbiamo per poter trovare le pagine con una chiara sovrapposizione tra obiettivi e task dell'utente.

Per usare il core model, vi servono:

  • Obiettivi di business: obiettivi e sotto-obiettivi in ordine di priorità e misurabili. Cosa vuole ottenere l'azienda?
  • User task: task veri dell'utente, su cui si sono fatte ricerche, ordinati per priorità. Quali sono le cose che le persone vogliono portare a termine? (Di solito, noi facciamo un sondaggio sui compiti più importanti per identificare i task dell'utente: un grande strumento per allineare l'organizzazione).

Una buona revisione del contenuto esistente di un sito web può rivelare degli angoli polverosi che hanno bisogno di pulizia. Tipicamente, un sito web può avere molto contenuto che non aiuta gli utenti a raggiungere i propri scopi, come gli archivi dei comunicati stampa e le lunghe dichiarazioni di visione aziendale. Di solito si può eliminare una gran parte di questo contenuto, lo si può semplificare o in qualche modo fondere con dell'altro contenuto.

Quando avete messo da parte il contenuto non essenziale, vi rimangono le cose principali [cores, ndr]. Si tratta di pagine o workflow il cui contenuto realizza una chiara sovrapposizione tra gli obiettivi di business e gli user task.

Un esempio dalla NCS è la loro pagina dedicata alle informazioni sul cancro ai polmoni. La nostra user research ha identificato un'enorme bisogno di informazioni qualificate e autorevoli sulle molte forme di cancro e, dal momento che uno degli obiettivi della NCS è educare i norvegesi sul cancro, abbiamo un chiaro abbinamento tra i bisogni degli utenti e gli obiettivi maggiori dell'organizzazione.

Un diagramma di Venn che mostra l'intersezione dei bisogni dell'utente e degli obiettivi di business. Quali pagine soddisfano sia gli obiettivi di business sia i bisogni degli utenti?

Ma cosa succede con pagine come “Dona ora”? La nostra ricerca ci ha mostrato che, tipicamente, gli utenti non cercano nel sito le informazioni riguardanti la raccolta fondi, ma è essenziale poter ricevere donazioni online se uno degli obiettivi della NCS è la raccolta fondi per la ricerca sul cancro. Qui è dove il core model dà il massimo: se create dei buoni contenuti centrali [cores, ndr], sarete anche in grado di creare buoni percorsi verso altre pagine meno richieste sul vostro sito, indipendentemente da dove si trovano nell'architettura dell'informazione. Una pagina principale non dovrebbe mai essere un vicolo cieco.

Per chi è il core model?

Il core model è innanzitutto uno strumento per il ragionamento: aiuta il content strategist ad identificare le pagine più importanti sul sito. Aiuta lo UX designer a identificare quali moduli servono su una pagina. Aiuta il graphic designer a sapere quali sono gli elementi più importanti da enfatizzare nel design. Aiuta a includere i clienti o gli stakeholder meno esperti di web nella vostra strategia di progetto. Aiuta i copywriter e gli editori a lasciarsi alle spalle il ragionamento a compartimenti stagni e a creare contenuti migliori.

Abbiamo notato che, per far sì che queste diverse discipline comincino a pensare in maniera collaborativa, funziona molto bene organizzare dei team workshop che introducono il core model thinking all'intero gruppo.

Per quando sarà finito il workshop, il gruppo avrà raggiunto un'intesa reciproca sui bisogni degli utenti, sugli obiettivi di business e sul modo in cui dovrebbero essere connesse le diverse pagine. Inoltre, avrete dei fogli di appunti in cui gli stakeholder vi avranno segnato una lista con le priorità dei tipi di contenuto e moduli che credono siano i più importanti sulla pagina su cui hanno lavorato, tenendo presente sia i bisogni dell'utente sia gli obiettivi di business.

Con una lista con le priorità di quali tipi di contenuto e moduli dovrebbero trovarsi sulle pagine più importanti, per il team è molto più facile mettersi al lavoro, indipendentemente se siano UX designer, graphic designer o content strategist. Si comincia con il creare le pagine principali: la homepage, di solito, è l'ultima pagina che progettiamo (come si fa a progettare l'imballaggio prima di sapere cosa conterrà?).

Come si fa un core model workshop

Il core model workshop qui delineato è il primo stadio di un processo di design più grande, che potrebbe variare a seconda del team. Tuttavia, quando all'inizio si lavora con i clienti con questi fogli di appunti [handout, ndr], il risultato finale sarà un team che non vede l'ora di vedere il nuovo sito web prendere forma e che è d'accordo su quale contenuto sia davvero importante.

Fare un core workshop è facile e low tech. Tutto ciò di cui avete bisogno sono:

  • Fogli che riassumano i compiti dell'utente su cui avete fatto ricerche e gli obiettivi di business (vedi sopra)
  • Fogli con il core model (e.g., carta di dimensione A3) (da riempire)
  • Pennarelli e Post-It
  • Una stanza con un proiettore
  • 3-4 ore per workshop
  • 1-3 partecipanti del vostro team (e.g., designer, UX, content, developers, e così via)
  • 6-14 stakeholder da settori o dipartimenti rilevanti interni all'organizzazione
  • Snack e molto caffè!
Core model handout con campi da riempire: nome della pagina core, obiettivi di business, task utente, percorsi verso l'interno, contenuto principale e percorso verso l'esterno.

Il foglio del core model.

Quando invitate gli stakeholder, cercate di coinvolgere persone…

  • che lavoreranno con il contenuto
  • con salde opinioni sul sito web
  • che dovrebbero collaborare ma non lo stanno facendo.

Per partecipare ad un core workshop, non c'è bisogno di saper disegnare, né di avere delle design skill o conoscenze tecniche. La cosa più importante è che le persone comprendano i propri rispettivi campi.

Tutti i partecipanti al workshop dovrebbero lavorare a coppie per compilare i propri fogli di lavoro. Presenteranno le proprie idee ai loro pari tra uno step e l'altro del workshop, i quali solitamente creeranno delle domande o delle nuove idee che altri pari potranno incorporare nei loro worksheet.

Core model workshop con partecipanti che discutono e lavorano a coppie. I partecipanti sono etichettati come socionom, lawyer, cancer nurse, research, design, cancer care, prevention, web editor, e fundraiser. Tra i partecipanti a uno dei core workshop della NCS c'erano persone dai dipartimenti di cura del cancro, prevenzione del cancro, ricerca sul cancro, diritti e raccolta fondi, così come l'in-house designer e il web editor.

1. Identificate i vostri core

La prima cosa che dovete fare è identificare le vostre pagine principali abbinando gli obiettivi di business ai task dell'utente. Potete farlo nel workshop o prima. Usiamo l'esempio del nostro template del tipo di cancro, e.g., “lung cancer”, in cui abbiamo abbinato i seguenti task e obiettivi.

Obiettivi di business:

  • Aiutare i pazienti e i loro amici e parenti
  • Aumentare la conoscenza del cancro e della sua prevenzione

Task utente:

  • Conoscere varie forme di cancro
  • Identificare i sintomi del cancro
  • Ricevere consigli per prevenire il cancro
  • Trovare informazioni sulla cura del cancro (terapie, effetti collaterali, rischi, prognosi)
Il foglio del core model, completato parzialemente con il nome della pagina principale, gli obiettivi di business e i task utente.

Il foglio di lavoro è stato riempito con gli obiettivi di business e i task utente rilevanti.

2. Pianificate i percorsi verso l'interno

Invece di saltare nella creazione del contenuto e nei dettagli di quella pagina, il prossimo passo consiste nel mappare i percorsi verso l'interno. È qui che osserveremo attentamente i risultati di tutte le user research per avere un aiuto nel prendere delle decisioni informate. In che modo potranno trovare la pagina gli utenti? Come ci sono arrivati?

Questo approccio è un modo semplice per indurre il vostro cliente a pensare alla pagina dalla prospettiva dell'utente. Nel nostro esempio della pagina sul cancro ai polmoni, i percorsi verso l'interno sono cose come:

  • Cercare cancro ai polmoni su Google
  • Cercare i sintomi su Google
  • Cliccare un link sulla homepage
  • Trovare un link in una brochure cartacea

3. Determinare il contenuto principale

Dopo aver identificato i percorsi verso l'interno, cominciamo a parlare del contenuto principale. Di che contenuto abbiamo bisogno su questa pagina perché raggiunga gli obiettivi sia dell'organizzazione sia degli utenti? Che tipo di moduli o elementi ci servono?

In questo task, i partecipanti usano tutte le informazioni che hanno sui loro fogli di lavoro: i task dell'utente, gli obiettivi di business e i percorsi verso l'interno. Alla luce di queste informazioni, quali sono le cose più importanti che devono andare su questa pagina e in quale ordine? Avere a portata di mano una solida base di user research renderà molto più semplice questo processo. Nel caso del workshop NCS, la user research aveva identificato la prevenzione del cancro come uno dei pensieri prioritari dell'utente, il che rese chiaro che avevamo bisogno di dire qualcosa sulla prevenzione, a volte perfino sui tipi di cancro che non possono essere prevenuti.

4. Impostare i percorsi in avanti

Quest'ultimo campo è importantissimo per il successo del core model. Dopo che i visitatori hanno ottenuto una risposta alle loro domande, dove vogliamo che vadano? A questo punto potete permettervi di pensare di più agli obiettivi di business in senso generale.

Nel caso della pagina sul cancro ai polmoni, potrebbero esserci percorsi in uscita come questi:

  • Contattare la help line del cancro (così da non dover fare da soli la diagnosi)
  • Come prevenire tutte le forme di cancro, non solo quello specifico tipo di cancro
  • I diritti del paziente, se stanno leggendo del trattamento
  • <
  • Comunicare agli utenti il lavoro politico e di lobby che fa la NCS (e.g., cercare di ridurre i tempi di attesa per i trattamenti)

Questo deve essere fatto nel contesto degli user task. Se qualcuno visita il sito web in preda all'ansia, sperando di trovare informazioni serie sul melanoma, vogliamo davvero che il loro viaggio sulla pagina si concluda con un lampeggiante messaggio "Dona ora!"? Certo che no, sarebbe maleducato e insensibile e comunque è improbabile che incoraggi delle donazioni. Tuttavia, molti utenti cercano effettivamente delle informazioni generali sulla ricerca sul cancro e, in questo contesto, possiamo inquadrarlo in maniera più specifica: “Se pensi che la ricerca sul cancro sia importante, puoi aiutarci facendo una donazione.” (E, in effetti questo approccio più rispettoso può alla fine fa aumentare le donazioni come è successo per noi alla NCS.)

Un core model handout compilato con ulteriori dettagli, inclusi i percorsi verso l'interno, il contenuto principale e i percorsi in uscita.

Un foglio di lavoro "core" compilato.

5. Pensare al mobile per assegnare le priorità

Dopo tutti questi step, i partecipanti di solito sono entusiasti. I loro fogli di lavoro sono pieni di idee per il contenuto, i moduli e per una gran varietà di funzionalità.

L'entusiasmo va benissimo (è quello che vogliamo!) ma è difficile lavorare con un foglio di lavoro pieno di idee discorsive. Tutte queste cose hanno la stessa importanza?

Questo è il motivo per cui lo step finale del workshop consiste nell'usare un modo di pensare mobile first per assegnare delle priorità agli elementi. Diamo ai partecipanti un nuovo foglio e chiediamo loro: se aveste solo un piccolo schermo a vostra disposizione, in che ordine mettereste gli elementi che avete identificato durante il workshop? Devono anche sistemare i loro percorsi in avanti nel contesto del contenuto principale.

Una versione modificata del foglio del core model adattato agli schermi mobile, con colonne più strette al posto del campo del contenuto principale e dei campi dei percorsi in avanti.

Nello step finale, ai partecipanti vengono dati dei nuovi fogli di lavoro con colonne più strette a rappresentare lo schermo mobile. Come assegnerebbero le priorità su tale schermo piccolo?

Un esempio di core model handout completato, modificato per pensare al contenuto su schermi mobile.

Un mobile core worksheet completato in un workshop con la Associazione Norvegese per Ciechi e Ipovedenti.

Dalle bozze al sito finito

Usiamo raramente i wireframe e non vedrete delle bozze in Photoshop o un prototipo con lorem ipsum. Perché no?

Un wireframe dice molto su dove si metterà qualcosa sulla pagina, ma raramente dice qualcosa sul perché è stato messo lì. Per questo motivo, i wireframe implicano molto di più su come potrebbe essere un design rispetto a quello che volete nelle prime fasi del design.

D'altro canto, le bozze principali del nostro workshop possono essere ben utilizzate da qualunque disciplina del web perché dicono quali elementi devono trovarsi su quali pagine e, altrettanto importante, perché devono trovarcisi. Davvero, non conosco alcuna disciplina collegata al web i cui membri non dovrebbero preoccuparsi di cosa deve esserci su una pagina e perché.

Con i team interdisciplinari, sarà più probabile che troverete modi più innovativi per risolvere gli user task: dovrebbe essere solo testo? Un video? Un quiz? Qualcosa di completamente diverso?

Di solito, in Netlife Research lavoriamo in piccoli team di due-quattro persone con una gran varietà di skill, come user research, UX design, graphic design, front-end development e content strategy. Tipicamente, a questo punto lavoriamo anche a stretto contatto con un gruppo di lavoro del cliente.

Insieme, siamo in grado di identificare che tipo di moduli e informazioni abbiamo bisogno sulle pagine principali, ma a questo stadio il visual design è ancora flessibile.

Tre bozze di una pagina nella vista mobile: una prima bozza su carta, un primo sketch Photoshop e un semplice prototipo in bianco e nero in HTML e CSS. Tutte le bozze usano contenuto vero, non lorem ipsum.

Il passo seguente consiste nel cominciare i workshop sul contenuto con l'organizzazione, usando il core model thinking e scrivendo a coppie.

Alla fine, rilasciamo un prototipo HTML e CSS con il vero contenuto, che (in questo caso) è stato poi sviluppato da un subcontractor per NCS, insieme ad un CMS custom per gestire il sito web e fare delle modifiche. Abbiamo anche realizzato diversi moduli su misura per i comuni percorsi in avanti, che i loro editor del sito web possono sistemare al bisogno sulle varie pagine.

Uno di questi moduli di percorso in avanti è un box che pubblicizza una helpline sul cancro. Questo aiuta la NCS a raggiungere il suo obiettivo di aumentare l'uso dei suoi servizi per aumentare la conoscenza del cancro e aiuta gli utenti ad ottenere risposte alle proprie domande.

Screenshot di una pagina sul cancro al seno, che mostra del testo sulle cause e sulla prevenzione a sinistra e il box della helpline sul cancro a destra.

Il box della helpline sul cancro così come viene usato sulla pagina sul cancro al seno. Per ulteriori dettagli su questo ed altri moduli di percorso in avanti, si veda la nostra presentazione a Confab Central 2014.

Risultati

Dopo il lancio nel Settembre 2012, il numero di visitatori unici sul sito web NCS è rapidamente cresciuto ogni anno, nonostante il fatto che il progetto non abbia attività specifiche volte all'ottimizzazione per i motori di ricerca. Il contenuto centrato sull'utente premia.

Fin dal lancio del redesign nel settembre 2012, il numero di visitatori unici è raddoppiato. Prima del lancio, il numero di visitatori unici era fermo fin dal 2010.

I visitatori unici sul sito della Norwegian Cancer Society. Siete curiosi sulle flessioni nel grafico ogni anno? È l'effetto delle (quasi) infinite vacanze estive Norvegesi.

Come piacevole effetto collaterale della ristrutturazione del sito web e del contenuto attorno agli user task, la Norwegian Cancer Society viene ora usata più frequentemente adesso come fonte dai media che si occupano di news.

I percorsi in avanti hanno un impatto enorme

Un esempio di un percorso in avanti è la succitata helpline per il cancro. Se confrontate il numero di conversazioni alla helpline per il cancro nel 2013 con il numero di conversazioni nei sette anni precedenti, il numero di conversazioni è cresciuto del 40%. Solitamente, le organizzazioni cercheranno di ridurre il numero di chiamate, ma quando il vostro business è informare, è una buona cosa che gli utenti si mettano in contatto con voi. Più persone a rischio cancro hanno preso il telefono o sono entrate in una chat o hanno mandato un'email e parlato con una infermiera di oncologia.

E nonostante questo aumento delle conversazioni sulle linee di supporto, le infermiere di oncologia ci dicono che ricevono domande più informate e sofisticate di quelle a cui erano abituate, perché molte più persone hanno già trovato sul sito web delle risposte alle loro domande più semplici.

Dal 2006, il numero di conversazioni alla helpline sul cancro era sempre rimasto più o meno invariato, ma nel 2013, l'anno dopo il lancio, c'è stato un aumento del 40%.

Il numero totale di conversazioni alla helpline sul cancro, incluse email, chat e telefonate.

Meno banner ma più donazioni

La precedente homepage della NCS aveva molti banner e molte voci di menu che puntavano ai vari modi in cui supportare la NCS. Oggi, c'è solo una voce “Support us” nel menu e i banner sono stati tolti.

Nonostante questo, l'effetto sulla raccolta fondi digitale è stato sorprendente. Confrontando i numeri dal 2011 (un intero anno con il vecchio sito) con quelli del 2013 (un intero anno con il nuovo sito):

  • Il numero di donazioni singole è triplicato (su del 198%)
  • Il numero di donatori regolari che si registrano ogni anno è quadruplicato (salito del 288%)
  • La somma totale dai donatori regolari ogni anno è quintuplicata (!) (salita del 382%)

Non lo si deve solo al core model thinking ma anche al continuo miglioramento delle form.

Questo grafico mostra che il numero di donatori regolari registratisi online è sei volte più alto nel 2014 rispetto al 2011. C'è stato un grande incremento a partire dal lancio nel 2012.

Grazie ai continui miglioramenti, per l'Agosto 2014 le entrate annuali dai donatori regolari registratisi online ha già sorpassato le entrate annuali dal 2013.

Le persone fanno tutto da mobile

Per molti anni, abbiamo sostenuto l'idea che le persone fanno tutto da mobile se glielo si permette. Il nostro lavoro con la NCS è un gran testamento per questo modo di pensare.

Gli utenti passano circa lo stesso tempo su una pagina sul cancro ai polmoni indipendentemente da quale device stiano usando: mentre gli utenti da tablet e desktop ci passano circa tre minuti e 48 secondi, quelli da smartphone ci passano 3 minuti e 57 secondi.

Per alcune form, il conversion rate è addirittura più alto su mobile. In una recente campagna iscrizioni, il conversion rate è stato 7.3% su mobile mentre solo 2.5% su desktop.

Membership conversion rates are 2.5% on desktop, 6.5% on tablet, and 7.3% on mobile.

Per registrare una persona come socio, abbiamo bisogno del nome della persona, del suo indirizzo e della sua data di nascita. Questo non ha fermato le persone che hanno voluto registrarsi da uno smartphone.

Da homepage first a homepage last

Dedicando del tempo prima alle pagine principali vi eviterete un certo numero di dispute territoriali sullo spazio nella barra di navigazione e godrete dei benefici dell'unire tutto il team dietro alle stesse parti essenziali del sito web. Proverete al team che vi interessano i loro contenuti e i loro utenti (e, ovviamente, magari convincerete anche loro a interessarsi un po' di più dei loro utenti) e il risultato finale sarà un sito web centrato sull'argomento. La prossima volta che vi si porrà davanti una situazione piena di compromessi in cui dovrete progettare un sito web su commissione, provate il core model. Nel mio lavoro è stato un gran modo per mettersi al lavoro e rimanere in buoni rapporti con tutto il team.

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Ida Aalen

Ida Aalen è una UX designer/content strategist in Netlife Research a Oslo, Norvegia. Pensare ad alta voce è l'unico modo di pensare che conosce e potete ben dirlo dai suoi tweet e dalle sue talk. La cosa che la rende più felice è trovarsi in un team con dei grandi visual designer e front-end developers.

Questo sito per poter funzionare utilizza i cookie. Per saperne di più visita la pagina relativa all' INFORMATIVA