User Flow Diagram Tutorial - MASTER Breakdown of UX Method

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ต.ค. 2024

ความคิดเห็น • 85

  • @rupeshlingayat7992
    @rupeshlingayat7992 2 ปีที่แล้ว +9

    Sir, there is no better video tutorial series than this focused entirely on user experience design, would like to learn more about user journey mapping, competitive analysis in ux. Thanks a ton!
    Peace and love from India!

  • @Alex-kf4pl
    @Alex-kf4pl ปีที่แล้ว +1

    Lol. Bro!! I love how concise and clear you sound!! Please keep ‘em coming...

  • @dilantasdemir8248
    @dilantasdemir8248 ปีที่แล้ว +1

    Hi! This video and your answers to the comments helped me a lot. Until this tutorial,I was lost and didn't know how to proceed. Thank you so much. ☺🌸🌸

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว +1

      Ahh, im so happy to hear that! Thank YOU! 🙏🏾

  • @momochola
    @momochola 3 หลายเดือนก่อน

    I love your tutorials! Straight to the point and clearly demonstrated! Many thanks!❤

  • @edipocdf
    @edipocdf 2 ปีที่แล้ว

    tks for this video, always good seeing the process before even start coding anything, this save a lot of time.

  • @prajwalsharma2794
    @prajwalsharma2794 ปีที่แล้ว +1

    Hands down the best video on user flows. I have a question.
    Shouldn't continue with apple, continue with google and continue with facebook, be a parallelogram cause we have to click on it? I didn't quite understand why you used rectangle for them?

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      Thank you so much Prajwal! You are absolutely correct, that's why the action for it was added in a parallelogram, and each choice (the page each choice would end up in) as rectangles (= pages or views). See the following screenshot: share.cleanshot.com/ldHGnPGx. 1 indicates the action, 2 the pages that it ends up in based on the action you choose. But I see your point as well and you could separate them all into parallelograms if you'd like to as well, but I made it a bit more simplified and included the separate pages/views (rectangles) for each choice.

  • @ugochukwupaul7509
    @ugochukwupaul7509 7 วันที่ผ่านมา

    Does the UX flow focuses only on the onboarding page?

  • @prajwalsharma2794
    @prajwalsharma2794 ปีที่แล้ว +1

    Can I skip using parallelograms altogether, Its causing confusion. Also, I have seen in certain cases parallelograms aren't used.

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      That's totally fine, if you want to make it a bit more simple. These symbols are the most commonly used in tech teams and are understood by most engineers. But feel free to experiment and choose a set of symbols that works for you too!

  • @sencinema
    @sencinema ปีที่แล้ว +1

    I don't understand the user flow in the point of already a member...then condition No to verify with number why is that?

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว +1

      Great question! Some services asks the users to confirm their phone number in both of the cases (whether you're already a member or not). In this example, if you're already a member, you'd be asked to just sign in through e-mail and pass and then directly go to the feed page.

    • @sencinema
      @sencinema ปีที่แล้ว

      @@WiredtoDesign THANK YOU SO MUCH SENSEI

  • @chazecomztock
    @chazecomztock 2 ปีที่แล้ว +2

    This video was incredibly helpful but my question is how would this process look for a more complex app that has many options for the user to choose from. For example, what about all the tiny things the user can do like change settings in their profile, interact with content such as 'liking' commenting, or sharing, etc. I'm working on something that you could consider a social media for a niche market and there's plenty of options the user has to choose from when navigating throughout the app. By following this process, I could end up with tens, maybe over 100 user flow charts just to layout all the things one can do and I've already downsized my launch platform to the minimum viable product. It's very hard to find a video or explanation on how to make a user flow for an app that's not somewhat streamlined or that doesn't use login/signup page as an example. Is there anything I can do to mitigate this or will I just inevitably end up with a ton of user flow charts?

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +5

      Happy it was helpful! When it comes to the work you’d have to put in for an entire app, ideally you should break it up into different “user experiences”. So a user flow chart (1) for a sign up flow for user type X, another one (2) for section A under settings, etc. You’re correct, you WILL end up with a bunch of user flow charts. But in an ideal development setting, you will either way focus on implementing one experience at a time. So you don’t have to do it all at once, but rather evaluate and build on each experience at a time.

    • @chazecomztock
      @chazecomztock 2 ปีที่แล้ว +2

      @@WiredtoDesign Thank you so much! I figured this would be the answer to my question but I wanted to make sure. I appreciate it!

  • @doAnn88
    @doAnn88 6 หลายเดือนก่อน

    If the user does not have an account yet, should he not be directed to a sign up page or process where he enters his information to create an account?

  • @azzayahia1648
    @azzayahia1648 3 หลายเดือนก่อน

    What program did you use to draw?

  • @mr.i6181
    @mr.i6181 ปีที่แล้ว

    just curious, why the "click" is symbolized as an input (parallelogram)? i am quite confuse, isn't that "click something" is a process which should be symbolyzed with rectangle?

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      It’s mainly because the parallelogram can represent both an input/output or action. Since “click” is an action, the parallelogram was chosen 😊

  • @VSTUDIOnov
    @VSTUDIOnov 7 หลายเดือนก่อน

    Which tool you are using???

  • @yotaymusic4572
    @yotaymusic4572 ปีที่แล้ว +1

    This video was sooooo helpful. I've been a bit confused about accurately creating user flows, but after seeing this, it's been simplified. I've subscribed to your channel also cause I'd love to get more value from your wealth of knowledge. Thanks 😊

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      Thank you so much Donald! I'm happy it helped you!

  • @karthikrajendran3394
    @karthikrajendran3394 7 หลายเดือนก่อน

    Thank you for this clear explanation. What shape should I use to represent buttons?

  • @md.hasibulislam3069
    @md.hasibulislam3069 2 ปีที่แล้ว

    very informative but i aspect to you, you can provide a lot's of videos produce in the relavant

  • @damilolafunsoadu
    @damilolafunsoadu 2 ปีที่แล้ว

    The userflow 9:36

  • @Takayaki42
    @Takayaki42 2 ปีที่แล้ว +1

    Man I got to say, your videos are great, super straight to the point and well linked, I previously watched the differences between User Flow and Task Flow, and your Task flow tutorial. Thanks for sharing knowledge the way you do, keep up the good work, you are amazing.

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      Ahhh wow! Thank you SO much for the kind words. Means the world to me! 🙏🏾

  • @shashikay
    @shashikay ปีที่แล้ว +1

    This is great! Love that the onboarding is simple and clear. Would you consider creating a demo for a more complex user flow and task flow?

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      Thank you!! Yes, absolutely! That’s a great idea. I’ll add that to my list!

    • @sigridkilian2078
      @sigridkilian2078 ปีที่แล้ว

      that would be amazing, pls keep it in count

  • @kabirroy_music
    @kabirroy_music ปีที่แล้ว

    Simple and easy to understand video it is . Thanks for making this video, it is very useful.

  • @rowanarafa4089
    @rowanarafa4089 ปีที่แล้ว

    Is that the end of the userflow or should i also make a userflow for the other steps like when the main page opens and if the user pressed on a product etc..?

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว +2

      Since a user flow is intended to show the end-to-end process of a specific user journey (generally a short one, like “signing up”), I’d say that for this video this flow is complete 😊. Ideally, you create multiple user flows for each part of the entire experience.

    • @veronicval692
      @veronicval692 4 หลายเดือนก่อน

      @@WiredtoDesignSo that means we create different user flows one for login, and others for the other steps to reach the goal? Also, if my application has multiple categories, such as two types of services, and three different user types, should I create a separate user flow for each of them, or can they be included in the same diagram?

  • @AmoghSrivastava
    @AmoghSrivastava 2 ปีที่แล้ว +1

    Loving the production, super clean

  • @rakshitbhatt5265
    @rakshitbhatt5265 ปีที่แล้ว

    If Andrew Tate was a UX designer*

  • @gantungankuncifoto6959
    @gantungankuncifoto6959 ปีที่แล้ว

    I love how he speak like a rapper :)

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      Hahahaha!! Thank you, I take that as a compliment 😅🎤🎹

  • @nadyanatasha8538
    @nadyanatasha8538 2 ปีที่แล้ว

    thank you for the video 🎉🎉sir, I have some questions. can u help me? what is the difference between user flow, flowchart, user journey, user story? and how to create it all?

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +1

      Thank you! Briefly put:
      User Flow and Flowchart/Flow Chart are most oftenly used interchangebly. By some people, a user flow is defined as wireframes being visualized in a flow like chart, and flow chart being what I refer to as a user flow in this video. If you use any of these terms, you will be fine. A user journey map (or customer journey map) is a a method used to analyze a user's emotions throughout the end-to-end user experience. This is done to identify opportunities, pain points, etc. A user story is used by product teams to describe a feature from a user's perspective (in text only).

  • @DonCapalot01
    @DonCapalot01 ปีที่แล้ว

    Super Helpful and well explained💯

  • @sigridkilian2078
    @sigridkilian2078 ปีที่แล้ว

    thank you!! it really helped watching you do it, I also watched your task flows vid anc it clarified a lot!! thanks

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      I'm happy it helped you! Thank you so much for the support Sigrid

  • @linhtranthuy4330
    @linhtranthuy4330 2 ปีที่แล้ว

    Thank U so much !!!!!

  • @1980nikolov
    @1980nikolov 8 หลายเดือนก่อน

    Great! Thanks

  • @stelliokoutsis505
    @stelliokoutsis505 ปีที่แล้ว

    Thanks man, just found your channel and I'm already hooked! Thank you for the useful information - I'm just starting out on UX flows and this is magic

    • @WiredtoDesign
      @WiredtoDesign  ปีที่แล้ว

      Welcome to the fam! Thank you so much for the support 🙏🏽😃

  • @sanjaysahubandla
    @sanjaysahubandla 2 ปีที่แล้ว

    It's really cool.
    Which software is used in this video for user flow diagrams?

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      Thank you! I’m using FigJam

  • @CPTZK11
    @CPTZK11 2 ปีที่แล้ว

    I would advise you explain each symbol and its use cases rather than just the names. Good video

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      Good point! 👏🏾🙏🏾

  • @renem1219
    @renem1219 2 ปีที่แล้ว

    Thanks for this tutorial, I like step 2 discovery, ideas and brainstorming are part of the picture, taking notes. Good to collaborate with others. I never thought of using Fig Jam for taskflows.

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      Great to read your thoughts on this Rene! Thank you 😊🙏🏾

  • @aradi8819
    @aradi8819 2 ปีที่แล้ว

    I still remember the first video i watched.. It was about task/user flows too.. It was really awesome, and since that day i have been watching your videos and they always exceed my expectations.. plz bro keep up they great content ! its so amazing.
    THANK U

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      thank you so much, means a lot to me!

  • @sbkhan303
    @sbkhan303 ปีที่แล้ว

    EXCELLENT INFORMATION TO DESIGN THE UX IN USERFLOW DIAGRAM.

  • @chasetheidea
    @chasetheidea 2 ปีที่แล้ว

    Just asked to do one and I was like OK. Now I thank the heavens for this tutorial, you rock my man!

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +1

      Happy you found it! Thank youuu 🙏🏾

  • @francogrech6407
    @francogrech6407 2 ปีที่แล้ว

    Thank you so much for this! What are your thoughts on screen flows and will you do a video on how to do them?

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว

      Thank you! 🙏🏾 Screen flows are basically the same thing with the distinction that you’re using screens to communicate how each page/state looks VS just a box explaining the state or interaction of each screen.

  • @Underhills
    @Underhills 2 ปีที่แล้ว +3

    Just discovered your channel. It's a gem, thanks for sharing. Think it's especially nice how you demo real life scenarios and even workshop constructions like this flow diagram setup. Straight and to the point tuts. I'm smashing the like button like mad:)

  • @evgeniia8029
    @evgeniia8029 2 ปีที่แล้ว

    Really very cool! go on, I'm subscribed

  • @carinapaulatticastanho7619
    @carinapaulatticastanho7619 2 ปีที่แล้ว

    Obrigada por esse vídeo. Sentia falta de um vídeo como esse, explicando e mostrando realmente como fazer um user flow. Os Significados de cada símbolo. Sempre é muita teoria e nunca prática. Mostre mais a prática mesmo. Sei que pode parecer besteira ou simples pra quem já conhece, mas para quem é principiante, as vezes não se sabe extamente por onde começar!
    Obrigada mais uma vez!

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +3

      Muchas gracias, me hace muy feliz! Yo no hablo portugués, solo un poco español (yo estudio y aprendo español ahora 😅). Pero yo comprendo que tú dice me. Muchas gracias señorita 🙏🏾

  • @gloomycotton
    @gloomycotton 2 ปีที่แล้ว

    I rlly appreciate your videos so much, so helpful keep up the good work! so clear and well explained!

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +1

      Thanks a milli 🙏🏾 what a motivation booster!

  • @damilolafunsoadu
    @damilolafunsoadu 2 ปีที่แล้ว

    Thank you for this channel ♥️

  • @olanowacka
    @olanowacka 2 ปีที่แล้ว

    as always top stuff, thank you for this content :)

  • @jacklovett-earles767
    @jacklovett-earles767 2 ปีที่แล้ว

    Great video, please keep them coming!

  • @brianm3160
    @brianm3160 2 ปีที่แล้ว

    Muchas gracias por éste video señor!🙏

    • @WiredtoDesign
      @WiredtoDesign  2 ปีที่แล้ว +1

      De nada amigo! 🙏🏾😁

  • @osomotomiwa9429
    @osomotomiwa9429 11 หลายเดือนก่อน +1

    your teaching technique isn't really clear

    • @WiredtoDesign
      @WiredtoDesign  10 หลายเดือนก่อน +1

      I’m sorry you feel that way. What could’ve improved?