7 Power Apps Navigation Best Practices

today is the final video in our powerapps navigation series where we're going to be talking about seven best practice tips for navigation as well as showing you several great resources and examples to get you started actually building them [Music] hi guys my name is michael with bulb digital and today's video is the final in a two-part series on navigation best practices um please check out the description below for the first video and check it out if you have not yet this video is a continuation of that so in the first video we talked about navigation building blocks or object types you could think about it that way using powerapps studio as an example and so in today's video we're going to be taking some of those concepts and talking about best practices seven in particular that result from them as well as great examples of how to actually implement them in your power apps please be sure to like and subscribe below as well and leave any questions in the comments and we'll get back to you so tip number one would be use the right tool for the right need so as you're thinking about where do i put this type of navigation basically just reference everything we just talked about in that first big section and think what is this object designed for so if you need to navigate to something consistently from any screen in your app put it in the header if you need a place to show your screens put them in the left nav if you need a place to put settings unique to that page or navigations to that page put them up here in the sub nav if you have a little drop down of of navigations unique to an item put them in an ellipsis drop down like if you just follow that that's going to get you a long ways tip number two which we've kind of talked about a lot is aim to be really consistent with looks function and placement both within your app and across your apps and from your your apps to what microsoft does um because microsoft as we as we talked about earlier does this so beautifully where you can go from one m365 app to another and just intuitively know how to use it because they they do all these things similarly and so if you can extend that into your power apps your users are going to just love you to death because everything's going to feel so intuitive tip number three is use navigation to strike a good balance between grouping things showing things and hiding things so we want to not show our users too much information when they come to a screen because that can be extremely overwhelming we also want to show them too little you know if everything was nested and hidden and they had to click this and then this and then this and then this nobody wants to do that so you got to strike that perfect balance and if you think about just kind of the logical grouping of things and just like visually having a good happy medium and if you're not sure what that happy medium is just come look at at you know powerapp studio they do a great job of it so that's i think i'll have to say about that tip number four is use screen space where possible with collapsible menus and this is just a way to you know save yourself some real estate so you know is this functionality with the left nav imperative no is it cool looking yeah but more importantly does it give you more screen space yes and that's that's pretty cool and especially you know we i don't know i always feel like the power apps i make never have enough screen space anyway so you know save where you can tip number five is to use screen overlays i don't know if that's the best term that's what i call them rather than new screens especially when you're only going one level deep into a parent-child relationship let me unpack that a little bit so and this is actually a great example the the page you're on right now if we're in a table so let's go into the account table so columns are a child of a table right and if we want to edit this column and this feels intuitive you click on it and we get a little overlay side overlay pop out whatever you want to call it over here on the right hand side and this is so much more handy than navigating to a different screen right like what we're trying to do is edit some information here we would never go anywhere else from this pop-out we would never need to navigate anywhere else other than back to this screen and so why go to a different screen come back to this screen probably lose your place there's no need to just use a an overlay like that and it will save save your users a lot of hassle tip number six i think we're on is make sure when you hover over stuff this is just generally for all of your navigation things make sure when you hover over stuff your users can tell it's selectable and this i just can't tell you how much this drives users nuts you probably know it drives you nuts when when you're on on websites or things and you you know you're hovering over things and you're like is that is that a clickable thing and like crazily enough if you look through a lot of the power apps templates there's a lot of instances where you hover over a navigable thing and you you might know it's it's uh navigable if you actually click on it but if not so make sure there's some visual indicator and one of the best things is if you can get the little cursor to be the pointer the little finger because that that is slick the very last tip is use powerapps components as much as you can for things that are going to be the same throughout your app so in particular we're talking about the header and the left nav i would say and if you have a waffle menu probably that as well so go ahead and turn those into components you only have to build them once and then you put them on every screen in your app saves a lot of time also we do have several videos about building components that we will link in the comments below so be sure to check those out okay the final section of this video is i actually want now that we've kind of got some you know foundation with navigation objects and best practices let's look at how do you actually implement these and i'm actually just going to point you to a bunch of resources so you can go check these out and just to kind of accomplish all these various things i will say you can't do everything in powerapps which hopefully you know is an obvious statement but you can go pretty far and it's amazing what some of these people have done so the first thing i want to show you are some of the powerapps templates and if you don't know about these let me just come back here real quick when you go to create you scroll down these are all templates and they're amazing starting points so you know if you haven't checked these out go ahead and check them out you just click on it give it a name click create takes you right to the canvas app editor so three of these i want to show you the first one is called powerapps training for office and the main reason i want to show you this is because in my opinion it has the best uh left nav menu right over here of any of the templates and actually when you consider what this looks like compared to the studio left nav they're very similar so that's super cool and if you press play to review this app you know functionally it it works as you'd expect and it's also collapsible and it's responsive so the screen changes as you would expect so pretty slick so if you with any of these templates and actually anything i'm going to show you the best way to like figure out how do i do this open up open it up and just kind of reverse engineer it so you know click around click into some of these things click into the gallery see what all the properties are doing and then you know you'll be able to figure out how to do it yourself one more thing i want to point out with this template which is pretty neat is the idea of tabs so over here in this section of the screen you know we've got these two tabs to display a different text really nice way to group that up so it's not too overwhelming at first sight all right let's move on to another template the pdf reader the main thing i really liked about this is the left menu that's not really a menu but this functions very similarly to a menu instead of just collapsing to narrow it disappears all the way which is pretty sweet so if you need an example of how to accomplish something like that to get the menu completely out of your way this was the only powerapps template i could find that did that so it's pretty cool and the third and final one i want to show you is onboarding tasks and the main reason i believe i wanted to show you this one was this is a good use of an overlay in the middle of the screen so when you need to again the idea of don't send them to another screen if you don't necessarily need to this is a great way to display something in the middle here while kind of graying out what's around it but you're if you you know leave it you're still in the same spot so if you need an example of how that works come check out the get onboarding tasks also this is a nice example of tabs across the top too so pretty sweet okay that's all i want to show you with templates um if you templates are interesting they're super helpful in terms of you know giving you a head start in terms of like the best looking navigation tools or the best functioning they're not the best but they definitely give you starting points what i think are a little bit potentially better quality are things you can find on the powerapps community galleries and if you have not been here these are amazing so people from the community post uh samples and and apps and components and all kinds of things that are free for you to download and use and they're amazing so i searched a bunch of the terms we've talked about so menu header breadcrumbs tabs and i found lots of resources i just want to quickly show you and then all of the links for these we're going to include below so you can check them out as well but honestly if you come here so power users powerapps.com and just go to search and search the galleries you know any kind of keyword of something you're trying to figure out chances are you'll find it all right first one i want to show you is this guy if you're looking for in my opinion what is the best example for tablet and mobile of a hamburger left menu that collapses and not sorry not collapses visually completely disappears and is also multi-tiered so it's nested this is the one uh this is super cool this is by reza durrani who's a genius he does great videos so this example here is another nice one of a disappearing left nav shane young is another great great community guy and he did this video of this kind of slow widening and then disappearing menu that's pretty sweet this is another nice one kind of same thing slowly opening slowly closing this is a nice one from the mobile so it's disappearing menu and this also has a really nice back button which they demonstrate right here takes you back a screen which that's super handy this next guy these are just three screen shots but i thought his menus from the looks of them were like maybe the slickest i've seen in terms of the visuals so here's his left nav he's got this left left nav that's like more settings based which that just looks gorgeous and then this top um kind of navigation little toolbar as well that looks super nice this girl figured out how to do breadcrumbs which is cool and actually i think she's the only one i could quickly find on that and so here's her article kind of demonstrating this so you click on things it shows you the breadcrumbs up here and then you can click this back arrow to go back to the parent so pretty sweet this guy this is the coolest i'd he this is the only one of this kind i've seen so this is his kind of like header you could say and then this is the sub nav so as he's clicking on different icons different things show up here so that's pretty sweet um laura rogers is great um so she made this thing with with really nice tabbing up near the top and then this kind of header underneath it so that was kind of a neat design for mobile i thought that was pretty cool uh this is super nice i really like so he's this is a multi-tab form so you click you know he's opening up this form but what i really liked about this as well as the multi-tab feature was just how this overlaid so again you're not going to a new screen you're just overlaying on top of this one it's pretty sweet and the last thing i'll show you is april dunham who's also super amazing so she did this tabbing thing to replace the content from this part of the screen with a video gallery so pretty cool stuff so this concludes our second video and our series on powerapps navigation hopefully you found this very helpful all the links for the things that i talked about are going to be in the description below so please check them out and just generally like use you know peruse powerapps templates uh peruse the the galleries on the community site they're a great source of inspiration and and things that will just really speed up your development a couple things that i'd like to bring to your attention really quick which will also be in the description below the first one is we just released as a company a new podcast called make others successful it's just a chance for us to engage in this sort of conversation but in a longer format so it's a little more casual a little more conversational where we're going to talk about all things related to the modern workplace so check that out and then the second thing i want to bring to your attention is on our website we just released a learning center where we have kind of organized and categorized all of our blogs and videos and articles and things so you can like sort them by like the type of microsoft app like sharepoint or teams or power apps or by the concept you're interested in so um you know intranets or business apps or collaboration things like that so go ahead and check that out for all those great resources and i think that's it for our navigation series so we'll see in the next one [Music] [Music] [Music] you

Channel: Bulb Digital

Views: 532

Rating: 5 out of 5

Keywords: microsoft 365, user experience, community, navigation, breadcrumbs, panels

Id: v4Y63WRTp6A

Length: 15min 6sec (906 seconds)

Published: Thu Sep 02 2021