Problem/Motivation

The toolbar toggle button that helps switching the menu from horizontal to vertical and versa not user friendly.

Proposed resolution

Just aligning it left may solve the problem. http://invis.io/MW7OS23K
Adding hover text (a title attribute)

Remaining tasks

To be determined.

User interface changes

To be determined.

Original report by jhodgdon

I just installed 8.x and got the new toolbar.

After clicking "Menu" to open up the menu (it opened horizontally across the top of my screen), I saw this little arrow waaaaaay over on the right side (I didn't notice it for quite a while)... I wondered what in the world it could be, so I clicked it, and voila! My menu vanished! Oh, then I noticed it re-appeared down the left side.

Which is to say, I don't think the UI for moving the menu to the other position is very obvious. Maybe it could be made clearer? The "move it" arrow doesn't even have any hover text (at least on my browser, Firefox 13/Ubuntu) to clue me in.

Meta issue: #1846970: [meta] Responsive Toolbar follow-ups

Dependencies

#1847198: Update the structure returned by hook_toolbar()

Comments

Dave Reid’s picture

I'm ashamed it took me a while to figure this out at first too.

benjifisher’s picture

Title: UI is not clear for horizontal/vertical toolbar switch » UI is not clear for horizontal/vertical toolbar toggle

Adding hover text (a title attribute) should be easy. What should the text be?

It takes some work to reproduce, but I think it is possible to get a wide page where you have to scroll to see the toggle.

The only obvious solution is to put the toggle before the toolbar instead of after (on the left instead of on the right for LTR languages). What do you think of that design? It should be easy to implement once #1847198: Update the structure returned by hook_toolbar() is resolved.

tkoleary’s picture

That may be a good solution. Have a look at what I've done in the invision prototype though. Just aligning it left may solve the problem.

http://invis.io/MW7OS23K

jhodgdon’s picture

Aligning it left is definitely better than the default that is in Core now!

benjifisher’s picture

I like putting the toggle with the search box. Why not do that in horizontal mode as well as vertical?

Bojhan’s picture

I am not very convinced this is a big issue, the fact that it took a while to figure out is not necessarily bad. Because its not a control you change very often after, and placing it closer to the menu items adds a bit of clutter since its conceptually a different kind of control (it doesn't navigate you anywhere). I'm not convinced the clutter trade off, is worth the tiny bump that people need to take learning about this.

Generally people just miss things on the right side of the toolbar, we have seen this in testing all the time - that doesn't mean we should float everything to the left. Because that will make it more noticeable, but also harder to use the 95% of the time functionality.

jhodgdon’s picture

Where is this setting saved, and who is it saved for? Can I set it up for a site and have that setting retained for all the inexperienced users? My experience today logging back in to an 8.x site is that I had to click "Shortcuts" again to get the shortcuts to appear. It didn't remember that the last time I logged in, I had them visible... that in itself is annoying, and leads me to suspect that the setting for where the shortcuts/menu appear would also not be saved except maybe in a cookie (which had been cleared when I logged out and/or closed my browser).

Shyamala’s picture

@jhodigdon this is valuable point that you have brought up. There has been requests for making the toolbar configurable and intelligent even earlier.

Refer earlier discussion by Bojhan .
Attiks further extended this to request for:

Regarding "Can we move the toggle horizontal/vertical to the user profile?" and only speaking for myself: I access the same site using a desktop, laptop, tablet and smart phone, mostly depending on where I am and on the time of the day, so I rather not have it as a user setting ;-)

Starting a fresh issue for this at: #1858728: Toolbar toggle button to be Configurable & Intelligent and adding it to toolbar followup meta issue.

benjifisher’s picture

@jhodgdon:

I have not studied the JS, but from reading the original issue I gather that the state is stored in "local storage." I think that means it is stored in the browser, and I am not sure whether it persists when the browser is closed and restarted.

I think the thought (when this was implemented) was that most people will be happy with the defaults, perhaps choosing different breakpoints depending on their site's configuration. Now that the original patch has been committed, we can find out how many people like it.

I think it should be pretty easy to add one or two AJAX callbacks and an new section on the user account page. Maybe a little CSS+JS voodoo on the account page to show the toggle state for the current width and a "more" link to show the settings for other widths.

The hard part will be figuring out what takes precedence if there are two browsers open and they have different settings ...

tkoleary’s picture

If my understanding of temp store is correct we could put it there.

tkoleary’s picture

Jesse beach just confirmed this. Just created a new issue for this #1863824: Use the temp store to remember the last state of the toolbar per user and reload it

jhodgdon’s picture

Just a note: Comments #7-11 (yes, one of them is mine, sorry!) are off-topic for this issue and should be discussed on the other issues mentioned in #8 and #11.

jhodgdon’s picture

Issue summary: View changes

Filling issue summary under different headings

Wim Leers’s picture

Issue summary: View changes
Status: Active » Closed (works as designed)

Adding hover text (a title attribute)

This has been there for a long time now.

Together with #6, the fact that there are now new (clearer) icons (also for a long time already) and #1850164: Default state of toolbar should show menu tray in non-narrow viewports, I think we can close this. If you disagree, feel free to reopen.

Bojhan’s picture

Title: UI is not clear for horizontal/vertical toolbar toggle » Toggle to change orientation of toolbar is not easily discoverable

I am also not really sure about this issue. Its inherent to the design that you won't notice this very quickly, that is on purpose - because it is not a crucial feature, it is merely to support different ways of working. We can make it more obvious, but that will be at the cost of other things and possible confusion as people accidentally click it.

I am not too convinced we should change this. Its common to make everything big, and close to each other - so that everything is noticeable, but in reality it mostly has an adverse affect of feeling cluttered. By moving buttons that need to be there for "preference" reasons off to the right, allows us to provide a focused UI for the main navigation. Every design has pro's and con's and I feel like this is simply a con.

I'd like to move the configurability to #1863824: Use the temp store to remember the last state of the toolbar per user and reload it , that should resolve most of it.