I'm the sole product designer for a company with a product built around selling "knowledge packages" for getting your company on a better spot financially, fiscally, or productively.
I'm building the content builder for our employees to then publish to users, and the solution we ended up going for after doing research and establishing our value proposition was a "modular document builder" which we can build other features on top of in the future aligning with our product strategy.
I know I'm being vague, but I wouldn't want to reveal too much. Let me know if you need more info!
This content builder has Sections, which contain Rows; Rows contain components, which act as columns; Components can be Cards, Text, tables, etc.
These components can be dragged around the screen into different rows and/or sections through Drag'n'Drop indicator on the top left corner, and on the top right there is an option for additional actions. (Drag'n'Drop + Additional Actions = Action Bar)
When I came into the company, they had the Action Bar set to "always visible" on all components around the screen, but it made the screen crowded and added too much noise, and did not allow users to read the screen easily. I'm introducing Progressive Disclosure but I'm finding myself in a bit of a pickle which I'm having trouble fixing.
The issue is that this "Action Bar" appears on hover, but I don't know how to find an appropriate way to make it appear.
What I've explored:
- Resize and move. The action bar appears on hover instantly and makes the content box longer and displaces the content below. It is the option that I'm most inclined toward, but I still don't feel it is the right one as it might break the layout and displace the content.
- Cover. This simply doesn't work except for images. It goes over the content and can difficult editing the text on the top row.
There is also the option to reserve the space on top and add the same amount of padding on the bottom, which I'm not really fond of as it might add unjustified white space which can affect how users scan the content and break items related through the law of proximity. Here's a simple wireframe to support what I'm talking about.
Am I taking the right approach? Do you have any suggestions? Have you already solved this before?
Thanks so much, guys! 🚀