bowdenweb

After seeing wp7 previews, I have to admit that the ui is quite intriguing: most specifically the Panorama View and how it works. That is a bold statement, I know, considering ui and Microsoft have seemingly nothing in common. The notes below I jotted from these downloads Design Templates for Windows Phone, Windows Phone Design System – Codename Metro, and ui Design and Interaction Guide. Sidenote: as mentioned earlier, Panorama View is the feature that has me drooling, and naturally, it’s practically non-existent in the documentation. The ui Design and Interaction Guide notes that it is missing and will be added, but that was practically a year ago, so the update remains to be seen.

Screen Orientation on wp7

Beginning Screen Orientation	Rotation	Ending Screen Orientation
Portrait	60 degrees left	Landscape Left
Portrait	60 degrees right	Landscape Right
Landscape Left	60 degrees right	Portrait
Landscape Right	60 degrees left	Portrait
Landscape Left or Right, flat on a table (huh? ha!(	30 degrees up	Portrait

In wp7 the Top-Level Container Control is the Frame that displays the pages. Pages hold discrete sections of content in applications and appear as seperate screens to the user.

The Full-Screen View option allows optional display of Status Bar and Application Bar, but this must be explicitly defined using the visibility property, as the default is to not display them. Best practice for Full Screen View is to not display either so that users can focus on the content experience. Notifications and incoming calls are still displayed in Full-Screen mode, even if the Status Bar and/or the Application Bar is hidden.

Page Navigation Model is a spoke and hub system, unless developers explicitly add links to other pages within their apps, users must use the Back Button to navigate to a page that they wish to view and that users always move forward through the pages. Visited pages are tracked placed in the back stack; when the Back Button is pushed, the Back Stack serves up the last saved page to the user. There is no limit to the number of pages that can be placed in the back stack.

Page Scrolling occurs when content on the screen exceeds the bounds of the visible page when a user pans or flicks. When scrolling, visible scroll indicators appear on the right side (vertical scrolling) and bottom (horizontal scrolling) to indicate whether the content exceeds the bounds of the visible page as well as representing current position on page. After Page Scroll ends, the scroll indicators fade from view after one second has elapsed. Scroll Indicators are not user actionable and are an overlay to the content beneath. Their primary function is to provide a hint to the user about the page size.

Themes

Theme is a user selected combination of background and accent colors. Only color are part of a theme; other elements such as conts or control sizing do not change. There are two background colors and 10 accent colors. Mobile operators or phone manufacturers may add one additional system color; Default theme is dark background with blue accent color, but mobile operators or phone manufacturers can override this setting. So you have 20 themes available, 22 if you count mobile operator/phone manufacturer adding accent color. User-selected, system-wide Theming cannot be modified; only Themes within applications can be modified. If the foreground or background color of a control is explicitly set, verify that the content is visible in both dark and light themes. If the set color is not visible, explicitly set the background or foreground color to maintain conrast or chose a more appropriate color.

Screen Transitions

Built-in screen transitions and animations are system-reserved and developers cannot access them but may mimic them. To implement transitions and animations within an application you have to use Silverlight or XNA Framework. Windows Phone OS 7.0 has many built-in screen transitions and animations that create a sense of a fluid ui. Primary example of this is the Application Entry Transition, where unrelated application tiles “flip” out of the way, leaving the selected application tile alone for a moment before it too “flips” to reveal the application ui.

Input Methods

• Touch
• On-Screen Keyboard
• Hardware Keyboard
• Microphone
• Phone Hardware Buttons
• Sensors
• Some features of inputs are system-reserved and not available to developers.

Gestures

Do not use gestures as a shortcut to a task; only use a gestures in the manner it was intended. All basic/common tasks should be completed using a single finger. Touch Controls should respond to touch immediately. Lag in transitioning will negatively impact ux. Immediate feedback (Visual or Auditory) to indicate touch control interaction. All actions should have immediate and obvious consequences by responding while the gesture happens and not afterwards. Response to gestures should be consistent across the phone and within an app. The touch controls in the Windows Phone Developer Tools have built-in support for touch gestures (So use them for development!)

Three Components to Touch ui

• Touch Target the area that is defined to accept touch input and is not visible to the user.
• Touch Element the visual indicator of the Touch Target that is visible to the user.
• Touch Control a Touch Target that is combined with a Touch Element that the user touches.

Touch Target should not be smaller than 9mm or 34px square. Touch Target should provide at least 2mm or 8px between Touchable Controls. In exceptional cases, controls can be smaller but never more than 7mm or 26px square. On-screen keyboard and hyperlinks in Windows Phone ie are an expection because they have differently sized hit targets.

Touch Targets should be larger than 9mm when:

• it is a frequently used touch control
• its use has a destructive consequence
• the user could be become frustrated if they cannot touch it.
• it is close to th edge of the screen
• it requires sequential or multiple inputs between adjacent touch controls

wp7 gestures align with Windows Desktop gestures with some intentional variation to compensate for screen size differences and mouse support. Most of these differences are around editing shortcuts, which you can address by using the on-screen keyboard. Gesture Extensibility is not supported.

The Touch Target can be larger than the Touch Element but never smaller than it. Touch Element must never be smaller than 60% of the Touch Target.

In vertically-constrained uis (Landscape??), use oblong controls as these shapes are easier to hit. Touch Target height can be as small as 7mm provided its width is at least 20mm.

Touch Gesture involves performing a movement with single or multiple fingers on a touch screen. The tapping of a ui element such as the push button is an example of a Touch Gesture. Touch Gestures are the primary method for a user to interact with the Windows Phone ui. The controls provided in the Windows Phone Developer Tools are used as touch interaction elements and are properly sized for touch interaction.

Single and Multi-Touch Gestures supported in wp7

Tap (Single Touch)

A tap is a single, brief touch on the screen within a bounded area and back again. There are two behaviors associated with a tap gesture: Finger down provides touch indication, Finger up executes the action. A tap also stops any type of content from moving on the screen.

Double Tap (Single Touch)

A double tap toggles between in and out zoom states of a control or an application. The application determines its current zoomed state and will zoom in/out accordingly. These states are defined by the application.

Pan (Single Touch)

A pan is a single finger placed down and moved across the screen in any direction. The pan gesture ends when the finger is lifted from the screen.

Pan Gesture Behaviors: content can be moved through direct manipulation. It will stick to and follow the movement of the finger. Application controls decide what panning direction to support. This movement can be horizontal, vertical or any other direction specified (WHat exactly is any other direction?). If content is moved to an in-between state, the content should snap back to the closest state. A pan can move/reorder a specific item. An item follows the finger and drops in the new location when the finger is lifted.

Flick (Single Touch)

A flick is a single finger down moved rapidly in any direction and ends with the finger up. A flick can follow a pan gesture. A flick gesture moves content from one area to another area. The controls or the application can be configured to support specific flicking directional behavior. This can be horizontal, vertical or another specified direction. If horizontal or vertical paths are specified, movements in other directions will be converted into vertical or horizontal movement. Flick moves the whole canvas, but you can specify individual objects to be moved instead.

Touch and Hold (Single Touch)

Touch and Hold is a single finger down within a bounded area for a defined period of time. Touch and Hold gesture should be used to display a context menu or options page for an item.

Pinch and Stretch (Multi-Touch)

A pinch and stretch is two fingers down within separate bounded areas followed by the fingers moving closer together (pinch) or further apart (stretch). Pinch and Stretch provides continuous zoom on content within the center of the zoom located at the center of the two fingers.

Windows Phone supports four simultaneous user touch input points to enable unique application interactions. Screen touches 7mm or larger in diameter are treated as unique touches when the edges of the touch are separated by 3.5mm or more and all gestures are supported. Performance tune apps that support more than two simultaneous touch input points to ensure app performance does not suffer.

On-Screen Keyboard (Multi-Touch)

On-Screen Keyboard is for text input and opens by sliding up automatically from the bottom of the screen when an editable control becomes active. When a user taps outside of the edit control, scrolls a list or presses the Back Button, the On-Screen Keyboard closes by sliding down off the bottom of the screen. If a phone has an active Hardware Keyboard the On-Screen Keyboard automatically closes…..? huh? Why does it even open? wp7 supports full alphabet layouts such as QWERTY, AZERTY, and QWERTZ. 12/20 key layouts are not supported. On-Screen Keyboard is 336px tall in portrait view and 256px tall in either landscape view. Text Suggestion Window is 65px tall in both screen orientations. When an edit control is active the system automatically scrolls the editable control above the On-Screen Keyboard if it is a control from the Windows Phone Developer Tools. If the keyboard has an enter key and the current edit control is a single line, pressing the enter key can either submit the data and close the keyboard or change focus to next edit control. If the edit control is multi-line, pressing the enter key will add a new line. When the osk is deployed it obscures the content behind it.

If text suggestions are enabled, they dock above the osk and obscure content behind it. If a multi-line edit control is used, part of it may be hidden behind the osk. You must ensure that the line containing the caret is always in view and above the osk. Edit Fields should have an input scope set that defines the keyboard type and enable the appropriate typing aids.

Only deploy the osk automatically if the app page has no more than 2 edit controls and the first edit control is a single-line edit box. Do not automatically deploy the OSK if the page has content or controls that would be obscured behind the osk. Changing default padding inside edit controls and the margins of controls can lead to a non-uniform method to select edit controls by touch.

On-Screen Keyboard Types

Keyboard Type	Layout
Default	Standard QWERTY layout
Text	Standard layout with ASCII based emoticons
Email Address	Standard layout with .com and @ keys
Phone Number	Typical 12-key layout
Web Address	Standard layout with a .com key and a customized Enter key
Maps	Standard layout with a customized Enter key
sms Address	Standard layout with easy access to phone number layout
Default	Standard QWERTY layout

osk‘s cannot be defined nor modified by developers. An app can automatically close the osk when a user tries to view the content rather than type, such as when the user scrolls, when the active edit control moves outside of the viewable area, or when the user presses the Back Button. Another available solution is to implement an edit view and a read view and open or close the osk depending upon the view state.

Hardware Keyboards are only used for typing letters, accented letters, numbers, and symbols and cannot be used to control the ui. The hardware keyboard includes arrow keys that move the caret within an edit control, however these must not be used to move focus, scroll lists, or navigate maps or web pages. Letters (A-Z), Enter, Space, Backspace, Shift, emoticon, SYM, period, comma, Numbers (0-9) (primary or secondary character), and accent keys for German, French, Italian and Spanish keys are always available o the hardware keyboard. The following are not supported/allowed on hardware keyboard: directional pad or any other navigtion specific hardware, the “OK & Home” and the “Send & Edit” hardware soft keys, Delete, Insert, Control (CTRL), Alt, Caps Lock, Tab, page up, page down, ESC, Start, Search and Back Buttons. The Shift key provides 3 modes, On, Off and Lock (Caps Lock).

Emoticon Key brings up the emoticons picker; Accent Key is used to type accented letters, when pressed it adds an accent letter to the left of the caret. Multiple presses cycle through available accents. Function (FN) key plus the accent key cycles back to the previous accent. Pressing and holding the accent key displays an accent picker. Chars not available on the hardware keyboard are accessible via a symbol picker that is launched by pressing the Symbol Key (SYM). Pressing and holding it down displays the language picker. FN and SYM switches to the next language.

Hardware Keyboard keys can be overloaded; pressing and holding a key or using the FN key allows the user to access secondary functionality. Upon launch, the Symbol Picker, Accent Picker and Language Picker are displayed at the bottom of the screen. They dissappear one second after a selection has been made. Apps can use an api to query if the hardware keyboard is available/deployed. When hardware keyboard is deployed, the osk closes. If the device has a fixed hardware keyboard, the osk will not be displayed. Text suggestions are also availabe for the hardware keyboard.

Phone Hardware Buttons

Back, Start, and Search Buttons can optionally be implemented as capacitive touch buttons by phone manufacturers.

Start takes the user to start in the ui. Applicationss will recieve an obscured event to pause. The Start button behavior is not modifiable; apps should be prepared to receive an obscured event to pause after the Start button is pushed.

The Search Button launches Bing Search Experience to find content from anywhere on the device. Bing Search Experience varies depending on context of the user. Bing Search Experience can be launched from Start, the App List, System Apps and Third-Party Apps. From select System Applications such as Outlook, an in-application search can be launched.

Use the SearchTask Class to launch Bing Search from within an app. In-Application Search is not replicatable but can be mimicked. Search Button Behaviors cannot be modifed or changed.

The Back Button is used to navigate back on pages (screens) within an app or between apps. The app allows the framework to perform the operation when the Back Button is pressed. The Back Button can also be used to close menus, dialogs, navigate to a previous page, exit a search operation and to switch apps, however its principal usage it to navigate from the current page to the previous page. Upon navigating back out of the root page of an app, said app terminates. The Back Button will not work as a backspace key to delete text input.

The Power Button Behaviors are dependant on phone state; Power Button Behaviors cannot be modified and apps should always be prepared to receive an obscured event to pause or terminate after the Power Button is pressed.

Phone State	Power Button Push Duration	Behavior
Powered Off	Any	Boots the phone
Powered On, Screen Unlocked, Screen On	Less than 3 Seconds	Locks and Turns Off Screen
Powered On, Screen Locked, Screen On	Less than 3 Seconds	Turns Screen Off
Powered On, Screen Locked, Screen Off	Less than 3 Seconds	Turns Screen On
Any Powered On State	Greater than 3 Seconds and Less than 8 Seconds	Turns Phone Off via Software Shutdown
Any Powered On State	Greater than 8 Seconds	Turns Phone Off via Hardware Shutdown

Hardware Volume Buttons are used to adjust the volume of either the in-call conversation volume (if phone call is active) or the overall device volume including music, radio, video, app, ringtone and system sound. Pressing either Volume Button exposes the Volume Control, a 93px tall overlay at the top of the screen and may contain audio transport controls such as previous and next if there is a media player active.

Volume Control

• Volume Control will always contain a control to toggle the ringer setting on/off.
• Volume Control affects the playback of the system sounds that the user can control in the Ringtone and Sound settings screen .
• Volume Buttons are still active when media is playing and if a phone call is active, even if the phone is locked.
• Volume Buttons cannot be set higher than the user settings or override mute.
• Pressing and Holding a Volume Button will do a key press repeat and incrementally increase/decrease the volume.
• When a phone call is received, touching either Volume Button will silence the ringtone
• Audio Transport Controls cannot be edited; Volume Button Behaviors cannot be edited.

The Camera Button is dual action supporting full and half button press modes. Full Button Press launches the camera application; Half Button Press after camera application launch enables the auto-focus feature.

Within the Camera Application, pushing the Camera Button takes a photo when in camera mode or start or stop video capture when in video mode., when in stand-by (screen off) or locked, pressing and holding the Camera Button for more than one second will launch Camera Application. Calling the CameraCaptureTask Class launches the Camera Application. The Camera Button cannot be modified or have its behaviors changed.

Sensors

wp7 comes with Accelerometer, a-gps (Assisted Global Positioning System), Proximity Sensor, Camera, Compass and Light Sensor sensors. Some sensors are system-reserved and not available to developers.

The Accelerometer is an electromechanical device that measures acceleration by gravity or external sources to an accuracy of +/- 5 degrees. 3D motion sensor provides continuous info about the forces being applied to the device in the X, Y, and Z planes. Applications and games that require a higher level of precision and sensitivity from the Acceleromter should calibrate its data. The Accelerometer can be leveraged to create sophisticated experiences including, but not limited to, automatic screen rotation, tilt-to-scroll and gaming control.

a-gps is used to determine the phone’s location and provides information to Location Services. Location Services is accessible in the System.Device.Location namespace.

The Proximity Sensor powers off the screen when an object is detected within 15mm of the sensor during a phone call. Phone manufactureres have discretion as to where to place the Proximity Sensor so its location may vary. The Proximity Sensor remains active when the phone is in speakerphone mode so it is possble to power off the screen if a finger or object covers the sensor. The Proximity Sensor and its behaviors are off limits to developers.

wp7 comes with a five megapixel camera with auto-focus and flash, and a 4:3 aspect ratio image sensor at the very least. Camera access is granted in the Microsoft.Phone.Tasks namespace

The Compass is used to determine navigation direction relative to the Earth’s magnetic field; Access to the Compass and its behaviors is off limits.

The Light Sensor determines the intensity of light up to 4,000 lux and automatically adjusts screen brightness. Access to the Light Sensor and its behaviors is off limits.

Output Methods

1. Audio Output Jack
2. On-Device Speaker
3. On-Device Screen
4. Vibration

wp7 phones have at a minimum 16-bit (5 red, 6 green, 5 blue) WVGA screens at 800 x 480 pixel resolution, no matter the screen size. Vibration can be turned off/on in the Ringtones and Sounds preferences and cannot be overridden.

wp7 come with built-in FM radio tuner, however there are no built-in ui components. Base Silverlight Controls are used to build application uis; Applications cannot lock the frequency or region of the FM radio tuner; polling the api prior to ui display is a way around this.

Windows Phone Application Interface Controls

User set system theming flows down automatically into all controls available in the Window Phone Developer Tools. Unique controls can also be created as needed and they may replicate system controls that are not available in Windows Phone Developers Tools.

Border: provides a border, background, or both to another control. A Border can contain only one child element. Do not hard-code Border width; Use the phone Border width to support screen scaling.

Push Button: a button initiates an action when a user taps on it. The shape is usually rectangular and the standard layout allows for either text or an image to be displayed. Buttons support the rest, press and disabled states; there is no visible focus state; support the tag gesture. If using text, Buttons should never include more than two words. Text should be concise (typically a verb).

Canvas provides a surface to display child elements at specific coordinates in the Canvas. Canvas uses a pixel-based layout and can provide better performance than using the grid control for deeply embedded/nested controls in layout passes for apps that do not change orientations. If the application frame needs to grow, shrink or rotate, use the grid control.

Check Boxes define a binary state and can be used in groups to display multiple choices from which the user can select one or more choices. Tapping a check box or the accompanying text will select an option.

Check box control supports an indeterminate state that can be used to communicated checked/unchecked status simultaneously for a number of underyling items. Check box controls support rest, press and disabled states for selected/un-selected settings.; there is no visible focus state. Check Box Control can support multiple lines, however it is recommended to limit text to a one or two line format for design consistency.

If several choices are present to a user, consider using a scroll viewer and adding a stack panel.

Microsoft does not recommend using the indeterminate state because the user could be confused about which of the underlying property items is actually checked/unchecked. A more appropriate solution is to map the data sources for that check box to separate check boxes or use a multi-selection list, particularly if using a dynamic data set.

Content Control

Content Control represents a control with a single piece of content of any type.

There are actually more controls and more info in these documents that I took notes on, however this post is getting quite long, and virtually most of it is repeating information that can be found in the documents listed above. That said, all of that information is locked up in pdfs and not verily available to developers simply using search engines.