Desk 2.0 - New Navigation

[rmehta]

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.

[jcagbay]

Search bar too does everything for me.
Rgds
_Yul

[jai_kejriwal]

I use the search bar almost exclusively

[tmatteson]

@rmehta

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.

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.

[joshreeder]

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.

[ganas]

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:
==>

[jai_kejriwal]

I would be totally lost with those icons. I much rather prefer text but that is a personal preference. I’m not an expert on UI/UX but I can see the suggested navigation being more familiar to a lot of business users. Either way, I believe it should be an optional setting.

[ganas]

@joshreeder @netchampfaris @rmehta See the following suggested sidebar. In it you can have both, the main menu and the secondary menu and you can toggle between them easily. Also, instead of having drop down menus within the sidebar, it becomes embedded with in the menus. moreover, a toggle that can be used to fix the sidebar in place.

[joshreeder]

I think this is an interesting approach. At first glance I’m excited to see the motion.

Although I think that our main navigation is critical to the experience for fast movement and a visual awareness for where you are in the system and how the menus become the breadcrumb system. That would get lost here.
Not sure it needs to ever be hidden unless on mobile or tablet.

And it also seems like the directional hierarchy is a little lost since this isn’t pure left to right movement. Although I love the motion!!! I think speed and usability would render the animations an obstacle after the newness wears off.

Man thanks so much for participating with this great rebound. Let’s keep discussion going. You’ve got me thinking for sure…

[webingold2]

I would like to add one comment. Remember that ERPNEXT is available in multiple languages, some that read from right to left so be ready to adapt to those languages. Also, if you make a menu by alphabetical order in English, you can be pretty sure it will be scrambled in another language, unless of course if you find a way to sort the menu entries on the fly.

[philip]

@rmehta

The sidebar adds a new layer of complexity and to me it increases the cognitive load on the user.

This is also what i was thinking when i saw the screenshots. Too many extra icons and breadcrumbs on one page could hurt the unique simple style of erpnext.

we mainly use and enjoy erpnext because it does not use the overload that most other feature rich software or ERP facing these days and i think this simplicity, usability and design is the key that helps erpnext to be so new and attractive to people that are not into complex software and takes off the fear to dive into work with it. although also when it cost one click more. i think for these people its the quality of simplicity to learn and use the system (maybe we can never measure this), not the quantity of speed to browse so fast as you can. and for all pros, the searchbar is already an ultra fast alternative.

some thoughts of improvement:

• i think the desk icons are nice, but should be more unique and meaningful.
  (solution: maybe an order for an flat erpnext iconfont (released under creative commons for caring) could give the project and the desk a more unique identity and also solves the double use of icons which leads to much better usability.) this could be done by an experienced icon-fontdesigner or if possible making a set of existing icons that fit to the project needs. downside: on new app we have to still use a standard font that do not fit perfect. it takes time to make a new icon also with flat icon style. maybe there is a way of mixing icon fonts into a set that i do not know.

• what is also confusing us is when we browse the navigation in desk#modules/Setup and we go for example through the print settings. every sub navigation point under Printing > sounds the same for a beginner! 5x print format builder… printformat… printstyle… so from time to time we click the wrong one because they sound so similar.
  solution: i don’t know for now. maybe a simple hover (hover is cool because on a page with hundreds of links there is always just one icon visible and only exact when you need it) with tiny geometric forms (triangle,square, octahedron…) or iconfont or numbers next to the text helps to not click on the wrong text by accident when coming back again for the same menu print link. background: from brain research we should know, brain remembers best with text (one half of brain) and illustration (other half). this is why desk would work perfect with unique icons, because they have graphic and text under it. downside for the hover symbols: slows maybe down the page loading. maybe caching could help.

[spoojary]

Great thought provoking discussion, thanks to @joshreeder for initiating it. While I am not an expert on UI designs, I have seen people struggling to get to the page that they wanted to. While it was very easy for me to use the global search bar, it is almost unusable to less tech savvy people, no matter how much you teach them! So there is certainly merit in thinking about UI improvements. However major UI changes could be problematic.
In my case, I solved our navigation problem to a great extent by adding ‘desk icons’ for frequently used ones(in a custom app). We generally use 10-15 doctypes frequently, so it wasn’t a problem adding most of them to the desk directly. If you could reach the page you need in 2-3 clicks, perhaps one should consider it as a good design. So I am really wondering whether this is something which couldn’t be solved in the current UI design? I see two parallel approaches to the one suggested above.

1. Keep the current desk and add a ‘Frequently used’ section for each module at the top that list top 5-10 pages that are frequently used by that user.
2. Keep the current design and make module pages configurable similar to desk icons.

It is difficult to solve every ones problem by a different design as we won’t know what is useful to them. However allowing them to customize it as per their needs would give them that provision to some extent.

[rmehta]

@joshreeder if you are going to implement this, please do it in small parts and get the non-controversial changes merged first. A full PR with all the changes you propose will be impossible to merge.

[kolate_sambhaji]

@joshreeder
Why not enhancing Theme module in ERPNext?

We already have website theme, similarly we can have Desk Theme.

Anyone can use Desk Theme without installing custom app (As it will need only css and js)
We can add option to enable/disable sidebar

E.g.
Gmail Theme:

[felix]

Theming is something you do at the CSS layer.

The proposed changes are way more than CSS changes.

[dalwadani]

Just to add my 2 cents.
There should be a consideration for the support for Right-to-left (RTL). The current version has finally supported it. We do not want to start over .

[tundebabzy]

To be honest, I think desk navigation is inadequate. I practically use only global search because I can’t seem to find anything if I were to depend solely on the desk icons.

One thing that makes me want to cling to the proposed design is that the navigation can follow you everywhere like global search so you get the same agility of global search.

However, it seems you can never be wrong with the global search bar. This might sound stupid but we can just glorify the search bar…

[olamide_shodunke]

The more we glorify global search the more we make the case for a revamp of the current desk navigation process.

Global search should not be the default in an ERP solution. It’s what you use when the current navigation or your memory fails you.

Olamide

[ganas]

I totally agree with you guys. Global search is good and powerful , but is not a replacement for clear easy to use navigation interface. Global search is an extra layer of navigation not the main navigation. For example, you can’t ask a new user how knows little about the internal doctypes and modules to rely on global search.
Saying I only rely on global search, you are basically wearing your geek hat and not thinking about the UI usability for the normal user, and thats the main problem when the engineers also design the user interface

Also I agree with who said here that

Desk is just a glorified list of bookmarks

For me after I login the first thing is click on any desktop tile just so I can start navigation from the said bar. So really does the desk serve any purpose? its not like they are live tiles and provide you with information about their linked modules and doctypes

[joshreeder]

@rmehta

if you are going to implement this, please do it in small parts and get the non-controversial changes merged first. A full PR with all the changes you propose will be impossible to merge.

Ok, I’ll start thinking through a phased plan but I think it will have to be done essentially together and rather quickly nonetheless.

Over the weekend I exported the doctypes list and dug into each item but there are other pages we use that need added to the list like certain pages and such. Trying to plan out the full reorg list and where everything belongs. The experiential elements fit for a “department” if you will do not map cleanly to how modules have been developed out over time. Like “Sales” and “Accounting” are not clearly separated like they are in other software solutions. So just mapping modules and doctypes as they are organized in the code will not be the best solution for the users. And I know we have addressed this as the modules menu also does not map cleanly.

That said, It is thrilling to see the elements and pieces start to fall into place as I remap this with fresh eyes,. A few months from now I think we are going to be very happy. once i have a detailed Excel sheet and screen shots of the reorg I will pass along.