Work With

Example of the Work With UX pattern.

Problem

People often need to digitally work with a particular object in a domain, usually by creating, retrieving, updating, and deleting.

Solution

Provide a way to create, select, modify and delete objects that people need to work with.

Context

Work-with based interfaces are best for people who have a grasp of the solution’s conceptual/domain model. They need to know that in order to change the shipping address for a customer they need to navigate to the customers list, select one to open it, go to the shipping data section, change, and save it. If your users are casual users or the general public, you should consider a more goal and task-oriented approach.

However, when the data that needs to be displayed in the grid is simple, or when the users are supposed to be able to find their way into the application (e.g. for internal enterprise applications), this pattern is a very practical solution. It is very common in Line of Business applications like Microsoft CRM, where the user is supposed to spend most of his job time working with it. It doesn’t presume to know the various kinds of tasks that people might want to execute; instead, it gives them sort of a carte blanche into the system’s information, which can be very empowering for those who can handle it.

Rationale

Managing a list of objects it’s a very common need in line of business applications. For each object in the list, there are a several actions that can be applied to it, and this approach makes possible to select any command from the same screen.

They are usually combined with a Form that lets the user edit the related business entity.

Implementation

Remember, this pattern essentially exposes the domain model to the end users, so you need to work with your users (or their representatives if need be) to ensure that the domain model itself matches the way they think about the domain. This is particularly important for the language used to identify the objects they are working with and the relationships between the objects.

If you have a hierarchy of objects (i.e., objects can have other child objects), which is common, you will need to address how to handle them. One approach is using a hierarchical grid like Infragistics offers, and if your users are very comfortable with that sort of paradigm, it can be an acceptable approach; however, you should consider whether or not a separate Form that is used to edit the objects and manage their children is not more appropriate for your target users. Look at the Edit-In-Place pattern for guidelines on this subject.

When implementing this pattern, consider these capabilities:

People should be able to efficiently find the data they want to work with. To this end, they should be able to filter and sort the objects efficiently. You may want to consider an ‘advanced’/ad-hoc filter mode if the most common filters are not always enough to find the required information. This can be done using Active Filtering. Use a Sortable Table to sort the data in any way the way they want. Together, sorting and filtering can usually get people to the objects they want, but having a “by ID” direct access is also a good complement to these other finding capabilities.
As the number of results could be large, you most likely should provide a way to do Paging through the results.
Often people want to export the filtered set to other formats (Excel, PDF, XPS, etc).
Navigate to the item displayed in the grid (the primary object), or to related items (secondary objects).
If it’s required and/or makes sense in context, allow them to select more than item from the list. And if so, they should be able to perform group operations on selected items.

You should allow navigation and/or action on objects through one or more of the following methods.

Links on Object Names

Use links on descriptions (e.g. the customer name) as Intriguing Branches to navigate to view-only pages, not to transactional forms.
Can be used for the primary or secondary objects.
Can be used only when the object name identifies (i.e. is a candidate key) the primary or secondary object that’s being linked.
Depending on the user’s security permissions, you could decide to show the link or not.

A Command Area (With Commands Applied to Selected Rows)

When users need to perform actions on multiple rows at a time.
The actions in the command area should always be applied to the primary object.
Actions should be enabled or disabled as a group (i.e. when one action is not valid on a particular row, other actions are also not valid).

Inline Commands (Using Edit-In-Place )

Example of the Work With UX pattern.

You could have labeled commands in each row, or a label in the column title and an icon in the row.
The action should be applied to the primary object.
The actions can be different for each row (e.g., because depending on the users’ security profile, they may or may not be able to perform some actions on an object).

Avoid redundancy between the command area and inline commands. For example, if there is an Update button in the command area, there should not be Update icons within table cells. This could confuse people who might wonder if they do different things.

Multiple selection tables are usually difficult to use. It’s difficult to handle errors when one of the commands fails for one row. Only allow multi-select in a table if there is good evidence that users need to perform actions on multiple rows at a time, and if you do support it, you need to decide if group operations should be transactional (all fail or all succeed) depending on your context. If not, you need a way to indicate which items failed and which succeeded.

Row selectors (radio buttons for single select or check boxes for multi select) should only be disabled if all actions are not valid. For example, if a table contains Update and Delete buttons in a command area, a row selector may only be disabled if the user is prohibited from both updating and deleting that row.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Silverlight

You can use the inline editing capabilities of the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the NetAdvantage for Windows Forms WinGrid control to implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid control.

Examples

The primary example from Microsoft CRM is an example of a complex Work With implementation. Some actions like opening an activity are not explicitly shown in the page and are done by double clicking the row.

http://quince.infragistics.com/115t