2 in 1 and Wide Screens: Orientations

A recent video from UX thought leader Luke Wroblewski briefly touched on the topic of adjusting 2 in 1 designs for wide screens. With 2in1s offering several different orientations in one form factor, it’s important to understand how to equip the user to get the most from all of them. Watch below:

Developers who program for different devices  know that the 2 in 1 devices have a number of considerations unique to the form factor. These considerations can have an influence on resolution, as the screen on a 2 in 1 device can be used in both the traditional laptop move, or, by utilizing the unlocking pivots, it can also be used in a tablet mode.

The form factors of smartphones, tablets, and now PCs (2 in 1’s in particular) lend themselves towards using different screen orientations, depending on how we want to use the app or program. The posture of how we hold these devices is a natural fit for using our fingers as the input methods. For example, we hold a smartphone in one hand and use our thumbs to scroll past content. We hold a tablet in both hands and use our thumbs in tandem with our index fingers to flick, pinch, or select targets. The movements are natural, relaxed, and almost on a sub-conscious level. This is what good design aims for: to make the experience as unified as possible with as little interference as possible.

When we sit down to use our tablets, there are generally two basic orientations that really matter, and that would be the traditional landscape or horizontal orientation, vs. the vertical or portrait orientation. Most of the time when we’re using a tablet, we’re going to be using horizontal mode, and the impact of this usage is seen in how developers design for different aspect ratios. Luke points out that when developers started designing apps, standard definition monitors were the de rigueur standard, but today we’ve got HD, full HD, ultra HD, and pretty soon we’re going to be moving full-tilt into 4k. We’re gradually moving to more and more widescreen aspect ratios over the years.

So what impact does this move towards different-sized screens actually have on our devices? When you deal with a screen that’s both wide and short that’s a very different aspect ratio than a screen that’s tall and narrow. Developers must adjust their designs appropriately to fit the difference.

In the video, Luke points out that the difference in form factor screens is really pronounced when you see them side by side. These screens are wide, but they’re on short devices. He gives two examples to illustrate this concept that can be applied broadly to designing across form factors.

First, by condensing information that the user is looking at as the screen gets shorter, developers are actually removing white space in order to make things fit more smoothly. In another example with a sample call to action, he points out that it is merely “picked up” as the space expands and retracts. On the visible screen, when the screen is shorter, these techniques may seem quite simple (and in theory they are), but they actually can pay some pretty serious dividends with minimum effort.

On a wide and short screen, one thing developers can do is tighten up anything that is removed from spacing so more content can fit, the information is clearly conveyed, and more immediately visible to the user. Another technique that Luke points out is that moving important actions – actions that drive the essential purpose of the page – up to the top serve to engage users. Basically, designs need to account for transitions; tighten up to deal with less vertical space, and make sure that the primary calls to action are visible and actionable across the different orientations available.

recent case study on Krita Gemini explains extensively how developers should consider multiple scenarios and form factors while modifying their applications to take advantage of and conform to 2 in 1s. Intel has been supporting the work on Krita Gemini as a focus point for the new generation of Intel-powered 2-in-1 devices which can switch between desktop and touch mode. During development of this technology, Intel commented, "Krita Gemini is a brilliant example of how developers should utilize the option of a convertible device by using both tablet and desktop mode. The switching between the two modes works seamlessly." For example:

“Just as there are multiple ways that the 2 in 1 can transform between laptop and tablet modes, software can be designed in different ways to respond to the transformation. In some cases it may be desirable to keep the UI as close to the laptop mode as possible, while in other cases you may want to make more significant changes to the UI. For example, Intel helped KO GmBH combine the functionality of their Krita Touch application with their popular Krita open source painting program (laptop application) in the new Krita Gemini application. The Krita project is an active development community, welcoming new ideas and maintaining quality support. The team added the mechanisms required to provide seamless transition from the laptop “mouse and keyboard” mode to the touch interface for tablet mode.”

If you’re interested in potentially bringing your innovative 2 in 1 designs to a wider audience, you’ll want to check out the 2014 Intel® Level Up Game Demo contest. The official contest page states that for 2014, the theme to work with is adaptability: “Create an innovative new game that takes advantage of the touch screen and convertible features of the 2 in 1 for a chance to win thousands in cash, industry recognition, and the opportunity to distribute your game on Steam!” The deadline to enter is June 2, 2014, so it’s coming up fast. Learn more by visiting the UX Zone on IDZ



For more complete information about compiler optimizations, see our Optimization Notice.