Uppy Modal/Dashboard Design

[arturi]

So, currently Uppy Modal looks like this:

_img 1_

It works, but:

1. It’s a bit heavy
2. A bunch of space is wasted when you are, say, in Drag & Drop, while all the progress/selected files are in a tiny popover thing
3. The whole workflow is based on the idea that we have tabs and we switch between them to switch between services like Google Drive, Instagram, Dropbox or local Drag & Drop.

So we thought maybe it’s time to rethink that UI and see if we could do better.

It’s work in progress, but the result at the moment is this:

_img 2_

It’s lighter, has a Dashboard/Workspace screen that combines progress + selected files screen with DragDrop/Local files screen. The idea being that by default you are always at this screen, and everything happens here, but you can move away to acquire files from somewhere else and then be back here to see their upload progress or annotate them.

This is not the final design, we are tweaking and tinkering as we progress. See comments for more UI mockups.

[arturi]

img 3

img 4

img 5

img 6

Artur’s mockups.

[arturi]

img 7

img 8

img 9

Alex’s mockups (rough basic version). The main take from these is: let’s try and make the service (Google Drive or Dropbox) fill up the whole space, with a back button and a close button to get back to the Dashboard area with your newly selected files. No distractions, easier on mobile. Simple, but powerful idea ;)

[hpvd]

Wow this looks awesome!!!
maybe you can give every image a number so one could more easily comment on it?

[hpvd]

Some general thoughts on details:

• progressbar within image preview may be sometimes hard to see (depending of colors of images uploaded...)
• EDITED: sorry I'm on mobile...when opening image to fullscreen just saw this is already included - perfect :-)
  [having the possibility to see some more details would be great.
  To keep design clear some of this could be shown on hover on icon/preview would (number of progress %, remaining GB, remaining time etc please see https://github.com/Care for needs of growing numbers of mobile / multi-/moving-location users (uploaders) #94 "1)") ]
• not only "cancel upload" but also "pausing upload" would be more then just "nice" :-)
  please see Care for needs of growing numbers of mobile / multi-/moving-location users (uploaders) #94 "2"

[hpvd]

"combines progress + selecting files screen with DragDrop/Local files screen."
is perfect!

[hpvd]

hmm just a "big" question:
do one really need a screen "summing up all uploads"?
Or could uploud control be done directly on "source" / selecting tab.

why thinking of this?

• it's an additional element itself
• it's an additional point in navigation
• may add additional clicks for users to select, start, control, select additional...
• background: I would guess probably most users would upload from one single source

[hpvd]

a question on detail:
what do different coulors (red and blue) of file icons indicate?

edit: ah "uploading" I think... maybe one could adapt this colours to colours of checkmark (green) to have only one same colour for same state?

[kvz]

Collecting files from all sources in one dashboard (that also supports drag/drop) has the advantage that people could rotate, rename/label/tag, and other client-side enriching of data before hitting upload. It will also be clearer which selection of files will be uploaded. Duplicating these controls in all sources does not seem appealing to me.

FWIW I like the idea of the completing-circle (

) to indicate a file is uploading. If we overlay it on top of the file, it has not only become a larger visual indicator, but we get the additional advantage of it being more apparent that further interaction (rotations, tagging, etc) are no longer possible at this point. The indicator basically blocks further interaction. Clicking the circle would pause the upload, indicated by the traditional two-vertical-stripes pauze symbol. This would then offer: a) cancel b) resume.

Filling up the entire space with the source seems like a good idea, as discussed in our call as well. The button should then not read "Upload files" but "Pick files" or "Select files" instead, I feel, as it puts them in the dashboard, ready for upload, but we're not uploading just yet (due to the mutations that could still happen).

One other approach that perhaps could work is drawing the lines like such (I apologize for this abomination), indicating we are now in Google Drive, and files will be put into "Ready for upload"

[kvz]

Perhaps, if ready for upload is on the right side, this drawing would make more sense

sources [ select ] --> ready for upload

But I realize this would consume quite some real estate on mobile. So I'm only 20% convinced this is a good way 😄 👯

[hpvd]

sure I understand the unifying thought behind collecting all files in one central space.
And I like unifying very much too.
It's a real good reason if one would allow applying actions like renaming, rotating..

[hpvd]

just a small modification on one of the images shown above...
a very clean startup screen with navigation

[hpvd]

sorry just edited #96 (comment)

[kvz]

The idea is more that the drag & drop area is also the workspace. So instead of just local, it will hold files selected from the other sources as well. This is the reason it is not called local.

[hpvd]

.. hmm ok.
Just two thoughts on this:
maybe a own "local" would have the advantages of being more clear for the user and
would also help in field of modularisation (maybe not every one wants uploads from local..)

[hpvd]

an other detail:

I really like these "number in circles" design, but it's hard to put numbers with more than one digit in it...

[kvz]

maybe a own "local" would have the advantages of being more clear for the user and
would also help in field of modularisation

That's a tough question yes. We the button immediately open the system dialog. But that might be a bit unexpected. We could add a select local file button in the working surface. But that might be inconsistent. About the use-case

maybe not every one wants uploads from local

this seems to me it would not be very common, and might be achieved with a flag on the dashboard, effectively disabling the dragdrop and button.

However, this is talking more on a technical level, which we want to avoid in the current thread, so I'm backing out here, and will limit myself to thinking about what the best ux would be

[kvz]

I really like these "number in circles" design, but it's hard to put numbers with more than one digit in it...

could be achieved with smaller font-size or ∞ for the rare usecase where someone manually selects >99 files.

[hpvd]

rare usecase

with manual conventional selection one by one, yes.
But with drag and drop one could do this...and could think of several use cases see #97

[hpvd]

two ideas for showing a summary on different places:

[kvz]

Another way to show (many) sources would be to add a plus button to the dashboard, much like how Slack does it here:

the list that pops up might show 'google drive' and 'local disk' and in the latter case, it will be less of a surprise if a System dialog pops up, than if 'local disk' was one of these side buttons. Added advantages:

• we save screen estate
• easier scrolling

We'd lose the information how many files where selected from Instagram, or Google Drive, but that is pretty meaningless information since you could see the files right in the dashboard. If we wanted, we could show the sources there, but I have a hard time imagining it really being useful, so I'd vote not adding that now, and if there is a pressing case, make it opt-in behavior, as to clutter the interface the least possible.

[hpvd]

tiny addition:
to

it will be less of a surprise if a System dialog pops up, than if 'local disk' was one of these side buttons.

even "local" doesn't need to bring a surprise: it simply opens drag and drop field with button to select file. Only if button is clicked system dialog opens

[arturi]

Good navigation solutions for reference:

• https://kyusuf.com/post/completely-css-progressively-collapsing-navigation
• https://kyusuf.com/post/a-couple-of-alternatives-to-the-hamburger-menu

[hpvd]

was in #99
but fits perfectly here within this issue:

wow looks already great :-)
modal, screenshot 22.07.2016 12:33

just small comment:
Since the "here" in "Drop files here" ist not direct "here" - its somehow "below" in the field - maybe this is an interesting possibility:

[hpvd]

just a questions:
are the filestypes shown in image the ones which are allowed for upload?
see "possibility to restrict upload" #69

if so: is/will be the image fully dynamic?

[arturi]

Currently it is dynamic, these file types could be easily altered, that’s why there are font differences. But I think for now it should just be a generic image, maybe with a built-in way to have some custom text on top, like “Please attach your photo and ID scan for your visa application”. I just wanted something fun, so tried it like that, but I also thought about a more boring option:

[arturi]

To answer your previous comment:

Since the "here" in "Drop files here" ist not direct "here" - its somehow "below" in the field - maybe this is an interesting possibility:

Yes, thought about that too:

Went with what made most sense, just to settle on something and not get stuck, could be easily altered later on.

What do you guys think, @hedgerh @kvz?

[arturi]

It is common to have the visual dashed area smaller that the actual drag and drop area, which can sometimes capture files dropped anywhere in the UI, which is what Uppy does now.

But yes, the text is usually on the dashed area.

[kvz]

I personally think it's odd that the plugins are inside the drop area. I would be okay solving this with

Drop files below, paste, or select from:

Alternatively:

Select files from:

Or drop them here

But if there are strong opinions towards other directions, I'm easily convinced on this one.

[hedgerh]

I'm not crazy about the plugin selection tabs being within the drop area, either. I'm also not crazy about the top text as it is: "DROP FILES HERE, PASTE OR IMPORT FROM". It should definitely be indicative of what those tabs are for, rather than talking about dropping files/pasting files first.

I really like Kevin's suggestion of "Select files from:" at the top and other instructions below in the drop area:

One thing, if we take the plugin tabs out of the drop area, could we make it so files dropped into its area are still accepted, despite not being within the dashed bordered drop area?

[hpvd]

maybe
add some information on hover #115
belongs to this topic to...

[hpvd]

just added some more information regarding usage of aria lables and titles in #115

[arturi]

It should definitely be indicative of what those tabs are for, rather than talking about dropping files/pasting files first.

I missed the last comments here. I think you are right, I’ll play with that some more and go towards what you are suggesting.

[arturi]

Tried semiTransparant design option for Dashboard Modal too:

Not sure, and that thing is only supported in Safari on Mac and iOS, but anyway.

[arturi]

Two possible takes on upload in progress and pause/resume button design:

img 20

img 21

[arturi]

img 22

Experimented with removing dashed border after some files have already been dropped/selected. Looks much cleaner to me. And the user already knows that they can drop files there.

[arturi]

And the initial screen:

img 23

[hpvd]

removing dashed border looks really nice and clean :-)

Just to think this a little further: do one really need it in the initial screen at all?

Especially in modal mode one has already some kind of border between pop-up and background.
And with symbol and text "Drop and paste files here" every one knows what to do...

[hpvd]

when using uppy "integrated" within a website (no popup), one will often also choose a design where the uppy region looks somehow separated from the surrounding (slightly different background color, frame all around uppy or..)
btw: will there be an example for this on http://uppy.io/examples/... ?

[hpvd]

may look like this

[kvz]

img 21

I like not having 2 elements to indicate/control progress, and just one. I might like the circle more in general.. but i realize that leaves little room for progress reporting. So for me, a single bar wins then I think.

I like not having dashes when the drop is done. I dislike not having dashes when the drop is encouraged.

[arturi]

Just to think this a little further: do one really need it in the initial screen at all?

I like not having dashes when the drop is done. I dislike not having dashes when the drop is encouraged.

I too think dashes are a universal sign of drag & drop. Made screenshots of those in ImageOptim and VLC: http://imgur.com/a/aV3Qx, also see above for WebTorrent and other screenshots are posted.

On that note, came up with this ideas:

img 24

img 25

[hpvd]

+1