I fondamenti della riprogettazione del sito Web: un caso di studio

Non è raro finire un progetto di riprogettazione di un sito Web solo per guardare indietro e pensare: "Avrei fatto le cose diversamente se avessi saputo quello che so oggi".

Ci siamo stati tutti. Ci entusiasmiamo per un nuovo progetto, scherziamo con il cliente, firmiamo contratti e iniziamo a simulare i prototipi. La vita sembra bella, ma le basi del progetto sono traballanti.

Inevitabilmente, le revisioni e lo scope creep iniziano a insinuarsi non appena viene presentato il primo concetto di design, e da lì è in discesa. La comunicazione va in pezzi, nulla va come previsto e, alla fine, il sito Web di nuova concezione assomiglia alla mostruosità che sei stato assunto per riparare.

La progettazione e l'esperienza utente di prim'ordine non iniziano con un bel mockup: si basano sulla pianificazione strategica e su una visione progettuale incentrata sugli obiettivi aziendali. L'obiettivo principale non può essere "Facciamo un sito web più carino".

I progettisti di siti Web sono responsabili dell'esperienza utente (UX) e dell'interfaccia utente (UI). Il nostro compito è assicurarci che gli utenti abbiano un'esperienza ottimale nell'interazione con le interfacce che progettiamo. Ciò richiede una pianificazione approfondita fin dall'ideazione del progetto.

Questo articolo delinea un processo affidabile che ti aiuterà a garantire che la prossima riprogettazione del tuo sito Web sia basata su solide basi.

Il valore della riprogettazione del sito Web Ricerca pre-progetto

Per dimostrare il processo, esaminiamo le fasi di una riprogettazione del sito Web completata per Archaeology Southwest, un'organizzazione senza scopo di lucro che esplora e protegge i siti archeologici nel sud-ovest degli Stati Uniti.

Dopo un'indagine preliminare sul campo e sulla concorrenza del cliente, ispeziona attentamente ogni risorsa del sito Web disponibile. Questa analisi viene fatturata separatamente e viene eseguita prima che venga scritto un preventivo di progetto. Lavorando in questo modo si evitano stime ambigue o gonfiate che risultano quando i web designer cercano di rendere conto di problemi che potrebbero emergere in superficie più avanti in un progetto.

Nel caso di Archaeology Southwest, mi sono trovata di fronte a un sito che aveva un disperato bisogno di attenzione: montagne e montagne di contenuti disordinati all'interno di un antico portale CMS. Era brutto, quindi ho deciso di creare un ordine.

Passaggio 1: acquisire familiarità con il contenuto

Quando si ristruttura una casa, è importante cercare di recuperare materiali di valore prima del giorno della demolizione. Lo stesso principio si applica al design del sito web. È necessario scorrere il sito pagina per pagina ed estrarre tutto il contenuto. Come designer, dobbiamo capire quale contenuto merita di essere un tipo di post unico e quali pagine sono statiche.

Una volta ottenuto ciò, crea una strategia su come organizzare tutto, ma non decidere quale contenuto dovrebbe rimanere e cosa dovrebbe essere rimosso. Perché no?

Quando si ha a che fare con aziende e organizzazioni del mondo reale, ci sono diverse persone responsabili del contenuto di un sito e la quantità di contenuto esistente può essere sbalorditiva. L'approccio migliore è classificare tutto prima.

In genere inizio con la navigazione principale e vado pagina per pagina. In questo modo, avrò l'architettura delle informazioni e la mappa del sito prima del primo incontro con il cliente.

Sfortunatamente, il sito di Archeology Southwest non era tipico. La maggior parte dei collegamenti non erano accessibili tramite la navigazione in alto ed erano nascosti all'interno del contenuto. Avrei avuto una brutta sorpresa se avessi citato il progetto basandomi solo sulla navigazione.

Parlando con varie persone del team del cliente, sono stato in grado di ottenere un quadro migliore dell'ambito del progetto e, dopo un incontro con il cliente, sono stato in grado di identificare il focus del sito Web, il flusso di lavoro, i contenuti e le funzionalità. Da lì, abbiamo creato i seguenti tipi principali di contenuto (alcuni nuovi, altri esistenti):

Passaggio 2: crea focus. Semplificare. Organizzare.

