application design, development and user experience methodologies for the 2 in 1 ultrabook™:...

Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8

Meghana Rao – Developer Evangelist, Intel Corporation

Doug Holland – Architect Evangelist, Microsoft Corporation

MOBS005

2

• Introduction to 2 in 1 Ultrabook™

• Transformational app development guidelines on 2 in 1 Ultrabooks –winning the tablet and laptop usages

• Universal Windows* 8 app development methodologies

• From 4 to 40 inches: Developing Windows Applications across Multiple Form Factors

Agenda

3





Agenda

4

Ultrabook™ and 2 in 1 Devices

Dell* XPS 12 Convertible Ultrabook™

VisionIt’ s a tablet when I want it.

It’ a PC when I need it.All day. Every day.

Sony* VAIO* Duo 11 Ultrabook

Touch, Stylus and Mouse enabled for

Desktop and Tablet usages

5

2 in 1 Device Variants

Form Factor Tablet Mode Laptop Mode Image of Model

Folder 181⁰-360⁰ 0⁰-180⁰

Ferris Wheel Screen facing outwards Screen facing the

keyboard

Slider Screen covering any part of keyboard Screen not covering any

part of keyboard

Swivel Closed lid position with screen facing up

OR

Stand mode with screen facing up

Any other positions

Detachable Screen detached from keyboard

OR

Keyboard attached with screen not

facing the keyboard

Attached with screen

facing keyboard

Dual Screen Closed lid position with cover facing up

OR

Stand mode with cover / screen facing up

Screen facing the keyboard

6





6

Agenda

7

2 in 1 Mode Aware App Demos

• What does a transformative experience mean?

- Supporting multiple device usage models in one application

Provide different UIs for laptop and tablet modes

Provide a seamless use of multiple inputs (touch and pen for tablet mode; keyboard, mouse and touch for laptop mode)

Provide touch overlays for existing Windows* 7 apps

• How do I implement the transformative experience in my app?

8

Developing a Transformative Experience

• How to detect tablet and laptop modes:

- Requires driver PNP0C60

- Use GetSystemMetrics Windows* 8 API

• Limitations

- Driver support currently not available on all 2 in 1 platforms

- API works in Windows 8 Desktop mode only

• Workarounds

- Provide a manual switch to swap between laptop and tablet mode functionalities

• Resources:• https://software.intel.com/en-us/articles/detecting-slateclamshell-mode-screen-

orientation-in-convertible-pc

• https://software.intel.com/en-us/articles/krita-gemini-twice-as-nice-on-a-2-in-1

https://software.intel.com/en-us/articles/detecting-slateclamshell-mode-screen-orientation-in-convertible-pc

https://software.intel.com/en-us/articles/krita-gemini-twice-as-nice-on-a-2-in-1

9

Providing Transformative UIs

• High performance multi-track audio editing and recording software

• Optimizes user experience for 2 in 1 Ultrabook™

- Adds touch

- Provides distinct UIs for laptop and tablet usages

- Implements manual and automatic switches from laptop to tablet modes

10

Providing Transformative UIs

• Calligra Gemini*

• Productivity Suite with word processor and presentation capabilities

• Optimizes user experience for 2 in 1 Ultrabook™

- Works seamlessly with keyboard/mouse and touch

11

Manage Multiple Input Types for 2 in 1

• Provide a seamless transition between input types- Allow for touch, keyboard and mouse on laptop mode and support touch, pen

on tablet mode

Use Windows* 8 methods to reuse code across all inputs

- Identify the right type of input for each use case in the application

• Resources:- Touch and Stylus Application: https://software.intel.com/en-us/articles/mixing-

stylus-and-touch-input-on-windows-8

- Feature Detection Application: https://software.intel.com/en-us/articles/programming-considerations-for-sensors-on-ultrabook-notebooks-convertibles-and-tablets

https://software.intel.com/en-us/articles/mixing-stylus-and-touch-input-on-windows-8

https://software.intel.com/en-us/articles/programming-considerations-for-sensors-on-ultrabook-notebooks-convertibles-and-tablets

