Call for feedback - draft for optimising the current UI

[idaiv]

While heavily working on the concept of the new UI, we are fully aware that the old UI will stay quite for some time, therefore we would like to optimise the usability and improve the overall experience of the Pimcore’s features.

We’re planning to make noticeable updates on the UI of the navigation bars, more specifically the left vertical bar and the horizontal toolbar on detail tabs. Since these would affect the current user experience, we would like to verify our assumptions with already experienced and advanced users. Our community feedback is highly beneficial before we’re actually applying the updates.

We appreciate your input! Thank you!

Improvements:

• The vertical navigation bar has been split into three designated categories: profile related; functionalities; and platform status (version, license status, ...).
• “My profile” and “log out” are placed under the user icon. Right below it are the notifications. That is the profile related category.
• The version and license/subscription status can be seen when hovering over the Pimcore logo in the bottom left corner.
• The toolbar is now optimised into a single section with the most common functions and statuses. The rest of the functionalities that were part of the top toolbar and the additional tabs are now hidden under a three dot menu. That allows customisation of the toolbar for certain functions by simply selecting/unselecting which one to appear.
• Naming of the functions in the toolbar has been removed for the closed tabs. Once the tab is on hover over, the name appears. When opening certain tab, then the full name is visible.
• Save & Publish button is now in the right corner of the toolbar.

A couple of question that will help you and us find the right answers:

• What is the most significant change you noticed at first?
• Is there something that confuses you as an experienced user?
• What is your feeling of the vertical navigation bar separation by categories?
• Can you differentiate the main functions on the toolbar only by their icons?
• Are there important functions that are now hidden and harder to access since they are placed in the three dot menu?
• Apart from the additional tabs, do you have preferences for other functions hidden in the three dot menu (such as delete, copy ID, etc.) that you would like to be able to “pin” on the toolbar?

[dpfaffenbauer]

What is the most significant change you noticed at first?

Document Toolbar should have common used functions like reload, element-id, info button and "find in tree" button.

Is there something that confuses you as an experienced user?

no, seems legit.

What is your feeling of the vertical navigation bar separation by categories?

Fine.

Can you differentiate the main functions on the toolbar only by their icons?

Well, I am using Pimcore for over 11 years now and I keep clicking on the wrong icons (eg. file and tools). Maybe thats just me being stupid or a bad habit or bad icons :D.

Are there important functions that are now hidden and harder to access since they are placed in the three dot menu?

Yes, as said above: Things I use the most: Info, ID, Show in Tree

Apart from the additional tabs, do you have preferences for other functions hidden in the three dot menu (such as delete, copy ID, etc.) that you would like to be able to “pin” on the toolbar?

No. I like the Idea of the dot-menu, makes things leaner and cleaner. It should be extendable though with custom bundles ;)

[passioneight]

Word for word what he said - especially, the part about clicking the wrong icons 😄

[idaiv]

Thank you for the insights! The custom bundles extension is great!
Icons seem to be not so intuitive, which ones are you having the most trouble recognising? @dpfaffenbauer @passioneight

[passioneight]

I, for one, could remember the menu entries when we still had coloured icons much easier. Because it is simpler to remember a colour than a complex shape. Though, I appreciated the change in design :-)

What I would really love to see is the same interaction for the same types of components. For example, a tab should be closed when clicking the mouse-wheel while hovering over said tab. This functionality is only available for some tabs (e.g., objects, but not the ones in the class editor).

Here's a related discussion that might be of interest: #12795 :-)

[idaiv]

That is an interesting observation. Thank you! Usually too colourful icons make an interface heavier and are distracting from the main functionalities.

Regarding the mouse-wheel close function - we will investigate whether there are limitations on that, otherwise, it seems to be a convenient "shortcut". 🙌

[idaiv]

Here's a related discussion that might be of interest: #12795 :-)

The discussion you shared is indeed insightful and helpful! Thank you!

[ChrisB9]

It's really nice, that you are planning to improve the design bit by bit.

What is the most significant change you noticed at first?

The layout shift is so significant, that I actually had to search the save button. And those three dots felt almost invisible.

Is there something that confuses you as an experienced user?

As much as the menu needs a refresher, stuffing everything into one spot feels worse than what we have now. I think it should be split into multiple toolbars and the save button should imo stay on the left side.

What is your feeling of the vertical navigation bar separation by categories?

It's very overloaded, even though the separation makes its a lot more organized.

Can you differentiate the main functions on the toolbar only by their icons?

I can, but I think there really is a need for different icons. Especially in the frame shown above, we see a settings icon and three dots. I can already see myself clicking on the wrong one. (But I personally really like that it's a icon based menu, that's what I appreciate a lot, too, from phpstorms new layout)

Apart from the additional tabs, do you have preferences for other functions hidden in the three dot menu (such as delete, copy ID, etc.) that you would like to be able to “pin” on the toolbar?

No, it's already very full in there. But maybe having a global configuration that allows me to add and remove items in the toolbar and/or the tab-bar

[idaiv]

Thank you for the feedback, @ChrisB9!

The layout shift is so significant, that I actually had to search the save button. And those three dots felt almost invisible.

