Desk 2.0 - New Navigation

Frappe Framework
23

Some thoughts

  1. Simplify the list of menus on the left side. There isn’t really a need to use the rounded square design anymore in that context. Just retain the octicon/fontawesome icon and the module name. Thats what most other apps do these days.
  2. The “selected module non-child doctypes” section won’t scale. Looking at the accounts module right now, there are 30+ links - where are those supposed to go in this new proposed navigation? I see the ideas of lumping things into reports and so on, but that also has limited scalability.
  3. In my opinion, a viable proposed first cut of this would be the following
    A. Remove the “desk” - that’s basically a glorified list of links/bookmarks honestly.
    B. Module navigation takes place using a bar on the left side, as proposed in the mockups
    C. Add a Viewport to take advantage of higher-res monitors (Fill screen width to show more columns, and more discussions in the forum) - in the initial release, make this possible, but each module would retain the current “2 column” view until they can be reworked.
    D. Modify slickgrid or the new FrappeGrid component to be full-screen in the new viewport
    E. Keep everything else the same for now. Iteratively work on wider module viewports until that task is complete.
3 Likes
24

Great thoughts. I see your point but have considered this extensively and parsed through every single non child doctype. Around 300. I’d does scale if you consider what doctypes are used by the user everyday (about 50) and what doctypes are used inside those (contacts/addresses or product groups or bundles) and are not needed in menus or can be easily added as a button to the appropriate body section head ( in the items list add button for groups and bundles) or used for setup reasons and moved to the settings menu (customers / customer groups).

This means that list is way smaller.

In my opinion, we can do this and everyone will love it once they have lived with it for a week.

Some of us need to think as developers and others as user advocates.

