Love at First Sight - Taking your Canvas Apps UI/UX to the next level

Love at First Sight – Taking your Canvas Apps UI/UX to the next level

When building your PowerApps Apps, it’s not enough to have an app which works and delivers what is expected, but also performs well and enjoyable to interact with.

Here I am referring to the UI/UX side of your application.

We have all seen apps which look like this

I get itchy every time I see such an app, with no consideration at all to the UI and UX.

Today Session is related to how you make your apps more enjoyable.

Don’t judge a book (App) by its cover (Design)

Well, no ! We humans are more visual, more attracted to nice things, colours, animations (of course, when the app works and is still performant).

We also tend to remember 80% of the visual representations compared to plain text.

Colours tend to increase user willingness to interact by 83%.

Also, 65% of content paired with visuals tends to be remembered 3 days later.

Mobile vs Desktop

Mobile First: We should always build for Mobile first, with the increase of mobile users, the expectation is for Apps to be mobile-ready.

Instead of messing with the formulas for each control (X,Y, Width …etc.) we should always aim for a mobile ready application.

When it comes to building Mobile ready applications, it is important to consider:

The thumb-zone (or Thumb-reacheability): This is the area that a typical user can reach with a single hand (thumb).

To achieve this, we should always position the main navigation in the bottom side, instead of top or left menu (for desktop apps).

Fast, and quicker load time: On mobile devices, users expect faster apps, and reduced load time.
It is simple, if your App takes longer than expected, users will just jump off the app Period.

Kristine went into an amazing presentation where she presented some awesome capabilities !

Manipulating the existing (boring) controls, and with the combination of CSS and SVG, she was able to show simply amazing capabilities.

In my opinion, these controls should be part of the Make.PowerApps by default.

Here are some of the awesome Screenshots.