# Simple web UI design study
**URL:** https://forum.duplicati.com/t/simple-web-ui-design-study/10148
**Category:** UX
**Created:** [June 25, 2020, 8:09am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148 "2020-06-25T08:09:27Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@lhs\_azevedo](https://forum.duplicati.com/u/lhs_azevedo)
#### Post date: [June 25, 2020, 8:09am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/1 "2020-06-25T08:09:27Z")
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
---
### Author:  [@hexandcube](https://forum.duplicati.com/u/hexandcube)
#### Post date: [June 27, 2020, 2:43pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/2 "2020-06-27T14:43:27Z")
It would be amazing if that was the actual UI design
---
### Author:  [@ts678](https://forum.duplicati.com/u/ts678)
#### Post date: [June 27, 2020, 7:00pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/3 "2020-06-27T19:00:39Z")
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…
---
### Author:  [@kees-z](https://forum.duplicati.com/u/kees-z)
#### Post date: [June 29, 2020, 5:24pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/4 "2020-06-29T17:24:02Z")
This looks like Duplicati 3.0!
If anyone could give Duplicati this look, I guess I’d switch to it right away.
---
### Author:  [@aschrage](https://forum.duplicati.com/u/aschrage)
#### Post date: [July 2, 2020, 8:54am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/5 "2020-07-02T08:54:30Z")
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.
---
### Author:  [@lhs\_azevedo](https://forum.duplicati.com/u/lhs_azevedo)
#### Post date: [July 2, 2020, 5:10pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/6 "2020-07-02T17:10:59Z")
Thanks for the feedback!
@ts678’s observations made me realize that I ended up not explaining the screens.
> [@ts678](#):
>
> Are the two in the first screen completely independent backups?
Yes. The first screen is based on the [first screenshot here](https://www.duplicati.com/screenshots/).
> [@ts678](#):
>
> How does one get to the second screen, and is that for one backup? A merged list would be harder to do.
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.
> [@ts678](#):
>
> There are many other things one does with the backups, so same question applies. On three-dot menu?
Yes. I imagined that the most used actions are “Run now” and “Backup”.
> [@ts678](#):
>
> For anyone who hasn’t found it already, Settings currently has themes. That’s part of the “new” look here.
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.
> [@ts678](#):
>
> I don’t know what it takes to create a theme, and am not a UI builder. The project could use one though…
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!
---
### Author:  [@ts678](https://forum.duplicati.com/u/ts678)
#### Post date: [July 2, 2020, 9:38pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/7 "2020-07-02T21:38:10Z")
> [@lhs\_azevedo](#):
>
> I’m happy to contribute as much as I can until the project finds a real UI designer.
Thanks! This would be wonderful, especially hearing AngularJS may drive changes.
---
### Author:  [@Herman](https://forum.duplicati.com/u/Herman)
#### Post date: [July 4, 2020, 10:58am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/8 "2020-07-04T10:58:06Z")
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.
---
### Author:  [@lhs\_azevedo](https://forum.duplicati.com/u/lhs_azevedo)
#### Post date: [August 1, 2020, 7:13am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/9 "2020-08-01T07:13:08Z")
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?
---
### Author:  [@drwtsn32](https://forum.duplicati.com/u/drwtsn32)
#### Post date: [August 1, 2020, 1:57pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/10 "2020-08-01T13:57:31Z")
Looks great, I am really liking it!
---
### Author:  [@warwickmm](https://forum.duplicati.com/u/warwickmm)
#### Post date: [August 1, 2020, 4:52pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/11 "2020-08-01T16:52:01Z")
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.
---
### Author:  [@aschrage](https://forum.duplicati.com/u/aschrage)
#### Post date: [August 2, 2020, 3:53pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/12 "2020-08-02T15:53:56Z")
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.
---
### Author:  [@michael9dk](https://forum.duplicati.com/u/michael9dk)
#### Post date: [August 9, 2020, 1:52pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/13 "2020-08-09T13:52:23Z")
+1 for the new design. I really like it.
---
### Author:  [@duplicatiuser](https://forum.duplicati.com/u/duplicatiuser)
#### Post date: [August 18, 2020, 4:49pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/14 "2020-08-18T16:49:13Z")
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!
---
### Author:  [@ZebCorp](https://forum.duplicati.com/u/ZebCorp)
#### Post date: [August 19, 2020, 9:06am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/15 "2020-08-19T09:06:22Z")
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.
---
### Author:  [@Viari\_Leathers](https://forum.duplicati.com/u/Viari_Leathers)
#### Post date: [October 27, 2020, 9:21am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/16 "2020-10-27T09:21:08Z")
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.
---
### Author:  [@drwtsn32](https://forum.duplicati.com/u/drwtsn32)
#### Post date: [October 27, 2020, 1:42pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/17 "2020-10-27T13:42:07Z")
> [@Viari\_Leathers](#):
>
> How to configure this IU in my current version?
Those are mockups and not yet present in any version of Duplicati.
---
### Author:  [@Viari\_Leathers](https://forum.duplicati.com/u/Viari_Leathers)
#### Post date: [November 4, 2020, 7:08am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/18 "2020-11-04T07:08:12Z")
Okay, nice work! i am waiting the update.
Thanks for your support.
---
### Author:  [@Dawiid](https://forum.duplicati.com/u/Dawiid)
#### Post date: [March 16, 2021, 8:04am UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/19 "2021-03-16T08:04:29Z")
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](https://hackdigital.com.au/website-design/) and I wonder if Lucas had any relationships with these guys.
---
### Author:  [@lhs\_azevedo](https://forum.duplicati.com/u/lhs_azevedo)
#### Post date: [March 16, 2021, 3:05pm UTC](https://forum.duplicati.com/t/simple-web-ui-design-study/10148/20 "2021-03-16T15:05:26Z")
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](https://github.com/lhsazevedo/duplicati-ui)
Vue was choosen for two main reasons:
- I’m used to it 😊
- It’s template syntax has a really gentle learning curve.
If you want to know more about Vue, you can see [who is using it](https://vuetelescope.com/explore?_sort=rank%3Aasc) or [read the docs](https://v3.vuejs.org/).
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](https://lhsazevedo.dev)
[Next page](https://forum.duplicati.com/t/simple-web-ui-design-study/10148.md?page=2)