As we have demonstrated Windows 8 in many forums, we've tended to use landscape orientation (widescreen) quite a bit. Primarily that's because often we're projecting, and it makes for a better experience that way. Another reason is that many of the early devices (such as the Samsung tablet issued at //build/ with Windows Developer Preview) are widescreen, which is ideal for showing side-by-side applications using the new Snap feature, and that tends to work well in landscape. We have done a ton of work to enable a fast and fluid experience in rotating the screen, and a great experience for people who prefer the portrait orientation, and as you will read, this is heavily influenced by our experience studying what factors contribute to a preference in either orientation. We even did work on our Visual Studio and Expressions tools to make sure developers have great tools support for building applications that work well in both orientations. David Washington on our user experience team authored this post on landscape and portrait screens in Windows 8. He also offers session APP-207T from //build/. --StevenA Windows 8 PC is really a new kind of device, one that scales from small, touch-only tablets to laptops and desktops. While reimagining Windows 8, we designed it to deliver a great experience regardless of the form factor or screen orientation. Tablet devices allow for ergonomic flexibility, allowing you to hold the device in whichever orientation is most comfortable to you and best suits your content.
One of the best things about a tablet is that you can hold it in your hands. It’s personal. Whether you’re reading the Sunday newspaper or browsing through a stack of wedding photos, being able to hold and touch what you interact with ties you emotionally to it. In the digital age, a lot of what is most important is on devices, so when planning Windows 8 we wanted to make sure that the experience could support any orientation that the device could be held in.
As we designed the end-to-end experience on different form factors in Windows 8, we used the following principles:
We spent a considerable number of hours studying people as they used tablet devices in our usability labs as well as in their own homes. We’ve watched people who were already familiar with tablets, and we’ve watched people new to these form factors get started, and we stayed in touch with them for months afterwards. We noted grip styles, body postures, hand movements, and interactions with a variety of apps, device placements, and orientations. We saw a wide spectrum of variability, and we listened to users identify the factors influencing their choices about body and device orientation. Influences on these choices included anthropometric factors like hand size and thumb reach distances, ergonomic factors like repetition and fatigue, hardware factors like accessibility to hardware buttons, environmental factors like where they were using the tablet (e.g. in the kitchen, bedroom, or living room), and physical factors like if they were using it standing, sitting on a couch, or sitting at a desk. The number of combinations was staggering, contributing to the basic conclusion that postures, grips, and orientations change fairly frequently. Simply put, there’s no one way to hold a device and people naturally seek to find a comfortable position and orientation that feels right for what they are doing with the device at the time.
- The experience tailors itself for all form factors: small screens, wide screens, laptops and desktops.
- The experience takes advantage of widescreen formats for multi-tasking and for full-screen video.
- The device can be held and interacted with in the way that is most comfortable.
- Developers have the opportunity to create one app that runs on all views and orientations across form factors with minimal effort.
We initially thought that landscape or portrait orientation was mostly influenced by personal preference. Each person that we watched rotated the device and each expected the device and UI to work with them at that moment. What was surprising was that as people become more familiar with the device and the apps they cared about, the most unique influencer on whether they rotated the device was the type of content on screen. If the content and experience felt better in landscape, people naturally used the app in landscape-mode. If the content and experience felt better in portrait, the app was used in portrait. As an example, most people prefer to watch a movie full-screen in landscape without black bars, while they prefer to read a long article or webpage in portrait, as it requires less scrolling. The preferences we heard people express were heavily influenced by their own sense of whether the app offered a great experience in that orientation. We’ve received questions and feedback about whether Windows 8 is “landscape first” or “portrait first.” Our point of view is that both portrait and landscape orientations are important, and experiences can be great in either orientation. Rather than picking a posture and orientation for optimization, we designed an experience that makes sense regardless of how the device is held, one that feels tailored for the app and its content.
Our goals when looking at landscape and portrait were as follows:
[h=3]Windows in landscape mode[/h]Some people have asked why we showed so much of the Windows 8 user interface in landscape at the //build/ conference. Windows 8 is a reimagining of all PCs, and it’s not just for tablets. It will run on hundreds of millions of laptops and desktops (designed for Windows 7 and new for Windows 8), many of which are and will be landscape-only. Also, in landscape and widescreen, we can offer a multitasking experience (snapping two apps side by side) and full-screen video playback without letterboxing. (In addition, for many of our larger demonstrations we are projecting to huge screens, which look better in landscape).
- You can easily rotate your tablet to best suit your task or ergonomic posture.
- Rotation in Windows is fast and fluid.
- Windows rotates predictably across the system and apps – keeping the user in control.
- Developers can easily build high quality and intentional landscape and portrait layouts, depending on the experiences they want to enable.
We’ve designed Windows 8 to be ergonomically comfortable in all orientations. We found that a comfortable posture for using a tablet in landscape is to hold in both hands and touch the screen with your thumbs. For this reason, we’ve designed the majority of the experience to be easily accessible under your thumbs. We also optimized the system to scroll horizontally, which feels fast and fluid in landscape as well as in portrait mode.
[h=3]Windows in portrait mode[/h]Windows is also designed to work great in portrait mode. We studied extensively scenarios like reading news in the web browser, looking at portrait photos, and scrolling through long lists of email messages, and we folded what we learned into designing a system that works seamlessly across orientations. We tuned the system experiences like the keyboard, file picker, and charms to work great in portrait as well as landscape. We wanted to make it so you don’t need to relearn the system when you switch to portrait mode; it just works.
[h=3]Rotation[/h]Because one of our goals was to make the rotation transition between landscape and portrait feel fast and fluid, teams across Windows put significant work into streamlining the path of this transition, from the accelerometer hardware up through the graphics stack to the app.
An important part of the transition between landscape and portrait is the animation. The animation choreographs the appearance of a smooth transition between the two layout states. The timing of the animation is important as it had to be tuned to feel fast and responsive, while remaining smooth enough to make the transition not feel jarring. The Desktop Window Manager (DWM), which is foundational to the smooth animations in Windows 7 and Windows 8, orchestrates this animation.
We are continually working to make the rotation as stable and predictable as possible, as we know how annoying an over-eager rotation can be. Before the rotation starts, the system waits for the accelerometer to stabilize to prevent accidental rotations. We also wanted to keep you in control of the rotation experience, so that it wouldn’t be triggered accidentally. We introduced a hardware orientation lock to “override gravity” and keep the orientation the way you want it.
[h=3]Different screens[/h]In a future post, we’ll cover in depth how Windows 8 scales to different screens from a developer perspective, but it’s worth talking a little bit about screen size in the context of landscape and portrait orientations. Windows 8 will run on PCs with different sized screens and with different resolutions and different aspect ratios; from 4:3 screens that are closer to square, to widescreen 16:9 screens and everything in between. Our scaling platform enables Windows and apps to seamlessly adapt and reflow content to of these different screens and make use of the space. You can use many of these devices in either portrait or landscape. This diversity of choice is unique to Windows. You can choose the device and the orientation that best suits your needs and usage.
The minimum resolution that Windows 8 Metro style apps can run is 1024x768. We chose this size as it is a common size designed for use on the web, and a strong majority (i.e. 98.8%) of Windows users can run at this resolution or higher (see chart below).
We think it is important to have a minimum resolution for apps, as it allows all developers to design the smallest main view of their app without fragmentation across devices. This minimum also ensures that users do not see broken app layouts due to small screen sizes.
The resolution that supports all the features of Windows 8, including multitasking with snap is 1366x768. We chose this resolution as it can fit the width of a snapped app, which is 320px (also the width designed for many phone layouts), next to a main app at 1024x768 app (a common size designed for use on the web).
These limits will be enforced at runtime. We are breaking from past practices in not providing a workaround for this, given that the main motivation is to make sure Metro style apps are designed to function fully at a specific published resolution. In the Developer Preview we did not have any useful runtime warning beyond the communication on the download site, which we will of course address for the beta. We did notice that a set of folks running on 600x800 virtual machines or 1024x600 Netbooks were inconvenienced and we're sorry about that. It is worth noting that the runrate of 1024x600 machines is very low as screen resolutions on the low end have moved to 1280x800, which supports Metro style apps without snap. This resolution is still a distant second to fully capable resolutions and we expect to see the shift to higher resolution screens continue as new PCs are brought to market.
[h=3]Rotation and developers[/h]In Windows 8, apps power the experience, so we worked to make it as easy as possible for developers to build both landscape and portrait views. As on any other platform, developers can choose which orientations they support for their apps, and how their experience is tailored. We expect most developers will provide a landscape view, as existing laptops and desktops make up the highest number of PCs in the marketplace today. However, if an app’s experience could support both landscape and portrait, supporting the portrait view is just an incremental amount of layout work.
Using the same techniques used to build for the Snap feature or for different sized screens, developers can easily build portrait experiences. HTML5 developers will use CSS media queries to bind their layout style to the orientation of the system, whereas XAML developers will change their layout in response to view state events. In both HTML and XAML, all of the adaptive controls and templates that the platform provides will support both portrait and landscape. Additionally, the system automatically handles the transition animation without any additional effort from developers. If there is content in an app that is best suited for one orientation, developers can prefer one orientation or the other, and the system will keep the app in that orientation (if the device supports it).
For testing apps, Visual Studio 11 and Expression Blend allow developers to test their apps in portrait and landscape mode and on different screen sizes and aspect ratios, even if they don’t have access to a tablet device.
You can choose the device that best suits your preferences, pick it up in the way that is most comfortable, and the experience accommodates that posture. Apps can take advantage of widescreen with multitasking, and still look great in portrait orientation with minimal additional work.
Here’s a short video to show you the landscape-to-portrait transitions in action.
Your browser doesn't support HTML5 video.We look forward to you trying it out!
Download this video to view it in your favorite media player:
High quality MP4 | Lower quality MP4
Thanks,
David
More...