We Had a UX Designer Fix Our Power App Part 1

so for those of you who are out there building power apps you may not always understand where you need to place everything or the best uh design for your application so today we've brought in a designer a ux expert to help us give one of our applications a facelift [Music] with the advent of the power platform and microsoft 365 many more of us now have the ability to develop applications for our organizations it's no longer a limited set of you know ux designers and developers who have their hands on those tools and so one of

the things that recently happened is our resident ux expert wrote a blog post on user-friendly design and i took a look at that blog post and i thought i really should apply this to some of the canvas apps or some of the powerapps that i've been building so today we're going to walk through that with josh and give that application a facelift based on some of those best practices that he's identified so we're going to pull up the application for you right here and this application in particular is a simple canvas app it's backed by

a bunch of sharepoint data as well as data from office 365 like your outlook calendar and things like that and it's intended to be mobile friendly and it's intended to allow the user to basically book a workspace a hoteling workspace so in the case that they're in town and they need to find a place to work for a couple hours or maybe for the day they're able to pull this application up find a place that's in relative you know close proximity to them and book that workspace all right so one of the first things we

noticed in this application um that i kind of took some uh information from your blog post and thought it was very useful is don't distract users and you were kind enough to point out the footer in this case like why do we have it right exactly you see the footer here just has nothing more than uh the company name and the version of the application but that doesn't really provide a lot of value to the users so why take up the precious vertical space that we have on our screen right that's a great point and

there as we'll see in a few minutes there are some of our screens that are just cram packed full of stuff and actually removing this footer will be really helpful in those scenarios and then the other thing just to make a note on the powerapps front for those of you who are out there building low code no code solutions josh one of your points was well if you have a version number like do you really need the version number on there because how many versions of this are really out there in the wild exactly right

and in the case that we're building a canvas app truly there's usually not very many versions of it out in the wild people deploy this to one environment it's not like users install this on their mobile device right their own copy of it so usually there's really only ever one version so that's completely unnecessary so i'm going to go ahead and i'm going to actually go through a few of our screens here and just simply remove our footer so i'll kind of walk through the application some of these pages and so right away this is

one of those screens that would benefit from more space we've got a lot crammed on here right oh yeah and it might not seem like a lot but that you know 20 30 40 pixels ends up fitting an entire subheader it could fit a button there's a lot of uh right there's a lot of breathing room that that clears up right um let me get one more screen here i know there will be some we can remove in the future but uh it's as simple as that and then the other thing um that you had

mentioned was simplifying some of the stuff that is in the header so in this particular case we have a back arrow that we're using and you pointed out use something simpler than that oh yeah like uh i mentioned breathing room previously and that icon right there just takes up a lot of space when something as simple as a chevron could uh very easily accomplish the same goals while taking up less space that's an excellent point and that's super easy to do um we can simply come in here and go find our left chevron and there

it is and then you also mentioned just making it smaller right yeah that that's pretty big for an icon um as far as touchable area the the maximum we or the minimum we really need for touchable area is about 40 to 48 pixels depending on apple or google's guidelines um so we don't really need anything bigger than that for our thumbs to be able to touch it and to be able to actually interact with the button very good and in this particular case i think we also have i think some misalignment in our header let

me go back a couple and take a look at this header i think you would also mention centering our title right so let's go take a quick look at that header and open that up and see kind of what we have there so we have our label for our application so let's just go ahead and center this and this will be a pretty easy fix this will take uh place across the entire application so we'll do that and then we'll simply come and center it and then typical placement for a logo right that should be

right hand side upper right corner right hand side left hand side if you don't have an interactive back button but um as long as we have text up there we want the logo to kind of be out of the way and we want the text and the contextual information to be what's front and center and most important for a user okay very good so we've made that change um so now let's jump back to our screens and see what that looks like so that changed there and if we go to our screen we've got our

back arrow or our chevron now and that looks a whole lot better already we've freed up a lot of space so that things aren't quite as cramped um and that we we've just got some breathing room very very good and we'll go through and we'll make that chevron change as we work our way through some of the other screens as well all right so one of the other big topics that you pointed out in your article or your post josh was don't break user expectations and there are a number of things that you pointed out

in this application that were just different than what the norm would be or what users have grown accustomed to when they're manipulating a mobile device exactly and this screen specifically one of the first things that i did when i was using my phone was i tried touching right there because that whole section looks like it should be clickable and in on all honesty it probably should be clickable yep and that's actually something that's a great point um in this particular case we're using the you know vertical gallery that powerapps gives you out of the box

and by default usually you get a couple lines of text maybe an image and then you get a button on the right and that's how this was put together but that can very easily be changed so that we can make that whole area clickable so if i simply select this you'll see that i've got a label here i've got our little icon here but what we want to do is we want to make this entire thing clickable we want this entire area to be able to basically execute this command that's defined in this on select

so i'm going to copy that out real quick and then i'm going to simply select our gallery item i'm going to jump over here and we're going to add a button to it so now i've got a button there and oh it's ugly grey buttons but we're going to fix that so the first thing we're going to do is we're going to get rid of our button text and then we're going to jump out here and we're going to change our fill instead of using the standard fill we're just going to blank this out now

