Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle for expanded/collapsed toolbar is not obvious #807

Closed
enzus opened this issue Aug 6, 2015 · 24 comments
Closed

Toggle for expanded/collapsed toolbar is not obvious #807

enzus opened this issue Aug 6, 2015 · 24 comments

Comments

@enzus
Copy link

enzus commented Aug 6, 2015

I found out by chance that clicking on the Plone logo in the toolbar toggles between an expanded version (icon + label) and a collapsed view (icon + label on hover). I'm not sure we have icons clear enough to suffice alone, hence I'm not sure about the value of the collapsed version but we should at least try to make the toggle more obvious... unless we want to keep it as a sort of easter egg?

@davilima6
Copy link
Member

I don't think we need an easter egg here (although Plone probably lacks some) but I do believe there's value in having both collapsed and expanded versions. So +1 for adding a discreet arrow that animates changing direction when clicked in order to hint on the sliding behavior.

Maybe we could move the current arrow-down below toolbar logo to the right (over content). Sorry if I miss something but I don't see much meaning as it is.

@enzus
Copy link
Author

enzus commented Aug 6, 2015

OK for keeping the two versions but I struggle to see an elegant way to communicate it. I like the idea of keeping clear the area around Plone logo in the toolbar. Could you please sketch something up to help us visualise it?

@davilima6
Copy link
Member

Something like this:

toolbar-contracted

toolbar-expanded

Without the buggy padding (which should be better fixed when submenu arrows are dropped in favor of hover behavior).

@enzus
Copy link
Author

enzus commented Aug 6, 2015

Mmhhh I'm not convinced as the arrows this way seem more related to the body on the right than the toolbar underneath. I know it would probably be ugly but for the sake of clarity we should probably just add a text underneath the Plone logo which alternatively says "expand/collapse toolbar" or "show/hide toolbar labels" and keep the little arrow down.

@davilima6
Copy link
Member

-1 on texts below logo but we could go for a tooltip on the toggler. Even there, "Expand/collapse" or "Expand/collapse toolbar" should be enough since it's less expensive for a user to test and get acquainted with the behavior than it is to be forever exposed to a not so critical contextual helper.

Apart from that I really don't see why there is an arrow below logo right now.

@enzus
Copy link
Author

enzus commented Aug 6, 2015

OK a tooltip sounds like a good compromise! Although we would miss it on touch devices?

I guess the reason of the little arrow is to create some correlation with the elements of the toolbar. Imagine the toolbar in a themed website context: that arrow seems to say "hey this is a Plone websites and these are the tools".

@davilima6
Copy link
Member

I see but I don't think it's necessary because sidebars are an already established design pattern and our toolbar is fixed and stands out by itself in relation to the rest of the website. Besides only logged-in users see it so they don't need extra help to figure out those are the CMS tools.

@enzus
Copy link
Author

enzus commented Aug 6, 2015

Didn't say it's right to have it, I just guessed why is there :)

@davilima6
Copy link
Member

Np, just making my point. Thanks for bringing this issue up!

@jkubaile
Copy link

jkubaile commented Aug 6, 2015

How about moving the expand icon inside the bar like it is done for the other menus like adding?

@davilima6
Copy link
Member

Not bad, but still not sure which I prefer (specially if the other menu arrows are dropped).

toolbar-contracted-arrow-inside

@enzus
Copy link
Author

enzus commented Aug 6, 2015

Guys the more I look at it the more I think we should get rid of the arrows altogether. I know it's a legacy pattern and I usually prefer being explicit to being implicit but in this case I'm sure it's clear enough and with the mouse over discover what's behind each menu will be a matter of ms.

@pigeonflight
Copy link
Member

I think a sidebar strip is more in line with common visual vocabulary.
Then it would be okay to leave the logo as an easter egg for those who know.

expandable-sidebar

@hvelarde
Copy link
Member

The option of using the toolbar expanded or collapsed should be on the personal preferences form and not where it's now:

selection_005

@vangheem
Copy link
Member

Agreed. Trying to nestle something in the UI seems wrong...

@davilima6
Copy link
Member

For consistency I think we should have both site-wide and personal settings, just like for the other 3 items.

@djay
Copy link
Member

djay commented Sep 16, 2015

I'm really confused by what the suggested options are from reading the comments. Can someone who understands edit the original issue and list them?

We aren't suggesting removing ability to expand and contract to just via the personal preferences, are we? It's really useful to switch quickly between both.

@davilima6
Copy link
Member

This issue is about adding an always available visual toggle to give the user a visual handler to the expand/contract toolbar behavior.

I suggest @hvelarde opens a new issue regarding the location of the persistent setting: @@personal-preferences, @@site-controlpanel or both (my vote).

@hvelarde
Copy link
Member

I opened another issue that I think is more relevant: Do we really need 4 versions of the toolbar? #1001

@enzus
Copy link
Author

enzus commented Sep 16, 2015

Sorry guys, just seen this as I'm still missing any sort of notification from github so have to go around exploring tickets!

I think the solution by @pigeonflight is very elegant, correct and effective pointing the arrow from the logo down the toolbar and reducing all the other arrows to one in a sidebar strip.

I'm not sure I understood what you want to be a personal preference? Would the user activate the possibility to have this easter egg working or would decide once and for all for the collapsed or the expanded mode?

@davilima6
Copy link
Member

This is not (and shouldn't be) an easter egg, that was a joke regarding the lack of visual pointers for the expand/contract behavior.

The personal preferences we're talking about is the @@personal-preferences view on which you can override site-wide/all-users defaults like wysiwyg editor, language and timezone. Now it has been suggested (and I agree) to add toolbar's position, which currently lives only in @@site-controlpanel.

@hvelarde
Copy link
Member

I think we are missing some serious analysis on how users use the toolbar: do they really change from expand to collapse to expand so often that the options needs to be in place all the time? or is just find to leave it in the personal toolbar?

I agree with @davilima6 that the vertical/horizontal option should be in the personal preferences also.

@enzus
Copy link
Author

enzus commented Sep 17, 2015

OK, I now get it and, yes, I agree as well that the vertical/horizontal option should be in the personal preferences, basically to state which default way (expanded or collapsed) the user would prefer to see the toolbar.

I honestly don't think this mechanism is essential but it could come handy in certain circumstances. The analysis can be done but Plone covers so many different situations that I'm not sure we can identify patterns of usage here.

@jensens
Copy link
Sponsor Member

jensens commented Jun 20, 2019

nice to have which stood in here for too long, I think the solution as we have it in 5.2 now works fine.

@jensens jensens closed this as completed Jun 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants