Salesforce Analytics – Mobile Layout design best practices

Creating Mobile Layouts for iOS by Dan Nguyen

In this blog, we’ll focus on the how-to’s, best practices, and breaking down an example for designing mobile layout. At springML, we are passionate about design that transcend UI elements and provide a compelling insight for end users.

Here is a step by step details on the design process:

Let’s assume all widgets and steps are already created in the dashboard. If we go to the JSON editor (Command + E in Mac) we can begin adding in the widgets for mobile under layouts.

“rows”:{ } Represent each page on mobile. To ensure a positive user experience we highly recommend segmenting your widgets onto multiple pages. Typically the first page should display a bird’s eye view of the data or the summary while the other pages dissect the data in deeper details.

Code

Few things to consider when developing the layout:

  • Colspan: Creating column length
  • Hpad: This represents the horizontal spacing X-axis (left and right) between multiple widgets on the same row
  • Vpad: Similar to Hpad this focuses on vertical spacing on the Y-Axis.
  • “row: {height =15}”: We generally use this to provide a cushion between two rows.
  • RowSpan: How many rows below should the widget take
  • Row: {height=x}: Represents the height of the row

Note: Each line represents a row in mobile.

Layout Design

If we take a look at the image below we notice gridlines. This grid line enables the UX Developer to visually see where to strategically place certain widgets. To enable the grids go to Settings and enable developer mode. For instance the text “Productivity” has a colspan of 4 on Row 1. It’s simply a ruler stickIMG_0126.PNG

 

Multiple Widgets on the same row:

Looking at line 1683 we see dimfilter_2 & dimfilter_3 represented as ‘Date Range’ & ‘Owner’. The ‘|’ symbol allows multiple widgets on a single row. Note the Colspan is equally split from 6.

Tips

  1. Adding in line bars to separate computational components.

 

2. Using Row: {height=x} to to provide spacing between widgets.

3. To indent use ‘|’

4. Laying over boxes

5. Enable developer mode in Mobile to enable the grids

As always, please feel free to reach out to us with any questions at [email protected]