UI Usability Brainstorming & Ease of use, Panel edit menu

[torkelo]

I would like to improve the usability concerning the panel title and its dropdown.

Current problems:

• Not obvious that the panel title is clickable
• Not obvious that you can drag and move the panel by click and drag title
• The dropdown menu is getting large with multiple sub menus

Solution challenges:

• Focus on a simple UI that do not expose to many buttons, links and options
• The default mode should present a dashboard which is clean and with as little visual noise to
  distract users from the graphs and panels.
• Easy to use, make repetitive tasks quick

Brainstorming:

I would love to get ideas or mock ups for how to improve the title menu & edit options.
I have tried to add edit, move, duplicate, etc, icons to the panel title. But the click are for these icons are so small that it is not very easy to use. Also distracts when you are not in edit mode. I tried having these buttons only on panel hover but it is also distracting having a bunch of icons flicker in and out of visibility.

A partial solution that I am playing with, that might be an improvement from the dropdown.
Click on the panel title will transform it into an edit menu:

This does not solve all problems. But could be a step in the right direction. This issue will likely not be solved for 1.8 as I will be working on making 1.8 ready for release candidate status next week. But I figured this issue could be good to get going now in order to get feedback, suggestion & mock ups.

Getting a good, easy to use UI, that is simple and yet powerful, takes a long time, and a lot of thought as well as patience :)

[edasque]

Your solution was my first thought. How abut you make the icons appear on hover on the title. I feel it'll be easily discoverable. Add first load tool tips maybe to increase awareness

[behinddesign]

Not obvious that the panel title is clickable
I've always found "cogs" a useful way of describing that something can be done here, a cog, faded to the far right which opens up into an expended set of options similar to your image would solve it being invasive.

Full set of iconed options (with hovers) <==opens=up== Small cog (faded to the right)

Alternatively, on hover of the label, a single cog appears near it (less mouse movement), which expands the full set of options

Not obvious that you can drag and move the panel by click and drag title
I think this one isn't such a big deal given the "cog" mentality, there's a cog, I wonder if I could drag. Alternatively you could put in corner hovers which fade in a simple drag icon.

Not requested, but the menus on the left of the row
With this one I've a feeling being minimal may be somewhat detrimental. The focus at this point is not to be showing the graphs as best as possible, but presenting the ability to edit the row as best as possible. I would suggest a "slide in from left" menu, which is distinctly different from the underlying UI, that sits on top of the graphs. I would avoid using secondary tier items as from a usability point of view. They can be very volatile if not absolutely accurate with your mouse.

Replace second panels with http://jqueryui.com/slider/ (Something better than that, for selecting size) and bringing add panel into the main panel with a spacer after the second item to show them as "grouped".

http://blogdotwnmlivedotcom.files.wordpress.com/2013/09/navmenu.png taking a leaf from a good mobile UI, slide in a menu from the left, compressing the graphs, with a border around the entire row.

• Illustrates what you're editing, distinct design change and bordering.
• Compressing graphs still gives you an idea of what you're editing, but moves the focus onto the menu.

Lastly, icon everything, whether it's an action or something which needs to grab the users attention. Icons improve user interface speed (personally, nothing to back this up), since they give my eyes quick reference points to what it's trying to illustrate, and ultimately my speed to recognise what I need to do.

[torkelo]

@graham192 good suggestions.

1. Cog icons, I have tried this, the click are is a little to small. Did not feel right. maybe with larger font...

The row menu is fine for now I think. But could also be improved. The main problem is the panel options. The option I showed above where a bunch of icons show when you click the title is also problematic as rows with a very small span (1 or 2) would not fit all icons. I think this needs to be a popover or a dropdown of some sort.

[torkelo]

After having spent 8 hours trying to crack this issue I think I have something that might be something.

Its absolutely positioned like a popup so it will work with very small panels (the one shown issue description did not work for panels with very small width).

[phagedorn]

👍

[torkelo]

Can be tested here:
http://play.grafana.org/master/#/dashboard/db/grafana-play-home

Please give feedback. I have tried to make it smart in the way that it will not disappear when you hover, and when you hover out you will get one second for it to disappear, if you hover back it will not disappear, during panel drag move it will not disappear, etc. Lots of scenarios. Also have handled positioning when panel is small and close to left or right window bounds.

[jgerschk]

I think some variables on page titles broken with this addition. So in the previous build graphs were showing variables correctly, with this release they are not. See examples below. I'm not sure if I missed something that I needed to change.

As you can see I have titles using either [[host]] or $host, both of which worked before this version in (git clone), I pulled yesterday, before this change and it was working as well.

[torkelo]

@jgaedicke you are right, I found and fixed it some hours ago, but cant push to Github right now, seems github SSH access is down :(

[torkelo]

@jgerschk fixed in master now with this commit 285d246

[jgerschk]

@torkelo just pulled the master again with that commit, and all is back to normal. Thanks for the quick fix/turn around for this.