Manage Object

The Manage Object pattern allows for the viewing, editing, or deleting of an object or item. This is common pattern for phone and tablet, but on the tablet there are multiple variations of this pattern.

There are three actions for managing an object:

View Object: Details about a selected object are shown in read-only mode.
Edit Object: Details about a selected object are in editable or input mode.
Delete Object: The object is removed or deleted from a set of objects.

There are four common pattern variations for managing an object:

New Page: The details of an object are viewable or editable on a new page, also called a drill-down page. Used on the phone and tablet, but it is most common on the phone.
Popup: The details of an object are viewable or editable on a popup. Used on the phone and tablet, but it is most common on the tablet.
Master Detail: The details of an object are viewable or editable in a panel. The left panel is the master list and the right panel presents the selected object details. Used on a tablet.
Semantic Zoom: The details of an object are viewable or editable as the selected object is zoomed in on similar to more details shown on a map. Used on a tablet and phone.

Appearance

Appearance characteristics for this component.

View Object

New Page

Phone: The new page is the primary method used to View an Object on the phone.
Object Details: The details about the selected object are displayed in read-only mode.
Back Button: A button that navigates back to a list of objects, presented on the left side of the header.
Edit Button: If the object details are editable, an "Edit" button can be presented on the right side of the header.

Popup

Object Details: The details of the object are read-only in a popup.
Popup Size: Popups can be sized, depending on the amount of space needed for details of the object, but some underlying application screen space should be visible on a few sides of the popup.
Dimmed Background: The underlying application can be dimmed when the popup is displayed.
Button Location: Buttons can be placed in headers or near the bottom of the popup.
Button Icons/Labels: Buttons may have short labels, icons, or a combination of both.
Modal Dialog: Modal dialogues can show details of an object, or what you selected.
Arrow: This is an optional element for this popup. It may point to what launch it.
Close: Close or dismiss a popup with a button or auto-dismiss.

Master Detail

List: Displays a list of objects in the left pane. Tapping an item from the left pane will display details about the object in the right pane.
Details: Displays details about the selected object in the right pane in editable mode.
Button Location: On the phone, the "Cancel" button is often on the left side of the header. On the tablet this a good location, but there may be other good locations to place this button. On the phone the "Done" or "Save" button is often on the right side of the header. On the tablet this a good location, but there may be other good locations to place this button.
Button Icons/Labels: Buttons may have short labels, icons, or a combination of both.
Components: The Panel Splitter component is commonly used to show master detail, but a custom Panel Disclose or Hierarchical Panel component may also be used.
Phone: On the phone, details must be drilled into from the list, opening a new page.
Done Button: The button is usually placed on the right side of the header for the right pane.
Cancel Button: The button is usually placed on the left side of the header for the right pane.

Semantic Zoom

Zoom Level: More details about an object are displayed the deeper the user is zoomed in on the master diagram.
Details: Editable details are displayed inside the object, in a popup associated with the object or just outside of the associated object.
Semantic Zoom is very similar to the Geographic Map pattern. See also Semantic Zoom component for Windows RT.

Edit Object

Phone: Using a new page is the primary method to Edit an Object on the phone.
Object Details: Details about the selected object are displayed in edit mode. Tabs can be used when there are more details for an object.
Button Location: On the phone the "Cancel" button is often on the left side of the header. On the tablet this a good location, but there may be other good locations to place this button. On the phone the "Done" or "Save" button is often on the right side of the header. On the tablet this a good location, but there may be other good locations to place this button.
Button Icons/Labels: Buttons may have short labels, icons, or a combination of both.
Child Objects: Child objects can be displayed either within another new page, or can be in a list or form near the parent object. Tablets can also include tabbed views.
Toolbar Placement: Displayed in the footer on the phone and in the header or footer on the tablet.
Toolbar Icons: Icons and buttons in the toolbar allow the user to take action on the selected object.Actions can include emailing or posting to social media.
Exiting edit mode: Buttons for exiting edit mode will be called "Save" or "Done" or "Cancel", instead of backing out of the page without explicitly saving or canceling.

Delete Object

List Item: Lists can be put into edit mode and display a "Delete" icon for each list item. Tapping the "Delete" icon will remove the selected item from the list. On Android, a long press will activate this edit mode.
Gesture Delete: Usually on list, when in edit mode; holding and swiping a list item right or left will remove it from the list.
Detail Page: At the bottom of the details form on the details page there may be a "Delete" button. Tapping the button usually opens a prompt.
Toolbar Icon: A toolbar icon (usually a trash can icon) can be tapped to delete the selected item.
Prompt Popup: In most of these examples a prompt or action sheet will appear to confirm whether the selected item should be deleted. In the prompt, the "Delete" icon is red.

Behavior

Common behaviors for this component.

View or Edit Object

New Page

Drill Down: On the phone, using a new page is the primary method to display the "View or Edit Object" pattern.
Animated Transition: The list of objects can slide in from the left, while the object details can slide in from the right. Other transitions can be implemented on tablets.
Read-Only Data: On the phone, returning may be desirable if the user's purpose is to review information rather than input information.
Editable Data: A new page may go directly into edit mode or may enter read-only mode first.
Editable Header: Some tablet applications support tapping the header to edit the title of the object.
Split List Item: When displaying a detailed disclosure icon in a list item, tapping the icon itself will perform the action, but tapping elsewhere in the list item will not.

Popup

Open Popup: Details about a selected object will appear in a popup in either read-only or editable mode.
Position: A popup will cover a portion of the main application page.
Close Popup: The popup can have buttons to close it, save it, or disregard it.
Auto-Dismiss: If auto-dismiss is set, the user can tap outside the popup to close it.
Animated Transitions: Multiple transitions are available, and popups commonly slide up as they open and slide down as they close.
Force Touch: A light press on a control or display can reveal additional object details. A stronger press opens a full-screen detail view.

Master Detail

Selected List Item: Based on the item selected in the list on the left pane, the details will be either read-only or editable in the right pane.
Animated Transition: Detail panes can slide in from the right.
Confirmation Message: A confirmation message can be displayed at the top of the right pane indicating that the details of the selected object have been updated.

Semnatic Zoom

Zoom Levels: When zooming in on a feature, that feature can be a larger view of the object or it can change to represent details of that object at that zoom level.
Zoom In: The user touches the feature and spreads fingers apart or double-taps with one finger to zoom in on a feature.
Zoom Out: The user touches the feature and pinches their fingers together or double-taps with two fingers to zoom out.
Pan: User can use a finger-drag gesture or a one-finger swipe on a feature to pan it.
Moving Object: Moving an object from one place in the overall view can possibly change the relationships with other objects.

Delete Object

Prompts: When prompt popups open, they slide up from the bottom of the screen; when they close they slide down to the bottom of the screen.
Undo: Shake gesture can undo a delete, but only before you take another action.

Usage

Usage guidelines for this component.

A master list or list of objects provides an easy way to order items alphabetically, by category, or in order of priority, for example..
Using new pages for view object details can provide a full screen to accommodate a lot of object details.
However, when view object details are placed on new pages, the user has to navigate back and forth to change details on multiple objects.
Using pop-ups enables some underlying application information to remain visible on the screen.
Semantic zoom requires that at least two zoom levels be available.
- Avoid having the users pan to much at a low zoom level for Semantic Zoom.
View mode can be editable, such that there is no need to enter an editable state, the page will always be editable.
Saving should be across tabs, if tabs are used.