UX Iteration: Trash

As you arrange components on your page, you’ll want to remove them from time to time. There are a few ways to do this. We started with the most obvious: a trash-can drop zone in the corner of the screen where you can drag items to be deleted.

image00

This looked neat, and it worked for the most part. However, removing multiple items started to fatigue the eyes and fingers, moving the mouse back and forth across the screen. Larger components also obscured the UI below the ghosted image, making it hard to tell when your mouse was over the trash.

So we’re iterating on this UI, by giving each component a trash can icon instead. As you hover your mouse over each component, an icon-button appears in the corner. Click it, and say bye-bye to that component. This is a much quicker interaction, so it is an improvement over the old drag-and-drop.

image01

Now, the icon-button pops up a lot and it does start to feel somewhat cluttered as is appears and dissappears around the page.

Iterating on this concept, it might be nice to be able to select the component, then delete it. Like you would in a graphics program. This would also work in tandem with more advanced options we have in the roadmap, such as editable text regions.

Currently, this experience is good enough for Phase I. So we’re rolling forward with it, with the plan of iterating down the line!