Elements of FileZilla's user interface

[alexkovac]

Hi everyone,

I am trying to see into FileZilla's user interface and perhaps try to suggest some improvements.
Currently, it would be good to document the current FileZilla's user interface in form of "maps". Later, I will try to locate "papercuts" ("Paper cuts are minor software usability flaws that can be easily corrected" google ubuntu and papercuts for more...).
In this sense, here is the first "map" in PDF and PNG versions. This map is showing dialog boxes and panels a user encounters while using "Check for updates..." command in the main menubar's "help" menu. I will try to add papercuts soon and propose some solutions to them.

Any critique/help is more than welcome! Also, feel free to download these files and add your own "papercut" points and post them here.

Thanks.

[botg]

Nice. Two more missing dialogs:

• Unable to check for update, e.g. due to no network
• There is a new version, but the used FileZilla build cannot be auto-updated, e.g. because it's running on some platform we do not provide builds for.

[alexkovac]

Thanks a lot.
Here is a small update:
• Added "unable to connect" dialog box.
• Short captions next to dialog boxes.

Unfortunately, I don't have the "Failed to auto-update" dialog box. If anyone has one, please send it here. Thanks.

One more thing, these PNG images are big. I know. If they are smaller, the dialog boxes text gets completely illegible. Sorry.

[alexkovac]

Hi,
I am sending 3rd version of current "updating FileZilla" interaction flow map. This time, in the map some small papercuts are marked and also points of possible improvement.

Note: Map is still missing 2 dialog boxes.
Attached are a smaller .png icon of the map and full size .pdf

Any feedback is more than welcome!

Thanks!

[alexkovac]

Hi,

Based on the maps and mentioned papercuts in the previous post, this is a similar map, but this time a proposal.

This proposal tries to address the papercuts from the previous map, and hopefully offer some interaction and GUI improvement suggestions, also. The map file contains explanations. I have tried to take into account and use what I have learned so far (not much!) about wxWidgets beviour in order to make it applicable. Of course, there are probably errors... As you see, by all means, this is meant as a point for discussion, rather than a "finalized" product. So, again, any suggestions, critique, comments, updates, changes... are more than welcome!

Note: Hm, I have noticed just now that this map is missing native system's "save file" dialog box. I will add it in the next installment

Note 2: The map itself is laid out in a layout grid, but since this is only a proposal, I did not bother to explain in there. If/When needed I there is no problem to add that detail.

Cheers!

[botg]

Nice suggestions.

A few comments:

• The link back to preferences in the update dialog, that adds a cycle. Modal dialogs and cycles are a bad idea. Making preferences and the update wizard non-modal is possible, but there's a whole lot of strings attached to it. Only way to implement it without too much effort would be for that link to close the update wizard and then open the preferences if they are not yet open.
• "Already using latest version" dialog. What if automated updates are already enabled? Perhaps change "enable" to "configure" in the text?
• Change log. If you're using an old version and several new versions have been released, the changelog being displayed lists the changes for all versions since. In particular, the changelog for any beta versions the user has skipped is also being displayed.
• The old update wizard is a wizard, a single dialog with multiple pages. To implement your suggestion, one would either need multiple independent dialogs or one dialog that changes size. Both solutions have different drawbacks. Multiple dialogs: User opens dialog, before he can read it, it suddenly disappears and a new dialog appears. The new dialog can appear at any position, on some platforms, window positioning is only advisory, programs cannot force a window to appear at a particular location. Single, size-changing dialog: Changing size is a bad idea, in particular going from big and to small. The window can move off-screen that way. Also, resizing a fixed-size dialog is terribly complex in wx, and I'm not even sure if its possible on all platforms.

The suggested changes to the preferences page are fine as-is.

[alexkovac]

Hi! Thanks a lot for reply,