12

Implement Touch-Overlays

• Enhance UX of Windows* 7 apps on Windows 8 based 2 in 1 devices

• Build customized virtual controllers with GestureWorks* GamePlay

• Resources:

• https://software.intel.com/en-us/articles/gameplay-touch-controls-for-your-favorite-games

13

Mobile App Development Guidelines for 2 in 1s

14

Rethink Application Design for 2 in 1s

Include new capabilities:

• Multi-Touch: Touch targets and Gestures

• Device Motion

- State detection

- Portrait vs. Landscape

- Device tilt

15

Rethink Navigation for 2 in 1 s

• Challenge conventional navigation schemas- Controls at the top corner may not be ideal for device usage

• Identify touch targets for tablet and laptop usages

• Consider human ergonomics

• Adjust placement of controls

Interaction Reading

16

URL: http://software.intel.com/en-us/articles/developing-for-high-dpi-applications-for-windows-8

http://msdn.microsoft.com/en-us/library/windows/apps/dn263244.aspx

Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

Adjust 2 in 1 Designs for Different Screen Sizes

http://software.intel.com/en-us/articles/developing-for-high-dpi-applications-for-windows-8


http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

17

Designing for Multiple Resolutions

• Scale controls to fit screen size- ViewBox control in XAML and WinJS

• Take advantage of larger screen area- Display more content

- GridView or ListView controls for automatic scaling

• Use different image resolutions to adapt to screen resolutions

• Dynamically determine resolution- Windows.Graphics.Display.DisplayResolution class

URL: http://software.intel.com/en-us/articles/developing-for-high-dpi-applications-for-windows-8


http://software.intel.com/en-us/articles/developing-for-high-dpi-applications-for-windows-8

18

Designing for Multiple Views

• Windows* 8 supports multiple orientation views in Laptop and Tablet modes

• Take advantage of SimpleOrientationSensor enumerations- Windows.Devices.Sensors namespace supports landscape, portrait, faceup

and facedown views

• Take advantage of DisplayProperties.OrientationChanged event for device orientation

URL: http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.sensors.simpleorientation

http://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.display.displayproperties.orientationchanged

http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.sensors.simpleorientation

http://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.display.displayproperties.orientationchanged

19

Accounting for Virtual Keyboards

An undocked or detached 2 in 1 in tablet mode requires a virtual keyboard

• Position primary controls in the visible area to account for the keyboard space

• Reduce number of actions requiring typing

- Provide autocomplete for text fields

- Allow for item selection through a list

- Provide tag inputs

20

Key Takeaways

• Understand how your users use the application

• Design for Desktop and Tablet form factors

• Design for different orientations

• Design for various screen sizes

• Design for touch, stylus and mouse

21





21

Agenda

22

Universal App Development

23


24

A common, familiar programming model for universal Windows* apps


25





Agenda

26

bigger screen more pixels more content

27

bigger screen more pixels more content

higher dpi more pixels nicer graphics

28

Layout

Positioning UI objects on the screen.

Assets

Images, video and other graphics.

Layout vs. Assets

29

Layout Assets

30

Layout Assets

Physical Size & Shape

31

Layout Assets


Viewing Distance

32

Layout Assets


Viewing Distance

Effective Resolution

33

Layout Assets


Viewing Distance


Detail Level

34

Layout Assets


Viewing Distance


Detail Level

Scale Factors

35

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

36

40”

30”

24”

18”14”

10”

8”

6”

4”

to scale

37

40”

30”

24”

18”14”

10”

8”

6”

4”

to scale

Size (not resolution) matters

38

widetall

square

39

Shape (not orientation) matters

widetall

square

40

Layout Assets

41

Layout Assets


42

Layout Assets


Viewing Distance

43

Layout Assets


Viewing Distance


44

Layout Assets


Viewing Distance


Detail Level

45

Layout Assets


Viewing Distance


Detail Level

Scale Factors

46

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

47

If a 4” phone is 800 pixels wide, does that mean a 40” monitor is 8,000?

48

4K TV:3840 x 2160

But I just “upgraded”to a 4K TV!

