9 step da seguire per testare un sito Webflow prima del live

Dopo aver concluso lo sviluppo del nostro sito web, sono tante le domande e dubbi che possono emergere.

‍

Mi sono dimenticato qualcosa?

Il sito è ottimizzato per tutti i device e browser?

I copy presentano qualche refuso o mancanza di informazioni?

‍

La realizzazione di un sito web, come sappiamo, è l’insieme di tanti piccoli dettagli che sommati tra loro possono determinare un buon lavoro oppure la mancata alchimia di un intero lavoro.

‍

Può capitare infatti che piccole distrazioni e accorgimenti possano mandare in fumo settimane e settimane di lavoro.

‍

Ma come possiamo fare ad evitare tutto ciò?

‍

Nei paragrafi successivi abbiamo preparato dei passaggi da seguire per ridurre al minimo gli errori e/o imperfezioni del nostro sito web.

‍

Prosegui per leggere la nostra guida.

‍

Indice:

1. Quando fare i test
2. Copy
3. Asset creativi
4. Hover e interazioni
5. Informazioni cruciali
6. Link
7. Form e campi intestati
8. Responsive (o reattivo)
9. Browser

‍

‍

‍

‍

‍

‍1. Quando fare i test

‍

‍

Sembrerà banale ma bisogna capire quando fare cosa.

‍

Dopo aver superato la parte di sviluppo nella quale per molti (o alcuni) giorni abbiamo lavorato e ri-lavorato al nostro sito web, sarà importante prenderci alcune ore per fare una revisione corretta di tutto il nostro sito web.

‍

Sarà importante quindi lavorare nel momento più congeniale a questo tipo di attività.

‍

Troviamo il tempo per lavorare al momento giusto, ad esempio se dopo una giornata di lavoro, vogliamo mandare live a tutti i costi il nostro sito web probabilmente sarà del tutto inutile fare una veloce review tanto per farla. 

‍

Perchè farla in un momento di stanchezza, se l’obiettivo è proprio quello di ottimizzare al meglio il nostro sito web? Non avrebbe alcun senso.

‍

Lasciamo scorrere qualche ora per riposarci e liberare la mente dalla continua vista del nostro sito web. Piuttosto, prendiamoci la mattina seguente per la review e successivamente (se tutto in ordine) procedere con il live del sito web.

‍

Nel caso, invece, il lavoro fosse commissionato da un cliente, dobbiamo organizzare il lavoro in modo tale da arrivare ai giorni precedenti del live del sito web (scadenza), organizzati per avere le ore (o i giorni) necessarie/i da dedicare alla revisione del sito web.

‍

‍

‍

2. Copy

‍

‍

Sì! È capitato anche a noi di andare live con un sito web che presentava siti di esempio come Lorem Ipsum, test-test-test, e altre castronerie.

‍

Quando lavoriamo allo sviluppo del sito web una serie di micro attività restituiscono il prodotto finito. É normale e probabilmente la prassi utilizzare blocchi di testo (come Lorem Ipsum) perchè se no questo bloccherebbe il processo di sviluppo e invece l’attività di creazione deve scorrere e portare a termine.

‍

Soprattutto nel caso in cui siamo gli unici a lavorare al progetto può capitare di dimenticarsi un aspetto che magari per noi in quel momento è di secondo piano come i copy.

‍

Diversamente nel caso in cui lavorassimo affiancati da un copywriter, dovremo revisionare il suo lavoro (non parliamo di qualità) per far sì che i suoi contenuti possano inserirsi perfettamente all’interno delle nostre pagine, ci vengono in mente il numero delle parole/righe utilizzate, l’utilizzo del grassetto, e altre caratteristiche del testo che devono calarsi a misura con il nostro layout.

‍

Per evitare tutto ciò quindi è bene avere un chiaro schema di lavoro. Non è importante avere tutti i testi fatti e finiti quando si comincia con lo sviluppo perché se no questo potrebbe bloccare o rallentare tutto il processo.

‍

L’importante qui è tenere a mente che una revisione prima del live è sacrosanta rispetto al copy, così da attuare le modifiche nel caso di un progetto sviluppato personalmente o la richiesta di eventuali modifiche al copywriter con la quale stiamo collaborando.

‍

‍

‍

3. Asset creativi

‍

‍

Nel nostro sito web utilizziamo asset creativi come immagini, video, GIF, lottie etc? Probabilmente sì, se non vogliamo dare solo muri di testo ai nostri utenti.

‍

Corrispondono al nostro disegno iniziale?

L’immagine di sfondo (o background) rimane ferma per come l’avevamo pensata o segue lo scroll?

L’icona è sopra ad altri elementi?

‍

Concentriamoci solo su questi elementi. Gli elementi visivi.

‍

Controlliamo la dimensione, la posizione e il concreto funzionamento. Su quest'ultimo punto mi vengono in mente, le animazioni come i lottie file. La velocità è quella che ci aspettiamo, abbiamo impostato il loop ma non funziona? Verifichiamo e testiamo.

‍

‍

‍

4. Hover e interazioni

‍

‍

