Salesforce1 UX Overview for ISVs and Partners


Published on

Overview of UX best practices when building your Salesforce1 mobile app including "Do's & Do Not's". This deck can also be found on the Salesforce1 Mobile Chatter group.

Published in: Technology

Salesforce1 UX Overview for ISVs and Partners

  1. 1. Salesforce1 Mobile App UX Design Guidelines For Independent Software Vendors and Partners
  2. 2. 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
  3. 3. Your App is Already in Salesforce1 Mobile The Salesforce UI gets pulled forward into our MobileApp If your app runs today, it runs in the Salesforce1 MobileApp You can preview your app by adding /one/ to the url: https://<Salesforce_instance>/one/ 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
  4. 4. Table of Contents Architecture & Integration Options CustomActions Left NavApps Cards & Notifications Branding UX No-No’s
  5. 5. Architecture & Integration Options
  6. 6. Salesforce1 Mobile UI Architecture
  7. 7. 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 theAction Menu (Position determined by admin)
  8. 8. 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.
  9. 9. Users Can “Pin” Recent Options Pin options appear after running a search
  10. 10. Custom Actions
  11. 11. 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  
  12. 12. Action Forms Enable Users to Move Faster Action Tiles take the user to anAction 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
  13. 13. 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
  14. 14. Left Nav Apps
  15. 15. 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
  16. 16. 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
  17. 17. Recommended Visualforce Home Structure Avoid pages that contain lists of lists Summarize content via Cards Use drill-ins to display additional items Card Drill-InApp Home
  18. 18. Cards & Notifications
  19. 19. 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 VisualforceFlexible Page
  20. 20. 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
  21. 21. Branding
  22. 22. 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
  23. 23. Branding Do’s for Partners App Name Object Name App Icon Object Icon Action Tile Icon
  24. 24. UX Things NOT TO DO
  25. 25. 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
  26. 26. Additional Resource
  27. 27. Additional Resources Salesforce1 MobileApp Style Guide: Salesforce1 and Visualforce Best Practices: Salesforce1 MobileApp Workbook