Simple web UI design study

Although the interface is very functional, I believe that there is room in the web UI for improvements to be more friendly and intuitive for new users.

I created a small and quick study as an example.

Of course, there must be a lot of technical considerations and decisions to be made for a change like this, in addition to requiring effort for something that may not be the priority now.

But I think it’s worth sharing

9 Likes

It would be amazing if that was the actual UI design

I think there’s some cut-and-pasting, but are the two in the first screen completely independent backups?

Two comments on boxes are that a side-by-side might truncate long names, and also hides the ordering which is relevant (or maybe is requested to be) so that jobs that miss their schedule run in desired order.

How does one get to the second screen, and is that for one backup? A merged list would be harder to do.

There are many other things one does with the backups, so same question applies. On three-dot menu?

For anyone who hasn’t found it already, Settings currently has themes. That’s part of the “new” look here.
I don’t know what it takes to create a theme, and am not a UI builder. The project could use one though…

This looks like Duplicati 3.0!
If anyone could give Duplicati this look, I guess I’d switch to it right away.

This looks really good. Some of this UI enhancement would be very beneficial for Duplicati.
What I really miss in the UI is a better representation of all the backup jobs. The current list design makes it very difficult to keep the overview. It would be a very helpful for a start if this list could be sorted or grouped.

Thanks for the feedback!

@ts678’s observations made me realize that I ended up not explaining the screens.

Yes. The first screen is based on the first screenshot here.

The second is a suggestion of a place where the user could have an overview of all jobs (or just of one backup to simplify).
This first post was just a quick test, to see if the idea of ​​improving the user experience would be well accepted (and apparently it was =D ). So I didn’t even consider how someone would navigate to the second screen.

Yes. I imagined that the most used actions are “Run now” and “Backup”.

Despite supporting themes, it would be necessary to edit the JS application for changes in navigation and layout.
The current app uses an old version of AngularJS (v 1.x), which will only be maintained until July 1st 2021. Upgrading to the stable version would mean rewriting or adjusting a good part of it.
A big rewrite like this gives us the opportunity to consider other reactive frameworks.

I’m happy to contribute as much as I can until the project finds a real UI designer.


I’m working on a second suggestion taking into account the comments from @ts678.
As soon as possible, I will create a repository to do some tests and share here with you all!

Thanks! This would be wonderful, especially hearing AngularJS may drive changes.

This looks very intuitive. The second screen could be under an item called “History” in the left part of the screen. Additionally I would like to add an item called “Dashboard” to see information and activity(like the top item in the second screen: in progress) in a short form.