Final prototype and summary

We finally made it to final prototype!
[Source code], [Mac binary], [Windows binary]

[Summary]

We also post long-awaited readable survey result to FileZilla forum. [survey1] [survey2]

Improved transfer queue

From user test comments and team discussion, here is an improved version of download queue. We are going to implement based on this.

Toolbar icon survey result

The summary of toolbar icon survey with analysis can be found in survcy summary.

Interactive user test: summary

History page

• suggest to use ‘+’ instead of add to site manager

Download

• Cancel button
  • does it cancel one download or all download?
  • also thinks of exist the program
  • how to cancel specific download?
  • suggest: putting next to each download
• - does it cancel one download or all download?
  - also thinks of exist the program
  - how to cancel specific download?
  - suggest: putting next to each download

  No permission to download indication

  • doesn’t see the status-bar message indicate the cause of error
  • suggestion: put the file in download queue and indicate error there
  • suggestion: check permission before enabling download button
  • suggestion: adding a pane in the file listing area (like Firefox popup alert) to inform user.

Toolbar

• User doesn’t recognize ‘synchronized browsing’, ‘filter’, and ‘directory comparison’ buttons
  • Synchronized browsing
  • Filter – funnel-like icon?
  • Directory comparison
    • make equal sign bigger and to the top
    • make folder as horizontal folder
    • make color of folder more distinct from the background
• User thinks that vertical toolbar is unconventional
  • put only download/upload button there and leave other buttons in the top toolbar
  • make a it configurable, so expert user can remove the vertical bar

Interactive prototype user test

Persona: Dave Lopper (expert)

History screen

• User thinks that it is intuitive to put the most recent as the top icon

Download screen

• User try drag & drop to download first.  After it doesn’t work, he found the toolbar button.
• After download, user try clicking expand button in the queue before reading the instruction.  User is familar with this.
• User press correct cancel button, but he expect to see it next to the progress bar of each download.
• Use doesn’t recognize the ‘no-permission’ at all.
• He suggest to add a panel that appears inside the file listing area (like Firefox’s popup alert) to indicate the problem about permission.  He also thinks that the download button should be disabled.

Toolbar

• User identified all toolbar icons correctly.  He indicates that he would not recognize without our question mentioning them.
• He thinks that vertical toolbar is rather unconventional.  He suggest to retain only download/upload buttons in the vertical toolbars and put other buttons to the top toolbar.

Interactive prototype user test

Persona: Dave Lopper (expert)

History screen

• User does not consider the top entry as the most recent in the test.  He indicates that if he use the program to connect by himself and see that the last site goes to top.  It would be natural in the next time.
• ‘Add to site manager’ button can use ‘+’ instead

Download screen

• User uses download button as the first choice and thinks that the icon is intuitive enough.
• User notice the progress bar and download information in the drop-down. He also agrees with the green-yellow-red color scheme.
• User found cancel icon at the toolbar
• User notice connection error and download failure from the progress bar.
• When the program can’t write at the client side, user noticed but didn’t found the cause of the problem.
• User found disconnect button.

Toolbar

• User can’t find the synchronized browsing
• User can’t recognize the compare folder.  He said that it is because of the folder color.  Also he suggest to make the equal sign bigger and to the top of folders.
• User can’t find filter icon.  He suggest to use the funnel-like icon likei n Excel.

interactive prototype userstudy: persona Dave Weber

CS student, regular FTP user. Study done using think-aloud.

1. connect to the same server to that most recently a connection was made.
- top server was considered as last connected, connection by click on the button.

2. save the aachen.com server to the site manager.
- found instantly.

3. connect to the test server from the site-manager.
- done without problems.

4. download ‘document1.rtf’ from the ‘work’ folder at the server
- done without problems, first try though was to download via drag and drop, which does not work for the prototype.

5. The detail about the download is shown on the screen. Please find on the screen where indicates:
- which file is being downloaded
- progress of downloading
- times remaining until the download finish
- where the file is downloaded
- easily found, besides where the file is downloaded to. may be inferred by the way of questioning, but user felt this information should be visible in the download-status-area too.

6. Since this is a prototype, please click on the blank area at the bottom-right of the window to proceed.

7. Is the download completed? If so, where did you found out?
- done without problems.

8. Now, try downloading ‘document2.rtf’. Please tell when you found that the document is downloading.
- done without problems.

9. Please cancel the download. Please tell where you found out that the download has been cancelled.
- user was first looking for a button next to the download, but then found the button in the menu bar. question arrose: how to cancel a specific download if many files are downloaded in parallel?

10. Now, please download the ‘document2.rtf’ again.
- done without problems.

11. Proceed by clicking at the blank area at the bottom-right.

12. Tell if there is something happened. Proceed by clicking at the blank area at the bottom-right again.
- failure recognized.

13. Tell if there is something happened.
- failure recognized.

14. Now, navigate to the ‘.Trashes’ folder in your computer side.
- user was a bit irritated, since he could not find the folder in the list view but then found it in the tree view.

15. Try downloading ‘document2.rtf’. Tell if there is a problem when downloading.
- figured there was a problem, then assumed the red border has something todo with it, did not see the status-bar-message at all.

16. Disconnect from the server
- Done without problems.

User test with interactive prototype

User: Persona 1
Gender: male
Age: 22
Occupation: apprenticeship at system integration