it's empty and then just to be extra special careful i don't need any uh implication that there's a button here so i'm going to remove the border altogether and now the last thing i want to do is i want to make sure i've got that button selected our new button which i do and i can come in here in the on select just like on the other button and i can basically paste that same logic that we had in there and so now instead of just clicking on this individual thing i can actually come over

here you'll notice the whole area is hot my little cursor is changing but i can click anywhere in here and select headquarters right so that's going to make things a lot easier for mobile users and anybody that's using a touch device it might make sense to click specifically the icon if you're using a cursor and you are designing with a cursor at the moment but when we think about how users are actually going to interact with their devices it just makes sense for that whole area to be clickable so that there's more room for people

to over click click in the wrong space and it's just an intuitive function of mobile devices yeah i think that's a really good one we can use that change or that modification throughout this application there are a number of places where that makes sense one of the other things that you had pointed out is you had noticed when using the application on your mobile device that when you just used the back button on your android device it didn't do what you wanted it to do exactly um since i do use an android device and not

a apple device i've become pretty accustomed to using the back button in the bottom right hand corner of my phone so i'm not really used to having to click the top left of an application like this um so when i clicked that back button the native function of powerapps was to go back to my gallery of powerapps and it reset all the progress that i had just made so i had to actively think about which button do i press to do something that my brain just knows how to do i just hit the back button

yeah and when that doesn't work that causes frustration well yeah and let's say you're like three screens into this application you've selected your workspace you're about ready to book it you want to go check one thing and you push that back button on your device and all of a sudden you undo all that work it's just a terrible user experience at that point i had just accidentally opened the the filters panel and with that filters panel i'd realized i didn't need to filter anything hit the back button and i had just undone you know four

or five screens deep worth of work and you know that's that's frustrating so excellent point uh fortunately in the case of building a canvas app or powerapps we have a way to deal with that particular scenario it is specifically in the settings of your canvas app if you dive into the upcoming features tab and simply look in here do a search for back and you'll find an option to turn on the ability to use the android back button um so it works for android i can't speak to iphone right now but at least somebody was

smart enough at microsoft to build that in to allow the users to use that functionality so we're going to go ahead and turn that on and now we solve that problem for our users so one of the other things you had brought up when it comes to breaking user expectations josh was using primary colors to indicate to the user what the primary objective is can you talk about that a little bit um so as we go to this screen here there's a lot going on on this screen and a lot of that is distracting to

users because they're looking for something which stands out to tell them what their goal is here so typically your primary color is going to be the one thing you want them to do but i look at this app and i see uh the first bright thing i see is view map is viewing map the first thing that i should see and what i want to do here then i see select and yellow is select is an important thing but i'm also having trouble reading that because of contrast issues which we'll get into in a little

bit but really the goal of this app is this book a room so why are we competing for attention with all of these other yellow objects ideally we have one primary call to action and anything that's secondary should stand out from the background but it shouldn't be distracting us from what our goal is which in this case is book a room sure okay that makes a lot of sense so let's we can make a simple change um to this to solve that problem i think um you know we'll deal with some of the other the

select and the check icon here in the future when we talk about accessibility but in this case we can at least eliminate confusion with this view map which is a pretty primary yellow thing simply by changing the color so let's go ahead and change that i think if i change this to our primary three color right then it will basically match the colors of all of those other secondary functions right for the user okay so let's get a little bit more i guess let's get deeper on this particular screen so there's a lot of stuff

happening you mentioned that um what are some things that we can do to kind of improve our our overall layout and like letting the user know what they need to do um there's a lot of stuff on here you had mentioned like you can use icons where icons are clear we don't need the text right exactly so what are some of those things we've got a lot of stuff here that's taking up a lot of space and sometimes you need that clarification but sometimes you really just don't so for example with the map and the

filters button people are pretty accustomed to know what a map icon looks like they see that pointer they know it's a map so do we really need the text that says view map especially when it's kind of a secondary um function it's not even really an objective okay so so you're basically saying hey go in here get rid of that text off of your buttons you don't need text and then we can even take our button um or our entire control here now that that text is gone and we can shrink this guy down right

exactly and we've just freed up a lot of space that can now be served for something more valuable that group a little bit better so so now where might we move that to make it better is this something that like so what's going on here is the user has the ability to select a particular date and time for their booking for your workspace and then these other options are i'm going to show it to you on a map so that your you know your geography is straight in your head you know where to go find

that workspace and then in the case of our filters if you want certain amenities or something that's what that's for which of those things should be top or bottom does that matter now i personally think that um typically you'll want to put the most important thing first but in this case since we're de-prioritizing the map and the filters button we can put those on top and maybe off to the right just so we can kind of tuck them away they're still there but they're not as important but when we put something closer to another thing

that it's associated with our brains kind of associate them as being related so if we put these filters here next to these results here it's going to be a little bit clearer that these filters are going to alter these results okay so i'm going to clean these up a little bit and what about like our icon size and these particular scenarios if i have just a button no text and i have an icon there should i fill the space what's what's the safe thing to do you definitely want to leave your icons at least large

