Design Considerations &

User Experience Guidelinesfor Mobile Tablet Applications

Arnie LundDirector, User Experience

David HaleDeveloper 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 checkingSystemParametersInfo()

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:00000000

– 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.© 2005 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.