User flow diagrammen en website-wireframes, met gratis SVG-downloads
User flows en wireframes
Voorbeelden van user flow diagrammen + wireframekit voor websites (gratis SVG) | We.Inc
Wat een user flow is, acht kant-en-klare flows voor aanmelden, afrekenen, boeken en meer, en eenvoudige wireframes voor een home-, prijs- en contactpagina. Download elk als SVG die u in Figma kunt openen.
Een user flow is het pad dat iemand door uw site aflegt om één taak af te ronden, getekend als schermen, acties en beslissingen die met pijlen zijn verbonden. Een wireframe is een eenvoudige schets van de layout van één scherm. Breng eerst de flow in kaart en maak daarna een wireframe van elk scherm erin. Hieronder vindt u acht gangbare flows en drie wireframes om als SVG te downloaden.
Vormen die in de flows worden gebruikt
Vorm
Betekenis
Afgeronde pil (blauw)
Waar de flow begint
Vierkant vak
Een pagina of scherm
Grijs vak
Iets wat de persoon doet, zoals een formulier invullen
Ruit
Een beslissing of een controle die kan mislukken
Afgeronde pil (groen)
Het doel is bereikt
Elke flow houdt het bij één doel en zo weinig mogelijk stappen om dat te bereiken, met de meest voorkomende fout als gestippelde lus getekend. Gebruik ze als vertrekpunt voor uw eigen site en maak daarna wireframes van de schermen die ze doorlopen.
Schrijf het doel in één regel op, bijvoorbeeld: een nieuwe bezoeker boekt een eerste afspraak.
Som elk scherm en elke actie op van het startpunt tot het doel. Sla de saaie niet over, zoals het bevestigen van een e-mailadres.
Markeer elke plek waar iets mis kan gaan, zoals een geweigerde kaart of een tijdslot dat al bezet is, en bepaal waar de persoon daarna heen gaat.
Tel de stappen en schrap alles wat de persoon niet helpt het doel te bereiken.
Maak een wireframe van elk scherm in de flow en bepaal wat waar komt voordat u kleuren of lettertypen kiest.
Begin waar mensen echt binnenkomen. Veel bezoekers landen vanuit zoekmachines op een product- of blogpagina, niet op uw homepage.
Houd wireframes bewust grijs. Kleur en echte afbeeldingen lokken feedback over stijl uit, terwijl u feedback over structuur wilt.
Elke beslisruit heeft een weg terug nodig. Een mislukte betaling die op een dood spoor eindigt, kost u de verkoop.
Test een flow met vijf mensen voordat u hem bouwt. Kijken waar ze aarzelen brengt de meeste problemen aan het licht.
Veelgestelde vragen
Wat is het verschil tussen een user flow en een user journey?
Een user flow brengt de schermen en stappen van één taak op uw site in kaart. Een user journey is breder: die beschrijft wat iemand denkt, voelt en doet voor, tijdens en na het gebruik van uw product, vaak over meerdere kanalen. Flows zijn om schermen te ontwerpen; journeys om mensen te begrijpen.
Hoe open ik deze SVG's in Figma?
Download het bestand en sleep het op een Figma-canvas, of open het in een browser en kopieer en plak het. Figma zet de vormen en tekst om in bewerkbare lagen die u kunt restylen en uitbreiden.
Hoe gedetailleerd moet een wireframe zijn?
Genoeg om te laten zien wat er op het scherm staat en in welke volgorde: navigatie, koppen, afbeeldingen, formulieren en knoppen. Laat exacte teksten, kleuren en lettertypen weg. Als mensen over de tint blauw beginnen te discussiëren, is hij te gedetailleerd.
Heb ik speciale software nodig voor user flows?
Nee. Pen en papier volstaan voor een eerste versie. Diagramtools helpen als u flows wilt delen, bewerken of naast ontwerpen bewaren, en gewone SVG-bestanden zoals deze werken in de meeste daarvan.
Waarom eerst de flow en dan de pagina's
Pagina's die één voor één worden ontworpen, werken vaak los wel en samen niet. De prijspagina ziet er geweldig uit maar heeft geen duidelijke volgende stap; het aanmeldformulier vraagt dingen die de checkout opnieuw vraagt. Door eerst de flow te tekenen ziet u elke overgang tussen schermen, en daar haken de meeste mensen af.
Een flow maakt ook de kosten van elke extra stap zichtbaar. Als een boeking op papier negen vakken telt, wordt duidelijk welke kunnen worden samengevoegd.
Van wireframe naar echte pagina
Zodra de volgorde van de inhoud vaststaat, wordt de wireframe de briefing voor het echte ontwerp. Elk grijs blok wordt een sectie met kop en tekst, en de labels in de hoeken worden de sectienamen die u met uw team of uw websitebouwer gebruikt.
Aanmelden
Een bezoeker maakt een account aan en komt op zijn eerste nuttige scherm.
Bezoeker landt op homepage
Klikt op Gratis beginnen
Aanmeldformulier: e-mail en wachtwoord
E-mail al in gebruik?
Ja: inloggen
Bevestigingslink in e-mail
Welkomstscherm met eerste taak
Afrekenen
Een klant betaalt voor wat in het winkelmandje zit.
Winkelmandje
Afrekenen: contact en verzending
Bezorgoptie kiezen
Betaalgegevens
Betaling goedgekeurd?
Nee: opnieuw proberen
Orderbevestiging en e-mail
Boeken
Een nieuwe klant boekt een eerste afspraak.
Dienstpagina
Kies een dienst en medewerker
Agenda met vrije tijdsloten
Tijdslot nog vrij?
Nee: opnieuw kiezen
Formulier met contactgegevens
Boeking bevestigd, toegevoegd aan agenda
Wachtwoord herstellen
Een lid dat zijn wachtwoord vergat, komt weer binnen.
Inlogpagina
Klikt op Wachtwoord vergeten
E-mailadres invullen
Opent herstellink uit e-mail
Link nog geldig?
Nee: opnieuw versturen
Nieuw wachtwoord instellen
Ingelogd
Contactaanvraag
Een prospect stuurt een vraag en weet wanneer hij een antwoord kan verwachten.
Willekeurige pagina
Contactpagina
Naam, e-mail en bericht invullen
Velden geldig?
Nee: fouten tonen
Bedankbericht met reactietijd
Aanmelden voor nieuwsbrief
Een lezer schrijft zich in en bevestigt.
Blogpost
Aanmeldvak onderaan de post
Pagina Bekijk uw inbox
Klikt op bevestigingslink
Welkomstmail en archiefpagina
Van zoeken naar product
Een klant vindt een product via het zoekvak.
Willekeurige pagina
Typt in zoekvak
Resultatenpagina met filters
Iets gevonden?
Nee: suggesties
Productpagina
Toegevoegd aan winkelmandje
Offerteaanvraag
Een lokale klant vraagt een prijs voor een klus.
Pagina werkgebied
Knop Offerte aanvragen
Kort formulier: soort klus, postcode, foto's
Binnen werkgebied?
Nee: partner voorstellen
Bevestiging met terugbeltijd
Homepage
Zeg wat u doet, bewijs het en wijs naar één volgende stap.
Navigatie
Hero: kop, regel, hoofdknop
Logo's of bewijs
Drie voordelen
Hoe het werkt
Testimonials
Laatste call-to-action
Footer
Prijspagina
Laat mensen abonnementen vergelijken en er een kiezen zonder contact met u op te nemen.
Navigatie
Kop en schakelaar maandelijks of jaarlijks
Abonnementskaarten
Vergelijkingstabel van functies
Veelgestelde vragen over prijzen
Footer
Contactpagina
Maak het makkelijk om u te bereiken en duidelijk wanneer u antwoordt.
Navigatie
Kop en reactietijd
Contactformulier
Kaart of foto
Adres, telefoon, openingstijden
Footer
Acht voorbeelden van user flows
Elke flow houdt het bij één doel. De gestippelde oranje lijn is de meest voorkomende manier waarop een stap mislukt, en waar de persoon daarna heen gaat.
Wireframekit
Drie wireframes met weinig detail voor de pagina's die de meeste sites nodig hebben. De labels in elk blok benoemen de sectie.