• • "The link back to preferences in the update dialog, that adds a cycle." - The link from the dialog box to "preferences" panel is not essential for interaction, at all. I have put it there more as a convenience along with the information about advanced settings. Without it (and the cycle) is also fine, I think. Additionally, to be honest, I completely forgot to check whether the preferences/update dialogs are modal. Amateurish! And, yes they are. Yes, it would be nice if they were not modal, but I can see that in the case of Preferences panel, switching from modal to non-modal could create problems. Updater, though, might be safe to switch to non-modal?
  
  • "Perhaps change "enable" to "configure" in the text?" - Of course! "Enable" could be misleading. I will change it in the sketch, too.
  
  • "the changelog for any beta versions the user has skipped is also being displayed." - I think that would be ok. The text box containing the changes log would still be scrollable like the original one but only a little higher; to display at least the most of the current update's log. Perhaps even a bit of the log before the latest, too.
  
  • "...either need multiple independent dialogs or one dialog that changes size. Both solutions have different drawbacks." - One flexible dialog might be too much, I agree. . Considering the multiple dialogs, thanks, you reminded me that indeed wxWidget's documentation mentions inability to position dialog boxes on some of the platforms.

I will try to include your comments and send here an updated sketch.
Thanks a lot once more!

Can I ask a question? In this post's attachment you can see the imagined "model" I used for dialog boxes in the update sketch above. The idea was to keep one dialog box, but the content would change inside some variable areas. In the attachment, this variable areas are marked with cyan. For example, in the update flow sketch above, the initial dialog box and the top (small) dialog box of the second step would be one dialog box.
Next, the big dialog box with change log or connection failure would be a second dialog box. Two last dialog boxes would also behave as one dialog box with variable content.
Is keeping one dialog box object, while changing it's content is possible with wxWidgets? (I was unsuccessful in finding an answer in wxWidgets docs)

...Just a thought...
How about another approach to updating interaction? The one Firefox and Thunderbird employ lately seem very low profile, but it gets the job done. If you remember, accessing Firefox' "About" dialog would automatically check for updates, too (if enabled in "preferences"). the process of checking for updates is hidden, and the user is offered an "update" button if a newer version exists. The change log is accessible online. Now, honestly, I feel that seeing change log immediately is more convenient, but otherwise Firefox' updating interaction seems pretty smooth.

Alex

[botg]

Is keeping one dialog box object, while changing it's content is possible with wxWidgets?

Yes, that's possible, as long as the dialog itself is not resized and large enough to hold all possible contents.

How about another approach to updating interaction? The one Firefox and Thunderbird employ lately seem very low profile, but it gets the job done. If you remember, accessing Firefox' "About" dialog would automatically check for updates, too (if enabled in "preferences"). the process of checking for updates is hidden, and the user is offered an "update" button if a newer version exists. The change log is accessible online. Now, honestly, I feel that seeing change log immediately is more convenient, but otherwise Firefox' updating interaction seems pretty smooth.

Dunno, I don't like the way Firefox performs updates. Whenever there's an update available and I want to use my browser, I have to wait for it to update, check addon compatibility and so on. I don't like this lack of choice whether to perform the update or not.

[alexkovac]

Thank you very much and sorry for delay on my part...
I am sending slightly updated and annotated sketch of updating interaction flow suggestion. There are no big changes.
The green bands connecting some dialog boxes in the sketch are meant to say that the dialog boxes connected with the green band are actually one dialog box with variable content.

This sketch still uses 3 distinct dialog boxes, although they change at "expected" points. First, a dialog box changes if an update is found, and the second time when a download starts. If this layout still presents technical issues, I think it can be reformatted so that the content is always within the same dialog box.

I would like to ask you, if you have any comments, please let me know.
Thanks a lot!

Alex

(Considering the mapping of the rest of FileZilla's GUI, I think I have managed to capture the majority of GUI elements so far and have most of the maps of the current interaction sketched. I will post them here as I tidy them up.)

[botg]

Thanks, looking good. I'll see if I can get this implemented in the near future.

[boco]

Thank you for this really constructive contribution. Wish there would be more threads like this one.

[alexkovac]

O, great!
Both for the implementation news and the positive comment.

boco, if you happen to have at anytime more comments or sketches, please post them here, too. The more ideas/comments the better .

Cheers.

[botg]

I've remodeled the update page in the preferences according to your great suggestion.

[alexkovac]

Hi, botg,
I have just downloaded and installed the latest nightly. Looking very good!

[alexkovac]

Hi everyone,
This is just interaction flow map work-in-progress of the current situation considering the listing filtering in FileZilla . Hopefully all the user interface elements are in it, but if you happen to notice any missing dialog boxes please let me know. Thanks!