Best practices for developing mobile applications with Spotfire®

As of Spotfire 7.13 and later, most Spotfire analytic apps and dashboards work nicely on any screen without any particular preparation due to the responsive behaviour of the page layout. However, there are ways of optimizing the behaviour on small screens provide an even better experience for mobile phone users.

The key features that improve the user experience on mobile devices are

• Mobile layout (Responsive)
• Minimum page size
• Fixed text area or visualization height/width.
• Maximize/restore visualization

General advice for making applications that work nicely on all kinds of screens

By default, Spotfire will use a Mobile page layout for each page when the width of the screen is smaller than a threshold. This threshold for when to switch from the regular layout to a stacked mobile layout is configurable per page, so that the Author can optimize the experience for each page. 

In some cases it may be desirable to use the Minimum page size feature if the screen is only slightly smaller than required for the page to look good. Then the user will get a page scrollbar vertically and/or horizontally dependent on how the Author configures the page. In combination with the Mobile Layout you can have a "graceful" transition that on small tablets provides the standard layout with for example a short horizontal scroll, but on a phone uses the stacked Mobile layout with a long vertical scroll. 

The Fixed size for text areas or visualizations is very useful in order to ensure that especially text areas and tables don't get to small on a phone size device. Read more about this feature here.

Another helpful feature for users on tablets and phones  is the ability to temporarily maximize a visualization to use the entire screen and then restore it again. Read more about this feature here.

When designing try setting your screen area to approximate the size and shape of a small-screen mobile device. On very small devices, such as mobile phones, portrait orientation is the most commonly used, so check that the layout works nicely in this orientation.

Here's a set of simple steps that help you optimize the experience on small devices when designing dashboards/applications.

1. Place the visuals you need on the page and configure them as desired.
2. Resize the page to the smallest possible dimensions while ensuring that all of the visuals are still useful with the layout you selected. Tweak the configuration and size allocated to each visual as needed. 
3. If any particular visualization or text area is problematic, consider locking its width or height.
4. When you are satisfied with the results, set the minimum page size option to the current page size.
5. Further decrease the size of the page (you will get scrollbars on the page) and decide when you think it makes more sense to use the stacked Mobile layout. Set the mobile layout threshold to this level. 

You may of course decide to not use the minimum page size but rather go directly to the Mobile layout if you think this works better for you app.

Other more specific design patterns

Using KPI charts for navigation

KPI charts in Spotfire are good for providing an overview of your data. They can also be used to navigate the application. If your data is suitable for this design, you can start with one or more KPI charts as an overview of the data, and then guide users to different pages when they tap or click a KPI tile that they find interesting. Thus, you can create dynamic applications that help users find the information they need.

Design a guided experience

Mobile device users may find it easier to use specially-designed navigation methods such as KPI tiles, links, or buttons in text areas, rather than the built in page navigation modes such as "titled tabs". Specially-designed navigation methods can be created using KPI charts, links, sparklines, calculated values, and other elements in text areas.

General design advice for mobile phone applications

If you are making an application that is primalrily to be used on mobile phone, there are a couple of things you can consider.

• Select visualization types that work on a small screen. If you do not plan for interaction with the visualization, then most visualization types are okay. If the user is expected to mark elements in a visualization, you might want to ensure that this is effective using touch interaction.
• Hide all panels if possible by default: Filters, Data, Tags, Lists, bookmarks and Collaboration.
• Consider hiding the legend, if possible.
• Consider hiding the zoom sliders. They are often too hard to use on a small screen.
• For maps, consider hiding the Layers control. Consider whether you need any other controls that might obscure the visualization.
• Configure column labels and axis selectors.
• If the visualization title and page name are redundant, consider removing the visualization title and setting the page name to a descriptive title.
• If you need to create controls, use a text area and follow these rules.
  • Buttons for a guided analysis placed in the text area must be sized to be touch-friendly for an average adult, male-sized hand.
  • Set the font style and size to a size that is easy to read--at least 12 point.
  • Have enough padding around the controls in a text area that they are selectable.
  • If you need filters, add it as a controls in the text area.
• Plan for minimal interaction. Manipulating controls on a small-screen mobile device can be frustrating if there are too many controls, if they are too small, or if they are placed too close to each other. Design your small screen dashboard to require as little selection, tapping, dragging, or other interactions as possible.

Drilling down in a KPI chart

Occasionally, your visualization might require drilling down inside a KPI chart rather than navigating to another page. This is possible with a little Iron Python scripting and Document Properties. For further guidance on creating such a visualization, see the article Drill down inside a Spotfire® KPI chart.

Mobile specific design patterns

A useful design pattern for mobile applications is to start with a page with an overview of one or a few metrics in a KPI chart, and then use the navigation capability of the KPI chart to let the user drill down or just navigate to additional information by clicking a tile. This can lead the user to a page with either a new KPI chart at a more detailed level or to other Spotfire visualizations. Consider using the minimum page size option.

Here is an example application using this design pattern.