Windows Store Apps: adapting to sizes instead of states

Blog has been quiet for a few days as I’ve been speaking at Nebraska Code Camp and had to focus on the workshops and the sessions. The conference/code camp finished yesterday and I had a fantastic time- but I’ll tell you more about that next week, I’m itching to share some technical ‘stuff’. This time on the UX side.

The move from view states to windows size using an adaptive layout from 500 pixels and up, and also allowing for the smallest size such as 320 pixels, previously called ’Snapped mode’ gave us more freedom- but also a few new things to think about. Questions around adaptive layout in Windows Store Apps seems are some I often get so I’ve put together some thoughts and best practices.

Horizontal and vertical space

A thing many developers forget is to adapt to both horizontal and vertical space. We might have a personal preference and we forget to either think about alternatives, or we expect the user to learn to like and use what we offer them.

clip_image002

We also need to remember than on smaller form factors you often have taller layouts than bigger form factors since a lot of users prefer to hold the device in one hand.- and keep in mind that we are thumb users (most of use) be that using the device with one hand or two. That means important actions should be close to the thumb reach area.

clip_image004

Window size changed event provides information about the size of the window and allows us to make changes to adjust the UX. Combine the information with defined view states that are as fluid as possible. Sometimes you even want to change the panning direction (vertical versus horizontal) depending on the size properties of the window. The snapped mode is deprecated and we do not have set view states but encourage an adaptive layout. Per default all apps can size down to a 500 width, but the app can also opt in for the smallest possible width (previously called snapped mode) at 320 pixels. If you can and it makes sense to add the smallest size you should do so.

clip_image006

Remember with narrow 320:

You can’t programmatically unsnap or resize in Windows 8.1!

Apps default to 500 pixels, you need to opt in for 320 pixels – this is done in the app manifest.

Why 500?

1024 x 768 pixels minimum lets us run two apps side by side- so that is why the ‘magic number’ 500 is used.

Worth thinking about in regards to adaptive layouts:

Which sizes are important for your application and the way you present the data?

How should size effect panning?

How should ratio effect panning?

Does the resizing disrupt the user?

Is the app still touch friendly, how are the touch targets? Make sure you read and follow the touch target guidance (40, 50 or 30x30 pixels and 10 pixels margin in addition)

What does the user expect in that size?

If information is cut for smaller sizes? Does the user know?

Can you support the 320 narrow size? Does it make sense?

GridView and ListView control reflows the content and can be an easy way to adapt to size and ratio changes, make however sure that the datatemplates you use work as you intended them to at all the different sizes and ratios.

Narrow size valuable for scenarios such as:

When the user is monitoring data of some sort

Calculators and converters

Lists (ToDos’, contact catalog)

Apps that work together with other applications

Charms and app size

In 8.1 charms will work on any app size

What happens if I have TryUnsnap in an 8 app on 8.1?

It will return false

Controls

Make sure controls also respond well to changes in windows size

Built in controls usually handle them well, but templates and custom controls often require extra attention

Watch paddings and margins in particular, as well as fixed sizes and text wrapping

Scaling

The OS has a built in option to change scaling plateaus, 140, 140,180%

There are two different scaling options for the OS and for the modern apps

Provide assets for all three scale factors

File-naming convention or folder convention img.scale-100.jpg OR \scale-100\img.jpg

An app can show multiple views but cannot span across several monitors

Code sample: http://code.msdn.microsoft.com/windowsapps/Multiple-Views-Sample-2582fcf3

JS & CSS

In CSS use the sizes and not the states in your media queries.

orientation: portrait lets you know orientation

Windows Store Apps: adapting to sizes instead of states

Comments