Subscribe Bookmark
heman_robinson

Joined:

Jun 24, 2015

Using JMP 12 Interactive HTML reports on mobile devices

In a previous blog post, I described our goals for JMP 12 Interactive HTML reports, to support:

  • Bubble Plots
  • Profilers
  • Mobile devices
  • In this blog post, I'll describe in detail our user interface for Interactive HTML reports on mobile devices.

    Mobile First

    Many customers want to share JMP reports with colleagues on iPad or Android tablets. However, these devices have different requirements than the desktops.

    For example, on a desktop, clicking with a mouse selects an object, and pressing the Ctrl or Shift key selects multiple objects. On mobile devices, there is no mouse, and no Ctrl or Shift keys.

    We don't know whether our customers intend to display their Interactive HTML reports on desktops or mobile devices. They may want to use both. So, we produce HTML reports that play well on any device.

    To achieve this, we employ a Mobile First user interface design. That is, we ensure that our reports run well on mobile devices, and then add features as needed to improve performance on desktops.

    Single and Multiple Selection

    To control selection, there is a pair of toggle buttons at the top of the report. When toggled down, the left button provides single selection. In this mode, clicking or tapping on an object selects that object, and deselects all others.

    JMPHTML5ModeSingle

    When toggled down, the right button provides multiple selection. In this mode, clicking or tapping on an object selects that object, and does not deselect others. To deselect objects, click or tap in an empty area of the report.

    JMPHTML5ModeMultiple

    On a desktop, you can still use your Ctrl or Shift key to temporarily initiate multiple selection.

    Identification and Brushing

    Identification and brushing are important techniques in exploratory data analysis. We provide another pair of toggle buttons to switch between these techniques.

    When the identification button is toggled down, on a desktop, you can hover with your mouse over any object, and display a description of that object.

    JMPHTML5ModeIdentify

    On mobile devices, you have no mouse, so you can't hover. But you can tap on any object, to select the object and display the same description.

    JMPHTML5IdentifyGraph

    In graphs, identification is typically used to identify points. In tables, this feature displays useful descriptions of the statistics.

    JMPHTML5IdentifyTable

    When the rectangle button is toggled down, you can drag a rectangle, or brush, in any graph to select rows of data.

    The selected rows are highlighted in all graphs.

    JMPHTML5ModeRectangle

    The brush is persistent. It remains displayed until you click or tap in an empty area of the report. Because it persists, you can change the size and shape of the brush by simply dragging its corners.

    JMPHTML5BrushSingle

    When both the brushing and multiple selection buttons are toggled down, you can do additive or subtractive brushing. This exploratory technique can be very efficient, to "paint" the graphs with selected or deselected data.

    JMPHTML5BrushMultiple

    Outlines and Menus

    An excellent example of a "Mobile First" design is Forecast, the weather forecasting website. You can use this web application on your phone, your tablet or your desktop; it works well on any device.

    We've used a similar approach in the organization of JMP reports. Our outline buttons are large simple targets, which you can easily hit with either your mouse or your finger.

    JMPHTML5Outline

    Our menu system is full-featured, including sub-menus, check box and radio states, enabling and disabling.

    JMPHTML5Menu

    This menu system gives customers more power to interact with our new HTML Bubble Plots and Profilers. It also gives us a growth path to support even more interactivity in future releases.

    Try It Yourself!

    We hope that you find our new mobile-friendly user interface fun and efficient to use. To explore some Interactive HTML reports, please try our Examples, which we built with the new Auto Publish addin.

    Let us know what you think. Thanks!