Learning User Flows | Max Brinckmann | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (32m)
    • 1. 1 Introduction

      3:55
    • 2. 2 Examples of User Flows

      8:34
    • 3. 3 Pages

      4:14
    • 4. 4 Interactions

      3:16
    • 5. 5 Conditions

      3:36
    • 6. 6 Full Flow

      7:26
    • 7. 7 Your Class Project

      1:16
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

42

Students

--

Projects

About This Class

User flows, flow charts, flow maps, page flows, site flows, click flows, … There are many names to something that we all have come across at some point in time.

Now it's the time to really focus on user flows and understand what they are and why they are so useful tools. In my opinion, creating user flows should become a habit for every one of us. They are great for communicating, extremely easy-to-create, and help us at validating our own decisions at early stages.

Let's delve into the topic of user flows and let's learn together how to create easily understandable and convincing diagrams in just over 30 minutes!

In this course you will learn:

  • What are the different types of user flows?
  • What do user flows consist of?
  • How to create your own user flows?

I have spent many hours in the preparation and production of this course, and I really hope that you enjoy it and are able to make the most of it for your career and professional life!

About Max: I am a Senior UX Designer and User Researcher and I am a huge fan of believing in never stopping to learn. I want to share my knowledge with you and give back to the community that brought me to where I am now.

Meet Your Teacher

Teacher Profile Image

Max Brinckmann

Researcher and Designer

Teacher

Hello, my name is Max and I'm a Senior User Researcher and Digital Designer with more than ten years of professional experience. I love to write and to talk about UX related topics. Besides that, I am occasionally recording music.

Throughout my career, I was and still am privileged to work for many different clients from different industries like automotive, IT, food, healthcare, or life science. Having worked both for agencies and in-house, I am able to share from my broad set of knowledge that is based on successful projects of almost all possible places of action for UX and digital product design.

 

 


