[prev in list] [next in list] [prev in thread] [next in thread]
List: kfm-devel
Subject: Re: Review Request 126622: GSoC 2016 Project Idea: File Trays for Dolphin GUI Mockup
From: "Alessandro Longo" <alexlong92 () gmail ! com>
Date: 2016-01-07 15:00:51
Message-ID: 20160107150051.6499.3798 () mimi ! kde ! org
[Download RAW message or body]
--===============8250175355577353854==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/126622/#review90754
-----------------------------------------------------------
I really like the idea and I have a suggestion from an UX POV:
if you drag the files to add them to panel, why not allow the opposite to paste them? \
I mean the following actions:
1. move to one source folder
2. drag the files to the panel
3. iterate 1 & 2 for each source folder
4. move to destination folder
5. clic on a "select all" button in your panel > all "clipboard-ed" files are \
selected 6. drag the selected files to the current folder that is the destination \
folder
and so avoid all those buttons in your panel: keep only a "select all" button.
Also I'd like to have a name that describe well what that panel do: it is a \
"temporary virtual folder" but this name seems too much long. Anyway the icon for \
toggle it could be a folder+clock.
Anyway I have some doubts about its usefulness: in Dolphin you can currently split \
the view into two folders: in fact I currently use to keep the destination folder in \
an half, browse in the other one searching for the files and when I find files should \
go in the destination folder I drag them there.
I think that a right-clic service like "move to temporary folder"+"copy into \
temporary folder" could make it more useful: so I can add files without opening the \
panel and at a later time check the content of the panel and paste files to the \
destination folder.
Additionally, to distinguish your panel from split view, you could put it at the \
bottom.
- Alessandro Longo
On Gen. 7, 2016, 7 a.m., arnav dhamija wrote:
>
> -----------------------------------------------------------
> This is an automatically generated e-mail. To reply, visit:
> https://git.reviewboard.kde.org/r/126622/
> -----------------------------------------------------------
>
> (Updated Gen. 7, 2016, 7 a.m.)
>
>
> Review request for Dolphin and KDE Usability.
>
>
> Description
> -------
>
> **The idea**
> Selecting multiple files in any file manager for copying and pasting has never been \
> a pleasant experience, especially if the files are in a non-continuous order. \
> Often, when copying files between devices we might find that we need to select only \
> a subset of the required files we have selected and this leads to the unwieldy \
> operation of removing files from our selection. Of course, the common workaround is \
> to create a new folder and to put all the items in but this is a very inefficient \
> process and can be very slow if large files need to be copied between devices.
> My solution to this problem is to add a panel/view in Dolphin where the links to \
> files and folders can be temporarily saved for a session. The files and folders are \
> "staged" on this panel. Hence, the user can add folders and files from several \
> different directories to this panel and can then collectively perform actions on \
> all the items in the tray such as copy, paste, cut, upload images in selection to \
> Facebook, upload files to Dropbox, etc. This makes complex file operations easy by \
> staging the operation before performing it.
> Files can be added to this tray by using a right-click context menu option or by \
> using the mouse scroll click or drag and drop. As an additional option, the session \
> for the File Tray Panel can be saved for later use.
> My initial idea was to have another split view mode with its button in the toolbar \
> in Dolphin. It will function similarly to the existing split view but with one half \
> of the screen dedicated to the "Files tray". This would make it neatly integrated \
> with Dolphin's existing toolset and it would make dragging and dropping easy. \
> Dolphin maintainer Emmanuel Pescosta suggested using Plasmoids to make the project \
> more cohesive with KDE and to make it usable with multiple applications (eg \
> Gwenview).
> **GUI Mockup**
> Attached with this Review Request is a Balsamiq mockup for my project idea, \
> building upon what already exists in Dolphin. The Tray panel is activated by a \
> toggle button on the Dolphin toolbar and behaves very similarly to the Split \
> feature. Dragging and dropping folders and files from the active directory on the \
> left and pasting directly from the clipboard will be supported.
> The File Tray gets its very own toolbar for implementing these functions on all the \
> files placed in the Tray.
> The "Destination Folder" dropdown has a list of recently accessed folders **and** \
> an option to choose the active directory on the left of the File Tray.
> "Cut" and "Copy" are self explanatory and will allow for files on the Tray to be \
> transferred to the "Destination Folder".
> The "Search in Files" button will use grep to find a certain string in the files \
> located on the Tray. A search bar drops down when this is clicked.
> The "Archive" button allows the user to compress and package the files in various \
> archive formats.
> The 3 dots menu hides more advanced features and prevents the toolbar from becoming \
> too imposing.
> "Create shortcuts" will create symbolic links for all the files in the Destination \
> Folder the user has chosen.
> "View Git version history" (I'm not sure if this will be useful) will display a GUI \
> with the Git revisions along with the Git log if a .git folder is found in a \
> directory.
> The File Tray will use the same zoom and icon/details/compact settings as the main \
> window of the file manager. While it may be technically possible to have a \
> distinction, I feel it may be too complicated for many users as there will be many \
> duplicate controls.
> Also, as the toolbar for the File Tray is quite large, I'm not sure how to design \
> the interaction when the window is scaled to a smaller size. Maybe the buttons \
> overflowing can dynamically move into the 3 dots icon but I am not sure if this is \
> a good practice.
> I will be much obliged to hear feedback from the usability and dolphin teams on \
> these GUI interactions : )
> **EDIT**
> After some more thought, I have decided to get rid of the File Tray toolbar. All \
> these actions can either be integrated with Dolphin's existing context menus. There \
> are some use cases I have thought of:
> Jerry has a large music collection on his computer and he has many devices such as \
> a tablet, smartphone, HTPC, and a USB drive for his car audio. He needs only a \
> subset of files from his extensive collection which he wants to keep on all his \
> devices. Hence, to avoid making the same selection over and over again for each \
> device, it's much more efficient for him to just create his list on the File Tray \
> and then copy the same list to each device.
> George is a student at university and he has a lot of unorganised files on his \
> computer from lots of different directories. By selecting these files and staging \
> them on the File Tray in a split view mode, he can easily discern where each file \
> should go. He can then easily move files by simply dragging and dropping them in \
> the directory they belong in. This makes the File Tray a helpful tool for file \
> organisation.
> Cosmo keeps forgetting where he keeps his important files as they are often hidden \
> deep within directories and sub-directories. The File Trays feature can come to the \
> rescue here by letting him stash the files in the File Tray and hence it will save \
> him time from drilling deep into directories for a file. Hence, the File Tray can \
> also be used for making quick shortcuts for files. For this I plan to add a feature \
> and user preference to allow the user to restore the Tray from the previous session \
> and to have the option of making the Tray retain the files stored in it across \
> sessions.
> Furthermore, by default, the File Tray will **not** retain the files added in it \
> across sessions, though I will add a button to restore files from the previous \
> session. I also plan to add a Save button (not sure where it should go) to allow \
> the user to save the selection of files they have made on the Tray.
> Another important note about the interaction model I have thought about is that the \
> File Tray should have its own shortcut such as ctrl+W (of course the keyboard \
> shortcut is subject to change). Invoking this shortcut on a selected number of \
> files in the Active Directory should immediately open the File Tray and add all the \
> Files in the selection there. Moreover, the Split view will be disabled whenever \
> the File Tray is active. If the split view is open when the File Tray keyboard \
> shortcut is activated, the Split view of the inactive directory will close and will \
> be replaced with the File Tray.
> Also, the File Open dialog will undergo some modification so users can select items \
> directly off the Tray for other programs.
> Finally, I also want to create a Plasmoid which will sync the same links as the \
> File Tray and will exist as a widget on the Desktop. This Plasmoid will benefit the \
> KDE desktop as a whole as multiple applications will be able to interact with the \
> Plasmoid for stashing files. However, the completion of this may or may not happen \
> with the GSoC timeline as it is completely dependent on how much QML I can learn by \
> the time the GSoC proposal period starts : )
> Also, there are a few more features I want to add to make the File Tray more \
> powerful. However, these features are probably a better fit for Dolphin in general, \
> and then the File Tray can use these functions from Dolphin: 1) The ability to \
> create symbolic links of a selection of files. Nautilus has been doing this for a \
> while. 2) Automatically create a music playlist file by selecting music files.
>
> **EDIT2**
> I made a new mockup by butchering the mockup a bit :S But, the new one is at least \
> indicative of what I want to achieve with this project.
>
> Diffs
> -----
>
>
> Diff: https://git.reviewboard.kde.org/r/126622/diff/
>
>
> Testing
> -------
>
>
> File Attachments
> ----------------
>
> FileTray Mockup (OLD).png
> https://git.reviewboard.kde.org/media/uploaded/files/2016/01/04/ec5ec185-0307-4579-afc4-567d2aafa220__FileTray_Mockup.png
> FileTray Mockup.png
> https://git.reviewboard.kde.org/media/uploaded/files/2016/01/07/e6e2accb-714f-45fc-a026-fd69574f6790__FileTray_Mockup.png
>
>
> Thanks,
>
> arnav dhamija
>
>
--===============8250175355577353854==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 \
solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;"> \
<tr> <td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/126622/">https://git.reviewboard.kde.org/r/126622/</a>
</td>
</tr>
</table>
<br />
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: \
-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I \
really like the idea and I have a suggestion from an UX POV: if you drag the files to \
add them to panel, why not allow the opposite to paste them? I mean the following \
actions:</p> <ol style="padding: 0;text-rendering: inherit;margin: 0 0 0 \
2em;line-height: inherit;white-space: normal;"> <li style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">move to one source \
folder</li> <li style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">drag the files to the panel</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">iterate 1 & 2 for each source folder</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">move \
to destination folder</li> <li style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: normal;">clic on a "select all" button in your \
panel > all "clipboard-ed" files are selected</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">drag \
the selected files to the current folder that is the destination folder</li> </ol>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">and so avoid all those buttons in your panel: keep \
only a "select all" button.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Also I'd like to have a name that \
describe well what that panel do: it is a "temporary virtual folder" but this name \
seems too much long. Anyway the icon for toggle it could be a folder+clock.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Anyway I have some doubts about its usefulness: in Dolphin you can \
currently split the view into two folders: in fact I currently use to keep the \
destination folder in an half, browse in the other one searching for the files and \
when I find files should go in the destination folder I drag them there.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">I think that a right-clic service like "move to temporary folder"+"copy \
into temporary folder" could make it more useful: so I can add files without opening \
the panel and at a later time check the content of the panel and paste files to the \
destination folder.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Additionally, to distinguish your panel \
from split view, you could put it at the bottom.</p></pre> <br />
<p>- Alessandro Longo</p>
<br />
<p>On gennaio 7th, 2016, 7 a.m. UTC, arnav dhamija wrote:</p>
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: \
1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; \
-webkit-border-radius: 6px;"> <tr>
<td>
<div>Review request for Dolphin and KDE Usability.</div>
<div>By arnav dhamija.</div>
<p style="color: grey;"><i>Updated Gen. 7, 2016, 7 a.m.</i></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" \
style="border: 1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;"><strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">The idea</strong> \
Selecting multiple files in any file manager for copying and pasting has never been a \
pleasant experience, especially if the files are in a non-continuous order. Often, \
when copying files between devices we might find that we need to select only a subset \
of the required files we have selected and this leads to the unwieldy operation of \
removing files from our selection. Of course, the common workaround is to create a \
new folder and to put all the items in but this is a very inefficient process and \
can be very slow if large files need to be copied between devices.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">My solution to this problem is to add a panel/view in Dolphin where the \
links to files and folders can be temporarily saved for a session. The files and \
folders are "staged" on this panel. Hence, the user can add folders and files from \
several different directories to this panel and can then collectively perform actions \
on all the items in the tray such as copy, paste, cut, upload images in selection to \
Facebook, upload files to Dropbox, etc. This makes complex file operations easy by \
staging the operation before performing it.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Files can be added to \
this tray by using a right-click context menu option or by using the mouse scroll \
click or drag and drop. As an additional option, the session for the File Tray Panel \
can be saved for later use.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">My initial idea was to have another \
split view mode with its button in the toolbar in Dolphin. It will function similarly \
to the existing split view but with one half of the screen dedicated to the "Files \
tray". This would make it neatly integrated with Dolphin's existing toolset and it \
would make dragging and dropping easy. Dolphin maintainer Emmanuel Pescosta suggested \
using Plasmoids to make the project more cohesive with KDE and to make it usable with \
multiple applications (eg Gwenview).</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;"><strong style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">GUI \
Mockup</strong> Attached with this Review Request is a Balsamiq mockup for my project \
idea, building upon what already exists in Dolphin. The Tray panel is activated by a \
toggle button on the Dolphin toolbar and behaves very similarly to the Split feature. \
Dragging and dropping folders and files from the active directory on the left and \
pasting directly from the clipboard will be supported.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The \
File Tray gets its very own toolbar for implementing these functions on all the files \
placed in the Tray.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">The "Destination Folder" dropdown has a \
list of recently accessed folders <strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">and</strong> an option \
to choose the active directory on the left of the File Tray. </p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">"Cut" \
and "Copy" are self explanatory and will allow for files on the Tray to be \
transferred to the "Destination Folder".</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">The "Search in Files" \
button will use grep to find a certain string in the files located on the Tray. A \
search bar drops down when this is clicked.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">The "Archive" button \
allows the user to compress and package the files in various archive formats.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">The 3 dots menu hides more advanced features and prevents the toolbar from \
becoming too imposing.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">"Create shortcuts" will create symbolic \
links for all the files in the Destination Folder the user has chosen.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">"View Git version history" (I'm not sure if this will be useful) will \
display a GUI with the Git revisions along with the Git log if a .git folder is found \
in a directory.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">The File Tray will use the same zoom \
and icon/details/compact settings as the main window of the file manager. While it \
may be technically possible to have a distinction, I feel it may be too complicated \
for many users as there will be many duplicate controls.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Also, \
as the toolbar for the File Tray is quite large, I'm not sure how to design the \
interaction when the window is scaled to a smaller size. Maybe the buttons \
overflowing can dynamically move into the 3 dots icon but I am not sure if this is a \
good practice. </p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">I will be much obliged to hear feedback \
from the usability and dolphin teams on these GUI interactions : )</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;"><strong style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">EDIT</strong> After some more thought, I have decided \
to get rid of the File Tray toolbar. All these actions can either be integrated with \
Dolphin's existing context menus. There are some use cases I have thought of:</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Jerry has a large music collection on his computer and he has many devices \
such as a tablet, smartphone, HTPC, and a USB drive for his car audio. He needs only \
a subset of files from his extensive collection which he wants to keep on all his \
devices. Hence, to avoid making the same selection over and over again for each \
device, it's much more efficient for him to just create his list on the File Tray and \
then copy the same list to each device.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">George is a student at \
university and he has a lot of unorganised files on his computer from lots of \
different directories. By selecting these files and staging them on the File Tray in \
a split view mode, he can easily discern where each file should go. He can then \
easily move files by simply dragging and dropping them in the directory they belong \
in. This makes the File Tray a helpful tool for file organisation.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Cosmo keeps forgetting where he keeps his important files as they are often \
hidden deep within directories and sub-directories. The File Trays feature can come \
to the rescue here by letting him stash the files in the File Tray and hence it will \
save him time from drilling deep into directories for a file. Hence, the File Tray \
can also be used for making quick shortcuts for files. For this I plan to add a \
feature and user preference to allow the user to restore the Tray from the previous \
session and to have the option of making the Tray retain the files stored in it \
across sessions.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Furthermore, by default, the File Tray \
will <strong style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">not</strong> retain the files added in it across \
sessions, though I will add a button to restore files from the previous session. I \
also plan to add a Save button (not sure where it should go) to allow the user to \
save the selection of files they have made on the Tray.</p> <p style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">Another important note about the interaction model I have thought about is \
that the File Tray should have its own shortcut such as ctrl+W (of course the \
keyboard shortcut is subject to change). Invoking this shortcut on a selected number \
of files in the Active Directory should immediately open the File Tray and add all \
the Files in the selection there. Moreover, the Split view will be disabled whenever \
the File Tray is active. If the split view is open when the File Tray keyboard \
shortcut is activated, the Split view of the inactive directory will close and will \
be replaced with the File Tray.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Also, the File Open \
dialog will undergo some modification so users can select items directly off the Tray \
for other programs.</p> <p style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: inherit;">Finally, I also want to create a \
Plasmoid which will sync the same links as the File Tray and will exist as a widget \
on the Desktop. This Plasmoid will benefit the KDE desktop as a whole as multiple \
applications will be able to interact with the Plasmoid for stashing files. However, \
the completion of this may or may not happen with the GSoC timeline as it is \
completely dependent on how much QML I can learn by the time the GSoC proposal period \
starts : )</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Also, there are a few more features I want to add to \
make the File Tray more powerful. However, these features are probably a better fit \
for Dolphin in general, and then the File Tray can use these functions from Dolphin: \
1) The ability to create symbolic links of a selection of files. Nautilus has been \
doing this for a while. 2) Automatically create a music playlist file by selecting \
music files.</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;"><strong style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">EDIT2</strong> I made a \
new mockup by butchering the mockup a bit :S But, the new one is at least indicative \
of what I want to achieve with this project.</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
</ul>
<p><a href="https://git.reviewboard.kde.org/r/126622/diff/" style="margin-left: \
3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments \
</h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/01/04/ec5ec185-0307-4579-afc4-567d2aafa220__FileTray_Mockup.png">FileTray \
Mockup (OLD).png</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/01/07/e6e2accb-714f-45fc-a026-fd69574f6790__FileTray_Mockup.png">FileTray \
Mockup.png</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
--===============8250175355577353854==--
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic