0

Context:

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!

The problem:

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! 🚀

Improve this question
9
  • 5
    How is this action bar triggered for people who aren't using a mouse?
    – JonW ♦
    Commented Oct 13, 2022 at 13:57
  • Have you explored using a simple three-dot menu that appears over the card on hover for editing options, and just making the section/card draggable without an icon to click? If the user clicks and holds, the card becomes draggable.
    – Izquierdo
    Commented Oct 13, 2022 at 14:46
  • @JonW Hi Jon, are you referencing this for accessibility reasons? The product is not mature enough at the moment and it doesn't have as many users to take into account people who do not use their mouse. As in, dev and design resources are invested in things that bring intrinsic value. We are still in the "angel investors" phase. Could you provide more backing on not considering this an edge case? Could we get fined over this? Thanks for your answer!
    – Angel
    Commented Oct 13, 2022 at 14:54
  • 1
    If you're concerned about the toolbar menu covering or displacing the content, then why not float it next to the card?
    – Ro Achterberg
    Commented Oct 13, 2022 at 17:07
  • 1
    It's a classic mistake to think accessibility can be thought of later. You are in the position to get it right from the start, something that many designers and developers will envy who are now struggling to make their existing product accessible.
    – jazZRo
    Commented Oct 14, 2022 at 11:34

2 Answers 2

Reset to default
0

The whole list is going into an edit mode. So you could put an edit button at the top of the list that enables an edit mode where all the "action bars" are showing

Here's an example:

enter image description here

enter image description here

Improve this answer
3
  • Hey moot! Thanks for your commentt. Yes, that is exactly the approach we followed at the start, and I even added a color group exclusively for edit mode as feedback that the user was editing (As we got feedback that users didnt know if they were editing or not) However, this approach made the screen look super crowded and users had issues reading it. I'll try to explore this approach to see if there is a way of making it less crowded by changing colors.
    – Angel
    Commented Oct 21, 2022 at 9:14
  • Ah, you tried this? You only said you tried with the bars always showing. Was the top list title and buttons frozen or part of the list? Users would hit the EDIT LIST button and not know what happened? Or would they move on and forget they hit it?
    – moot
    Commented Oct 21, 2022 at 19:22
  • Yes, by the bar I meant the top card menu with the drag and drop indicator and the more options button. Actually, it was more subtle than that. Showing the bars provided nice feedback that you were now editing the list. However, users took more time to find the components they wanted to edit given a specific task (and even knowing where the object is) because the screen was crowded with interactable bars. We chose to have the bar only be shown upon hover, and that fixed it. However, the content was being pushed down, which broke the layout and confused users.
    – Angel
    Commented Oct 25, 2022 at 8:37
0

The control bar can extend upward, and over what is above, therefore not affecting layout. It hides some content, but not on the card being manipulated.

cards cards controls

See it in action:

cards animated

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.