ERPNext has always been mobile first. This has helped improve the user experience to cater the significant amount of mobile users.
I have been working to improve the mobile views on ERPNext. Here are some improved elements.
Portal
Mobile view should be what users are already familiar with. In this case, a simple list view.
|
|
| Figure 1: My Account View | Figure 2: Orders View |
Dropdown
A dropdown is another simple element which makes for a good user interface.
Earlier, there was a right sidebar with a bunch of options. Now, it's been replaced with a dropdown menu.
| Before | After |
|---|---|
|
|
| Figure 3: Right Sidebar in website | Figure 4: Dropdown in website |
The notification sidebar in the desk view has been replaced with a dropdown.
| Before | After |
|---|---|
|
|
| Figure 5: Notification Sidebar | Figure 6: Notification dropdown |
Search
Search, one of the most used feature, was hidden inside the sidebar. It's now visible upfront on the navbar.
| Before | After |
|---|---|
|
|
| Figure 7: Search on left sidebar | Figure 8: Search on navbar |
Sidebar
The main section was pushed off to the side to reveal the sidebar. Also, the sidebar was rendered separately resulting in redundant elements and duplicate event listeners.
The sidebar is completely removed. The same Desktop sidebar is rendered as a pull out sidebar using CSS hacks!
| Before | After |
|---|---|
|
.png)
|
| Figure 9: Old offcanvas sidebar | Figure 10: New reused sidebar |
Looking forward to your feedback!
·
Nice work as well on this sir.