Una volta che tutto il contenuto è stato organizzato in scatole etichettate, è tempo di sviluppare il progetto per una nuova struttura, che mostrerà il contenuto nella sua forma migliore. Ma prima, dobbiamo creare focus.

Secondo Archaeology Southwest, le persone visitano il loro sito Web per cercare informazioni sui progetti in corso, conoscere gli eventi imminenti e leggere una rivista mensile. Queste attività rispondono alla domanda " Cosa fanno le persone sul sito?" ma non rivelare perché le persone visitano il sito in primo luogo.

Il “ perché ” è il focus del sito web. Per trovare il focus, guarda al nucleo dell'organizzazione.

In questo caso, ho identificato la "posizione" come il cuore di Archeology Southwest. Senza posizione, non ci sarebbero siti archeologici, rovine e certamente musei o mostre. Tutto in archeologia si riferisce al luogo.

Con un focus identificato, possiamo semplificare e organizzare. Per Archaeology Southwest, ho iniziato suddividendo il contenuto in categorie non correlate a luoghi, come le pagine del team e i rapporti annuali. Dopo un po' di riordino, mi sono ritrovato con questa mappa approssimativa:

L'immagine sopra rappresenta le due aree principali emerse: Cose da fare e Posizioni . Cose da fare (a sinistra) copre le attività che un visitatore del sito può conoscere e fare. Posizioni (a destra) si concentra sul contenuto del sito correlato a posizioni specifiche. Perché strutturarlo in questo modo?

L'idea è che un utente medio potrebbe non conoscere il nome di un video o progetto, ma probabilmente conoscerà il nome di una posizione. In questo modo, i visitatori possono trovare i contenuti relativi alla posizione.

Inoltre, ogni blocco di colore in Posizioni rappresenta un tipo di post univoco. Da un punto di vista organizzativo, mostre, lezioni e mostre online sono tutti eventi di natura diversa.

Nel vecchio sito di Archaeology Southwest, c'erano pagine statiche separate per una rivista e un negozio online dove i visitatori potevano acquistare la rivista. Per semplificare l'acquisto, ho integrato un'opzione di acquisto nel modello della rivista.

La restante struttura organizzativa era semplice:

• Una pagina "Informazioni" per saperne di più sull'organizzazione
• Un collegamento diretto alla pagina "Store".
• Una pagina "Donazioni".
• Una nuova pagina "Aggiornamenti".

Le pagine dello store e delle donazioni sono money maker, quindi era essenziale che fossero incluse nella navigazione principale.

Una volta completato il progetto organizzativo, è il momento di collegare il contenuto effettivo.

Passaggio 3: coinvolgi il cliente

La mappa del sito include i tipi di pagina, ma non la mappatura dei contenuti. I web designer esperti sanno che la maggior parte dei problemi si verifica quando un cliente inizia ad aggiungere contenuti al proprio sito. Per evitare questo problema, mantieni il client collegato dall'inizio.

Per Archaeology Southwest, ho creato un Google Doc che includeva la mappa del sito e ho chiesto al cliente di mappare il suo vecchio contenuto con la nuova struttura.

Se qualcosa non andava bene, l'abbiamo affrontato in seguito. Questo è un passaggio critico. Come mai? Oltre a coinvolgere il cliente nel processo, scopre problemi con la struttura prima dell'inizio dell'implementazione.

In questo caso, alcune voci del menu della mappa del sito sono state modificate e, poiché il cliente aveva più pagine di donazione, aveva senso creare un tipo di post unico proprio per quello.

Crea una struttura visiva attraverso il wireframing

In questo passaggio comincio a dare una struttura visiva all'opera. Per far funzionare bene il sistema e integrare con successo l'idea che "tutto è correlato alla posizione", ho creato una relazione bidirezionale tra i tipi di post.

Ecco l'idea di base: quando i visitatori giungono al sito web di Archaeology Southwest e selezionano il Grand Canyon, vedranno informazioni su quel luogo, ma troveranno anche informazioni relative a progetti, eventi, mostre e tutto ciò che gli amministratori del sito contrassegnano come luogo- specifico.

Poiché il collegamento è bidirezionale, i visitatori possono anche raggiungere il Grand Canyon visitando una pagina del progetto. Alla fine, ho finito con questo:

