As app makers, citizen developers, or low-code developers (pick your poison), building applications in the Power Platform, we know that canvas apps are the way to go if we want to have full control over the user interface. Then why do the bulk of canvas apps look alike? When you’ve built a canvas app, you can recognize most canvas apps from a mile away, because even though we have full control over the design, we often neglect this in favor of functionality.
When you’re building standalone canvas apps, you might get away with this. But when you’re starting to build applications for Microsoft Teams, a typical canvas app just doesn’t match with the clean and shiny Microsoft Teams interface.
Why care about design?
1. Increase adoption
A well-designed application is usually more intuitive than one lacking in design, intuitive applications are easier to use and therefore people will be more inclined to actually use them. Ultimately, we are building applications for people to use, and building applications that are easier to use will help reach that goal. Therefore, design is something we should care about and not only in the last 5% of development when we do small improvements.
2. Increase security
A lot of security efforts these days focus on raising awareness in people that “when things don’t look or feel right, they probably aren’t”. This goes for emails, text messages or calls they get, but just as well for applications that they use. If people are used to apps in Microsoft Teams all looking very similar or at least professional, they should have doubts about the odd one out that does not look similar at all. We can support the security efforts done in other areas by making sure that applications follow the same principles: make it fit in so that people don’t get an odd feeling when using it.
3. Make people happy
There’s no denying that we, as humans, like pretty things. Applications are no exception to that. If I can choose between two apps with the exact same functionality, where one is sleek and pretty, and the other is bulky and ugly, I’ll go for the pretty one. When people are happy when using an application, and design can help this feeling, they will be using it more, which in turn increases adoption again.
Microsoft Teams UI Toolkit
Now that you’re convinced (hopefully) that design is something to think about, let’s look at how you can make that happen for applications built for Microsoft Teams.
Microsoft has shared some general information about designing applications for Microsoft Teams. A lot of it is aimed at code-first developers, however, Makers can benefit from the principles and guidelines as well. You can find a general overview here.
Getting into the nitty-gritty details however, requires going into the UI Toolkit in Figma. The easiest way I have found to work with it, is to create an account and duplicate the file to your own account. That way you can see all the details of the components that you want to create.
After duplication, you will see the following screen (or something similar):
In the navigation pane on the left, you will see a couple of different sections in the toolkit. These sections contain different types of information, and depending on what you are looking for, the information can be found in different sections. The sections can be described as follows:
- General information: The first section contains general information about the toolkit, how to use it and where you can find related resources
- Design system: This section contains high-level information about the design principles that should be used when developing an application for Microsoft Teams. You can find here information about the typical layout, spacing, color scheme, icons and fonts.
- App capabilities: Here the general structure of an app is described depending on where in Teams it will be used; as a tab, a personal app or a bot for example. When looking at a Power App, this is taken care of by the default integration between Power Apps and Teams, and you can only influence what goes on in the content part of the app.
- UI Components: In this section most of the basic UI components that can be used in an app are described in detail. If you are looking for specific details on what a button should look like, how to create a text input field, etc.; this is where you will find that information. Most likely this will be the most used section in the toolkit when building a Power Apps canvas app.
- UI Templates: Finally, also a very useful section, in UI templates you will find several common “page types” or “control groups” that can be added into an application, e.g. a list of information, a form to be completed, and filters.
Using the Toolkit for canvas app development
The sections I have used the most for canvas app development are the last two. I usually take the approach of searching for a template that is the closest match to what it is I’m building, often combining different templates. This provides me with a general sense of which direction I’m going in. To define the specific properties of the controls on the screen, I go into the UI Components section and figure out the specific sizing, colors and states. I then apply these specifications (as best as possible) to the controls that I’m working with.
If you want to take this approach, it will take quite some time in the beginning to figure out the toolkit and find out which control configuration works best in canvas apps. After configuring a couple of controls, it becomes easier as you can simply copy them and change whatever is different. E.g., after you have configured one spotlight button and one normal button, you can simply copy these, change the label, display conditions and action and you’re good to go.
In following blog posts, I will showcase specific controls and how you can configure them so that they follow the Teams UI Toolkit guidelines. When these are published, they will be added as links below.
Please reach out if you have any questions or want to see specific controls on Twitter (@CarmenYsewijn) or through the comments.
DigiPersonal 