Universal Windows Applications Across Multiple Form Factors Devices: From 4 to 82 Inches:
Editor’s note: The following post was written by Hardware Interaction Design and Development MVP Gian Paolo Santopaolo
Universal Windows Applications Across Multiple Form Factors Devices: From 4 to 82 Inches:
From the entry on the market of Windows 8 on October 26th 2012 until now the number of devices equipped with the new operating system is growing rapidly to some hundred millions.
From that date until today some other important concepts comes out: Windows 8.1 merging with Windows Phone 8.1, the Xbox ecosystem, coming up to July 22th 2014 when, Satya Nadella during the July 22 Microsoft's Q4 fiscal 2014, announced:
"We will streamline the next version of Windows from three operating systems into one single converged operating system for screens of all sizes,"
Well, for a sharp Windows developer this is where Microsoft is going since the come out of Windows 8, even if they didn’t officially announced it, for instance, just think to operating systems codenames: Win RT, Win PRT, WinXRT, and today this officially was confirmed.
What this really means for a Windows UI developer? That it’s no longer enough to be just a phone developer or just a pc developer or just a tablet developer. And when you target you application you have also to consider the number of large multitouch devices that are running on Windows.
Indeed, with a parallel growth factor of the standard device equipped with Windows, multitouch large devices (more than 30’’) that come on the market are growing every day: Lenovo, 3M, Displax, Frog Designm many other and our beloved Perceptive Pixel by Microsoft
Returning to the question - What this really means for a Windows UI developer? This means that if you want to be successfully you need to address all of these devices, the large one included.
Building adaptive apps for Windows from 4’’ to 82’’
On one hand it could be a really simple topic to talk about: we can say if my device has a bigger screen and probably has more pixels I can show more contents to the user
Even if this statement is true it hides a lot of complexity so I’ll walk through what some of these complexity are and why thinking in this simplicity terms doesn’t actually works really well when you develop across multiple for factors.
What we what to think about is it the size of my application nor its resolution, that means positioning UI elements on the screen
The most important thing in layouting an application is thinking about the general shape of your application:
- Tall and thin
- Short and wide
Application layout: Tall and thin
Application layout: Short and wide
Lots of dev will think to orientation: is my device portrait, is my device landscape in a pc or laptop, 2 or 3 app side by side. Orientation doesn’t really matter we worry of the overall shape of the app
But how to achieve that? Well, pretty simple (at least the concept) by using ViewBox and Visual States. I will cover this argument in a separate blog post with some full code.
Building adaptive apps for multitouch multiuser device in a collaborative environment.
In a multitouch multiuser enviroments the goal should be to enables developers and designers to deliver amazing, social, and highly interactive experiences to their customers. People can use the 360° degree interface from all sides for face-to-face collaboration, cooperation, and building trust. It’s intimate enough to facilitate the close back-and-forth of a consultation and makes intuitive sense to people, young and old. Touch. Push. Pull. Turn. Place an object on the screen. Surface creates new opportunities to socially interact with people and content.
Create experiences for several people to use at the same time
Make sure everyone can use content, avoid facing it toward only one side of the display. arrangement of content, which users can scroll horizontally. These visualizations are implemented as separate controls and (in the case of LibraryContainer) as different visualizations of the same control.
Enable people to change the direction content faces. Don’t lock content to a particular screen direction
Use the ScatterView control provided in the Microsoft Surface 2.0 SDK to quickly enable 360° degree experiences.
Use 180° degree application design for vertical deployments
Orient new content and interface elements toward the bottom of the screen.
Make sure new content appears right-side up.
Quand si passa almolto grande collaborative entra in gioco lo scatterview
Implementing the scatterview on Windows 8
The ScatterView control is the control that you should use when you have one or more UI elements that you want users to be able to move, rotate, or resize freely within a fixed area.
A ScatterView control displays freeform content where multiple users can sort, move, resize, rotate, and organize content simultaneously. A ScatterView control includes the scatter area and multiple ScatterViewItem controls. You can move, rotate, or scale each ScatterViewItem item individually or simultaneously.
ScatterView provides a simple way to create applications that enhance the Microsoft Surface experience. The ScatterView and ScatterViewItem controls provide an empty shell that you can place content into. This content can be as simple as a static image or video or as complex as a collection of multiple controls, such as a control panel of buttons, check boxes, and sliders. Scattered items promote a more social and freeform interaction and create a more approachable feel, because the messy appearance is more human, forgiving, and playful in comparison to the precise feel of grids and tables.
Example of multitouch multiuser application using ScatterView
The ScatterView and the Library control are parte of the Surface SDK 2.0 that point on Framework 4.0 and Windows 7.
Unfortunately there is no porting of these control on Windows Runtime so I decided to rei mplemnt it from stretch.
On Codeplex you can find the Scatteview in for of an attached behavior- http://multitouch.codeplex.com/
Use the appropriate control to group items
The library controls (LibraryStack, LibraryBar, and LibraryContainer) each represent a container holding a collection of objects that have both an order and a category.
LibraryStack and LibraryBar differ in their visualizations. A LibraryStack control is a virtual stack of objects, one placed on top of another, which users can sort through and reorder. A LibraryBar control is a horizontal
An example of a LibraryStack control
An example of a LibraryBar control
LibraryStack (or the stack view of a LibraryContainer control) is basically a collapsed view of LibraryBar. In all cases, you can fully manipulate the controls. Users can move, rotate, resize, and flick them, and they can move individual pieces of content in or out of them.
The LibraryStack, LibraryBar and LibraryContainer controls are each suitable for organizing groups of content. This organization is particularly useful when there is too much content that might make the canvas overly cluttered and unusable. If meta-information (such as content types and dates) is available, you can use that information to easily organize the content.
For example, if users download or import a lot of content, you could have it all appear first within a library control. In addition, users can begin to orient and play with the first set of downloaded content while the rest continues to load.
Users can easily change the vertical order of content in a LibraryStack control. To move the top item to the bottom of the stack, the user flicks it. To move the bottom item to the top of the stack, the user can simply touch the protruding portion.
Moving an item to the bottom of the stack
When you use a LibraryContainer control, users can view the content as a stack or as a bar. The default view is the stack, but users can change to a bar view by touching the view button on the bottom of the control. In the bar view, more content is visible at one time, and it is organized by category and labeled accordingly. In the following figure, the categorization of stack content is used to create a list sorted in chronological order.
Always give visual feedback to the user
This is one of the Microsoft design language principle: Be fast and fluid Design for touch responsive intuitive interaction, immersive and compelling. Delight with motion. Life is mobile.
Before Windows Runtime this was one of the biggest challenge for a UX developer. I still remember a statement of one of my colleague: We work weeks for creating milliseconds animations hoping user will notice it.
Today it’s kind different, the Windows Runtime controls for XAML include certain types of animations as built-in behaviors that come from an animation library. Controls such as the ListView control, the FlipView control, the Flyout control, and the AppBar control all use these animations as built-in behavior. By using these controls in your app, you can get the animated look and feel without having to program it yourself.
Animations from the Windows Runtime animation library provide these benefits:
- Motions that align to animation principles
- Fast, fluid transitions between UI states that inform but do not distract the user
- Visual behavior that indicates transitions within an app to the user
For example, when the user adds an item to a list, instead of the new item instantly appearing in the list, the new item animates into place. The other items in the list animate to their new positions over a short period of time, making room for the added item. The transition behavior here makes the control interaction more apparent to the user.
The animation library does not provide animations for every possible scenario. There are cases where you might wish to create a custom animation in XAML. For more info, see Storyboarded animations.
For example code using the APIs discussed in this topic, see the XAML animation sample, XAML personality animations sample, or Quickstart: Animating your UI using library animations.
The you tube sample
To better describe this artibble I just created a sample that will target all the devices you will find all the source code on MSDN Code Gallery.
This sample has some point of interest, first of all is an application that will target, with some leack (just read the next chapter things to do)
Things to do:
Component I’ve developed at the moment is just an attached behavior. It works but it needs some more improvements for being used in the everyday life of devs and to work like a charm.
First of all, starting from the behavior, a component should be designed with full template and binding support. The binding support should be designed to work in an MVVM environment also.
Base entrance animation for items added, via binding also, that should be easily redesigned in case of need: this means everything should be done in the base template.
NUI drag &drop enabled list of items
Component itself, as said, should enable databinding but we also need some sort of components
- Kinect Integragion
- Voice to command integration
- Hand writing integration
Hardware Related features integration
It would be great to have a pluggable stack where all hardware vendor can integrate their own functionalities such us the tap over the border of the PPI by Microsoft.
From 4 to 40 inches: Developing Windows Applications across Multiple Form Factors
LibraryBar, LibraryContainer, and LibraryStack Controls
Animating your UI (XAML)
About the author
Gian Paolo designs and develops NUI user experiences for multitouch devices with main focus on Microsoft PixelSense and Surface. He researches and creates prototypes for tactile and gesture recognition solutions with particular attention to the interaction between these two. For over a decade dealing with architecture, design and development of enterprise applications with extreme scalability requirements by implementing the latest technologies. Read his blog about Microsoft Surface and .NET or follow him on Twitter
About MVP Mondays
The MVP Monday Series is created by Melissa Travers. In this series we work to provide readers with a guest post from an MVP every Monday. Melissa is a Community Program Manager, formerly known as MVP Lead, for Messaging and Collaboration (Exchange, Lync, Office 365 and SharePoint) and Microsoft Dynamics in the US. She began her career at Microsoft as an Exchange Support Engineer and has been working with the technical community in some capacity for almost a decade. In her spare time she enjoys going to the gym, shopping for handbags, watching period and fantasy dramas, and spending time with her children and miniature Dachshund. Melissa lives in North Carolina and works out of the Microsoft Charlotte office.