{"id":5936,"date":"2023-05-25T13:21:36","date_gmt":"2023-05-25T11:21:36","guid":{"rendered":"https:\/\/www.automatify.ch\/beitrag03\/"},"modified":"2024-08-28T15:05:51","modified_gmt":"2024-08-28T13:05:51","slug":"ui-ux-in-microsoft-power-apps","status":"publish","type":"post","link":"https:\/\/www.automatify.ch\/en\/ui-ux-in-microsoft-power-apps\/","title":{"rendered":"UI\/UX in Microsoft Power Apps"},"content":{"rendered":"\r\n\r\n
\r\n
\r\n\t \r\n\t\r\n\t \t\r\n\t \r\n\t \r\n\t\t
\r\n\r\n\t\t\t\t\tTo overview<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t \r\n\t \r\n\t \t \r\n\t\r\n\t \r\n\t<\/div>\r\n<\/section>\r\n\r\n\n\n\n\n\n
\n
\n \n\t\t \n\t\t \t \n \n
\n\t\t
\t\n\t\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\n\t\t\t\t\t\t\t\t

UI\/UX in Microsoft Power Apps<\/h1>\n\t\t\t\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t
\n

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\u2019t look so good – at least in my opinion.<\/p>\n

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.<\/p>\n\t\t\t\t\t<\/div>\n \n \n\t\t\t\t\t <\/div>\n\t\t\t\t <\/div> \t\n\t\t<\/div>\n\t \n\t \n \n \n\t<\/div>\n<\/section>\n\n\n\n\n\n\n

\n
\n \n\t\t \n\t\t \t \n \n
\n\t\t
\t\n\t\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\n\t\t\t\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t \n\t\t\t\t

Step 1: Understand your users and define the scope<\/h3>\n\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t
\n

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.<\/p>\n\t\t\t\t\t<\/div>\n \n \n\t\t\t\t\t <\/div>\n\t\t\t\t <\/div> \t\n\t\t<\/div>\n\t \n\t \n \n \n\t<\/div>\n<\/section>\n\n\n\n\n\n\n

\n
\n \n\t\t \n\t\t \t \n \n
\n\t\t
\t\n\t\t\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\n\t\t\t\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t \n\t\t\t\t

Step 2: Design your app’s UI<\/h3>\n\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t
\n

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<\/a> (other Frameworks: React<\/a>, Material 3<\/a>), 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<\/a>. Flunt UI is provided by Microsoft.<\/p>\n

We also recommend using a design tool to create visual requirements for your app’s screens, f.e. Figma<\/a>. 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.<\/p>\n\t\t\t\t\t<\/div>\n \n \n\t\t\t\t\t <\/div>\n\t\t\t\t <\/div> \t\n\t\t<\/div>\n\t \n\t \n \n \n\t<\/div>\n<\/section>\n\n\n\n\r\n\r\n

\r\n
\r\n\r\n\t
\r\n\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t\"\"\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t
<\/div>\r\n\t\t<\/div>\r\n\r\n\r\n\t\r\n\t<\/div>\r\n<\/section>\r\n\r\n\n\n\r\n\r\n
\r\n
\r\n\r\n\t\t\t