Improving backend navigation

Creating Neos & Flow Design & UX
1

Related to Design System for the Neos products

Based on our user feedbacks the current navigation between the backend modules and the navigation tree can be confusing.

  • The hamburger icon hide some elements
  • Navigate, open/close the navigate component, so it’s not really a navigation link (and does not use the same visual language, than the open/close for the Inspector)
  • Edit / Preview is not really a navigation, but a contextual feature, depends on the Content View context

With the new UI, the tree can be replace my more specific navigation dashboard. So the tree is just an option. This can improve the user experience a lots, but can make the navigation between the dashboard, backend module, … even more confusing.

This area needs a lots of user testing and experiment to make it right. I try to merge both concept (backend module, and navigation dashboard, actions, …) in the same UI.

Benefits

  • No more hamburger icon
  • The name of the selected backend module, dashboard, can be visible when the navigation is closed.
  • The navigation offers some advanced features (filter, run the last navigation action again, user bookmarks, …)
  • Support navigation action grouping (like the current backend module navigation).
  • The blue border help the user focus on the content of the navigation and define a clear area for interactions (this can be applied to all the Dropdown in the interface).

Challenges

  • Need a new patter for open/close the panel (need to be consistent between vertical panels, Navigation View + Inspector)
  • Preview Central navigation should more to the Action Toolbar (see UI Visual Language, a high level view)

1396×830 47.5 KB

2

Have you checked what Christopher Ono did to tackle this? I think he had smth on the topic.

3

By iteration is based on what Christopher did:

I think those tabs are more confusing than useful :wink: What do you want to do “Menu” or “Navigate”

And the blue border really needs more test, but my current impression is that is allow to focus on the area, … scrolling is more clear, … with the help of a real designer, adding some light shadow, can make it a good option. Especially on the inspector where every gray shade stack on layers when you option a Dropdown. It’s not a really common pattern, so can help us to shape the emotional part of our design.

Let’s continue the discussion about the Dropdown improvements in Improving dropdowns

4

great! Just wanted to make sure you are aware of his mockups.

5

I did all my current research on top the current UI, the react UI, @wrybit and Christopher One work. Hope to find time this week to start an inventory on all the opened issues, suggestions, … about the current UI and to have a solid overview of the situation for the sprint

1 Like
6

I have some unpublished ideas which solve this issue a bit better. At least to me. If you have some time, I would share it with you.

To me the major UX issue is a lack of clear hierarchy over the whole UI, not only the Navigation :wink: After a internal discussion with some of you guys, a bugfix round, I would like to publish it in public.

3 Likes
7

@wrybit Can you push your draft here ? for discussion ? And check Improving dropdowns where I propose to use a Design Pattern that be shared with the main navigation

8

Small improvement but easy to add: overscroll-behaviour

Really new but i think it will help to keep the focus on the current section and will (hopefully) soon be added to the other main browsers.

1 Like