Design Considerations & User Experience Guidelines for Mobile Tablet Applications Arnie Lund Director, User Experience David Hale Developer Experience Lead Microsoft Mobile Platforms Business Unit

Overview Pen as a Pointing Device Pen as an Input Device Handwriting Recognition Ink Data and Ink Interop Readability Mode Switching Hardware Mobility

Mobile/Tablet User Research Roadmap of the usability story thus far

Fundamental Design Considerations Know thy user and you are NOT thy user. Know how and why your app is going to be used Don’t forget the basics

Pen as a Pointing Device Guideline –Group related controls to avoid unnecessary motion by user Guideline –Larger targets needed due to lack of motor precision by user The pen is an absolute pointer that touches the screen. User must move hand to point.

Pen as a Pointing Device (2) Guidelines –Ensure state changes do not occur under the hand. –Respect user handedness setting by checking SystemParametersInfo()

Pen as an Input Device: Ink Attributes Guideline –Make it “feel like” paper Don’t block during input. –Pen size Default ink thickness: 1 pixel on 120 dpi screen

Pen as an Input Device: Ink Surfaces/Cursors Guideline –Distinguish Surfaces Use different cursors for input vs. pointing –Make cursors symmetrical Makes target clear

Pen as an Input Device: Ink Selection (1) Guideline –Provide tap selection Stroke or word based Use InkDivider API

Pen as an Input Device: Ink Selection (2) Guideline –Use lasso or rectangle selection Selection should be independent of –Ink color –Page color –User settings (high contrast)

Pen as an Input Device: Pen Tools, Erase, Editing Changing ink color likely to be more frequent than ink thickness. Guideline <= 3 taps to change a pen Provide pen selection interface

Pen as an Input Device: Mode Switching (1) Guideline –Use explicit mode switching unless implicit is clear Guideline –Provide cursor feedback for modes

Pen as an Input Device: Mode Switching (2) Guideline –Provide shortcut menus for modes

Pen as an Input Device: No Keyboard Guideline –Provide an Alternative to Keyboard Shortcuts: Gestures. Example –InkShortcut control sample on Tablet MSDN Developer Center

Pen as an Input Device: Speech Input & Accessibility Guideline –Support Microsoft Active Accessibility (MSAA) Also helps with TIP correction support

Handwriting Recognition: Ink as Ink Guideline –Leave ink as ink unless you have a good reason not to.

Handwriting Recognition: Ink as Ink Guideline –Delay recognition. Do not interrupt the real time inking experience Attend David’s Advanced Recognition talk tomorrow for code details.

Handwriting Recognition: Use InkAnalysis/Divider Guideline –Improve recognition with all the tools available in the platform InkDivider Factoids and InputScopes –Context Tagging Tool, Factoid property, or SetInputScope APIs Guides (for EA languages) Attend David’s Advanced Recognition talk tomorrow for code details.

Handwriting Recognition: Text Input Panel Support (1) Guideline –Support Microsoft Active Accessibility (MSAA) to get the benefits of full in-place TIP correction Speech and text recognition engines can then examine context around insertion point.

Handwriting Recognition: Text Input Panel Support (2) Guideline Disable the TIP if necessary. –Released Apps: Registry Key [HKEY_LOCAL_MACHINE \SOFTWARE\Microsoft\WindowsNT\TabletTIP\DisableInPlace]"C:\Progam Files\My App\MyApp.exe"=dword: –Programmatic: PenInputPanel API’s

Ink Interop Guideline –Move Ink to clipboard in multiple formats Ink Serialized Format Text HTML (GIF) BMP

Readability Guideline –Respond to page-up/page-down events. If hardware buttons are programmed for this, makes reading experience superior Guideline –Use smooth scrolling. Guideline –Provide a riffle control. –Example: OneNote

Display Mode Switching “Convertible” form-factors encourage dynamic switching between orientations Guideline –Design to run in both landscape and portrait. –Test web sites for portrait compatibility. –Respond to WM_DISPLAYCHANGE

Mobility Power Awareness –Battery Life Display Awareness –Monitors come and go –Aux Display Network Awareness –Wireless network roaming –Bandwidth varability Activity Awareness –e.g. Presentation awareness

© 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.