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

11 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!

1 Like

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.

1 Like

I’ve updated the first test to take into account some points mentioned previously.

  • To keep things simple, navigation was moved to the top bar. I know it may seem like a little drastic change but I believe the layout is easier and simpler that way, and makes the page cleaner.
  • Progress bar was added, along with pause and throttle buttons.
  • One backup per row (solves long names and ordering)
  • Two new screens, backup and backup settings

Some backup actions have not been added yet…

Home - no backups (An empty state/welcome illustration would be nice here!)

Home:

Backup:

Backup settings:

What do you think, what would you change?

2 Likes

Looks great, I am really liking it!

Looks great to me. Nice work.

One weakness of the existing UI is that it’s too difficult for users to find the various logs. Perhaps that’s something we should keep in mind when considering new designs.

I like this UI very much. Duplicati is such an awesome software and an UI like this would be very welcomed.
Please think in a second step about a dark design.
Another thing that I’m currently missing is the possibility to sort or group the backup jobs. If this could be added that would be great.

1 Like

+1 for the new design. I really like it.

1 Like

Really nice work! I like both the vertical and horizontal menu options, but I prefer the vertical left menu because (1) the progress bar stays in its current location, in a clearly dedicated space at the top and would be visible from all tree locations within the UI and (2) the menu at the left is in its own dedicated space, too, which makes it the navigation more intuitive. The version with the vertical left menu feels more tidy, organized, well-structured, and intuitive to me and provides space for new options to eventually be added on the left side (like “Log Out,” “Donate,” or “Help”).

It would be cool if you could drag and drop the backup “cards” to reorder them according to the ones you want to see at the top of the screen. Right now, there’s no way to reorder the jobs.

About the logs - how about adding a link to the log by each instance in history pane to display the portion of the log relevant to that backup?

Either way, they look great. Thank you!

1 Like

Very impressive work! If I may have a small suggestion, grouping backups would be useful thing (others mention that already), granting ability to run batch of backups.

1 Like