Improving Mobile UI

See how ERPNext is improving on the mobile side.

July 26, 2016

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
Figure 9: Old offcanvas sidebar Figure 10: New reused sidebar


Looking forward to your feedback!


Faris Ansari
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"
1 comment
Rob June 7, 2019

Nice work as well on this sir.

Add Comment