Universal Windows Platform (UWP) have a set of design APIs that seem to act like a Polyjuice potion, allowing its apps to shape-shift and be able to conform to any Windows-based device, which ranges from your phone to your PC and Xbox. At Open Night, I shared some of this tips and guidelines for developing Universal Apps for any Windows device.

s2

Adapt responsively! Designing for such a wide range of devices with different screen sizes as well as device specifications would ordinarily be a challenge, but UWP provides a set of common APIs that serve as building blocks for all their apps. This includes the ability to design Adaptive and Responsive Apps which adapt to a devices specifications and respond to changes in screen resolution respectively. This allows for a snug integration onto the wide ranges of devices supporting UWP.

 

Responsive design refers to an App's ability to conform to different screen resolutions
Responsive design refers to an App’s ability to conform to different screen resolutions
UWP App's can automatically adapt to a devices specifications.
Adaptive Design refers to an App’s ability to utilize different devices specifications.

Font Scaling

“UWP apps automatically adjust the size of controls, fonts, and other UI elements so that they are legible on all devices.”

But how?

When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5′ phone that’s a few inches away.” – UWP

Device screen matters!

Peeling back the layers. If you are looking to create an aesthetically pleasing UI, then you will definitely want to drill into UWP’s new Visual Layer via the Windows.UI.Composition namespace. UWP developers will be able to utilize this layer in order to get closer to the graphical core of the application, while using familiar technologies like XAML and C#. By getting right down to the core or system compositor level, developers can achieve great visual performance and custom UI experiences. By working through the XAML layer, developers get a sense of ease when interacting with these previously complex functions.

image11

An example of these layers working in harmony, having been affected from the XAML and relative C# files.
An example of these layers working harmoniously

Responding to responsive. In the code sample below Fig 4.1, we make use of a built-in feature called AdaptiveTrigger, the visual representation of which can be seen in Fig 4.2. If you are familiar with CSS media queries, you’ll know the idea of the AdaptiveTrigger. In short, this allows you to declare a rule which applies visual states in your markup (in this case, ‘normal’ and ‘slim’). Basically, you can declare a set of controls to be visible, if the window size is below a certain value (MinWindowWith). Using this concept, we can create responsive experiences – all in markup!

picture4
Fig 4.1
Fig 4.2

Design Tips:

  1. Equality among icons! In Fig.5 the screen on the left contains certain icons have been filled (weighted), this draws unnecessary importance to them and should only be used in the case of showing a selected state of an icon. Thus when choosing an icon set to use, make sure there are no icons on the screen that may conflict with each other and ideally are from the same set.

    Iconography
    Fig. 5: Iconography
  2. Nail the Scale! Scale is an essential aspect to consider when you have your app running on a wide range of screen sizes, the last thing you want is for your beautiful app to look like it belongs on a device from the 90’s, pixelated images do no favors. In light of this UWP allows developers to use SVG (Vector) images which can be scaled according to the device without needing any specialist code. In fig.6 we see the difference between a Standard raster image that has been blown up versus a vector image which has been scaled up.

    Vector vs Raster images
    Fig. 6: Vector vs Raster images
  3. and Action! Calls to action use one or more of the following characteristics to visually clue the user into noticing them and understanding their purpose:
    • Contrasting colour
    • Noticeable difference in scale
    • Larger font
    • Noticeable margins
    In Fig. 7 below, the call-to-action button in the drop down navigation of LinkedIn’s Lynda app is bright blue. Its colour and shape distinguish it from other clickable or tappable elements. This same treatment repeats throughout the app to establish a pattern and make it easier to identify calls to action. This trains users to understand what these buttons are for.

    Calls-to-action
    Fig 7. Calls-to-action

Useful Links:

Getting Started with UWP: https://developer.microsoft.com/en-us/windows/apps/getstarted

UWP Design Docs: https://developer.microsoft.com/en-us/windows/apps/design

UWP Github Samples: https://github.com/Microsoft/Windows-universal-samples