Alcuni decidono di inserire gli effetti di hover, animazione pre-loader, e pop-up alla fine dello sviluppo altri creano questi elementi cammin facendo. Qualunque processo decidete di intraprendere è buona regola fare un controllo prima del live.

‍

Ricordiamo che Webflow nasce principalmente per curare e poter permettere di lavorare nel lato design dei nostri siti web. Sarebbe un peccato non utilizzare queste funzioni messe a disposizione dalla piattaforma.

‍

‍

‍

5. Informazioni cruciali

‍

‍

Qui c’è poco da dire.

Lavoriamo per una pizzeria, parrucchiere, azienda B2B, qualunque cosa venda, il sito web conterrà informazioni che sono cruciali per il loro business. Verifichiamo la correttezza. 

‍

Dopo aver verificato, ri-verifichiamo. Ne va della nostra professionalità.

‍

‍

‍

6. Link

‍

‍

Qui arriviamo ad un aspetto che molte volte viene trascurato o perlomeno secondario per molti flussi di sviluppo.

‍

Siamo talmente concentrati con lo sviluppo delle nostre pagine, elementi, form, div, etc. che non pensiamo a dove potrà finire il nostro utente una volta cliccato ad un link.

‍

Clicchiamo e ri-clicchiamo tutti i link.

‍

Dobbiamo stressare tutte le nostre CTA (call to action) o bottoni, link ai test, menù a tendina, link nel footer e qualunque altro link presente all’interno delle nostre pagine.

‍

‍

‍

7. Form e campi intestati

‍

‍

Nel nostro sito web ci possono essere form per raccogliere mail o altre lead dei nostri utenti. Come le informazioni cruciali, anche questa parte diventa cruciale per lo sviluppo del nostro business.

‍

Verifichiamo che l’utente abbia un facile utilizzo nell’inserimento delle informazioni, che all'utente sia rimandato ad una TYP (thank you page) o comunque che sia avvisato dell’esito corretto della sua compilazione. 

‍

Il sito web deve parlare all’utente.

‍

Se ad esempio non riesce a compilare il form, come lo stiamo aiutando? Gli stiamo dando una via d’uscita al suo problema?

‍

Poniamoci queste domande e diamo delle risposte attraverso una buona esperienza di utilizzo del nostro sito web. 

‍

‍

‍

8. Responsive (o reattivo)

‍

‍

Arriviamo forse alla parte più tecnica del nostro check, ma anche quella più importante.

‍

Lo sappiamo. Ce l’hanno detto in tutte le salse: l’utilizzo mobile è preponderante verso il mobile.

‍

Accertiamoci che tutti i nostri breakpoint (dimensioni dello schermo) siano coerenti.

‍

Il sito web si vede bene in tutti gli schermi? In tutti i browser?

Le immagini e gli altri elementi si muovono in modo fluido al diminuire delle dimensioni dello schermo?

‍

‍

‍

9. Browser

‍

‍

Dopo aver verificato la corretta visualizzazione in tutti i device dobbiamo verificare che anche il browser utilizzato dagli utenti visualizza in modo corretto il nostro sito webflow.

‍

Qui ci vengono in aiuto tanti strumenti che permettono di verificare che il browser stia restituendo quello che abbiamo sviluppato.

‍

Browserstack ad esempio permette di testare su oltre 3000 dispositivi e browser reali. Con questo strumento potremo verificare anche il punto precedente (se il sito web è responsive e quindi si adatta bene su ogni device utilizzato).

‍

Un altro strumento per poter testare in maniera reale l’effettivo utilizzo del nostro sito web sul nostro sito web è Browserling.

Un’altra indicazione interessante che abbiamo trovato rispetto a questo tema è il commento di un utente del forum di Webflow:

‍

in poche parole l’utente (vedi link sopra per approfondire) indica che:

‍

Lo sviluppo del sito web deve essere definito dei dettagli del progetto tramite documento scritto e contratto. Può essere separato o all’interno del contratto.

‍

Si può definire un insieme di browser e dispositivi per la quale il sito è stato sviluppato (e quindi dovrà funzionerà).

‍

Se il cliente vuole di più, può aggiungerlo a pagamento. Ho lavorato a molti progetti in cui il collaudo è stato più impegnativo della realizzazione.

‍

Questo non include nemmeno i test con gli utenti del mondo reale.

‍

Il testo in italic è la traduzione, riassuntiva, del commento dell’utente webdev presa dal forum di Webflow.

(qui sotto lo screenshot del commento originale).

‍

‍

Conclusioni

In conclusione possiamo dire che i test sono una parte fondamentale.

Il cliente o l’utente che naviga le pagine sviluppate da noi, non sa niente di sviluppo web e non è tenuto a conoscerlo.

‍

Deve solo poter avere una navigazione fluida e piacevole.

‍

Questo deve essere il nostro obiettivo: offrire il meglio all’utente.

‍

Di seguito trovate un riassunto di tutti gli step che abbiamo visto prima di andare live con un sito Webflow:

‍

1. Quando fare i test

2. Copy

3. Asset creativi

4. Hover e interazioni

5. Revisione informazioni cruciali

6. Collegamento link

7. Form e campi intestati

8. Responsive (o reattivo)

9. Browser

‍