Diagrammi User Flow e Wireframe per Siti Web, con Download SVG Gratuiti
User Flow e Wireframe
Esempi di Diagrammi User Flow + Kit di Wireframe per Siti Web (SVG Gratuiti) | We.Inc
Cos'è un user flow, otto flussi pronti per registrazione, checkout, prenotazione e altro, e wireframe semplici per una home page, una pagina prezzi e una pagina contatti. Scarica ognuno come SVG da aprire in Figma.
Uno user flow è il percorso che una persona compie nel tuo sito per portare a termine un compito, disegnato come schermate, azioni e decisioni unite da frecce. Un wireframe è uno schizzo semplice del layout di una schermata. Prima mappa il flusso, poi fai il wireframe di ogni schermata al suo interno. Qui sotto trovi otto flussi comuni e tre wireframe da scaricare in SVG.
Forme usate nei flussi
Forma
Significato
Pillola arrotondata (blu)
Dove inizia il flusso
Riquadro quadrato
Una pagina o una schermata
Riquadro grigio
Qualcosa che la persona fa, come compilare un form
Rombo
Una decisione o un controllo che può fallire
Pillola arrotondata (verde)
L'obiettivo è raggiunto
Ogni flusso si concentra su un solo obiettivo e sul minor numero di passaggi per raggiungerlo, con il fallimento più comune disegnato come un ciclo tratteggiato. Usali come punto di partenza per il tuo sito, poi fai il wireframe delle schermate che attraversano.
Scrivi l'obiettivo in una riga, per esempio: un nuovo visitatore prenota un primo appuntamento.
Elenca ogni schermata e azione dal punto di ingresso all'obiettivo. Non saltare quelle noiose come la conferma dell'email.
Segna ogni punto in cui qualcosa può andare storto, come una carta rifiutata o una fascia oraria già presa, e decidi dove va la persona dopo.
Conta i passaggi e taglia quelli che non aiutano la persona a raggiungere l'obiettivo.
Fai il wireframe di ogni schermata del flusso, decidendo cosa va dove prima di scegliere colori o font.
Parti da dove le persone arrivano davvero. Molti visitatori atterrano su una pagina prodotto o del blog dalla ricerca, non sulla tua home page.
Mantieni i wireframe grigi di proposito. Colori e immagini reali attirano commenti sullo stile quando tu vuoi commenti sulla struttura.
Ogni rombo di decisione ha bisogno di una via di ritorno. Un pagamento fallito che finisce in un vicolo cieco fa perdere la vendita.
Testa un flusso con cinque persone prima di costruirlo. Osservare dove esitano rivela la maggior parte dei problemi.
Domande frequenti
Qual è la differenza tra user flow e user journey?
Uno user flow mappa le schermate e i passaggi di un compito nel tuo sito. Una user journey è più ampia: copre ciò che qualcuno pensa, prova e fa prima, durante e dopo l'uso del tuo prodotto, spesso su più canali. I flussi servono a progettare le schermate; le journey servono a capire le persone.
Come apro questi SVG in Figma?
Scarica il file e trascinalo su una canvas di Figma, oppure aprilo in un browser, copia e incolla. Figma trasforma forme e testo in livelli modificabili che puoi ristilizzare ed estendere.
Quanto deve essere dettagliato un wireframe?
Abbastanza da mostrare cosa c'è sulla schermata e in quale ordine: navigazione, titoli, immagini, form e pulsanti. Lascia fuori testi esatti, colori e font. Se le persone iniziano a discutere della tonalità di blu, è troppo dettagliato.
Mi serve un software speciale per gli user flow?
No. Carta e penna vanno benissimo per una prima stesura. Gli strumenti per diagrammi aiutano quando vuoi condividere, modificare o tenere i flussi accanto ai design, e semplici file SVG come questi funzionano nella maggior parte di essi.
Perché mappare il flusso prima delle pagine
Le pagine progettate una alla volta tendono a funzionare da sole e a fallire insieme. La pagina prezzi è bellissima ma non ha un passo successivo chiaro; il form di registrazione chiede cose che il checkout chiede di nuovo. Disegnare prima il flusso mostra ogni passaggio tra le schermate, che è dove la maggior parte delle persone abbandona.
Un flusso rende anche visibile il costo di ogni passaggio in più. Quando una prenotazione richiede nove riquadri sulla carta, diventa ovvio quali si possono unire.
Dal wireframe alla pagina reale
Una volta concordato l'ordine dei contenuti, il wireframe diventa il brief per il design reale. Ogni blocco grigio diventa una sezione con il suo titolo e il suo testo, e le etichette negli angoli diventano i nomi delle sezioni che usi con il tuo team o con il tuo website builder.
Registrazione
Un visitatore crea un account e raggiunge la sua prima schermata utile.
Il visitatore arriva sulla home page
Clicca su Inizia gratis
Form di registrazione: email e password
Email già usata?
Sì: accedi
Link di conferma dell'email
Schermata di benvenuto con il primo compito
Checkout
Un cliente paga ciò che ha nel carrello.
Carrello
Checkout: contatti e spedizione
Scelta dell'opzione di consegna
Dati di pagamento
Pagamento approvato?
No: riprova
Conferma dell'ordine ed email
Prenotazione
Un nuovo cliente prenota un primo appuntamento.
Pagina del servizio
Scelta del servizio e del personale
Calendario delle fasce libere
Fascia ancora libera?
No: scegli di nuovo
Form con i dati di contatto
Prenotazione confermata, aggiunta al calendario
Reimpostazione password
Un iscritto che ha dimenticato la password riesce a rientrare.
Pagina di accesso
Clicca su Password dimenticata
Inserisce l'email
Apre il link di reimpostazione dall'email
Link ancora valido?
No: invia di nuovo
Imposta la nuova password
Accesso effettuato
Richiesta di contatto
Un potenziale cliente invia una domanda e sa quando aspettarsi una risposta.
Qualsiasi pagina
Pagina contatti
Compila nome, email, messaggio
Campi validi?
No: mostra errori
Messaggio di ringraziamento con i tempi di risposta
Iscrizione alla newsletter
Un lettore si iscrive e conferma.
Articolo del blog
Box di iscrizione a fine articolo
Pagina Controlla la tua casella
Clicca sul link di conferma
Email di benvenuto e pagina archivio
Dalla ricerca al prodotto
Un cliente trova un prodotto dalla casella di ricerca.
Qualsiasi pagina
Scrive nella ricerca
Pagina dei risultati con filtri
Trovato qualcosa?
No: suggerimenti
Pagina prodotto
Aggiunto al carrello
Richiesta di preventivo
Un cliente locale chiede un prezzo per un lavoro.
Pagina dell'area servita
Pulsante Richiedi un preventivo
Form breve: tipo di lavoro, CAP, foto
Dentro l'area servita?
No: suggerisci un partner
Conferma con l'orario di richiamata
Home page
Di' cosa fai, dimostralo e indica un unico passo successivo.
Navigazione
Hero: titolo, frase, pulsante principale
Loghi o prove
Tre vantaggi
Come funziona
Testimonianze
Call to action finale
Footer
Pagina prezzi
Permetti alle persone di confrontare i piani e sceglierne uno senza contattarti.
Navigazione
Titolo e selettore mensile o annuale
Card dei piani
Tabella di confronto delle funzionalità
FAQ sui prezzi
Footer
Pagina contatti
Rendi facile raggiungerti e chiaro quando risponderai.
Navigazione
Titolo e tempi di risposta
Modulo di contatto
Mappa o foto
Indirizzo, telefono, orari
Footer
Otto esempi di user flow
Ogni flusso si concentra su un solo obiettivo. La linea arancione tratteggiata è il modo più comune in cui un passaggio fallisce e dove va la persona dopo.
Kit di wireframe
Tre wireframe a basso dettaglio per le pagine di cui la maggior parte dei siti ha bisogno. Le etichette in ogni blocco danno il nome alla sezione.