So far, my online courses have been watched by 30,000 students across all channels. Sharing is caring, and ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1 Introduction: Hey, what's up and welcome to this course about user flows. User flows are such a great tool for communicating your ideas, for communicating how your designs work, how your flows work, how your user journeys worked, and they should be easy enough so everyone will understand them without the necessity of having further explanation. My name is Max and I'm a senior user experience designer and user researcher. And then this course I'd like to share the reasons why I think user flows are so great and you all should be using them more often. The first reason for me really is that they are a great tool for stakeholders. And why is that? It's because they're easy to communicate. In the best case, you would just show them and everyone would understand what's going on. You can really explain the entire concept of your design or whatever you want to show with this user flow. And everyone will be able to get an idea from that. And since design is mostly about communication, it's such a powerful reason to create user flows whenever you're creating designs or app concepts or anything like that. And the second reason for me is they are so fast to create. You can really just use a pen and a paper to draw down your user flows and they will work just fine. You can, of course, drill them up to the highest detail level, but they will fulfill the same purpose. Of course, you should keep them up-to-date, but you can even draw them down within the meeting, or you can do it at your computer using various pieces of software. It's no problem and it's super fast and super easy. And the third reason for me is that it helps you to understand your own design upfront. So in best case, you would save time and money because you will understand issues are reasons within your concept that may be caused some arrows once you are designing them or even implementing them. So you should always create them before you start designing to validate your own design decisions. So join me in the next minutes in this course and let me help you understand that you should make Creating User Flows a habit of yours so that you always validate your own design decisions and that you keep them up to date because it's not a thing that you deliver once and then forget about it. But in the best case, you would always keep them up-to-date. Then always validate your own decisions and then also have a deliverable, always ready for communication. You don't need a specific piece of software to follow along in this course, almost anything will work really, even if you're just using pen and paper. But you can also use PowerPoint or Keynote. You can use extra, you can use Miro, you can use anything else. I'm going to use fig jam, which is free right now as part of the Beta program and it comes with Figma. So everyone who has Figma or Figma account can access fig jam. And it works similarly to Miro and it will enable you to create your own User Flows. I will also show you a few of the plug-ins within fig gem so that you can use it more effectively. But again, using fake jam is not a must to participate in this course. So join me in the next minutes and head over to the next chapter. I will start talking about some examples for user flows. I will explain how they are being built up, and I will of course, explain how you can create your own. So I would love to see you in the next chapter. See you there. 2. 2 Examples of User Flows: So let's talk about the different types of user flows. And I would personally divide them into three categories. And that will be block-based, wireframe based, and layout based. They're all talking about the same thing, but they differ in their degree of details. I would not say in the degree of inflammation because you can always add up textual descriptions to the block-based flow, for example, but it will of course, take more effort to create layout or wireframe based flows. Because for the block-based flows, you will only need these different block types that I will talk about later. And for the wireframe based flows, you would of course need wireframes. And for the layout based flows, you would need layouts that would need to be created upfront. So of course this would take more time, but you would really just communicate the same thing, the same message that you need to be clear before you start drawing down your user flows. There is no strict definition of what exactly needs to be shown. It can, for example, be the journey of one user in your concept. It can also be the entire possibility of click flows within your mobile app. For example, you only need to be clear what you want to do, and then you can do it and use it as a piece of communication to showcase the goal that you wanted to visualize. So let's go ahead and have a look at the block-based user flows. So as you can see here, this is how it looks like. And obviously this is just an example, but it gives you a rough idea of what block-based really means. You can see that here are different blocks with different colors, and they all have labels on them. And you have arrows, and these arrows point in the direction of the flow obviously. So in this case, this would be a technical description for a terminator. And the first step would be an action that starts the terminator. Then we would have a process which is a rectangle. And then we have this diamond shape here for a decision. And the good thing about the shape is that it has multiple corners that can be used as different decision directions. So we have no and we have yes, no would lead to state a, which again is a new shape here we have an orange circle. Then we have yes, which would lead to this new shape, which is a blue tilted rectangle and this says data. So this new shape again stands for a new type of event that's happening in the flow. So we have this, which could be an action, for example, this would be a process, this is a decision, this is a state. Data could be something else. A document also is kind of a new shape and you can, of course invent your own shapes, but you would normally not need that many shapes. But this is just an example that illustrates the principle works using different shapes to explain different states or different element types. And usually when we're thinking about apps or programs, that we would have only elements for pages, maybe for interactions and for decisions. So these are the three most important categories and you obviously need three different shaped types for these three different elements. Now going to the next degree would be wireframe based. And this is sort of a wireframe can also be described as icons or illustrations, but it gives a rough idea of what the step looks like. And here we have some random topics. For example, how designers work, the logo design process or the UI design process. And you can see how this would go. View illustrations or wireframes help at understanding what's going on. So instead of different types of shapes, we now have different wireframes which speak for themselves and add up with a little bit of explanation. But again, you can also just write that down and have the same information at hand. But this obviously is nicer to look at and it also may be a bit easier to understand at first sight. Of course, you can also combine this with different shapes and you might really have to combine it. For example, when we're thinking about the decisions here, which really cannot be replaced that easily with a wireframe or layout or an illustration. So this might be something that you still need even if you're using your own wireframes or illustrations. And now if we move further to the layout based user flows, you can see that these really include the final stage of your designs. But still just transport and communicate the very same message that you wanted to transport before. What this means is that you can use your initial user flow and just keep it up-to-date throughout your entire design process. And then you will end up here and ultimately have the most powerful expression of your user flow because it's as close as it can be to the final product and still helps everyone to understand the concept of your designs. Now if we start thinking about how we could create these on our own, there is help and we don't have to do everything by ourselves. It's still not very difficult though. But maybe if we think about the block-based flows, there are templates available and I wanted to quickly show you how these look like with the example of fish jam and mirror. So now if we take a look here at this fig jam interface, there's a button called templates. And if we click on this button here, then we see all the different templates which are available within fig jam. And now if we enter user flow and we see the different templates that are available for creating flows or user flows or whatever matches our search here. So a think what we could use just to show how easy it is to get started here would be the flowcharts primer template and we just click on Insert, and then we see all the different shapes. And if you paid attention earlier, you will recognize them. So this would be the start element, decision element. Here we have input, for example, this would be your choice. This would be a process. Here would be the end. We have two different arrow types and we have an example of how this might look like. So we have Open Mobile App as the start of the flow and we have a decision. Is the user logged in? No. Then let's ask for the login credentials. If yes, then show the media feed, and so on and so on. So this is really the easiest way to get started, and the same applies for Miro. And we just switch. Here, we have the Miro board and again, we have a very similar looking button also for templates. And if we here at the search term user flow, we will see a very similar result list. We have, for example, a data flow diagram maker. We have also the flowchart template. And again, we can just click on that and select between US preferred or blank. We can use prefer to get a better understanding. And then we have again, very similar elements here. They might be different a little bit. But really, as I said, the most important thing is to keep them consistent and be clear about what the different elements really mean. So I hope this gave you a good understanding and we will now take a deeper look into the different types of elements and we will start with pages. 3. 3 Pages: Let's talk about pages. Pages as maybe the most important part of your user flows when it comes to applications or digital design, because they are the main touch points for your users. They should be always displayed with an emphasis. So this means that they stand out from the rest because they are the anchors within your flow and within your user journey. And users will always try to get from one screen to another screen. So that's the basic idea and the reason why we take a look at this element at first. So however you want to display these elements, bid with the finished layout or be it with a broken down wireframe or illustration, or just a single simple element. It should always explain what's going on on this screen, on this page. So let's jump over to fix them, and let's try to draw our first element. And we would start by selecting one rectangle here and then we could change the size of that. This really is not that important right now, since we said it should have this emphasis would give it a bright color, for example, yellow. And I would always try to give it a border so that it stands out from elements that don't have a border that's checked that out. So in comparison, this would be a little bit more visible because it has this more contrast here. And there we have the high-five feature of fiction. So what we wanna do is give it a label. And this could be something as the main feed. This would be the name of the screen. I would just make that bold and maybe give this the biggest size that it can have. And then we'll already be it. If this is all that we have at this point in time, then it's totally fine. This can be one element. This can be a wireframe, this can be a layout. This can also be an element that's more complex. So if we pull that down here, we increase the size of the box. And I will just move the headline up a little bit so we have more space underneath. And then we could include the different contents of this page here as well. So if we, for example, say the main feed consists of different elements, then we can simply use this box here and delete all of the blank paragraphs and maybe make that now a little bit smaller and then write something as, for example, image feed as one element and we can resize that so it fits the content. Duplicate this box, and then add something as posts. This would be more alike pages within the page. It would be main-content elements. So that's why they have the same shape. Now if we have a different type of element, for example, an interaction, then we would choose another shape. So something like create post would be an interaction. And we can simply change the shape here to this rounded rectangle. And also very important, give it another color. So just like that, and we would have created a more detailed version of this element here. So let me see if I can resize this easily. Just like that. We're done. And this provides much more value than the previous version. So the key takeaways for pages make them stand out and take a look at how much you can provide an always aim for providing the most value to everyone who's taking a look here at your user flow. 4. 4 Interactions: The next element that we want to talk about, our interactions. And they can be displayed either as a new element on the screen, but there can also be displayed as cursors or icons. So think about click events or tab events. All of these interactions can be displayed with a cursor. And since we don't want to create these curves are icons on our own. We can again jump over to fig jam and pick one of the pre-selected ones are predefined ones that are here already in Figma or in fig jam. But first we need to be clear of what we want to explain. So as we take a look at the main feed screen again, we see this blue Create Post element here. And in the previous lecture we defined that as a content element. But since we're free and defining how ever we want to display certain things, we can also use this shape to display interactions. We only have to be consistent in the way we do that. So if we now say that create post becomes sort of button that we can click. This will also transform this more into a wireframe. So I will show you how that looks like in a bit. But first we need our cursor. And for that, again, we would click on the templates button and simply search for cursors. And we see that we don't have much luck here. But what we can do is click on see more in community. And this will lead us to the Figma community. And here we see a bunch of cars or collections. And we can simply pick one that we like. And then click on Duplicate, which will clone this file into our Figma account. Then we can go ahead and select a cursor that makes sense for us, for example, the pointer Kazaa, simply copy it to our clipboard. Close this. Now I just switched over to the User Flows tab and paste it here. It's a bit small, so we need to zoom in and scale this up a little bit. Placed this on the button. And this already makes it clear that this is a button that we can click on. Now we need to target to where we want to go or to the screen that we want to access when we click on this button. So we'll duplicate this element here, place it there, and give it the label post creation. So this would be the name of the screen that we can access. And in order to get there, we would just draw a line or an arrow from this button to the next screen. And here we see that the arrow is blue just as the button is. Which makes sense because it's easier to understand that this now comes from the button and leads to this page here. We can also place it somewhere else where we would make sort of a simpler arrow shape, which also helps at understanding and reading the user flow. But that's really as simple as creating an interaction within your user flow. 5. 5 Conditions: Somehow the third of the most important elements would be the condition. And the condition is very similar to the conditions that you might know from coding. So if you're familiar with coding, you will know, for example, the if condition and this is also the most important condition for user flows. It will most likely fatal condition like if an event or a decision XYZ happens, then this will lead to this or else something else will happen. And you will always display them and the shape of this diamond. So we can simply draw a new shape here and select the diamond shape. And we will place it here. And it's very important that we give this a new color to make it stand out. For example, red. Or in this case it's more orange. And place it right there where we want to have this condition. And you can see I added a new button to the post creation page or screen, which would be submit post. So we give this element here, the label. And this label will be character count over 100. What this means is there will be a decision made based on how many characters this post contains. So if our platform only allows posts that have more than 100 characters, then we have to include this condition here. So now we will add our first arrow to, to connect this button with this condition. And now we have to decide where these decisions are. These conditions lead the user. So in this case, we would have two options. One would lead us back to the main feed. And let's make this a curved arrow and give this some more room. And the other option would lead back to the post creation and again, make this a curved arrow and give this more room. But now how do we know what exactly is going on here? It's by adding labels to the arrows. So in this case, we click here on this button and this allows us to add text to this arrow. And for this arrow, we will write, yes, we can make that bold. And for this arrow we will write, no. I will also change the colors of these arrows to the same color as our conditional element. So it becomes clear that these arrows come from this element. And now what happened or what this means is if the character count is greater than 100, then the post will be successfully posted and the user will be redirected to the main feed. And if the character count is not greater than 100, then the user will return to the post creation screen. We could of course, add more details here as notifications, which we should always include in our designs obviously to explain what's going on. But from a user flow perspective, this really brings it to the point where everyone understands what's going on. 6. 6 Full Flow: Right now, in the last chapter here, before we move on to the class project, I want to show you how a full flow would look like and how the creation of that full flow would look like. This is not going to be something super complex, but just to show you the process and the different elements that we just got to know together in action. All right, so we'll start with the most important thing which is overview. So we will give this a title for this example, this would be a simple messaging app. I will probably works. I will just make that a little bit smaller. And then give this flow also a description. And I will make this even more smaller now. And I'm going to write basic overview of the entire flow. So we have a context for this flow. Now, we'll start with a screen. And the screen will of course be a rectangle. And this is yellow. And we will make sure that it has a border. And then we will provide it with the screen name. And this will be loading screen. And this will be the first element. Now what this gonna do is it's going to load the app. So what is going to be? The next thing is the big question. And it's going to be a condition. So we'll change the shape to the diamond shape. We will remove the outline and we will change it to the orange color and the condition will be, is logged in. So as the user locked in, this is the condition. And I will draw a line or an arrow from this element to this element and the yellow arrow is fine. Now I will provide the arrow with a label and this will be wait 1 second. So we will wait 1 second until this condition will start to process. And then we obviously have two possible options. We have yes and no. If the user is logged in, then the user will be redirected to the messaging overview screen. And for that, we will draw a new line from the condition to the screen. Of course, the line will be the same color and we will give it the label. Yes. So if the user is logged in, here will be redirected to the messaging overview screen after 1 second. And if the user is not logged in, we need a new screen, which is the, you guessed right log in screen. And again, we will connect these two with an orange line and provide a label which says no. So if the user is not logged in, he or she will be directed to the login screen. Now, once the user locked in, the user will be directed to the messaging overview screen. And for that we will connect these screens, make the arrow curved and give it the color yellow. And that's the first part of the app. And I said, I don't want to make it super complex, but I want to give it some more depth so it becomes more realistic example. So just imagining something like WhatsApp. While we, you would have this messaging overview screen, but you would also have a main menu, for example. And this main menu would redirect you to different sub pages of your application of WhatsApp. So we will add these screens here. And also what's very important is to make these blocks well aligned. It doesn't have to be pixel perfect, but there should be a grid which makes it easier to read and also easier to connect. And the simpler the arrows are shaped and they don't go around like snakes, the more easy they are readable and the more easier it is to understand whether actually going. So let's connect these screens. From here. We'll get to all of them. And this already doesn't look very tidily, so we will select all three arrows and make them curved. And now it's much easier to understand that from this screen, you can get to these screens which now still have all the same name. So we can call this, for example, contacts over views screen. This could be your chats screen. This could be your settings screen. And now to make it even more realistic, from the contexts overview screen, we could start a new chat, for example. And we could display this as a new element, which stands for interaction. So we would have to give it another shape and another color and remove the outline again and call this new chat. And then again connect these. We could go on and on really depending on how detailed our concept already, yes, but that's the basic idea. Now we haven't done something which we really need to do. This is creating a legend. So I will move this up so we have a space here and I will just copy the different elements that we have, which are the three. And I will make them a little bit smaller. So we'll make the text a little bit smaller. And for both elements, and we'll also make the text a little bit smaller. Here it will be a little bit problematic because of the spaces, so I have to bring that in one line. But I will change it anyways, so I will make it as small as I can. And for this element as well. And then I will write down the meaning of this element. So this would be screen element. This would be a condition shown on, let's make that a little bit wider so the entire word fits in. And this would be an interaction. And just like that, we have created our first user flow and hopefully have done that in the most easy and understandable way possible. 7. 7 Your Class Project: Welcome to the class project section, and congratulations for making it through this online course. I hope you enjoyed what you learned in this course. I hope it was easy to follow and you learn something. Now for your own class project, I want you to create your own user flow. And for that you can use one of your own projects. And if you don't have a project that you can use, then just use your favorite app or website. I want you to start with a block-based user flow and then continue to a layout based user flow. And for that, you can simply use screenshots or your favorite application or your favorite website, for example. So it's really easy to do that because you don't have to create them, but you have to be sure about what you want to explain or which story you want to tell within your flow. And you have to think and remember all the different basics that I explained in this course. So I'm really excited to see what you're coming up with. And yeah, I can't wait to see your user flows and give you some feedback. So enjoy working on your user flows. And I hope to see you in another course. Have a great day and goodbye.