Use empty space in Web-GUI

I may have slightly forgotten to consider a mildly important use-case. Actually unfolding the job to get more info…
Looks “okay” on the left side


Less so on the right side

Aren’t those slideouts within the container/div of the job?
I also would go without the vertical sperator lines :slight_smile:

It’s a bit strange. The foldout is wider than the div containing it and when I made it shorter to fit inside the parent div it changed spacing between the two columns.

I had to take a break last night, but I’m sure there is a solution, I just have to find it :slight_smile:

1 Like

VR interface? :wink:

Or perhaps some abuse of zindex or just a plain old “modal” style window for job details (most of the links do a page reload anyway). Though that opens up annoyances with window centering etc.

I’m starting to think we might be better off redesigning the page than trying to fit two columns just using css…

I got the offset issue fixed, but even then it still starts to look odd when you have stats on jobs


And unfolded:

1 Like

Well noticed. Backup job list should have a clean look, with or without any job unfolded. Thinking about it, I ask myself some questions:

  • Backup names and statistics have variable lengths. This can cause a line wrap if the column doesn’t have enough horizontal space. Example: the first backup job (Server) in your screenshot has the “Run now” link on a new line, causing the horizontal line to be out of sync with the column at the right.
    I think horizontal separator lines should always be aligned with lines in columns next to it. This could be fixed by making the columns wider, so that all information fits on a single line in all circumstances. Backups with very long names could be truncated and optionally the “run now” link could be replaced with a small triangle icon (Play button) next to the backup name.
  • When expanding a backup job in column 1, how should the backup list in column 2 behave? My personal preference is that the backup jobs in all columns move down along with the expanded backup job, keeping all backup jobs aligned properly.
  • What is the best order for the list of backup jobs? Fill column 1 with the first part and add the last backup jobs to column 2? Or distribute them horizontally, keeping the first jobs at the top of the screen?
  • There is a feature request for (manually) reorder the list of backup jobs. Will using multiple columns prevent implementing this feature? Reordering the list could be achieved by drag and drop, or a button that opens a list with backup names only that can be prioritized.

Using drop down menus instead of expanding jobs can help with horizontally aligning of backup jobs. If jobs don’t expand by clicking on the name, it’s easier to force a preset number of lines for all backup jobs. An example how it can look can be found here:

It should be noted I tweaked the max width of each unfolded column, making it shorter. I couldn’t make them wider because that won’t fit on the smallest full size screens (1250 pixels wide before table/mobile css kicks in).

I’m not sure. Currently it’s just listed left to right repeating on each row because that’s how it worked out with Even/Odd classes.

It might actually make it more complicated. Most list ordering tools I’ve seen for Javascript only work for single column/row lists.

What also really bothers me is that expanding a job can push some of the jobs in one column over to the other column while it’s open. Then the order is suddenly changes

Drop downs could make this easy. However, drop downs can also be uncomfortable to use if you have to repeatedly click into it and locate the correct option.

Yes, I think that is exactly what flow does:
https://jsfiddle.net/xokmmjxg/

Try resizing the window so the boxes do not fit, and they flow down instead of left. You can force two-column by setting clear: both; on the odd items. By default it will allow “as many as possible”.

The flow should actually fix it, but the menu expand might look weird.

In between a big thumbs up from me for divin’ into this! :slight_smile:

While we are at it, there are some ideas for an improved layout here:

That’s the topic I linked to 5 posts before this one! :yum:

It must be a good idea if everyone keeps linking to it :wink:

We could also opt for a plex style display of jobs.


Throwing it in a table minimizing the horizontal space usage while getting a ton of flexible width. We could have columns like this:

Then a couple of buttons and a fold out menu at the end of each column the same way Plex does, which is very easy to use and which is still the same number of clicks away as expanding a job, but perhaps with edit and run now displayed on the bar for easier access.

Although this would have it’s downsides on mobile where each line essentially would have to be a fold out with the info that doesn’t fit in the row… Why is UX so hard?

I like the column idea, but then I like seeing lots of data at once. For new / non-techie users it could be intimidating.

Let’s just implement a “themes” system and let people use / submit their own designs. :wink:

2 Likes

We should take the Arch Linux approach and have people make their own UI before they can start using Duplicati. That way it’ll be less bloated and be just the way they like it :wink:

To be honest, I don’t like the table view. It will break the (for me) biggest advantages of the current design:

  • big font for menu options and backup names for easy identification on large screens.
  • responsive design, very usable on mobile devices.

The table shows lots of information using a small font. Your eyes have to scan the whole screen to find out which item in the Versions column belongs to a certain job name. In the current design, you find a backup job quick and easy with basic information just below it.

If you have just one or 2 backup jobs, you will fill up most horizontal space, but almost no available vertical space, resulting in lots of information on 1 or 2 lines on a further almost empty screen.

I prefer optimization in details of the current design instead of a complete makeover.

(UX isn’t that difficult. Just create 200000 different themes to serve 200000 users.) :wink:

Agreed. But GOOD UX is. :rofl:

I mostly agree. It was kind of just to toss it out there trying to be creative with the design by knocking over some walls.

I’ve been having a lot of trouble reconciling the column idea into an actual useable implementation that actually feels like a step up from the existing layout. The existing layout works for me. I only have 2-4 backups on a system, which fits perfectly on all screens. But I could see it being tiresome for someone with more. Maybe this is partially addressed by allowing reordering of jobs?

I think the “block” model with some exposed information and a fold out page works well. However this may change once we start thinking about cramming more features in, like all the good ideas discussed on
Make status bar a link to backup, adding queue information, and options for run now, queue next, queue next, etc.

I wish I had thought of that :confused:

Omit the smiley, I think this is actually a good idea. There could be plenty of reasons to make changes to the user interface: people don’t like the color scheme (an alternative color scheme had been added to the settings page already for this reason), want to hide or change information, add a company logo, and so on.

I know there are options to change/brand the Duplicati package using the OEM folder, but a tool to customize the user interface could be useful for lots of users. However, I don’t see this to be something that needs to be developed in the short term, maybe something for after a stable version has been released.

I think so too - but I also think it would likely involve a huge rewrite of the GUI and some serious time put into designing it to be theme-able. Personally, I’d rather see functionality improved before interface.

1 Like