enough to read and understand what they are um i'd say i wouldn't go personally any smaller than 32 pixels for an icon but you also want to give it a little bit of breathing room within the button so it's clear that it's a button and that there's a tappable area around it and so that things just look nicer when they have a little bit of room to breathe um so definitely don't bring your button any smaller than you know the to 48 pixels that uh is a minimal tappable area but we don't need those to

be quite as large as long as uh as long as it's not the most important thing that you're trying to do okay very good so let's um kind of center those in those little buttons we're going to move those to the top uh now so let's see if we can get these out of our way so we can move our other stuff down so we're going to temporarily stick these things up here in our kind of our header line um and then we're going to bring these things down and um i'm noticing as i'm moving

this around that like it's not exactly perfectly aligned like this icon isn't aligned necessarily with our text those are little quality of life issues that isn't going to really affect the uh the functionality of the application per se but it's going to affect the user's perceived quality of the application and people will notice that it might not seem like a big deal but those little details are the things that people kind of pick it subconsciously affects their opinions okay let's get these things lined up see now another thing that we've already done by doing this

is we've created a more clear relationship between things that are in fact related so we have select workspace that's our primary header our h1 and then we have in headquarters floor 9. simply by giving this breathing room it's easier to tell that we are selecting a workspace here rather than this all just being information that's being thrown at us makes it easier to make sense of right exactly uh we've also associated these controls together so we know that even if we don't have the words here we know that these are controls because these are controls

and these controls are related to these results very nice and starting to look a lot better already already so another thing that's kind of breaking up that relationship i was talking about is this pagination here and pagination is just kind of an awkward behavior for mobile devices to begin with because we're used to scrolling on mobile devices all of your social media applications and your email you'll just scroll until you hit the bottom so why why are we breaking that up why are we telling users to do something that they don't naturally want to do

so we could eliminate that pagination and free up even more space on the screen as well as uh make this area functional uh scrollable functionality right here um all right so let's go ahead and i'm gonna make it visible false there was a reason for the pagination in this particular case we had a lot of workspaces coming back and it was creating a performance challenge but in this particular environment we don't have that and we can certainly eliminate that so we'll go ahead and hide those but you're right now we can basically take this gallery

and get more room out of this right yeah um and we can even probably move these things up a little bit more that makes sense i i wouldn't even move those up at all actually if we keep them down keep it there because for the most part um users when they're using a phone there's only so much screen that they can actually touch with their thoughts if i'm looking at my phone right here i can only touch about this much of my screen so we don't need to put those buttons all the way up here

if we put them towards the middle or the bottom of the screen i can reach them just fine without having to use a second hand to do so okay well that makes perfect sense and we do have some more room we can gain down here at the bottom as well because we can drop this book button down and expand our gallery even a little bit further so while we're on this screen some strictly visual things that don't necessarily impact the usability but might make this look a little bit better would be to bring that call

to action button full width so it's it's a it takes up more space it gives you more tappable area and it looks like it's uh covering the content if that makes sense and then additionally since there's already some spacing there's already some spacing built in to the list here we can just extend those all the way to the edge so we don't have that dead space on either side gotcha um now additionally that scroll bar is a little bit distracting if it's persistent uh but if we can make it invisible then that's one way for

us to to make things look a little bit nicer but from a functionality standpoint the scroll bar does have some value so ultimately so long as it's obvious that this is a scrollable area as long as it's obvious that scrolling is a is a thing the the scroll bar is kind of up to you yep um additionally we don't really need some of the the the extra ui chrome such as the border around this list uh sure it's good to have the border between the items but that border around the list is just kind of

taking up space all right so i've made some of those changes that you talked about i was just noticing though like when you had mentioned like as long as it's evident that it's scrollable i was looking at this at our list here uh and noticing that they're the bottom item in the list you can just catch the select call to action peaking up above our little button there but on this side you can't see the text and i realize that these things are not aligned well that's a good catch i don't even see that so

let's go ahead and make that change too if we center those that would be a great way to uh so we can vertically align these i'm pretty sure that property goes middle and then and now additionally if we could align the end of select with the edge of that button and the beginning of the h with that button there that'll really create a cohesiveness ah yes now this is just the designer and me getting really nitpicky i like it i like it uh this is ultimately going to impact the quality of the app and how

users will perceive it oh i think that's very good do that and then i do know that there's a little select or check icon so let's get that guy aligned too right there we go yeah that's much better already that's incredible change and our scroll works we don't have a scroll bar it's good very good okay i think that does it for part one of making this power app more user-friendly i really appreciate josh you participating in this and helping um i think the pointers that you gave us just is a tremendous education for those

of us who are building apps using power apps and this new no code low code option so it's been really great we are going to do a second part of this video to clean up some more things in this power app or in this canvas app so if you're interested in that be sure to stay tuned if you like this video and found it helpful and would like to see more of it be sure to subscribe to our channel if you have any questions or comments you can post them below and we'll try to get

to those as we can and also remember that we do a monthly office hours where you can kind of bring your own questions and challenges or things that you're stuck on and ask them and we'll try to help you solve them thanks again we'll see you next time [Music] you