Salesforce Page Layout Editor
       
     
Drag and Drop Matrix Framework
       
     
Interaction Framework
       
     
Click (or Tap) to Add
       
     
Advanced Gestures
       
     
See the Full Presentation
       
     
Salesforce Page Layout Editor
       
     
Salesforce Page Layout Editor

designing Salesforce pages without code

Client: Salesforce Platform Team

Goal: improve the experience for administrators to intuitively customize the organization of components on detail pages 

My Contributions: review and inventory of previous implementation, competitive analysis, refinement of design patterns, interaction design

Deliverable(s): scenarios, wireframes, presentations, documentation, interactive prototype

Team: Shlomo Goltz, Dan Donovan, Beril Guvendik Maples

The Page Layout Editor (PLE) is an essential tool used by thousands of administrators to customize their SFDC instance. The current generation PLE has usability issues that need to be addressed before my team can lay the foundation for an enhanced feature set and several more years of usage. Customizing Page Layouts is the 4th most common task admins perform while using Salesforce, and it is imperative to improve the framework organization & layout, drag-and-drop functionality, and provide the groundwork for mobile access in the future.

Drag and Drop Matrix Framework
       
     
Drag and Drop Matrix Framework

To improve upon the drag and drop user feedback, I utilized a design method from the user experience group at yahoo to break down all the interesting moments in the drag and drop experience. The picture above represents a fraction of all the factors considered, but does give a good representation of the thinking that goes into something that seems simple on the surface.

Interaction Framework
       
     
Interaction Framework

In order to make the page layout editing experience more in line with other Salesforce tools, I reworked the underlying framework so that a global toolbar appears at top, and the tray of components to drag onto the canvas appears on the left.

Click (or Tap) to Add
       
     
Click (or Tap) to Add

The design of the new PLE was created to allow for both mouse and touch input on Windows 8 and other mobile platforms.

Advanced Gestures
       
     
Advanced Gestures

I devised a set of standard gestures and taps that are easily discoverable, but wanted to provide additional means of control for power users, such as spread to add (above).