Don’t judge me people! Yes, I’ve installed Windows 11. It is also true that I have spent time pondering it in the context of Power Apps.
Really? Oh yes…
Are we sitting comfortably? Then I shall begin…
Let me start at the beginning… In owning a few devices, I took the plunge and put my Surface Pro 3 on the Insider Dev track. This meant that I’d get Windows 11 this week. I know I am a geek. I also know that bleeding edge is always risky… but new shiny so it had to be done 😍🤩
Whilst playing around with it a bit, I started to look at the design through a Power Apps design lens. Specifically, at the moment, in the context of UX and UI designs. In fact I even found myself, yes ME, thinking about Power BI as well.
The glassy look and semi-transparent windows. The colourful icons and, at long last, a touch-friendly interface. Delve even deeper into the menus, and the overall presentation, and there’s a clear shift in the Windows UX/UI combo. The shackles of legacy versions of Windows are either gone, or only accessible after being presented with newer options. Fluent UI design is more prevalent in the choice of icons for buttons and toolbars. Whilst the new Window Grouping / “Zones” option means snapping applications is even easier.
How Windows 11 and Power Apps can come together
Which brings me on to Power Apps. Mobile apps have always had different design to desktop apps, but there’s a real opportunity here to look at the way we build apps to work across platforms/devices.
Design has always been possible within Power Apps, but it’s all to often just the default control look with a minor tweak. The end result is a lot of apps that all look like, well like Power Apps. As a challenge I decided to have a quick play and see if I could recreate the Settings screen from above…
Personally I don’t think that’s too bad for a quick attempt. However, in designing this I found that there are some major considerations regarding ease of use and accessibility. In using the exact colour palette used within Windows 11 I was struck by how difficult it is to tell which button is highlighted.
Now you can easily switch themes in Windows 11, but the level of contrast between items remains the same. Even if you go to Dark Mode (my preferred option) you still have the same level of contrast between elements.
Testing these colours against the Web Content Accessibility Guidelines contrast checker (Available here) results in scores that fail on every test. This is only mentioned here to highlight how easy it is to design something that “looks good” but inadvertently leads to people being excluded from using it.
The standard caveat of “This is an early preview build and subject to change” etc applies here. Hopefully the UI will get tweaked and this will improve. It’s certainly among the feedback that I’m providing!
It’s too much work…
Building the sample wasn’t too difficult, but there remains some challenges. Defining the default look and feel, or implementing dark/light modes, is not as simple as it could be.
Thankfully the amazing Sancho Harker (@IAm_ManCat) has built a phenomenal theming engine for Power Apps that allows you to define the look and feel, and to even switch colour schemes dynamically. This allows us to create a smart default look for our apps as well as applying consistency in design. It does only apply to colouring though, so defining control border radiuses (for example) needs to be managed elsewhere.
On slight frustrations is that it’s not currently possible to detect if the person is using Dark or Light mode in Windows (or any other O/S for that matter). This means that the first time the user launches the app they get the default colour scheme. This can be a bit jarring if the user is in dark mode and the app launches in bright white, but there are solutions. It’s not difficult to put a toggle in the App to select themes, and there should be options for High Contrast etc as well. This information can then be stored in a Dataverse table to keep the users preferences and apply them when the application loads.
Another area that would be a “nice-to-have” would be having a border radius on Collection Items in a Gallery control. To obtain the rounded rectangle look I had to cheat and stuck a button in the background, but that’s clunky. It would make for a much nicer experience if you could create this look by tweaking default parameters.
You mentioned Power BI earlier?
So I did! This is only a very brief one as I am definitely NOT a Power BI guy. However, within the Windows 11 UI the ability to snap to zones seems to give a great opportunity. Putting live data representation within a zone that sits on the desktop. Easy for the users to reference, and sitting nicely amongst their other applications.
Another possibility I’d love to see is a Power BI widget that can be embedded in the Windows 11 Widgets area. This would then give business users quick access to data without needing to drop in to another application.
Finishing thoughts – Building Windows 11 Power Apps
When a new UI design appears it’s always followed by a rush of applications that copy the look and feel. Sometimes the results are amazing, and make the application feel as though it is part of the overall system. Other times it just feels like someone has jumped on the bandwagon.
Windows 10 has been around for a long time. The UX/UI has become so established that many have broken out into their own territory. Adding in the constant evolution of Android/iOS, you’d be forgiven for not linking app design to O/S trends. However, the link between consistency and familiarity with user adoption and success is undeniable. Users like the familiar, they don’t like shifting between different ways of achieving a goal.
The Windows 11 look and feel is still being developed, but the direction the developers/designers are taking is clearly visible. There are hints that Office 365 is following suit and that a revamped UI for that is on the way. Considering that, maybe now is the time to build Power Apps that work like Windows 11.
(Oh, and if that primary O/S is iOS or Android and the users don’t use Windows then of course the design should follow those principles!)
You must be logged in to post a comment.