Suggestion of a redesign for both Interface and design

[ianvanpaio]

I've used Filezilla since 2006 and I consider myself not only a loyal user but one that could and should offer something in return to the project.

Recently I started to use it again for some wordpress website, and I faced with the update window I thought with my self how nice would be to help improving some of the things I find troublesome on this software. So, thinking that Filezilla 4 might be just around the corner, I’d like to send to this awesome project my wish list, which basically covers a few UX aspects of the software I believe could improve a lot wrapped in a fresh new UI:

• Quickconnect
• Tabs
• Local x Remote
• Toggle buttons
• Navigation
• Queue (Queued files, Failed transfers, Successful transfers, Message log)
• Little tweak in the logo

Quickconnect

As you start, you are are presented with your Local tree and Quickconnect takes place on where it should be the empty Remote tree

Filezilla-UI_QUICKCONNECT-small.png (88.34 KiB) Viewed 4224 times

The Quickconnect bar’s positioning and always availability takes room from the navigation and pollutes the interface in moments where you are already connected and won’t need it.

Instead, I suggest to move it to the Remote Panel since it will always be empty until you are connected.
To access it again in case you need another connection, it will be available at the same place at the reach of a new tab (no need to teach users where to find).

Tabs

I’d minimize the amount of information displayed on them and additionally fetch it’s favicon so it would feel and behave such as web browser’s tab. And just like them, if you need a new connection you can always press ‘+’

Local x Remote

The file selection is highlighted in the same color as the remote, easing to tell the Remote from the Local

Filezilla-UI_MAIN-UI-small.png (124.66 KiB) Viewed 4224 times

I like the idea of make them 2 very distinguishable elements around the interface: Local and Remote. Most of my inspiration to make this proposal actually came from this very moment of trying and failing to distinguishing and understand the toggles to display/hide the local and remote tree.

The colors would serve to tell the Local tree from the Remote, so it also would mark the toggles, which brings the next…

Toggle buttons

Not only useful to the highlight with colors (rather than framing with thin border as it does in the current version) toggles, but for other highlights such as the selected files on the Local differing from the Remote, tooltips, badges or other elements that refers one or the other.

The red color was taken from the logo, to keep and maintain Filezilla as the “remote” or the connection between you and the server. The blue came along as a good companion specially suitable to reach the following: a flat candy-design, smooth and retina ready.

Navigation

Not a change I think it’s in your roadmap, but #2 that I’ve expected every time I’m asked to update (#1 being the progress bar of the download to fit inside the download window instead of cropped – OSX), but to offer options to toggle between view modes like Windows, Linux or Mac does (icons, list, columns)

Queue

The Queue statuses unities it's tabs simplifying the bottom part of the interface, and the Message log is shown as a collapsable frame.

Filezilla-UI_TRANSFER-small.png (165.86 KiB) Viewed 4224 times

Representing it as a cloud (wow!) it would behave the same, and would borrow the color from the Remote toggle/panel, since it’s pretty much related to the connection too, and completely empty and boring and gray when there is no activity, but with one awesome additional feature: to show a counter badge for the remaining files in the transfer queue.

The Transfer queue in the other hand would unity every transfer related status in one panel to get ready of all those tabs and would open side by side with the Message Log, which could also be hidden with it’s own toggle.

The logo

I don’t have complains about the logo, and I was amazed when tracking down the forum to find the thread and post where it first appeared. For my lucky, @alexkovac’s suggestion is one of the few images that loads since the post is so old and many url and links were lost.

BUT, while using this icon package I chose to use while sketching my concept, I found the street signage pole a good symbol to represent the download upload dichotomy, and with a bit tweak I made what I believe it's a homage to the original logo design, colors and stamp element in a new form adding the desired missing arrows as in the feedback some members gave to @alexkuvac design.

The icons are from a set, which I believe isn't GPL compatible, but I would rather make an entire new set based in the logo.

