Filtering Data - The Shuffler

What Is a Shuffler, What Are the Benefits? | Selecting Views vs. Filtering | Variants of the Shuffler | Example

What is a Shuffler, What are the Benefits?

A Shuffler is a method to easily set criteria for filtering a larger data set, in order to get simplified and reduced views of the data. It mimics natural language statements for formulating the query, but can also be used with query statements consisting of words only. The query statement is typically assembled by combining static texts with dynamic elements like dropdown lists, edit fields and selection elements.

Example

Figure 1: Example for a simple shuffler

Benefits of the Shuffler

Easy query:

• Predefined natural language options instead of SQL (Structured Query Language)
• Implicit online instruction about what is shown on the screen

Comparison to tree:

• Clear visualization of selection statements and results
• Better suitable for non-hierarchical data
• Interactive change of grouping (category)
• Group by role, group by system, group by type of activity

Selecting Views vs. Filtering

In the simplest case, a shuffler may consist of a label with a dropdown listbox for selecting the filter criteria. This design is identical to the case where a dropdown listbox is used for selecting views. However, we will restrict the term "shuffler" to the device that filters data which is covered here. For more information on how to use dropdown listboxes for view selection, and what the alternatives are, see Selecting Views.

In the following we discuss the differences between views and shufflers and provide criteria for when to use the shuffler and when not.

Why Change Views?

• To interactively browse a data set
• To have multiple views of one coherent theme:
  • Same object: Show members, rooms, tasks of one cost center
  • Same object class: Select one customer
  • Same task: Toggle between information which is important for shipping international
• To stack screens
  • Toggle between different screen layouts (detail, overview)

When to Shuffle?

Use the shuffler to:

• Select predefined report variants
• Visualize data structures that are non-hierarchical but rather attribute-based -> Shuffler filters by attribute
• Reduce complexity of trees
  Example: Instead of listing all cost centers with sub-nodes for DMs, PMs, Developers (tree), present a flat list of cost centers and select DM, PM, or Developer by a shuffler statement (e.g. "Show all DMs")
• Offer interactive filtering and sorting of data
• Use attribute-based filter statements with predefined set of meaningful operands
• Change sorting, or grouping based on attributes

When Not to Shuffle?

Tabstrips can be an alternative if:

• Different screen layouts are stacked (overview detail)
• Choices are very limited and of fixed number
• Switches are frequent
• Readability of choices is important

Radiobuttons can be an alternative if:

• Only 2-3 choices and embedded screens already include tabs
• A less dominant layout is preferable
• Longer text labels are needed

For more information on view selection, and which the alternatives are, see Selecting Views.

Examples for Changing Views in IACs

Toggle between different visualizations of the same data:

• Change from bar-chart to pie-chart
• Change column layout of a table

Change between different layouts of screens, for example, change between:

• Overview and details
• Simple and extended version
• Attribute categories of one object

 Examples for Using the Shuffler in IACs

• To offer a collection of predefined reports
  Example: Different Top Ten reports about cost centers
• Filter different line items based on attribute-based filters
  Example: view subset of inbox items
  Example: view all orders older than 123
• Change sorting order
  Example: show all transfers sorted by receiver
• Select different objects of one object class
  Example: show cost center XYZ

Variants of the Shuffler

Shufflers can create whole sentences with variable components.

Example: Show me all <cancelled> orders <of last year>

This variant, however, cannot easily be translated into other languages. In addition, the shuffler query statements tend to become rather long. A shorter formulation of the query using a label and an accompanying selection element is better suited to IACs.

Example: Display <cancelled orders>

The following table provides a more formal approach to assembling shuffler query statements.

Table: Assembling Shuffler Query Statements

Example

The following example demonstrates how an application can be redesigned by using a shuffler.

Original Application

The original application uses a fairly complex layout with group boxes. Also the relations between the items in the goup box Certificates and the list below is not obvious (if the button rules were applied, the List button would have to be placed withing the group box, making the relationship even less evident).

In addition, the design consumes more space than necessary.

Figure 2: Original application (modified)

Redesigned Application Using a Shuffler

Implementing a shuffler helps to get rid of the group boxes and to use text headers as a grouping element. Also, the shuffler uses less space than the group box and makes the relation between the selection elements and the list evident.

This implementation of the shuffler uses radiobuttons instead of the typical dropdown listboxes, thus making for an easy interaction. See below for a discussion of design alternatives for this design problem.

Figure 3: Redesigned application with shuffler and without group boxes

Variants

Radiobuttons

The example aboves uses radiobuttons for the shuffler:

Figure 4: Shuffler with radiobuttons (as in previous example)

Pros: All alternatives are visible, needs the least amount of mouse clicks
Cons: The query statement is hard to read, uses the most space

Checkboxes

As the left radiobutton group includes an item, which is the combination of the other two items, a solution using checkboxes is possible for this part of the selection:

Figure 5: Shuffler with checkboxes radiobuttons

Pros: All alternatives are visible, uses fewer space than the radiobutton solution
Cons: The query statement is hard to read, the combination of the checkboxes may be hard to understand

Dropdown Listboxes

The "typical" shufflers use dropdown listboxes for the attributes, in order to make the query statement more readable and to save space:

Figure 6: Shuffler with dropdown listboxes

Figure 7: Shuffler with dropdown listboxes - listboxes opened

Pros: The query statement is easy to read, best visual impression (one line), uses the least space
Cons: Only one alternative is visible, the handling of dropdown listboxes is more difficult than clicking radiobuttons or checkboxes

top

Source:  SAP Interaction Design Guide for Internet Application Components