← Il Diario
Digital Products 6 min di lettura GrowTogether Aggiornato il

Prototipo di un sito web: cosa verificare prima dello sviluppo

Come leggere un prototipo, provare un percorso e confrontarlo con il preventivo. Esempi dalle due landing di Loto Piscine e dai progetti con funzioni.

Apertura della landing Loto Piscine per esplorare le piscine fuori terra

Davanti a un prototipo è facile fermarsi ai colori o alla prima schermata. Prova invece a entrarci con una domanda: «Riesco a trovare il servizio che mi interessa e a chiedere informazioni?». Un prototipo di sito web mostra come saranno organizzate le pagine e i passaggi tra loro. Seguire quel percorso ti aiuta a capire se la proposta risponde alle esigenze della tua azienda, prima di approvare lo sviluppo.

Il dettaglio cambia in base alla decisione da prendere. Una mappa delle pagine spiega la struttura; uno schema essenziale mostra la disposizione dei contenuti; una versione grafica o navigabile permette di discutere testi, immagini e interazioni. Un modulo, un pagamento o un collegamento al gestionale possono essere simulati: il prototipo aiuta a definirli, mentre il funzionamento si verifica sul prodotto sviluppato.

Sito, landing o piattaforma: quale percorso devi valutare?

Per un sito aziendale puoi partire da una domanda commerciale reale. Un potenziale cliente arriva cercando una soluzione: trova la pagina pertinente, capisce se il servizio fa per lui, esamina un progetto e contatta l’azienda. Una landing concentra questo percorso su una proposta; un catalogo permette di confrontare i prodotti prima della richiesta.

Se il sito deve anche vendere, prenotare o mostrare dati riservati, il percorso comprende regole ulteriori. Per una prenotazione, per esempio, chiedi cosa accade quando un orario non è più disponibile. Per un portale clienti, segui l’accesso fino a un documento e chiarisci quali persone devono poterlo vedere. Il prototipo dovrebbe rendere discutibili questi passaggi, anche quando i dati sono dimostrativi.

Un esempio ipotetico: un’azienda vuole raccogliere richieste per tre linee di prodotto. La prima prova è trovare la linea adatta e inviare una richiesta che la identifichi. Se il commerciale deve riceverla nel CRM, occorre poi definire campi, destinazione ed esito in caso di errore. La pagina visibile è soltanto una parte di quel percorso: l’integrazione deve comparire anche nel perimetro del progetto.

Contenuti, mobile e stati: cosa deve contenere un prototipo utile

Non occorre rifinire ogni pagina allo stesso modo. Occorre mostrare quelle che cambiano una decisione: il servizio, la scheda prodotto, il modulo o il passaggio dell’area riservata. Per ciascuna chiedi da dove arriva la persona, quali informazioni le servono e quale azione può compiere dopo averle lette.

Usa contenuti abbastanza vicini a quelli finali. Il nome lungo di un prodotto, una fotografia verticale e una scheda tecnica incompleta fanno emergere problemi che il testo segnaposto nasconde. Se il materiale manca, decidi chi lo prepara e quando viene approvato. Anche una pagina aggiunta all’ultimo momento può richiedere una struttura diversa da quelle già progettate.

Ripeti la prova sul telefono: apri il menu, raggiungi il contenuto e arriva al modulo. Controlla che le informazioni utili precedano la decisione, che i comandi siano raggiungibili e che una foto non nasconda il prodotto che dovrebbe mostrare. Quando il prototipo non supporta la navigazione da tastiera, quel controllo va previsto sul sito sviluppato, insieme a leggibilità, contrasto ed etichette dei comandi.

Chiedi anche gli stati meno favorevoli. Nel modulo, cosa succede se manca un campo o l’invio non riesce? La persona sa cosa correggere e conserva quanto ha scritto? Le indicazioni W3C sui moduli accessibili distinguono etichette, istruzioni, validazione e comunicazione dell’esito: sono parti dello stesso compito, non dettagli da aggiungere dopo il pulsante.

Un confronto concreto: le due landing di Loto Piscine