1. connect to the same server to that most recently a connection was made.
- the top most server in the history is considered as most recent
- no problems with connecting

2. save the aachen.com server to the site manager.
- the user found very fast how to do this using the button “add to site manager”

3. connect to the test server from the site-manager.
- no problems found

4. download ‘document1.rtf’ from the ‘work’ folder at the server
- the user found the file very fast and used the download icon immediately
- the user saw that the file has being downloading, because he appeared in the download queue

5. The detail about the download is shown on the screen. Please find on the screen where indicates:
- which file is being downloaded
-recognized by the name of the file in the queue and because of the fact, that he wanted to
download this file, so it is logical that exactly this file is downloading
- progress of downloading
- recognized by the green progress bar
- times remaining until the download finish
- no problem here
- where the file is downloaded
- again the user said that he wanted to download the file to the folder in that he was, so
the file must be downloading there

- summary of this task: the user found all the needed information very fast. He didn’t used the
detailed downloading screen to find all the information he needed.

6. Since this is a prototype, please click on the blank area at the bottom-right of the window to proceed.

7. Is the download completed? If so, where did you found out?
- the user recognized that the file is downloaded because:
1. the green bar was full
2. 100 % label
3. the green icon
the user named those reasons exactly in this order.

8. Now, try downloading ‘document2.rtf’. Please tell when you found that the document is downloading.

9. Please cancel the download. Please tell where you found out that the download has been canceled.
- the user didn’t trust the cancel icon on the toolbar because:
1. was not sure whether this will cancel only one download or all downloads
2. was not sure whether is this icon for canceling or “close everything and destroy the program” icon.
- the user suggested to put the cancel button next to the file in the download queue
- after canceling the download the user fast recognize that the file download was canceled,
because of the label “(canceled)”

10. Now, please download the ‘document2.rtf’ again.

11. Proceed by clicking at the blank area at the bottom-right.

12. Tell if there is something happened. Proceed by clicking at the blank area at the bottom-right again.
- the user recognized that there is a connection problem, supposed that the client was disconnected.
- the user recognized the problem, because he saw the yellow progress bar and the yellow icon, then he read
the description next to the icon and recognized that there is connection problem

13. Tell if there is something happened.
- the user recognized that the download failed and distinguished the to states (the yellow and the red).
again he supposed that he is disconnected and this is probably the reason of the fail.

14. Now, navigate to the ‘.Trashes’ folder in your computer side.
- the user used the directory view to navigate

15. Try downloading ‘document2.rtf’. Tell if there is a problem when downloading.
- the user recognized that there is a problem, because the file didn’t start downloading
(didn’t apear in the download queue). Supposed that the reason is that he is disconnected.
After he was told that the reason is that he has no rights to download files into that folder, the
user was surprised. He suggested to change the feedback of this kind of error. Maybe to put the file
in download queue first, but then to indicate that there is a problem and to describe what is the problem.

16. Disconnect from the server
- the user found the rigth icon on the toolbar, but because of all the download failures he thought,
that he is already disconnected, so why to do this again.

Summary:
1. The user said, that there must be some indicator that indicates whether he is still connected or not.
2. About the three features “synchronized browsing”, “directory comparison” and “filter view”:
the user didn’t recognized any of the icons, suggested to put labels instead of icons.

Interactive prototype v1.0

This is the first version of the interactive prototype of filezilla with new interface.

To see the prototype click here

Task description

Observer’s task description

Prototype interview

interview 1:expert user

download
original:

• thinks that it is not realistic because he would use drag & drop
• alternative: ctrl+c , ctrl+v

improved:

• save time
• suitable only for single file (assume that download button is one-to-one)
• when multiple files is selected, where the button should be? how to download
• suggest: when select multiple file, change the button to indicate that multiple files can be downloaded

prototype

• downloaded: why progressbar is gray. Feel blank. Should be green or stronger color.
• or hide progress bar
• or change filename to green and don’t show progress bar and checkmark
• total failure: ! –> should be ‘x’ instead. use black
• Will ‘x’ means cancel? –> No. It is triggered by program, user didn’t click it. It is likely that use stop immediately when the download is just started, not at other time.
• sound: retry -> don’t have to make sound feedback. Not necessary to get user attention.
• sound: failure -> one time is enough if we don’t have retry sound feedback.

connect
original

• realistic
• no other way
• didn’t recognize the status message is wrong

new

• OK
• disconnect case: suggest don’t revert to the first. –> replace with single button ‘click here to reconnect’

prototype

• Bookmark & quickconnect should be combined to single page.
• Top: bookmark, bottom: quickconnect. When select bookmark -> fill in quickconnect
• when press connected: probably hiding ‘server’, ‘user’, ‘port’ will be cleaner, but leaving it like that is OK.
• Doesn’t see any advantage from leaving those fields.
• ‘connecting’ -> should be label
• where to cancel connection?

Change permission
Oh! can filezilla do it? Didn’t get used to it.
original

• don’t know why doesn’t change

new

• is it revert? But reset, reset to default is not convey the meaning.
• numeric below should have one for left, one for right
• 777 should be text box
• description text should be to the left & text description should be on the right

prototype

• just word ‘permissions’ is enough. ‘File’ is not add any meaning.
• symbol of ‘mixed’ smae as leave unchanged.
• ‘mixed’ word is strange. (should add tooltip with visible icon)