If a 4” phone is 800 pixels wide, does that mean a 40” monitor is 8,000?

49

that’s an eye…

50

xy

that’s an eye…

51

xy

2x

2y

θ

that’s an eye…

52

Far-away objects appear smaller than they are

xy

2x

2y

θ

that’s an eye…

53

~4” phone at 10 feet


~40” screen at 10 feet

54



~4” phone at 1 foot

55



~4” phone at 1 footSame angle

of view

56

Layout Assets

57

Layout Assets


58

Layout Assets


Viewing Distance

59

Layout Assets


Viewing Distance


60

Layout Assets


Viewing Distance


Detail Level

61

Layout Assets


Viewing Distance


Detail Level

Scale Factors

62

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

63



64


~4” phone at 1 footSame angle

of view

65


Same effective

resolution


66


Same effective

resolution


X × Y effective pixels X × Y effective pixels

67

Effective resolution embraces viewing distance


Same effective

resolution


X × Y effective pixels X × Y effective pixels

68

40”

30”

24”

18”14”

10”

8”

6”

4”

to scale

Size (not resolution) matters

69

2560 x 1440

1920 x 1080

1366 x 768450 x 800

to scale

Effective resolution (not size) matters

384 x 683

70

Building adaptive apps for Windows*

71

• Build shared UI components


72


• Combine them into platform-specific pages


73



• Adjust layout based on available size & shape


74



• Adjust layout based on available size & shape

• Clean separation of view and model won’t hurt…


75

Layout Assets

76

Layout Assets


77

Layout Assets


Viewing Distance

78

Layout Assets


Viewing Distance


79

Layout Assets


Viewing Distance


Detail Level

80

Layout Assets


Viewing Distance


Detail Level

Scale Factors

81

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

88

dvd_large.png dvd_small.png

89

Effective asset size determines detail level

dvd_large.png dvd_small.png

90

Layout Assets

91

Layout Assets


92

Layout Assets


Viewing Distance

93

Layout Assets


Viewing Distance


94

Layout Assets


Viewing Distance


Detail Level

95

Layout Assets


Viewing Distance


Detail Level

Scale Factors

96

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

98

2× as dense

99

Relative density (not DPI) is important

Also known as “scale factor” or “resolution scale”

2× as dense

102

Ignore this setting!

103

Steps to generating assets

104

• Determine desired layout size (in effective pixels)


105


• Output your asset at that size (Shared project)


106



• Multiply the layout size by 2.4


107




• Output your asset at that size (Phone-only)


108





• View the result on target devices- Emulator / simulator insufficient for asset verification


109






• If it looks good, you’re done!


110






• If it looks good, you’re done!

• If not, try an additional scale factor (e.g., 1.4 or 1.8)


111

Layout Assets

112

Layout Assets


113

Layout Assets


Viewing Distance

114

Layout Assets


Viewing Distance


115

Layout Assets


Viewing Distance


Detail Level

116

Layout Assets


Viewing Distance


Detail Level

Scale Factors

117

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

118

Master at highest practical resolution

119

• Ideally, use a vector format


120


• Otherwise, bitmaps >= 400% scale


121



• Export at target scale factors as needed


122




• Don’t forget about the detail level!


123




• Don’t forget about the detail level!

• Don’t worry if you only have a low-res asset


124

Layout Assets

125

Layout Assets


126

Layout Assets


Viewing Distance

127

Layout Assets


Viewing Distance


128

Layout Assets


Viewing Distance


Detail Level

129

Layout Assets


Viewing Distance


Detail Level

Scale Factors

130

Layout Assets


Viewing Distance


Detail Level

Scale Factors

Mastering

131

Where’s the code?

132

Where’s the code?

133

Where’s the code?

Property Description

ResolutionScale Scale factor (enum) – Windows

RawPixelsPerViewPixel Scale factor (double) – Windows Phone

RawDpiX, RawDpiY Ignore unless measuring real-world objects (ruler, hardware, etc.)

LogicalDpi Avoid unless working with Direct2D or legacy code that assumes 96 DPI

