V5 UI/UX feedback

I am a complete newcomer to this project and am quite excited by the functionality and the fact that it’s OSS! I’m surprised I never heard about it until last week.

I stumbled across a few older YouTube videos with brief demo’s of IN, but when I went to the demo site I noticed it looked quite different was very unintuitive. I dug around and found out that there’s v4 and v5. After playing with both v4 and v5 in lab environments, I decided to self-host v4. I’m finished setting up but realized that I can’t do recurring auto-bill with Authorize.net because payment tokens aren’t supported in the v4 driver.

Before beginning my own attempt at backporting of the v5 PaymentDrivers, I decided to scour the forums here for any posts with detailed feedback about what in the UI could use improvement, and while I found complaints, I didn’t find anything constructive. I like contributing to OSS projects, and it starts by gathering others ideas and by presenting my own. This is my attempt to be specific about what I don’t like by giving side-by-side comparisons. Of course anyone can feel free to disagree.

EDIT: I’m a new user and cannot post screenshots :rage: I’ll host on imgur but it kills the side-by-side demonstration of this post:

Dashboard

First, the v4 dashboard has great statistical information at my fingertips.

With a quick scroll-down, I can easily view detailed activity:

On the other hand, v5’s dashboard displays many large graphs with large fonts that makes poor use of screen real-estate and requires extensive scrolling to glean basic information:

The lower information on v4’s dashboard (such as upcoming recurring invoices etc.) is no longer present. Only the activity information remains, and it’s in it’s own tab (more on that later)

Left Menu Bar

The v4 sidebar is slimmer, allowing for more screen space for the information I’m looking for. The default contrast between the text and background is pleasant on the eyes. The gaps between the menu items makes maneuvering a mouse to the desired location simple. When wanting to add something new, a plus icon appears on mouse hover:

The v5 sidebar is too wide, higher contrast, and includes a large and always visible icon for adding new everything which is clutter and unnecessary:

Exposure of different sections of a page

This affects the general UX. In v4, all information is divided into different sections but available on a single page and gives a more fluid look and feel (it’s difficult to show this in a screenshot but here’s an attempt):

In v5, the entire UI is divided into 3 columns/sections, giving everything a feeling of constraint and being too narrow. Items in different sections are siloed into different tabs, making things either difficult to locate or requiring extra clicks to display all the desired information. It’s virtually impossible to see everything on one screen:

Viewing a record

In v4, clicking on a client record brings me to a full screen view of everything about that client:

In v5 there’s a popout pane on the right with virtually no information and requires too many extra clicks and searches to find what I’m looking for. The list of clients persists in the middle of the screen when I don’t care to see them:

As I said at the outset, I’m not here to criticize and I know how much thankless work goes into FOSS development. I just think that v5’s interface makes a regression in design functionality.

Thanks.

2 Likes

Hi,

Thank you for your detailed feedback! We’ll do what we can to address the issues mentioned.

We’re also working to develop a new React web frontend for v5 which will be much more similar to v4, we hope to have the beta available in a few weeks.

Just to provide some context… the current v5 frontend was initially the v4 mobile app. We decided to rebuild the backend and built on the v4 mobile app to develop it into the v5 web/desktop frontend. This is why the UI can feel constrained. We’re continuing to work to improve the layout on desktop to make better use of the screen real estate.

Changes are underway… you can test out the updated left menu here:

https://demo.invoiceninja.com

Thanks again for your detailed feedback!

1 Like