We reaaally appreciate every feedback and feel free to criticize and propose changes on my designs... just like Filezilla I want this to be open source as well (hires images: https://www.dropbox.com/sh/mhqf6qyl5k43 ... dSlMa?dl=0) and editable files can follow as the thread gets traction.

Thank for your time!

[botg]

I'm having a really hard time seeing the new design, it has an extremely low contrast.

This is what it feels like on my screen:

lack_of_contrast.png (61.75 KiB) Viewed 4204 times

[botg]

Some more questions and comments regarding the design:

Where do you enter paths? I see no edit box, only breadcrumbs.

The proposed design does not seem to handle large amounts of data very well:
- The whole concept of tree-lists for navigation does not scale. It just does not well with with huge directory hierarchies with millions of files.
- How do a million files in the queue look like? Each queue line needs to have exactly the same, precomputed height, or performance will be abysmal.

What do the three identical leftmost buttons in the toolbar do?

[ianvanpaio]

Thanks for your answer and questions...

I'm having a really hard time seeing the new design, it has an extremely low contrast.

Although I'm a big fan of low contrast I most admit that it can and should be adjusted to fit the main stream with minor tweaks.
As a concept I tried my best at designing something that could bring my ideas to the table, but it would have to adapt to usability standards and polish along the time. And if the feedback is positive I will certainly be pleased to develop it further.

Where do you enter paths? I see no edit box, only breadcrumbs.

They are both edit boxes. The breadcrumbs visualization of the path (only the Local) could be toggled when pointer is over (or focused).
The remote path shows a "Name" given on the site manager (in the example I used "Personal"), followed by the path.

- The whole concept of tree-lists for navigation does not scale. It just does not well with with huge directory hierarchies with millions of files.

I didn't mean to recreate the navigation, but to reference OS X's Finder. (Grid, List/Tree, Columns)

- How do a million files in the queue look like? Each queue line needs to have exactly the same, precomputed height, or performance will be abysmal.

A million files would look exactly the same but 2-3 lines higher (and a million icons). The tabs were replaced by the filter, but I guess the Transfer Queue's row height and available infos have to be redesigned... just a matter of cutting the fancy!

What do the three identical leftmost buttons in the toolbar do?

The same as this:

Close, Minimize, Maximize

Mac.jpg (106.06 KiB) Viewed 4184 times

[boco]

As you start, you are are presented with your Local tree and Quickconnect takes place on where it should be the empty Remote tree
[...]
Instead, I suggest to move it to the Remote Panel since it will always be empty until you are connected.

That is simply not true. QuickConnect can be used while you are connected to a server. in that case the Remote side is not empty.

All in all it looks like a design that would attract the smartphome/toybox generation. As a geek, I personally like the design as it is (even the icons are set to Classic). Functionality comes first, pretty UI is further down the road. That's why Windows 8 failed miserably.

Disclaimer: This is my personal opinion only. The design might evolve into an alternative way of using FileZilla. I won't stand in the way as long as I will always be able to run it like it is now.

[botg]

There are unfortunately a couple of constraints in designing user interfaces for cross-platform programs that need to be considered.

In particular the design needs to work on all supported platforms. Functionality that's only available on a few, or even one platform, should not be used, it creates a lot of maintenance overhead as different UI implementations need to be implemented for the other platforms.

A good example are title bar, toolbar and menu bar. You've moved the toolbar into the title bar in your design, as seems to be en-vogue on some platform these days. This won't work on all platforms as on some platforms the title bar isn't even handled by the program itself but by the system's window manager instead.

Also, on some platform the menu sits below the title bar and above the toolbar.

Queue
Representing it as a cloud [...] show a counter badge for the remaining files in the transfer queue.

Updating icons is expensive, this would be a big performance issue when transferring many many small files. Considering the size of toolbar buttons, there's also not enough room to display a large number.

Toggle buttons

Not only useful to the highlight with colors (rather than framing with thin border as it does in the current version) toggles, but for other highlights such as the selected files on the Local differing from the Remote, tooltips, badges or other elements that refers one or the other

Use of color alone is problematic. For example the user might have configured a toolbar background color that incidentally matches the icon's single color, the icon simply vanishes. Users afflicted with color vision deficiencies will likely have problems too.