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
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.
I’ve updated the first test to take into account some points mentioned previously.
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?
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 for the new design. I really like it.
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!
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.
Hi,
I am currently using Duplicati - 2.0.5.1_beta_2020-01-18 version.
How to configure this IU in my current version? please share me the UI files and guides
Thanks in Advance.
Those are mockups and not yet present in any version of Duplicati.
Okay, nice work! i am waiting the update.
Thanks for your support.
Unfortunately, it seems that the new update won’t come. At least the original poster hasn’t shared anything since 2020. That is really sad because I liked this simple web UI design and wanted this project to be evolved in the future. Some of the guys here told that this UI webdesign would be perfect for duplicati and I honestly agree with him. And interestingly, I saw the same design solutions by web hosting Newcastle and I wonder if Lucas had any relationships with these guys.
Hello again!
First off all, sorry for the long delay. I’ve been really busy (more than I would like) with my full time job…
Another point I would like to mention is that, although exciting, a mockup made in an image editor like the one I did is just a small step in the process of creating a web application. It was my mistake not to make that clear, sorry.
So, unfortunately, I haven’t been able to work on this proposal since August 2020: /
I created an repository and implemented only the basic structure of the mockups previously sent.
github.com/lhsazevedo/duplicati-ui
Vue was choosen for two main reasons:
If you want to know more about Vue, you can see who is using it or read the docs.
It may be interesting to include parts of the legacy application within the new one and to migrate gradually. This is how large projects are updated, but I need to measure whether it would be worth it given the size of the project (relatively small).
Although I have little time available, I would really like to work on this project. The first step, opening this discussion, we have already taken. I believe that next we should create a roadmap and work on one feature at a time, studying and planning the user interface and experience and then implementing it.
Oh, and @Dawiid, I’ve never heard of this company before. Are they using our mockups?
You can find more about me on GitHub and Twitter. Links here: https://lhsazevedo.dev
