What Is A User Flow? (How To Quickly Get Started)

in this video we'll be covering what user flows are and how you can use them to build your website or application hey what's up i'm mark taybolini and i'm all about achieving financial independence through real estate investing in online business so if you're new to the channel and you're looking to achieve financial freedom for yourself be sure to hit the like subscribe button down below it really does help me out and i'll keep cranking out these videos so if you're looking to build a website or an application you need a plan you need a way for the user to get from point a to point b and that's going to be a number of screens a number of interactions you have to map all that out and ahead of time so you can build your application or your website in a way that makes sense to the user user flows are the best way to start when you're building out your website or your application so that's where you put the pen to paper and you start mapping out your whole the whole experience and then from there you can go a step higher infidelity move to wire flows and that's going to be kind of like a box with a logo boxes for images some you know lines for text you know it's a really basic kind of layout to see where everything is and then from there you can go to screenflows which is a higher fidelity flow of your website so you kind of just go in sequence and move things into higher fidelity as you go and then test along the way to make sure things are working well for your customers so to get you started i want to show you a user flow and how you can create it for yourself and map out your own websites and applications so look at the screen below here so here we have figma and this is a great program to use for user flows or wireframes or screenflows whatever you need to do this program will handle it no problem so you can download this program for free they have a desktop app or you can use it in the browser as well so a great way to get started with this is go up to this tab up here and you'll have your your name and there's also kind of a community tab and right now we're in the community tab so i'll just type in user flows here and you have all these projects in here that you can open up so these are things that people have created in the community so you can open these up and you can hit duplicate and it'll open up in a new tab and you can actually make edits and you know make your own user flow with these kits so this is a great way to get started if you haven't done this much before so i opened up a couple of them here that i want to go over and i just want to come over the basics here so you have all these different shapes so you see circles you see um rectangles you know this is like a rhombus shape uh really rounded rectangle and everything from there so basically you'll see a lot of times you'll start and end with a circle so you'll see that here and this isn't always the case but in this case it is true and then here they have screens as rectangles and they've also color coded them so you can see them at a glance really easily and know that it's a page or some kind of a screen and then this like rhombus shape here this is a decision and this is pretty much industry standard that's some kind of a decision point and here we have a yes or no and from there the arrows lead to uh the next step in that interaction so there's a couple interactions here and then a new page and then yes there's one interaction and a new page and then another decision which um you know goes from you know end end of that flow or to another interaction and then ends there so this is kind of the the basics here and you want to keep it simple because this isn't really about design this is about the the content and the flow of how things work in your website or application so don't think about the design too much just stay consistent if you know whatever shapes you're using whatever colors you're using make sure you just stay consistent so i want to show one that's actually a little bit more fleshed out here and this is a rideshare program here so we'll kind of get started here so you know we can have this one two three four step process here so one is the request in here this is where the passenger types in you know destination car type and then hits confirm and that request is sent to the uh driver here and that is kind of conveyed by this dotted arrow here requests and so you can see that you know the the um transfer of information is shown through dotted lines here and this is where they're staying consistent so um this is where you can use this kind of um idea here so like if you're trying to convey something like the transfer of information or the passage of time or you know maybe it's a difference uh instead of one option as far as a decision they go a different direction you can use that as a dotted line so there's a lot of different ways you can kind of represent different things but just be consistent so here they're sending a request the driver gets it and at that point they can either accept the ride or decline if they decline it stops there if they accept it it sends that information that's been accepted to the passenger and from there they can cancel the ride or they can wait and if they wait um basically the driver will drive to the passenger and then he will hit to start the ride and at that point the ride will will continue from there and they will drive to the destination and you know once they get there they can finish the ride or if they have to cancel early or something they can do that as well and then from there once it's finished it sends information to the passenger saying the ride is finished and then they can rate the driver you know tip the driver and then also the driver can also rate the passenger at that point so this is a great example of how you know the user flow works so there's no there's no design here there's no website or application this is just the basic information flow of information the interactions that the the person is going through to achieve a desired result you're really going from point a to point b and you're really mapping out how you get there now like i said earlier once you have your user flows built out you can move up a step in fidelity and go to wireframes and build out like kind of what it looks like in general then you can test it with your users at that point you can build like a little basic prototype and then test it with your user and make sure they don't get confused or stuck or anything like that and then make some changes that are necessary and then once everything looks good then you can go to the next step which is a screenflow and then really have like a high fidelity you know prototype built and have your users use that and make sure everything works correctly and then at that point you can move on to engineering and build the thing out and then release your website or application or whatever it may be so user flows are the best place to start to get to get things rolling and then you just kind of go from there so if you like this content be sure to like subscribe and i'll see you in the next video

Channel: Marc Terribilini

Views: 4,545

Keywords: user flows, flow diagram, user experience, UX, web design, application design, app design, digital design

Id: PTrbSSMhsqE

Length: 6min 25sec (385 seconds)

Published: Wed Apr 20 2022