134

Where’s the code?






135

Where’s the code?






136

Where’s the code?






137

Where’s the code?






138

Wrap-up & Call to Action

139

Use the right words!• Good: effective resolution / shape / scale factor

• Bad: physical resolution / orientation / DPI


140



Architect for a flexible layout• Prefer component parts vs. monolithic pages

• Let the layout system work for you


141



Architect for a flexible layout• Prefer component parts vs. monolithic pages

• Let the layout system work for you

Focus on the right set of assets• Start with high-resolution masters

• Generate only the scale factors you need (eg, 100% and 240%)

• Ensure detail level is appropriate


142

Legal DisclaimerINFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS.Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information.The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request.Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order.Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-4725, or go to: http://www.intel.com/design/literature.htm

Intel, Ultrabook, Look Inside and the Intel logo are trademarks of Intel Corporation in the United States and other countries.

Other names and brands may be claimed as the property of others.Copyright ©2014 Intel Corporation.

http://www.intel.com/design/literature.htm

143

Risk FactorsThe above statements and any others in this document that refer to plans and expectations for the second quarter, the year and the future are forward-looking statements that involve a number of risks and uncertainties. Words such as “anticipates,” “expects,” “intends,” “plans,” “believes,” “seeks,” “estimates,” “may,” “will,” “should” and their variations identify forward-looking statements. Statements that refer to or are based on projections, uncertain events or assumptions also identify forward-looking statements. Many factors could affect Intel’s actual results, and variances from Intel’s current expectations regarding such factors could cause actual results to differ materially from those expressed in these forward-looking statements. Intel presently considers the following to be important factors that could cause actual results to differ materially from the company’s expectations. Demand for Intel's products is highly variable and, in recent years, Intel has experienced declining orders in the traditional PC market segment. Demand could be different from Intel's expectations due to factors including changes in business and economic conditions; consumer confidence or income levels; customer acceptance of Intel’s and competitors’ products; competitive and pricing pressures, including actions taken by competitors; supply constraints and other disruptions affecting customers; changes in customer order patterns including order cancellations; and changes in the level of inventory at customers. Intel operates in highly competitive industries and its operations have high costs that are either fixed or difficult to reduce in the short term. Intel's gross margin percentage could vary significantly from expectations based on capacity utilization; variations in inventory valuation, including variations related to the timing of qualifying products for sale; changes in revenue levels; segment product mix; the timing and execution of the manufacturing ramp and associated costs; excess or obsolete inventory; changes in unit costs; defects or disruptions in the supply of materials or resources; and product manufacturing quality/yields. Variations in gross margin may also be caused by the timing of Intel product introductions and related expenses, including marketing expenses, and Intel's ability to respond quickly to technological developments and to introduce new products or incorporate new features into existing products, which may result in restructuring and asset impairment charges. Intel's results could be affected by adverse economic, social, political and physical/infrastructure conditions in countries where Intel, its customers or its suppliers operate, including military conflict and other security risks, natural disasters, infrastructure disruptions, health concerns and fluctuations in currency exchange rates. Intel’s results could be affected by the timing of closing of acquisitions, divestitures and other significant transactions. Intel's results could be affected by adverse effects associated with product defects and errata (deviations from published specifications), and by litigation or regulatory matters involving intellectual property, stockholder, consumer, antitrust, disclosure and other issues, such as the litigation and regulatory matters described in Intel's SEC filings. An unfavorable ruling could include monetary damages or an injunction prohibiting Intel from manufacturing or selling one or more products, precluding particular business practices, impacting Intel’s ability to design its products, or requiring other remedies such as compulsory licensing of intellectual property. A detailed discussion of these and other factors that could affect Intel’s results is included in Intel’s SEC filings, including the company’s most recent reports on Form 10-Q, Form 10-K and earnings release.

Rev. 4/15/14

application design, development and user experience methodologies for the 2 in 1 ultrabook™:...

Technology

tablet mode keyboard

tablet usages

laptop usagesuniversal

tablet modesprovide

creatingcompelling tablet

laptop modes

keyboard screen

cover screen