Move actions from top to bottom, next to filename

[oparoz]

From @jancborchardt on September 15, 2015 17:7

We shouldn’t have actions in every corner and on every edge. The actions possible with the file should be next to the filename, on the bottom:

@oparoz can you do that? :) I can do styling fixes if needed.

(Also yeah, I will make it so that the action icons work for light images as well – currently working on that. :)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Copied from original issue: owncloud/gallery#349

[oparoz]

From @jancborchardt on September 15, 2015 17:8

(I’m not sure yet about the text next to the Download icon, if it’s really necessary. What do you think @oparoz @owncloud/designers?)

[oparoz]

From @stefan-niedermann on September 15, 2015 17:19

what about linking the filename with the download action? is there already another action on the filename?

[oparoz]

From @deMattin on September 15, 2015 17:26

By clicking on filename I won't expect a download. I think, this is no usual behaviour for that.

@jancborchardt: Probably there will come some more icons in future (rotate is a MUST have!), and so there should be no text next to the button.
A tooltip with a short display delay would make the useage of the button(s) clear, if one won't understand the symbolic icon.
And this way the UI stays clean.

[oparoz]

Hmmm... it works with the download button and probably with other "file actions" because the filename gives the proper context, but I think I'll keep the brightness button at the top and will probably convert it into a shades scale if there is nothing else to add...

And I think it should be meaningful icons only, no text, because there is not that much space available.

[oparoz]

Ah yes, rotate. That's another example of icon I would see at the top with brightness.

[oparoz]

From @jancborchardt on September 15, 2015 17:35

And I think it should be meaningful icons only, no text, because there is not that much space available.

Yup. So @oparoz can you move the download icon there?
Rotate should definitely be at the bottom as well. We should not throw actions all over the place.

[oparoz]

Well, it's not all over the place, but we shall test. When there was no filename, you would miss the icons if not careful. The eye is drawn to the top.

[oparoz]

From @jancborchardt on September 15, 2015 17:49

The eye is drawn to the image. And even if it is drawn to the top, that’s another reason why the actions should be at the bottom. Because otherwise they will distract from the image.

[oparoz]

Maybe you're right, if the user has an issue, he will look for solutions and will hopefully notice the icons at the bottom.
Time for some hallway usability testing :D

[oparoz]

From @enoch85 on September 15, 2015 19:4

Would be nice to move all the actions to the bottom except X (close).

Here is an example in Pydio, not as clean as ownCloud though:

[oparoz]

Yeah I don't like that bar in pyd.io, you have to look several times to understand what does what. They need to re-org that.
And a counter example in Photoswipe. You know instantaneously what you can do on this page.

[oparoz]

Also note how we can easily read the caption as opposed to how difficult it is to read the filename in the pic in the OP.

[oparoz]

From @enoch85 on September 15, 2015 21:20

+1 for Photoswipe. But I still think the actions should be on the bottom. @jancborchardt is on to something good here. And also, for white pictures the arrows are hard to see.

[oparoz]

From @jancborchardt on September 15, 2015 22:18

Time for some hallway usability testing :D

@oparoz sorry but no – we have a release upcoming very soon. Things just need to be done now. I don’t just make these designs up from the top of my head.

[oparoz]

@jancborchardt Even the best thought out designs need to be tested. Users are surprising.

1. Do you do hallway usability testing?
   A hallway usability test is where you grab the next person that passes by in the hallway and force them to try to use the code you just wrote. If you do this to five people, you will learn 95% of what there is to learn about usability problems in your code.

http://www.joelonsoftware.com/articles/fog0000000043.html

But in any case, I think both approaches would work. Can we have a mock up with a long filename (30+ chars) and a few icons? edit, download, share, rotate and brightness?

[oparoz]

From @jancborchardt on September 15, 2015 23:42

@oparoz no need to tell me that … I studied it and work in the field since many years.

We currently only have download, so only the download icon needs to be there. When more actions come there, we will do 2 things: 1) ellipsize the filename and 2) introduce a dot-dot-dot more menu like in files. Especially for rotate, rename and brightness which don’t always need to be there.

The only actions which need to be visible always are Favorite, Share and maybe Download.

[oparoz]

OK, makes sense.

[oparoz]

From @jancborchardt on September 15, 2015 23:51

Cool.

[oparoz]

From @enoch85 on September 15, 2015 23:59

Very cool. Will this be in 8,2?

