Image for post
Image for post
Stop right now, thank you very much (“Stop Sign” by thecrazyfilmgirl, used under CC BY / Cropped and saturated from original)

Turning Constraints into Catalysts for Creativity

Lessons from Designing Inline Edit Experience in Lightning

Raymon Sutedjo-The
Mar 3, 2016 · 6 min read

Inline Edit 101

Image for post
Image for post
An example of inline editing a document title in Google Docs
Image for post
Image for post
Sometimes it appears inline
Image for post
Image for post
Sometimes it doesn’t

Auto-Saving vs. Explicit Save

Image for post
Image for post
Inline editing in Salesforce Classic. Note the explicit “save” button.

Field-by-field vs. All Fields

Image for post
Image for post
A “popover” example for inline editing
Image for post
Image for post
Example of field validation rule in Classic
Image for post
Image for post
Correcting field validation error in the popover model

Rethinking the Flow

Image for post
Image for post
The revised design opens up the whole form when the user tries to edit one of the fields

Finessing the Design

Image for post
Image for post
Pencil icon indicates editability
Image for post
Image for post
Accessibility can help with clarity
Image for post
Image for post
Transitioning from view to edit
Image for post
Image for post
Editable section is emphasized in edit mode

Constraints: They’re Not All Bad


“But out of limitations comes creativity”
— Debbie Allen


Salesforce Experience and Design

A collection of stories, case studies, and ideas from…

Thanks to Ian Schoen

Raymon Sutedjo-The

Written by

Product/UX designer. Currently @medium, formerly @SalesforceUX. Urban planning & transportation enthusiast. Recording artist (ok, not really).

Salesforce Experience and Design

A collection of stories, case studies, and ideas from Salesforce design teams

Raymon Sutedjo-The

Written by

Product/UX designer. Currently @medium, formerly @SalesforceUX. Urban planning & transportation enthusiast. Recording artist (ok, not really).

Salesforce Experience and Design

A collection of stories, case studies, and ideas from Salesforce design teams

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store