How can we better enable customers to add text fields back onto the page?
In the website builder, customers have the ability to edit text inline, i.e. right where they'd expect to see the text appear on their website. Enabling inline actions provides the most contextual and convenient experience for customers; they don't have to look elsewhere in the UI to complete the task at hand.
However, if a customer deletes an entire text field inline, the only way to add it back is by finding the text field in the right sidebar. This requires customers to switch from editing inline to editing in the sidebar, and we had an abundance of duplicate UI elements in the sidebar. I explored ways to reduce context switching for customers and the overall UI footprint.
In collaboration with our team's lead designer, I created and iterated on 5 prototypes on CodeSandbox. We narrowed it down to 2 for unmoderated usability testing. The goal was to gauge how discoverable and intuitive the UI for adding back text fields was.
5/5 successfully deleted text
4/5 successfully added text field back
6/6 successfully deleted text
5/6 successfully added text field back
In the end, the success rates were essentially the same, and we leaned on the qualitative feedback.
Prototype A presented some points of confusion because participants didn't necessarily expect the content in the flyout to change depending on which text fields were hidden at the moment. One participant voiced he didn't understand what "hidden fields" meant.
Prototype B used toggles that are visually more prominent than a link-style CTA that says "Add". The persistence of the text fields in the flyout makes it more clear what is visible vs. hidden. One drawback is that the list of text fields can get very long for sections on the page that contain a lot of text.
Prototype B is the latest version that we will likely iterate on and implement in production.
Copyright © 2021 Tiffany H. Lam - All Rights Reserved.
Mostly powered by boba