As much as the menu needs a refresher, stuffing everything into one spot feels worse than what we have now. I think it should be split into multiple toolbars and the save button should imo stay on the left side.

The transition from the current to this version seems to be too quick since it made you search for the buttons. We discussed splitting the toolbar into additional extendable ones, however then considering different scenarios, it appeared that would be just a step into moving all the functionalities in the three dot menu in the end. Just for reference, this is what I mean with the extendable tabs:

It's very overloaded, even though the separation makes its a lot more organized.

We thought of having some space between the first category "Profile related" and "Functionalities" as this would appear as more distinguished groups of elements. Another idea could be placing the notifications in the profile submenu. What is your thought on that?

I can, but I think there really is a need for different icons. Especially in the frame shown above, we see a settings icon and three dots. I can already see myself clicking on the wrong one. (But I personally really like that it's a icon based menu, that's what I appreciate a lot, too, from phpstorms new layout)

I understand your confusion and others have similar feeling to yours. That is something we have to work on indeed.

No, it's already very full in there. But maybe having a global configuration that allows me to add and remove items in the toolbar and/or the tab-bar

Wouldn't that require more effort for you each time you want to make a change of the configuration? Our assumption was that the three dot menu allows quicker access and more customisable view when working on various element types and depending on the perspective/ domain.

[rberneder]

I like the proposal of a collapsible "advanced" toolbar. Besides your MS application example this concept can be seen in the existing CK editor and the future TinyMCE editor and would integrate smoothly into the Pimcore UX/UI concept IMHO.

I like the general concept of separating the tools in two groups, because:
Now if a user/role should experience a lean toolbar it can only be achieved with permissions. But if we could configure what certain users/roles see in their "primary" toolbar, we wouldn't have to restrict them – the less important buttons and information would just be collected in the expanded toolbar.

[rberneder]

What is the most significant change you noticed at first?

The unification of the toolbar and the tabbing.

Is there something that confuses you as an experienced user?
Are there important functions that are now hidden and harder to access since they are placed in the three dot menu?

I agree with previous posts: I miss the most crucial tools (refresh, show in tree and ID).

What is your feeling of the vertical navigation bar separation by categories?

I like it a lot. Lifting the profile related topics from bottom to top puts more emphasis on each person/user. This makes Pimcore a bit more personal and friendly.

Can you differentiate the main functions on the toolbar only by their icons?

• I like the monochromatic icons better and find them intuitive.
• I always had troubles with the dependencies-icon (thank you for giving it a label) – maybe there is a more intuitive icon for that?
• I find it quite counter-intuitive that e.g. "Dependencies" is actually a tab (like the ones to the left of the save-button) instead of an action. When I'm on the dependencies tab, which tab-icon is active?

[idaiv]

Hi everyone! We have reviewed your feedback - thank you once again for the input! You can see here the updated version of the layout:

Some of the changes:

• notifications are now hidden under the profile submenu.
• the vertical menu functionalities are centre aligned, so they give better visual separation between the top and bottom categories
• the three main actions that were mentioned by you are back on the toolbar (Reload, ID, Find in tree), however on the right side with fixed position. That way there is enough space for enough "pinned" tabs without the actions jumping around.
• the dropdown is updated - you can see the new dependencies icon and instead of checkmark we have now pins.
• version icon has been exchanged with a new one.
• there is interaction on the action buttons, so that they show system response - hover over, processing.

You can also play around with the prototype: https://www.figma.com/proto/rgoxYH0yT4aSeJgV5M0BfI/Initial-platform-updates?type=design&node-id=0-1&viewport=4335%2C1434%2C1.02&t=eVCbLGff2n7eYJtY-0&scaling=min-zoom&starting-point-node-id=155%3A2630

Features you can play with:

• Profile hover over
• Pimcore logo hover over
• Preview hover over
• Refresh/ Reload full interaction - on click and hover over

We would be glad to hear your opinions for the improved version as well! Have a great weekend! :)

[NiklasBr]

I really like what you are trying to do! 👍

Some points:

• But I am in opposition of using a single drop-down menu to group a lot of items. And like someone above, I barely saw the meatball menu to begin with, I would not use the word "optimised" here unfortunately. Research says it could hurt UX. The ability to restore items via pinning is a nice solution which could help. Keep it up.
• Save button on the right side? Nice! Also correct not to use upper case, another win.
• Please add text labels to the tabs not in the menu, I still struggle tying to identify the correct one just by it's icon alone. :) Please for the love of everything don't do this: Naming of the functions in the toolbar has been removed for the closed tabs. Once the tab is on hover over, the name appears. When opening certain tab, then the full name is visible.
• Consider not using black areas in a generally light UI, I have astigmatism (and those with myopia may also be affecter) by lots of white text on a dark background.
• I generally dislike monochrome icons, they are always harder to distinguish than those with colour. Consider duotone or tritone icons here.
• Edit: another thing, use meatball or chevron menu icon consistently, now both mean a menu drop-down. Use either or would be my suggestion. Preferably the chevron since it is more of a known icon already widely in use in Pimcore and other operating systems like Windows and Mac OS and browsers for the <select> element.