Date post: | 05-Aug-2015 |
Category: |
Technology |
Upload: | intel-software |
View: | 82 times |
Download: | 0 times |
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
• 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
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
• 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
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
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
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
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://msdn.microsoft.com/en-us/library/windows/apps/dn263244.aspx
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
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
• 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
21
Agenda
22
Universal App Development
23
Universal App Development
24
A common, familiar programming model for universal Windows* apps
Universal App Development
25
• 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
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
Physical Size & Shape
Viewing Distance
32
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
33
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
34
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
35
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
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
Physical Size & Shape
42
Layout Assets
Physical Size & Shape
Viewing Distance
43
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
44
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
45
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
46
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
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
Far-away objects appear smaller than they are
~40” screen at 10 feet
54
Far-away objects appear smaller than they are
~40” screen at 10 feet
~4” phone at 1 foot
55
Far-away objects appear smaller than they are
~40” screen at 10 feet
~4” phone at 1 footSame angle
of view
56
Layout Assets
57
Layout Assets
Physical Size & Shape
58
Layout Assets
Physical Size & Shape
Viewing Distance
59
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
60
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
61
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
62
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
63
~40” screen at 10 feet
~4” phone at 1 foot
64
~40” screen at 10 feet
~4” phone at 1 footSame angle
of view
65
~40” screen at 10 feet
Same effective
resolution
~4” phone at 1 foot
66
~40” screen at 10 feet
Same effective
resolution
~4” phone at 1 foot
X × Y effective pixels X × Y effective pixels
67
Effective resolution embraces viewing distance
~40” screen at 10 feet
Same effective
resolution
~4” phone at 1 foot
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
Building adaptive apps for Windows*
72
• Build shared UI components
• Combine them into platform-specific pages
Building adaptive apps for Windows*
73
• Build shared UI components
• Combine them into platform-specific pages
• Adjust layout based on available size & shape
Building adaptive apps for Windows*
74
• Build shared UI components
• Combine them into platform-specific pages
• Adjust layout based on available size & shape
• Clean separation of view and model won’t hurt…
Building adaptive apps for Windows*
75
Layout Assets
76
Layout Assets
Physical Size & Shape
77
Layout Assets
Physical Size & Shape
Viewing Distance
78
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
79
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
80
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
81
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
82
83
84
85
86
87
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
Physical Size & Shape
92
Layout Assets
Physical Size & Shape
Viewing Distance
93
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
94
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
95
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
96
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
97
98
2× as dense
99
Relative density (not DPI) is important
Also known as “scale factor” or “resolution scale”
2× as dense
100
101
102
Ignore this setting!
103
Steps to generating assets
104
• Determine desired layout size (in effective pixels)
Steps to generating assets
105
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
Steps to generating assets
106
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
• Multiply the layout size by 2.4
Steps to generating assets
107
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
• Multiply the layout size by 2.4
• Output your asset at that size (Phone-only)
Steps to generating assets
108
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
• Multiply the layout size by 2.4
• Output your asset at that size (Phone-only)
• View the result on target devices- Emulator / simulator insufficient for asset verification
Steps to generating assets
109
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
• Multiply the layout size by 2.4
• Output your asset at that size (Phone-only)
• View the result on target devices- Emulator / simulator insufficient for asset verification
• If it looks good, you’re done!
Steps to generating assets
110
• Determine desired layout size (in effective pixels)
• Output your asset at that size (Shared project)
• Multiply the layout size by 2.4
• Output your asset at that size (Phone-only)
• View the result on target devices- Emulator / simulator insufficient for asset verification
• If it looks good, you’re done!
• If not, try an additional scale factor (e.g., 1.4 or 1.8)
Steps to generating assets
111
Layout Assets
112
Layout Assets
Physical Size & Shape
113
Layout Assets
Physical Size & Shape
Viewing Distance
114
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
115
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
116
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
117
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
118
Master at highest practical resolution
119
• Ideally, use a vector format
Master at highest practical resolution
120
• Ideally, use a vector format
• Otherwise, bitmaps >= 400% scale
Master at highest practical resolution
121
• Ideally, use a vector format
• Otherwise, bitmaps >= 400% scale
• Export at target scale factors as needed
Master at highest practical resolution
122
• Ideally, use a vector format
• Otherwise, bitmaps >= 400% scale
• Export at target scale factors as needed
• Don’t forget about the detail level!
Master at highest practical resolution
123
• Ideally, use a vector format
• Otherwise, bitmaps >= 400% scale
• Export at target scale factors as needed
• Don’t forget about the detail level!
• Don’t worry if you only have a low-res asset
Master at highest practical resolution
124
Layout Assets
125
Layout Assets
Physical Size & Shape
126
Layout Assets
Physical Size & Shape
Viewing Distance
127
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
128
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
129
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
130
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
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?
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
135
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
136
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
137
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
138
Wrap-up & Call to Action
139
Use the right words!• Good: effective resolution / shape / scale factor
• Bad: physical resolution / orientation / DPI
Wrap-up & Call to Action
140
Use the right words!• Good: effective resolution / shape / scale factor
• Bad: physical resolution / orientation / DPI
Architect for a flexible layout• Prefer component parts vs. monolithic pages
• Let the layout system work for you
Wrap-up & Call to Action
141
Use the right words!• Good: effective resolution / shape / scale factor
• Bad: physical resolution / orientation / DPI
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
Wrap-up & Call to Action
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.
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