Improving Mobile UI
See how ERPNext is improving on the mobile side.
·
2 min read
Mobile phones have become the primary device for everything. They are being used excessively at work too. Since they are portable, simple tasks can be handled on the go.
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!
Faris Ansari
Faris hacks UI at Frappe and is an Anime Fan. He is a man of few words and prefers that his code do all the talking
Nice work as well on this sir.