Many non-designers and non-developers are now creating applications using the Power Platform and Microsoft 365.
A UX expert, Josh, is helping improve a specific canvas app based on best practices from his blog post.
The app in question allows users to book hoteling workspaces using SharePoint and Office 365 data.
Key UX Improvements
Removing Distracting Elements
Footer: The footer with the company name and app version was deemed unnecessary and removed to save vertical space.
Header Icons: Simplified icons were recommended (e.g., replacing a back arrow with a smaller chevron) to free up more space.
Text and elements in headers should be centered, and logos placed in the upper right corner.
Enhancing Clickable Areas
Areas that look clickable should be fully clickable. For example, making entire gallery items clickable rather than just specific text or icons.
This improves usability, especially on mobile devices where touch interaction is key.
Native Device Navigation
Addressed the issue of the native Android back button not functioning as users expected (returning them to the PowerApps gallery instead of the previous screen). Enabled a feature in app settings to support the Android back button.
Consistent Use of Colors
Primary color should indicate primary actions (e.g., “Book a Room” button). Other actions should use secondary colors to avoid distraction.
Simplified and unified interface color usage to highlight main user actions.
Better Layout and Spacing
Reduced the size of buttons and controls and removed unnecessary text labels where icons suffice (e.g., a map or filter icon without the text).
Controls related to filtering and map views were moved to de-prioritized positions, making the main actions more prominent.
Eliminated pagination in favor of a scrollable area to align with typical mobile device interactions.
Improved alignment and spacing to provide a more polished look and feel.
Accessibility and Touch Target Sizes
Icons and touch targets should be large enough to be easily interacted with, generally keeping touch areas between 40 to 48 pixels.
Ensured interactive elements are consistently sized across screens to enhance usability.
Quality of Life and Aesthetic Enhancements
Removed unnecessary UI elements like borders around lists to reduce clutter.
Adjusted elements to ensure better alignment and spacing, creating a more cohesive visual experience.
Enlarged the primary call-to-action button to full width for better visibility and usability.
Conclusion
These changes collectively improve the usability and aesthetics of the PowerApp.
A follow-up session will continue to refine and enhance the app based on further UX principles.
Encouraged viewers to subscribe for more insights and attend monthly office hours for personalized help.