UI/UX in Microsoft Power Apps
Today we need fast & efficient technologies to build applications. Millions of APPs need to be modernized. Microsoft Power Apps provides a platform for creating custom applications quickly with a No-Code / Low-Code approach. The goal? Even people without development skills should be enabled to build or modernized business application. However, most of those APPs, out-of-the Box, just don’t look so good - at least in my opinion.
In this blog post, we'll walk you through the process of designing and building good looking and user-friendly APPs using the Microsoft Power Apps No-Code / Low-Code plattform.
Step 1: Understand your users and define the scope
Before you start designing your app's user interface (UI), it's essential to identify the elements you need, such as navigation, list view, and details view. You should also consider how many screens your app will have and how many types of entities you'll be managing in the app. This will dictate filtering for the list view, but also the variation in the detail views. Additionally, you should evaluate the complexity of the entities you're managing and consider using a wizard editor for complex entities. Finally, consider the process your app is facilitating. Is it a simple state machine that can be represented by a status field, or a sequential flow that needs a visual representation? Answering these questions will help you define the scope and requirements of your UI design.
Step 2: Design your app's UI
With a clear understanding of your users' needs and your app's structure, you can now begin designing the UI. Use a UI framework, such as Fluent UI (other Frameworks: React, Material 3), to provide a high-quality starting point for your design and ensure consistency over the long run . Fluent UI is a set of reusable, cross-platform components and styles that aligns with Microsoft's design language. You can access the Fluent UI controls library for Power Apps here. Flunt UI is provided by Microsoft.
We also recommend using a design tool to create visual requirements for your app's screens, f.e. Figma. Below you can see an example of a approval APP UX flow designed in Figma, as well as all the icons, fonts and controls library that is reused throughout the process. This has been designed for building a Power App.
Make it pixel-perfect
Figma is an excellent option because it allows you to show pixel distances and element sizes, which eliminates guesswork for developers.
Step 3: Implement the app
Once you have a design, it's time to implement the app. In order to achieve pixel-perfect fidelity, a trick we often employ is adding an image with the design as a background, and then building the actual app on top of it. We also recommend the use of containers and relative positions of inner elements within those containers to control spacing in the way specified in the design. This enables you to move higher level components around without breaking their inner layout.
Bonus: Some nice-to-haves will go a long way
To make your app stand out and create a more engaging user experience, consider adding animations and interactive elements. Power Apps offers a range of animation effects and controls that can help you bring your app to life. For example, you can implement expand/collapse functionality for your navigation and/or filtering menus, which enhances usability and demonstrates attention to detail.
Tips & Best practices
Here are some additional tips and best practices to consider when designing your Power Apps UI:
Make your navigation collapsible to allow users to focus on content when they don't need it.
Consider including breadcrumbs navigation for an easy way to skip through screens
Use color strategically to emphasize important elements and convey information quickly: for example, an approved item with a green checkmark is visible at a glance, while a red warning sign makes it immediately clear that closer attention is required.
Explore the controls library. You don't always need to build from scratch because the Microsoft marketplace has many components that will save you time & effort
Choose beautiful icons from the Fluent UI icon pack. The Fluent UI icon pack is a set of icons that aligns with Microsoft's design language and is available here.
End result
Here's an example of a configurable multi-level budget approval application we created using our design process.
If you have any questions about our design & implementation process or would like to see a demo of the app showcased here, do not hesitate to contact us at hello@automatify.ch.