[oparoz]

From @deMattin on September 16, 2015 7:40

I definitly agree with the "..." menu solution for rarely used actions.
But in my point of view, rotation is a button, that definitly should be able to access directly!

I know, this is the "I share everything" generation, but gallery is primary a viewer and it's possible, that you have many pictures in gallery, that aren't well orientated (I recently got one shared) and so it will be very frustrating to access a menu to rotate every 2nd or 3rd picture by viewing the pictures.

But I also know, that sharing can be directly accessed in any owncloud app and so it probably should be also present here - although I don't go with this "share-mania" ... ;)
It is probably the most usecase, that you share a complete folder (then probably via files app) or just one or two single pictures.
So this is not an action, that is used often on many different pictures by viewing a gallery - also because it needs some more clicks on every share action to define the shared with user and so sharing more pictures via gallery view will never be comfortable.

So in my point of view "download" and "rotate" are the two actions that definitly have to get separate action buttons!
(and I don't bother an additional share button)

[oparoz]

From @jancborchardt on September 16, 2015 7:58

But in my point of view, rotation is a button, that definitly should be able to access directly!

Sorry, but rotation is not that much of a common action to be shown directly. Any of those arguments could possibly be done for any action, and if we would show every action directly then it would be a clusterf$%k of icons again.

Hence, I’d say rotate could get a shortcut (adapt from common photo software and what they use for rotating). I guess that will solve your problem @deMattin.

although I don't go with this "share-mania" ... ;)

Yeah, but remember – you or I are not the only ones we design this product for.

Again: The actions which should be permanently visible are Favorite (left of filename as star), Share, and Download. Rest goes into the more menu.

And actually Download should only show there directly (instead of the more menu) for public shares, not when you are logged in to your own ownCloud where, well, you already have all the files downloaded.

[oparoz]

From @deMattin on September 16, 2015 9:11

@jancborchardt: Sorry, you didn't get the point "sharing will never be comfortable in gallery view" and because of THIS noone will often use it in gallery view on many pictures.
I accept the "share everything mania" and it is and has been no point of my argumentation, what I use or think about it. It's not the topic here, what I think or use.

But I really don't understand, why you don't see rotation as the most important action.
It's no matter of owncloud GUI or something like that - it simply HAS to be one click away!

Look at a photo and if it is not orientated right, correct this (or twist your neck).
This is the way you look at photos on paper and on any digital device, too.
And only THIS this is basic for ANY user if you look at photos or pictures - no download and no share or whatever!
And there are always reasons why automatic rotation doesn't work.
The simplest picture viewer has buttons or "fast actions" (mouse, gesture) for this:

• next pic, previous pic
• rotation
• (zoom)

If you have only well orientated pictures and so never use rotation, it's your personal opinion, that rotation is not needed! Please mind your attitude.

And a shortcut is no solution, because you have to learn it. This would surely solve it to me but not for the "normal" user using intuitive GUI for anything.

With the download button I don't agree, too
Why to differ between shared and own gallery?
You have pictures in cloud and don't have needfully synced them to your actual device.
So why to make it inconvenient for my "own cloud", to download a picture, I have not (yet) locally stored but need for further actions stored locally?

[oparoz]

From @jancborchardt on September 16, 2015 9:43

@deMattin the problem with the whole thing is that this discussion is completely derailed.

The topic this is about, and what we need to fix for 8.2, is that Download should be at the bottom next to the filename instead of at the top.
Everything else is 9.0, and something for a different issue. We need to focus, otherwise we will not get stuff done we need for the release.

With the download button I don't agree, too
Why to differ between shared and own gallery?

Because, well, it’s different. You can obviously also not delete files from a read-only shared folder, whereas you can do that in your own one.

[oparoz]

From @deMattin on September 16, 2015 10:19

Agree to close rotation button discussion here and get focus on release topic.
But I won't forget, if rotate will become topic ... ;)

For download I gave you the example - which is a common usecase - that you need to download a single picture from your signed in own cloud. I can imagine many usecases, where this could happen and is useful. And ... I already use it sometimes in such a way when I log in on other PC, on work or with tablet!
I see no reason, to hide this button for my signed in own cloud and force me to switch to fileview to do a job, that someone can simply do by clicking a button, to whom I shared my gallery!
A bit weird isn't it?

Deleting pictures in shared gallery is no topic and I agree to hide buttons, that don't work in shared galleries. But the download button IS working and useful also for your signed in own cloud.

[oparoz]

From @jancborchardt on September 16, 2015 11:23

I see no reason, to hide this button for my signed in own cloud and force me to switch to fileview to do a job

So there’s a misunderstanding. I’m not talking about hiding the function altogether and having it only in the files view. What I’m saying is that in the slideshow view, next to the directly visible actions like download, there should be an icon … which, when clicked, will expose the other actions.

[oparoz]

I'll let you move all your buttons arguments to this new "thread": owncloud/gallery#351

After testing buttons at the bottom, I vote against it. It doesn't work on small screens, in portrait mode. Even if you only keep the filename and the 3 dots, you have everything squeezed against each other center-right, but plenty of space at the top.

[oparoz]

From @jancborchardt on September 23, 2015 20:21

@oparoz the file list does it exactly like it: filename, share action, 3 dots. In addition it has favorites and the preview on the left, so there’s plenty of space for the play/pause action and even showing the download option directly.

Please do this for 8.2 – having the Download action at the top clutters controls all over.

[oparoz]

the file list does it exactly like it: filename, share action, 3 dots

Yes, but that's in a row, with lots of information organised in columns.

having the Download action at the top clutters controls all over.

Yes, if that doesn't work at the bottom, it should definitely be pushed back to the right, like on some of the slideshows we've been studying. We could also imagine moving play/pause up there in order to avoid having any controls at the bottom.
I'm also thinking of having something like: 3dots - Play - Close. Clicking on the 3 dots would slide-out the other icons to the left, for people needing to perform different actions.

My remaining issues with having everything at the bottom:

• Close would need to stay at the top. So controls would still be split.
• You'll have a mix of icon sizes, or you'll have to use a bigger font for the filename to keep things consistent
• There is not much room in portrait mode and it would be best to see more of the filename instead of having it squeezed by icons (similar to the discussion about breadcrumb and buttons in the photowall)

[oparoz]

We need static mock ups to understand better how things will look.

[oparoz]

If that's too much work for 8.2, I can definitely move the top buttons to the right and give them the same size, as a quick fix.

[oparoz]

From @jancborchardt on September 25, 2015 20:18

@oparoz I made a mockup above 10 days ago. And also mentioned the importance of this before. Please fix this for 8.2 – the controls should be next to the filename. cc @owncloud/designers @karlitschek

[oparoz]

From @jancborchardt on September 25, 2015 20:19

And at the moment it’s the download action only anyway. We can do more specific mockups in the 9.0 dev cycle. Rest assured it will fit, because it works for the filelist too.

[oparoz]

From @cmonteroluque on October 1, 2015 20:7

This issue will fall off 8.2 if not resolved by 6 Oct

[oparoz]

From @jancborchardt on October 5, 2015 5:43

(I’m on vacation, this is an exception.)

@oparoz It’s really a bit unfortunate that we can’t get this simple moving of the action down next to the filename done. What’s so complicated about simply moving it there? It’s only the download action, as I said. If assistance is required cc @MorrisJobke @PVince81 @Henni

[oparoz]

There are 2 icons. One of them is optional, but it will still show up for some users.
In portrait mode on mobile, there is a barely readable centred filename with an ellipsis and 3 icons, when there is plenty of space at the top. One possible future solution is the 3 dots which would expand in landscape mode, but it's not there yet.
I can see what you're trying to do and it's true that in a slideshow, it's best to keep things quiet, but ownCloud is mostly a sync and share solution, so people may enjoy more being able to quickly tag, share, etc. the image in view. I'm thinking of adding the star (for favourites) rather quickly as I think it's cheap to implement. and that would be 4 icons already.
We could also consider mobile to be an unsupported use case...

So I have dilemma and don't want to go back and forth, so I'm more in favour of keeping the icons top right for now (I don't think centre top works that well), like we've seen on some competitive products and move things to the bottom, once it's proven that it's a better, fully tested alternative.

I think I need to email you to talk about some details...

[oparoz]

From @jancborchardt on October 6, 2015 21:44

We could also consider mobile to be an unsupported use case...

No, but we could consider for example showing some more options in the three dots menu on mobile. Like Download – and the Background switcher for sure. That would only leave the star and the three dots.

[oparoz]

From @jancborchardt on December 16, 2015 15:56

This is basically a sub-issue of owncloud/gallery#68

[skjnldsv]

Superseded by #540