Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8
Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8
Similar a Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8
Similar a Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8 (20)
Presentation on how to chat with PDF using ChatGPT code interpreter
Application Design, Development and User Experience Methodologies for the 2 in 1 Ultrabook™: Creating Compelling Tablet and Laptop Usages on Windows* 8
1. 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. 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. 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. 4
Ultrabook™and 2 in 1 Devices
Dell*XPS 12 Convertible Ultrabook™
Vision
It’ 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. 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
•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
7. 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. 8
Developing a Transformative Experience
•How to detect tablet and laptop modes:
-Requires driver PNP0C60
-Use GetSystemMetricsWindows*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. 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. 10
Providing Transformative UIs
•CalligraGemini*
•Productivity Suite with word processor and presentation capabilities
•Optimizes user experience for 2 in 1 Ultrabook™
-Works seamlessly with keyboard/mouse and touch
11. 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. 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
14. 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. 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
17. 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-8http://msdn.microsoft.com/en-us/library/windows/apps/dn263244.aspx
18. 18
Designing for Multiple Views
•Windows*8 supports multiple orientation views in Laptop and Tablet modes
•Take advantage of SimpleOrientationSensorenumerations
-Windows.Devices.Sensorsnamespace supports landscape, portrait, faceupand facedown views
•Take advantage of DisplayProperties.OrientationChangedevent for device orientation
URL: http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.sensors.simpleorientationhttp://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.display.displayproperties.orientationchanged
19. 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. 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
•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
24. 24
A common, familiar programming model for universal Windows*apps
Universal App Development
25. 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
71. 71
•Build shared UI components
Building adaptive apps for Windows*
72. 72
•Build shared UI components
•Combine them into platform-specific pages
Building adaptive apps for Windows*
73. 73
•Build shared UI components
•Combine them into platform-specific pages
•Adjust layout based on available size & shape
Building adaptive apps for Windows*
74. 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*
105. 105
•Determine desired layout size (in effective pixels)
•Output your asset at that size (Shared project)
Steps to generating assets
106. 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. 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. 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. 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. 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
119. 119
•Ideally, use a vector format
Master at highest practical resolution
120. 120
•Ideally, use a vector format
•Otherwise, bitmaps >= 400% scale
Master at highest practical resolution
121. 121
•Ideally, use a vector format
•Otherwise, bitmaps >= 400% scale
•Export at target scale factors as needed
Master at highest practical resolution
122. 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. 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
139. 139
Use the right words!
•Good: effective resolution / shape / scale factor
•Bad: physical resolution / orientation / DPI
Wrap-up & Call to Action
140. 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. 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
143. 143
Risk Factors
The 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 toor 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 expressedinthese forward-looking statements. Intel presently considers the following to be important factors that could cause actual results to differ materiallyfrom the company’s expectations. Demand for Intel's products is highly variable and, in recent years, Intel has experienced declining orders in thetraditional 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 ordercancellations; 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 oncapacity 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 quicklyto technological developments and to introduce new products or incorporate new features into existing products, which may result in restructuringand 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