Salesforce1 Mobile App UX Design Guidelines For Independent Software Vendors and Partners

Salesforce1 Mobile App: Our UI and Features, Your Custom Apps

Publisher Actions & Feed-First Notifications

All Your CRM, Custom and AppExchange Apps

Flexible Pages for instant access to any record

Mobile Cards for inline HTML5 & Visualforce

JavaScript SDK for mobile dev anywhere

Your App is Already in Salesforce1 Mobile The Salesforce UI gets pulled forward into our Mobile App

If your app runs today, it runs in the Salesforce1 Mobile App You can preview your app by adding /one/one.app to the url: https://<Salesforce_instance>/one/one.app Your app may require updating or customization for a better UI/UX in the mobile app- ie make it Salesforce1 Mobile Ready Its important to update your app to work well and be Salesforce1 Mobile Ready

Table of Contents

Architecture & Integration Options Custom Actions

Left Nav Apps

Cards & Notifications

Branding

UX No-No’s

Architecture & Integration Options

Salesforce1 Mobile UI Architecture

3 Ways to Integrate into the Mobile App

App Menu Item - Visualforce page (Position determined by admin) Recent (Custom) Objects (Position determined based on usage) Action Tile in the Action Menu (Position determined by admin)

Recent Objects & Fields Appear First

Your custom object(s) will automatically appear in the Recent navigation if they have been accessed by the user Tapping on the object name takes the user to a list of recently used records and list views for your object.

Users Can “Pin” Recent Options Pin options appear after running a search

Custom Actions

Custom Actions Are New UX Experience

Actions are used to perform a function on the Salesforce platform

Actions also appear in the Chatter Publisher on the desktop

Actions should NOT be used for simple navigation shortcuts

Actions should have action-oriented names: New, Share, Update, Import, etc.

Actions can be easily created declaratively in setup

Your  Ac(on  Here  

Action Forms Enable Users to Move Faster

Action Tiles take the user to an Action Form

Use the Submit and Cancel buttons provided by Salesforce

Forms can be created declaratively or using Visualforce

Submit button can be disabled, programmatically, until user has completed required items

Action Form Best Practices

Focus on the mobile user

Show the minimum number of fields possible

Provide pre-defined values whenever possible

Keep your actions in Saleforce1 or have clear return path

Fast and Simple: Try to make your action achievable in one-step

Left Nav Apps

Flexible Page Apps Allow You to Customize With XML

Recommended approach Define name and icon for app Choose lists to display on home page Define your own action menu (optional) Page layout & style provided by Salesforce, no custom coding necessary

Visualforce Apps Allows Most Customization

Page layout and styling are 100% custom and provided by you

Action button are NOT available

Actions should be launched from buttons and left navigation should not be recreated

Recommended Visualforce Home Structure

Avoid pages that contain lists of lists

Summarize content via Cards

Use drill-ins to display additional items

Card Drill-In App Home

Cards & Notifications

Cards Group Info for Mobile Pages

Cards surface a useful snippet of data or content

Cards can represent lists (Flexible Pages), media, or other forms of content

Custom Visualforce Flexible Page

Notifications Can Be Customized

Centralized notification center on right side

Notifications are pushed to device with badging

To create a notification, publish posts that @mention the user or post to the user’s wall

Branding

Custom Branding for Salesforce1

What does “custom branding” mean?? Splash screen color & icon on login Publisher icon Header color **NOT the app icon on the home screen** Be thoughtful about what you brand vs your customer brands

Branding Do’s for Partners

App Name

Object Name

App Icon

Object Icon

Action Tile Icon

UX Things NOT TO DO

Four Salesforce1 UX Things NOT to Do

DON’T

Kick the user out of the app to your app without a

return path

DON’T

Add an extra / nested menu on the left side (ie only 1 stage left menu)

DON’T

Don’t rebuild actions and publishers (ie no publisher

or “+” on a VF page)

DON’T

Don’t recreate push notifications

Additional Resource

Additional Resources

Salesforce1 Mobile App Style Guide: http://sfdc-styleguide.herokuapp.com/?id=style Salesforce1 and Visualforce Best Practices: http://www.slideshare.net/developerforce/visualforce-in-salesforce1-1-1 Salesforce1 Mobile App Workbook http://res.cloudinary.com/hy4kyit2a/image/upload/s1_mobile_woorkbook_v3-21.pdf