Checkmark indicator for upload screen

By looking at the styleguide, i see that we should only display a cross (X) and only show "remove" on hover.

I think that removes a large amount of clutter from the UI.

The cross could be displayed above an edge of the image, on top of a negative circle.

With the label below the image, it looks like "Remove" was the image label. This is misleading.

IMHO a Remove hint should show up next to the cross, similar to the design guide above.
And the space below the image is unused.

I agree this looks a bit strange as it doesn't use standard styling of elements.

The reason is the fact that we're using default theme of the DropzoneJS uploader (see http://www.dropzonejs.com/ for demo and other info). Since it is very easy to theme it it would make sense to create a custom Drupal theme for it. Having a design for it is a great first step which will make this much easier to do.

The only thing that looks a bit strange on #10 is the size of the drop area. Would it make sense to make it smaller and maybe move it to a side and make it use only a part of the available width?

Or maybe we could make it of the same size as the thumbnails and make it look like it is first/last element in the list?

I think that this belongs to the DropzoneJS integration module.

As mentioned by slashrsm, that's Dropzone default themem, but DropzoneJs can be easily themed, and that would be the best way to approach that.

Regarding the suggested designs, my vote goes to "Second, improved suggestion", because it's a very minimal design, that can be used in every admin theme.

I tried to request a minimalistic version with my comments #7, #9 and the new proposals are IMHO always one step forward and two back.

I don't like the recent double boxing. It makes everything cluttered.

I like the cross above the image edge and the removal of the label below.
The cross just needs to expand. when the "remove" is displayed.
Alternatively, please remove the double border / padding and let the image fill the whole tile.

Also if you are really upfor the background color, you should use the light blue and not the brownish. Brownish is only proposed while upload is in progress.

It's great to see someone works on these improvements!

First of all I'd like to thank Nenad for his great contribution, there is no so many designers willing to help with Drupal UX improvements.
I see great examples above and with small changes we can get right solution.

I have noticed in examples above, and in discussion, no one mentioned file types other than images!!! In DZ is possible also to upload any kind of files, and not all of them have thumbnail preview! So, some icons are needed, at least for most used file types, and one icon to cover other types.

I might also say I do not like default DZ UI because it is not very useful. Everything is crammed together in one thumbnail size of an image. There must be better solution.
Files below each other is better solution for several reasons: Desktop gets better info, it's better for small screens, in case of non-image files icons don't need to be giant.
Here is an image with solution that I like more, with few improvements can fit into Seven theme:

I do not like removing icon as "X" mark, for me it means "Stop current progress", or "Close this", but definitely not "Delete" or "Remove". I suggest using an icon of trash can (see example: https://d13yacurqjgara.cloudfront.net/users/45876/screenshots/2186659/20...).
I didn't check, but I expect trash can icon is not included in Drupal core, but that shouldn't stop future inclusion, whether in core or in contrib.
For "Delete" label it is not enough to just put there on mouse over, we must care about accessibility on all devices. For desktop screens maybe we don't even need label, simple tooltip would be just fine. But for touch screens mouse over doesn't mean anything.

Removing accidental changes of issue summary.

Thank you for participating and going one step further Dragan.

This issue was limited in scope and thus achievable. The primary goal was to remove the clutter "Remove file" that looks more like a label than an action...
IMHO that's easy to fix and it boosts UX.

Your proposal is a major refactoring in appearance and thus needs a new issue.
If someone jumps right into it, we could postpone the small fixing issues. But as long as this kind of refactoring is more a long term goal, the smaller fixes still make sense.

@Dragan Eror thanks for the visual suggestion, indeed it looks nice but we should also consider core standards. As @miro_dietiker said, it is a major refactoring and the scope for this issue is to remove the label to make it work with core standards. I think it would be a great idea if a new issue is open with your proposal tagged as a META issue, that would help people to write suggestions and start coding based on them.

Added icons, IMHO looks better now.

Looks ok, just needs a re-roll.

Rerolled.

Besides few missing newlines at the end of files (which can be fixed on commit) look OK. Thank you!

Committed, thanks to everyone :)

Improvement proposed in #16 can be continued at #2718847: Make UI more drupal core-like