La pagina dell'indice delle posizioni mostra tutte le posizioni con la più recente in alto. La barra di ricerca è la prima cosa che l'utente vede quando arriva alla pagina. La mappa di Google occuperà circa l'80 percento dello schermo. Ciò consente agli utenti di selezionare punti sulla mappa e, durante lo scorrimento o la ricerca, verrà visualizzata la griglia dell'elenco.

Nella pagina di una singola posizione, il corpo principale è a sinistra poiché è l'informazione più importante. Le meta informazioni correlate sono secondarie, quindi sono a destra. Per ottenere un layout ben bilanciato, è fondamentale disporre di una gerarchia distinta tra il primo, il secondo e il terzo blocco di elementi. Ciò consente all'occhio di muoversi senza sforzo tra le sezioni.

Nel layout Archeologia sud-ovest, l'occhio dell'utente inizia con l'intestazione, quindi si sposta sul blocco di contenuto e infine si sposta sulla barra laterale destra. Ciascun contenuto correlato viene visualizzato in ordine di pertinenza. Ad esempio, se l'utente sta leggendo del Grand Canyon, questo contenuto sarà probabilmente seguito da foto e una mappa.

Poiché si tratta principalmente di un sito educativo, è importante avere un'opzione "Relativo a questa posizione". Tuttavia, non ci sono molti contenuti associati in modo univoco a ciascuna posizione, quindi ho combinato contenuti usati raramente (ma correlati) in un unico blocco sotto il corpo.

L'inserimento di miniature di riviste e video sotto i contenuti correlati aggiunge ulteriori elementi visivi e indirizza gli utenti alla pagina "Acquista". La pagina viene completata mostrando le posizioni correlate. Questo è un ottimo modo per invogliare gli utenti a esplorare ulteriormente il sito. Il passaggio successivo consiste nel continuare questa struttura per altri tipi di post.

Fornisci alla home page un obiettivo chiaro

Con un modello generale per i tipi di post in atto, posso concentrarmi sulla home page. Il primo passo è trovare l'obiettivo per la home page: questa è una parte importante della progettazione dell'interfaccia utente. La ricerca del cliente ha mostrato che molti utenti si imbattono nel sito senza comprendere appieno di cosa si tratta. Pertanto, un'introduzione e un testo di benvenuto devono essere la prima cosa che gli utenti vedono.

Il nuovo focus principale ruota attorno al blocco secondario di posizioni. Questo è seguito da tutto ciò che sta accadendo su archaeologysouthwest.org (l'attuale rivista, blog, eventi, newsletter e così via). Ecco l'iterazione del processo di layout:

Con V1 (a sinistra), ho progettato un layout di base che ricorda la homepage originale. Non c'è molta gerarchia. La prima cosa che gli utenti vedono è la posizione in primo piano, ma da lì probabilmente si perderanno nelle colonne.

Per V2 (centro), ho creato una colonna separata che è più facile da seguire per l'occhio. Tuttavia, può ancora essere migliorato. È qui che la conoscenza del contenuto gioca un ruolo importante. So che Archeology Southwest non ha mai più di due eventi in corso alla volta, quindi non ha senso avere spazio per diversi eventi sulla home page.

Nella V3 (a destra), mi sono concentrato sugli eventi imminenti. Se, per qualche motivo, ci sono più di due eventi, l'utente può fare clic su un pulsante "Altro" e vedere il resto. Ho anche posto ulteriore enfasi sulla rivista attuale poiché è la fonte di guadagno del cliente. Gli utenti iniziano dall'alto e scendono in uno schema F. Il flusso oculare è:

Posizione in primo piano > Benvenuto > Rivista > Eventi > Notizie

Con un wireframe visivo e la struttura del sito in atto, è molto più facile consolidare le funzionalità e come funzioneranno le cose. A questo punto, ho un altro incontro con il cliente per esaminare la funzionalità e il flusso di interazione dell'utente, entrambi molto più chiari in questa fase.

Ci saranno ancora revisioni più avanti lungo la strada? Sì, ma saranno modifiche, non modifiche dell'intero processo. Soprattutto, non ci saranno sorprese.

Incorpora la Guida allo stile del marchio

Ora arriva la parte eccitante: convertire i wireframe in qualcosa che le persone utilizzeranno e sperimenteranno. Per questo progetto, ho mirato a rendere i contenuti scritti facili da digerire implementando i colori e la tipografia del marchio.

Esperimento con combinazioni tipografiche

La tipografia è parte integrante di un buon web design, quindi dobbiamo capire presto il nostro schema di tipi. La maggior parte dell'identità di Archaeology Southwest utilizza i caratteri Univers Condensed Light e Adobe Caslon. Non c'erano regole su quando doveva essere utilizzato Adobe Caslon, ma ho notato che non veniva utilizzato così spesso come Univers.

Ho condotto un piccolo studio sui caratteri per vedere quali abbinamenti creano la migliore sensazione per un'organizzazione professionale senza scopo di lucro. Tuttavia, non volevo nemmeno che il mio schema di tipi fosse troppo diverso dal materiale di marketing del cliente.

Dopo aver confrontato i caratteri, è diventato chiaro che Adobe Caslon dovrebbe essere il carattere del titolo e Univers sarebbe stato utilizzato per i sottotitoli. L'impostazione dei titoli principali in una frase conferisce al marchio un'atmosfera più personale, mentre tutti i maiuscoli creano più un'atmosfera aziendale.

Lucida l'aspetto e la sensazione del sito web

Ho deciso di creare un'esperienza leggera e aperta in modo che gli utenti potessero sentire che Archaeology Southwest è sia accessibile che altamente competente. Sulla base dei dati analitici, la maggior parte dei visitatori utilizza i browser desktop (probabilmente perché la maggior parte delle persone visita il sito per la ricerca). Pertanto, il mio obiettivo iniziale era la progettazione per gli utenti desktop.

Quando provenivano da desktop, volevo che i visitatori vedessero immediatamente la posizione in primo piano, il testo di benvenuto e gli eventi imminenti seguiti da parte del titolo della rivista. In questo modo, le persone vedono prima di tutto di cosa tratta l'azienda e cosa stanno promuovendo.

Sui dispositivi mobili, le priorità sono leggermente diverse. Poiché gli utenti accedono alle informazioni in movimento, gli eventi sono più importanti, quindi sono posizionati più in alto nell'elenco.

Ho anche aggiornato il pulsante di donazione nel piè di pagina per renderlo più amichevole cambiandolo da pulsante a frase.

Finale forte: attenzione ai dettagli

Ci sono due ragioni per cui gli utenti accedono alla pagina dei dettagli: vogliono saperne di più su un punto di riferimento o conoscono già una posizione e cercano informazioni aggiuntive (indicazioni stradali, numeri di telefono, ecc.). Pertanto, è importante presentare subito entrambe le opzioni in modo che gli utenti non debbano cercare.

Ho deciso di separare la colonna dei dettagli dall'area dei contenuti per darle più peso e rendere la pagina più interessante. Questo aiuta a creare una gerarchia compositiva, quindi quando un visitatore arriva alla pagina, vedrà prima il titolo della pagina seguito da una piccola galleria di immagini e quindi la colonna dei dettagli.

Questo tipo di design garantisce che gli utenti notino immediatamente i dettagli aggiuntivi di una posizione. Una piccola imbottitura extra che circonda la colonna mantiene gli occhi concentrati e facilita la scansione delle informazioni.

La visualizzazione mobile crolla come ci si aspetterebbe. Il contenuto viene cancellato prima e le meta informazioni seguono. Ho posizionato video e riviste per ultimi nella pagina mobile poiché sono meno importanti per gli utenti mobili. Altre pagine seguono la stessa struttura per creare un flusso e un'esperienza coerenti.

La riprogettazione del Web si basa su un'attenta pianificazione

Ripensando al processo di riprogettazione del sito Web, è evidente che la maggior parte del tempo è stata dedicata all'organizzazione e alla pianificazione. Solo il 30 percento del progetto è stato speso per la progettazione del sito.

Spesso, quando i designer mostrano il loro lavoro, non riescono a trasmettere quanto tempo è dedicato ai dadi e ai bulloni della comunicazione, portando i designer inesperti a saltare direttamente ai modelli. Il risultato? Progetti deragliati e clienti insoddisfatti.

Una pianificazione dettagliata deve essere eseguita affinché la riprogettazione di un sito Web abbia successo. Prendersi il tempo necessario per eseguire ricerche pre-progetto, acquisire familiarità con i contenuti esistenti e coinvolgere il cliente sono passaggi cruciali.

In definitiva, non c'è modo di aggirarlo; il percorso verso straordinarie riprogettazioni di siti Web e fiducia professionale è spianato da un approccio metodico all'organizzazione del progetto.