Power Platform Community Forum Thread Details

Hello,

I'm not really good at making nice UIs with PowerApps. Can anyone offer me suggestions on what I can do to improve this? There are three main sections:

1. Recruiter search

2. Department search

3. Data table that shows the results of the currently active search.

I wonder if I should only make one search type visible at a time and hide the other behind a button? What do you think?

Categories:

Building Power Apps

I think it's a great start! I personally don't like hiding things behind buttons unless I really have to, for multiple reasons such as:

Users aren't as bright as you think they are, and some literally won't see the button, much less press it
It becomes hard to maintain/remember to maintain if you play with too many Visibility() properties on things
Don't make a menu unless you have to. If you're adding an icon that the user has to select just to select the only other option they can, you're wasting controls. Here is an example of a bad menu (in my personal opinion):

See that (?) icon? Here's all it hides:

Don't use one single icon to hide a menu... of two items. You're literally already showing one of the two items, just show them all. Again, this is my personal opinion, but I think it's pretty fair.

I like to keep things simple, and remember, Power Apps is meant to be used on mobile devices too! With this in mind, accessibility options like an icon to clear the search bar, or a button to reset dropdowns, is huge. I see you have the Clear button up in the banner, that's a great start!

Next consider user experience - if I'm a user and I just filled in every single search field and filter, where is my mouse (if I'm on a computer), or where does my attention go to?

The last search field/filter field I filled in, or;
The data table at the bottom

If I wanted to reset everything, I personally would expect the reset button to be down near the filters, or above the data table, rather than in the banner. Because what happens after I reset everything and want to enter more search terms? Then I have to go back down and to the opposite side of the screen to restart my query. You lose time and attention - consider Fitt's Law. The time it takes a user to do something is a function of size and distance between start and end objects, and it's best to keep these things short and predictable.

Further, consider adding something to reset your text inputs, like this:

See how when I type in the search bar, the icon changes from a search icon to a cancel icon? Then, as a user, all I have to do is select the X to clear all my search terms. Mobile users love this! You can use one single icon and play with its Icon() property, and its OnSelect() properties to do this. Don't forget the HintText() property to tell the user what the field does!

See how this tells the user what they can filter with, and that they can select multiple? And it doesn't require a label with instructions! Saves space, and less controls to render.

You're doing great, and I wish you the best.