Nothing is going away, this is a simple idea. Reorganize the doctypes by adding a new category selection:
Document (Master)
Sub document (supporting document)
Setup (top nav menu: Settings / Modules: Setup)
Settings (top nav menu: Settings / Modules: Setup

This is how all great systems work and are organized and we need to get there. We can do it iteratively or we can just get it done.

I think we use the momentum to get it done.

It’ll take a few days to show where all 300 doctypes and other pages views would live but charge out the view above with the settings called out and look at the organization. I think your gonna love it.

1 Like
25

I posted 1. It shows the side bar with both the modules and menu visible. Don’t have it fully designed but the gist is tap a icon and then tap the submenu item to dismiss the menu.

26

Hi @joshreeder

Point 1 is what I was trying to say. Users would not want to scroll down to access a menu.

27

I completely agree and that’s why I am working on this. Right now there is no distinction from desktop what is going to dump you into the massive scrolling modules view with no memorable organization or a list view. Colors and icons and names are all on the same level.

Not sure which user you are referring to. Are you referring to the dev/admin or the everyday user of the system?

For the dev all settings are accessed from the top nav. No scrolling. It’s a page that is 1/3 of the current modules list and page length so no scrolling.

For the user, most will never scroll. They will be given 5-12 module icons they can rearrange the most common to the top. Icons can get smaller and no tile outline. Names can be just tooltips. No scrolling. And the sub menus have there documents at the top. No scrolling.

So I definitely agree and that is the point of this whole project.

2 Likes
28

Updated View showing no tile icons with a rollover state and the dom changes that fix layout to Bootstrap grid properly.

Names via right tooltip not working yet.

http://www.giphy.com/gifs/xT9IgCDe07de1YthsY

That looks really pixelated… look at this for full screen…

Fullscreen via GIPHY

3 Likes
29

Cool designs. I’d like to share my thoughts:

  1. Breadcrumbs are crucial to navigate any UI. I think they have been validated as good UX.
  2. In earlier versions of ERPNext, icons were heavily used. But we went for text as they are easy to understand.
  3. The side navigation is cool but the desk is an iconic part of frappé. If there is no desk to go back to, it may feel weird :confused:

Maybe we can start by implementing a small feature from these, and do progressive enhancements, rather than doing it in one big PR.

7 Likes
30

I’m personally not a fan of burying functionality like this. ERPNext is so powerful that discoverability is an issue - I often find new features by scrolling through links. And I don’t see how you can do this in a complex module like the Accounts Module, as an example.

However, I do get your point - feature the most used links and bury the rest. That’s just good UX in general. I’ll wait to see what you come up with.

Maybe a compromise would be to bury things, but have a flyout menu of some kind a user can click on to show everything in the module, as is currently possible. But that seems like a cheesy compromise…

Iconic, yes. Functional…not really…it adds a click to move between modules. Yes its just one click, but I hate that click so much :slight_smile:

5 Likes
31

Good navigation can represent this. Breadcrumbs are implemented through the navigation here.

  • Module Icon
    • Doctype (app or report or page)
      • List View
        • Record View
          Each is still clickable to take you backwards.

13 PM
13 PM1612×998 100 KB

Balance is key to drawing the eye to where it needs to be. Currently we use Icons for module tiles. That is broken by the fact that several modules can use the same icon. Not good for training the user. We need to simplify that and continue to move towards what our users know, so we don’t have to teach them. They know:
Gear icon = settings
Pencil icon = edit
“X” icon = delete
etc… no training here, we do these things and we clean up the information the user has to take in to make decisions and it relieves friction.

Yes, and pretty much every decision we make to move software forward will do that. Sometimes major changes are needed and the only reason this would be a bad move is if it were int he wrong direction.

3 Likes
32

100% agree, but I think it can be done, it has to. The Frappe team and community have done an unbelievable job building an amazing body of code and done and amazing job keeping the front end looking great. But just like the code is constantly being refactored, the organization of data to the user needs this as well. This is a huge task, but we are 905 of the way there and it needs a little more work to be fully realized. Let me continue down the path here and show you how this will come together.

1 Like
33

+1 for breadcrumbs in page head area

1 Like
34

Let me recap where we are, if your just joining us…

  1. Overwhelmingly, there is support for a solution to refactoring the navigation organization.
  2. Most support converting desk and most used items into the sidebar.
  3. Some doubt it can or should be done for reasons such as:
    1. Legacy users might not like it
    2. Desktop with apps is iconic
    3. There are too many things, you’ll never get them organized properly

This is day one of the discussion in 5 days, we will all be use to the idea.

Ill keep info coming as we get the final plan together so everyone can weigh in and be heard.

Keep the feedback coming!!!

35

The accounts module is bloated because it combines a few doc types and reports and links to other doctypes already represented like customers, suppliers, items, etc. remove the majority of duplicates and the accounting module can remain simple.

30 PM
30 PM2360×1636 258 KB

2 Likes
36

Guys on the Frappe team… If I go to set up a bounty for this, what should be the goal?

1 Like
37

I have been watching this thread, but did not reply as this was not in my personal roadmap. Firstly its great to see more interest in this area!

In terms of general approach, before making a big design change like this, we need to ask what are the biggest problems in the current one and how are we solving it.

In terms of navigation, I personally use the search bar for almost everything. There are some things that could be better in search, and I would keep them as first priority. What we really need is good data + analytics of how people are actually using ERPNext (anyone with experience in this, please PM me)

The sidebar adds a new layer of complexity and to me it increases the cognitive load on the user. Now you have more options to choose from. More options are usually bad and users are more likely to get overwhelmed.

I like the idea of a unified “Settings” page though. You just go to one place to discover all settings.

6 Likes
38

Search bar too does everything for me.
Rgds
_Yul

3 Likes
39

I use the search bar almost exclusively

1 Like
40

You have identified a UI problem, as the intent of the search bar is not that it be the global navigation/ browse tool. Also, it doesn’t surprise me that a person who is a developer favors a text-based interface, generally.

1 Like
41

With respect, we need to think differently.

Our roadmap should be guided by making what we already have, the best it can be before creating new things.

In one sentence you say what’s the problem with the menu and then you say even you don’t use it. That I would say is a pretty big problem.

How can you expect a new user to not feel completely helpless? Everyone I talk to, not just on the forums but on the phone feels this way about how lost they feel, be it new users or veterans or consultants. It should not take months of setting up and turning things off to make it usable for a newcomer.

Software companies can not give up on navigation. This sentiment is cause for alarm.

You said what’s the problem that needs solved? I have been clear about this but here it is again.
The problem is the Navigation is unusable.
The problem is that natural flow and logic are missing.
The problem is that the navigation is not using best practices.
The problem is users are lost

To everyone it should be painfully obvious we built a well designed house but decided to keep adding room after room after room and we are left with a maze. We need to step back, add some nice hallways and a map so our people inside don’t go crazy.

The good news is it’s doable quickly and I have a plan for all of it.

To your concern and test, of not wanting to give users more options…

Right now there are too few options at times. Way too many at times. Not helpful options. Wasted side menu space. And users are lost. It’s not about giving someone fewer options, we need to give them the right options at the right time with the right layout to guide the experience without having to spend months learning it. This builds a functional, memorable map in the users heads in minutes. Currently we don’t build a memorable map at all no matter how long you use it.

Just moving the settings together won’t fix the problem.

I am passionate about user experience. And believe we can do much better.

I have clients that need this fixed immediately and I am willing to fund it. I am devoting 100% of my time to this single need and we need to move forward with a sprint to get this done hopefully with your help. Please.

I will not rest until this is done. :sweat_smile:

12 Likes
42

I know that using icons is dangerous territory, but in many places it serve better purpose and less scary for the user than text. For example:
ori ==>new

5 Likes