Insights - Editor mode, renaming, accessibility and feature find ability

[cdpestitschek]

Insights

I'm currently working on a new feature that will allow managers to personalize the metrics they want to see on their dashboards. They'll also have the freedom to create new dashboards from scratch or even duplicate existing ones, giving them more control and flexibility over the data they're analysing.
While working on this feature, I came across some questions and one of them is regarding the stepper component. I'm already in the process of creating the dependency form, but I would love some guidance from the system design team on other aspects.

Rename dashboard
I noticed that only rename is available when we have the text input field. But his style, is just for normal text, not for headings (h1)

Doubts, can I customize and enable it only when the rename action is triggered, and customize for H1? or should I use a modal in this case?
a. Inline title edit
b. Moda for renaming

I understand that the ideal would be to have a landing page for the management / management template for this type of feature, but this was not prioritised in the roadmap for P1.

Editor mode UI
The only other product that contains this build mode is for another persona, in this case we have a similar experience on the Console. so I would like to check, if not for the same persona, if we should keep the same editing format or if we can explore other ways

a) Console style (low fidelity)
b) Other way

How to edit widgets
We want to propose two ways, one is directly in the edit and the other is to have a kind of editing mode (thought of bucket actions in the future, or even repositioning)

However, I would like to collect feedback on whether we should incorporate the 3-dot menu in each widget, or if we could work and how to improve if the trigger for this menu was selected and right-clicked on the widget.
Examples

Looking forward to hear back from the team,
Carol

📚 ASSETS to support this thread:
General Figma file
Doc with doubts & feedback

[SiTaggart]

Hi @cdpestitschek

Rename dashboard

Whether it is inline edit or modal, both need a dedicated trigger to make it accessible. Something I can focus on and navigate to with my keyboard, and perform an action on to enter edit mode. That can be an icon button next to the title itself, like a pencil or something, or a menu item like you have in the modal exploration. We haven't really seen anyone doing inline edit yet, so we don't have any strong opinions. A popover is another option potentially.

Having a trigger is the only requirement we'd advise on right now until we do some design exploration on inline editing as a pattern.

Editor mode UI

The second Figma file isn't loading for me, and I think we need a little more detail on what the question is before we can give an answer.

How to edit widgets

Partly the thing to consider here, is again, the edit action needs a dedicated trigger that I can navigate to with my keyboard. So, right click to edit, though nice, isn't quite enough affordance for non-mouse users. The three dots menu provides that trigger for you, so it's a good alternative for what you want to do.

[cdpestitschek]

Thanks for taking time to provide those clarifying points and observations about the triggers and accessibility points.

About the Editor mode

We were considering the possibility of allowing users to take quicker actions in bulk or even reposition widgets in the future. To enable this functionality, we were thinking of implementing an "editor mode" at the page level, instead of just at the component level like in the previous example we mentioned.

Where now they would be able to delete and customise. But in the future also move, copy, etc.
Which of these two variations do you think would be more recommended to use? We have a low-fidelity concept in mind, but we hope it conveys the initial idea.

Just a heads up, the Console persona is not the same as the Insights persona. Let me know your thoughts!

Similar to Console:

Other exploration:

And again, thanks for all the support

[SiTaggart]

Hi @cdpestitschek

This still might be quite hard for us to understand from these screenshots. I'm not entirely sure what that edit bar is supposed to do or how you get to it in the first screenshot for example.

With regards to:

the Console persona is not the same as the Insights persona.

That shouldn't really matter in this situation, everyone is trying to do the same thing from a user interaction perspective.

To give some general feedback, the second screenshot one might be more towards what I'm experienced with in the past. Essentially, it's an edit mode of a dashboard. To get to the edit mode you would hit the edit button, top right. It would switch the entire dashboard into editing, exposing more controls to the user to use to tweak the dashboard. We did something very similar at Salesforce, I'll drop a demo video below. Here you can see we dump the dashboard into an edit view, there's a edit and remove action on each width. You can resize, move each widget. It's all keyboard accessible, and we expose visible controls for each thing you can edit.

https://www.loom.com/share/2cf074d09f8f474a8164719321181a05

If you need more guidance, I'd suggest signing up for Office Hours at this point.

Let us know

[cdpestitschek]

This example fits well with what we are looking for. Thanks for sharing. 🙌