[Owncloud] ownCloud design evolution

[Jan-Christoph Borchardt]

I thought about how to flesh out ownCloud and made a mockup on interface &
interaction evolution, mostly focusing on the file manager & general
order. It is available at
https://gitorious.org/jancborchardt/jancborchardt/blobs/master/ownCloud/Mockup%20design%20update.png
and I’ll provide an explanation here:

The main reasons behind this are
1) The file list seems to float around in space. We need to give ownCloud
a stable look.
2) I used ownCloud on a netbook last week.
3) It has to be clear where to put what (functions, nav entries),
especially for app & plugin developers.
4) I did some usability testing over the last weeks.

The changes, I’ll start from the top:

Header
The bar does not really need to be that big. It’s reduced to fit the
height of an input field (the search bar). Logo changed to text next to
icon. Everything else stays the same.
I’m undecided yet if it’s a good idea to put the music player controls
there. But we might as well try it out.

Navigation
Top navigation entries will be apps. Subentries will be categories /
things that change the main view.
Subentries for files: Most used, Recent(ly used), Shared (@Michael, no
separate top nav entry), Deleted (versioning, trashcan).
Haven’t thought about favorite folders yet - as we don’t have that
functionality anyway I wouldn’t include it at the moment.

Files control bar (breadcrumbs etc.)
Since the current home symbol does the same as clicking on "Files", it
makes sense to just connect the two. Files will always be the top app. The
buttons for Upload and New Folder are placed right next to the current
folder - that which you would upload to or create a new folder in. For
smaller windows, the breadcrumb entries will just vanish to the left. The
last ~3 should always show, if it gets narrower then that the labels of
everything but the current folder will abbreviate: Doc… > Kittens >

File list
Fills the whole width of the window, no floating around freely in space.
The modified date will be displayed relatively (last week, yesterday, 2
hours ago) and in similar brightness as the file size - the older, the
lighter.
Currently the check box column is useless unless you multiselect. It will
be combined with the icon column to show a checkbox on top of the icon
when you hover. That will also make the heading "Name" start flush with
the actual filename.
Except for the checkbox, when you hover a file, there will be inline
options to rename, download, share (see the icons) and delete on the far
right (because it’s a dangerous action, especially atm). No dropdown
anymore. (For tablets, the icon can be clicked to select, then the options
will appear as well.)
Rename will convert the file name into a text field and enable inline
editing. Clicking "Share" will open up a lightbox/popup of some sort with
sharing options, not sure yet.

And I finally solved how to properly do multiselect (no mockup for that):
As soon as more than one file is checked, the actions that show on hover
for each file (except for rename) will be shown in the table header bar,
between "Name" and "Size".
Also, "Name" will change to "1 folder, 3 files" or whatever you selected.
"Size" will change to the actual added up size of those files. I don’t
have an idea for "Modified" yet but it might as well vanish.


Please let me know what you think!


By the way, we should include some apps in core. It doesn’t really make
sense to have an option to disable, say: image viewer, sharing, even
OpenID is really useful for everyone. Sensible defaults, as few settings
as possible, even for the admin.

Also, if you haven’t yet, check out the file uploader updates Robin
implemented! Now handles multiple files and uploads directly without
needing to click ok (result of usability testing, people wait after they
confirm in the file manager window). The spinner for uploading feedback is
back as well. If anyone knows if / how it’s possible to convert the whole
table row (behind the file) into a progress bar, please let me know! We
now have an upload workflow twice as fast as Dropbox.