Nel progetto Loto Piscine le due offerte hanno portato a strutture diverse. La pagina delle piscine fuori terra presenta una gamma di modelli. Chi ha ancora bisogno di orientarsi può richiedere catalogo e listino; chi vuole parlare con l’azienda può scegliere una telefonata o una visita in showroom. Il modulo rende visibile questa scelta.

La pagina delle piscine su misura mostra invece realizzazioni e raccoglie una descrizione del progetto, insieme ai recapiti e alla località. Qui il confronto riguarda lo spazio e ciò che il cliente vuole realizzare, quindi le informazioni da leggere e da inviare sono diverse.

Apertura della landing Loto dedicata alle piscine fuori terra, con accesso alle offerte e ai modelli
Una gamma da esplorare prima di chiedere informazioni.
Apertura della landing Loto per le piscine su misura, con accesso alla consulenza e ai progetti
Un progetto da discutere attraverso realizzazioni e richiesta di contatto.

Per leggere un prototipo con lo stesso criterio, prova prima il percorso di una persona che deve capire l’offerta e poi quello di una persona già pronta a contattarti. Annota il punto in cui manca un’informazione o il passo successivo non è chiaro. Sono osservazioni più utili di un giudizio generico come “la pagina sembra vuota”. Le immagini documentano le pagine del progetto; il caso completo separa le scelte di pagina dai dati aggregati della campagna.

Come confrontare il prototipo con il preventivo

Prendi il percorso appena provato e cerca nella proposta le attività necessarie a realizzarlo. Per una richiesta di informazioni servono pagina, contenuti, modulo, destinazione del messaggio, gestione degli errori e verifica dell’invio. Per un ordine si aggiungono prodotti, disponibilità, pagamento e gestione successiva. Il totale ha senso soltanto insieme a questo perimetro.

La proposta deve chiarire quali pagine o modelli vengono realizzati, chi prepara i materiali e come si raccolgono le revisioni. Un cambiamento al testo di un servizio è diverso dall’aggiunta di un’area clienti. Per confrontare due preventivi, porta entrambi alle stesse funzioni e agli stessi contenuti; le esclusioni indicano quali attività dovrai svolgere internamente o affidare a parte.

Se stai rifacendo un sito, aggiungi i contenuti e gli indirizzi da conservare: trasferire articoli, documenti o cataloghi è un’attività distinta dal nuovo design. Quando cambiano gli URL, la guida Google alla migrazione prevede la corrispondenza tra vecchie e nuove pagine e i reindirizzamenti. Descrivi quindi nella proposta la migrazione e chi gestirà hosting, licenze, email e servizi collegati, in modo da poter verificare anche questi passaggi alla consegna.

In alcuni progetti si può quotare subito lo sviluppo; in altri conviene definire una prima fase di analisi e prototipazione, con costo e consegna propri. Chiarisci se il prototipo è già compreso nella proposta e cosa accade dopo la sua approvazione. Il calendario dipenderà anche da materiali, referenti e accessi disponibili, non soltanto dal tempo di sviluppo.

Quali verifiche restano prima della consegna?

Il prototipo approvato può diventare un riferimento per verificare il sito: confronta pagine, contenuti e percorsi con quanto concordato. Poi controlla le funzioni sul prodotto effettivo. Se il modulo deve recapitare una richiesta, la prova termina nella destinazione prevista; se il team deve aggiornare il catalogo, la prova comprende un aggiornamento e la sua visualizzazione sul sito.

La distinzione si vede anche nel plugin AutoCAD per Starpool. Le schermate mostrano selezione dei prodotti, coda e impostazioni; il caso presenta anche i percorsi generati sui disegni. Interfaccia e risultato sono due oggetti di verifica diversi. Per un sito o una piattaforma, concordare entrambi evita di usare l’approvazione grafica come unica prova della consegna.

Per avviare il confronto sui siti web e le piattaforme digitali, raccogli il sito attuale, l’offerta e un percorso che vuoi migliorare. La guida al brief ti aiuta a descrivere obiettivi, persone e vincoli prima di passare alle schermate.

← Tutti gli articoli