801832 - New "expanding" download button.

Status: NEW

(Firefox :: Downloads Panel, defect)

Description

[Marco Bonardo [:mak]]

Based on this mockup:
http://people.mozilla.com/~shorlander/files/download-button/download-button.html

The button grows to include the progressbar and time.

Comment 1

[Marco Bonardo [:mak]]

Assigned to come up with final mockup, please Paolo report issues with the current iteration here.

Comment 3

[Marco Bonardo [:mak]]

Paolo please see comment 1

Comment 4

[Marco Bonardo [:mak]]

Stephen, if we fix bug 746674 apart, maybe by going to an high contrast progressbar, what are the other design resons behind the need to expand the button?

Comment 5

[Stephen Horlander [:shorlander]]

(In reply to Marco Bonardo [:mak] (Away 2 Nov) from comment #4)
> Stephen, if we fix bug 746674 apart, maybe by going to an high contrast
> progressbar, what are the other design resons behind the need to expand the
> button?

Some of the issues we had were making the progress bar big enough to see, making the text big enough and keeping the text and the download icon. Expanding the button would solve most of that and add an additional animated queue that you have started downloading something. But it has some drawbacks and I am not sure that putting more magically expanding buttons in the toolbar is the right thing to do.

Comment 6

[:Paolo Amadini]

One button state that we cannot show in the current version is the case where
there is an in-progress download with time left indication, and another
in-progress download completes meanwhile.

In this case, we should show an indication that there is a new item in the panel
on which the user can make an action, and keep this indication until the panel is
actually opened.

The other cases work just fine, functionally.

Comment 7

[:Paolo Amadini]

(In reply to Stephen Horlander from comment #5)
> But it has some drawbacks  and I am not sure that putting more magically
> expanding buttons in the toolbar is the right thing to do.

Yeah. Stephen, any idea on how visualize the case I just commented on?

Comment 8

[Marco Bonardo [:mak]]

Do we feel like these cases are worth blocking?

- What is surely blocking is the unusable progress bar, bug 746674. We can and should fix that apart, without the need to enlarge the button, just by playing with contrast.

- Showing the download icon PLUS the information.  Is it really a requirement?  Do you feel like the user may not understand what those progress and numbers refer to? Maybe we could just improve the tooltip?

- Text is not big enough.  I'm not sure how expanding the button helps at all here, the problem is the height, not the width.  Fwiw, I think the text is in a much better shape than the progressbar currently.

- Animation... Well, it may be cool but adds more magic to the toolbar and moves all the other contents... it's also lots of added code complexity. not sure benefits overweight these.

- Download completes while other progress... I'm not sure an expanded button would serve us better than a common button.  We may just add some subtle animation, btw it sounds just like a nice-to-have to me.

Anything else I forgot in this list?

Comment 9

[:Paolo Amadini]

(In reply to Marco Bonardo [:mak] from comment #8)
> Do we feel like these cases are worth blocking?

I quote you on all items.

Comment 10

[Mike Conley (:mconley) (:⚙️)]

I spoke to Stephen briefly over IRC last night, and he said he's pretty sure we should go with this expanding button design.

I'm also curious about Marco's questions though. Stephen, any update on this?

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Another question:

Currently, when all downloads are paused, the icon changes to show the download icon over a static progress bar.

What should the paused state look like with the new expanded button? Should it shrink to the normal button size, and use the current appearance?

Comment 12

[Mike Conley (:mconley) (:⚙️)]

Attachment: State illustration

Here's how I'm interpreting the states of this expando-button...

Comment 13

[Mike Conley (:mconley) (:⚙️)]

(In reply to Marco Bonardo [:mak] from comment #8)
> - Showing the download icon PLUS the information.  Is it really a
> requirement?  Do you feel like the user may not understand what those
> progress and numbers refer to? Maybe we could just improve the tooltip?
> 

So, I think the value here might be the case that Paolo brings up in comment 6 - specifically, the case where we still have downloads in progress, but we want the user's attention. The current button does not handle this case.

> - Text is not big enough.  I'm not sure how expanding the button helps at
> all here, the problem is the height, not the width.  Fwiw, I think the text
> is in a much better shape than the progressbar currently.

I agree that this doesn't much to help with the text, except for adding some more whitespace immediately to its left.

> 
> - Animation... Well, it may be cool but adds more magic to the toolbar and
> moves all the other contents... it's also lots of added code complexity. not
> sure benefits overweight these.

Beyond coolness (and it is pretty cool), if anything, I think it helps to draw the eye to where the activity is occurring.

> 
> - Download completes while other progress... I'm not sure an expanded button
> would serve us better than a common button.  We may just add some subtle
> animation, btw it sounds just like a nice-to-have to me.

Stephen is of the opinion that we should do this, but you're the feature manager, so, unless I'm mistaken, I think the buck stops at you.

Comment 14

[Marco Bonardo [:mak]]

(In reply to Mike Conley (:mconley) from comment #13)
> > - Animation... Well, it may be cool but adds more magic to the toolbar and
> > moves all the other contents... it's also lots of added code complexity. not
> > sure benefits overweight these.
> 
> Beyond coolness (and it is pretty cool), if anything, I think it helps to
> draw the eye to where the activity is occurring.

That may even be a bad thing to do (distracting the user from his current task), we usually use subtle notifications. So I'm confused, since this seem to go backwards regarding the design hints we got usually.

> > - Download completes while other progress... I'm not sure an expanded button
> > would serve us better than a common button.  We may just add some subtle
> > animation, btw it sounds just like a nice-to-have to me.
> 
> Stephen is of the opinion that we should do this, but you're the feature
> manager, so, unless I'm mistaken, I think the buck stops at you.

The fact is that I'm not UX expert, so I may be wrong from a design point of view. My vision is that first we should work on those things that must be fixed regardless this design, so the progress bar, then we can attack this to address the remaining points, but those don't seem bad enough to me to say we should stop the feature cause the button doesn't notify partial completions. This is imo a P2.

Comment 15

[Mike Conley (:mconley) (:⚙️)]

Attachment: Demo patch

This patch just makes the button get wider with a CSS transition when the progress bar is visible.

It's just something quick I whipped up so some folks can see how they feel about the indicator getting wider when downloads start. There are some pretty nasty platform bugs being exposed here (at least on Windows) wrt panel placement, but just try to ignore those.

I'll roll some try builds and toss a link up in here when they're done.

Comment 16

[Mike Conley (:mconley) (:⚙️)]

The build doesn't seem to work properly on Linux, but I think the demonstration is sufficient on OSX and Windows.

OSX DMG: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-0da642bcba2d/try-macosx64/firefox-19.0a1.en-US.mac.dmg

Windows installer: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-0da642bcba2d/try-win32/firefox-19.0a1.en-US.win32.installer.exe

or, alternatively, Windows zip: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-0da642bcba2d/try-win32/firefox-19.0a1.en-US.win32.zip

For best results, ensure that the indicator overlay is loaded by clicking on the download button before trying to download something.

Marco - does the expanding button feel too distracting to you?

Comment 17

[u428464]

(In reply to Mike Conley (:mconley) from comment #15)
> It's just something quick I whipped up so some folks can see how they feel
> about the indicator getting wider when downloads start. There are some
> pretty nasty platform bugs being exposed here (at least on Windows) wrt
> panel placement, but just try to ignore those.
There are already issues with the panel arrow in some case (bug 785702). I think the whole behaviour should be changed (arrow always at the center of the anchor even off-screen). Maybe during arrowpanel redesign for Australis.

BTW I like the expanding button.

Comment 18

[Marco Bonardo [:mak]]

(In reply to Mike Conley (:mconley) from comment #16)
> Marco - does the expanding button feel too distracting to you?

Well not much on Windows, but I suspect it's cause the button's don't have a border.
Unfortunately there are a couple things I dislike:
- the large progressbar looks ugly, for whatever reason
- when all downloads finish the button compresses, the searchbar enlarges to the right and that looks quite "strange". It's a janky animation that doesn't look native.
- the searchbar magnifier lens becomes a moving target (Along with all the other buttons between search bar and downloads button), since we can't predict when downloads finish, we could cause click misses.

Not sure, I'm starting thinking we should really not have inflating/deflating buttons on toolbars. The original design had a larger button (large as the current Bookmarks button) with the downloads icon always visible, maybe it's a good time to re-evaluate that.

Comment 19

[Marco Bonardo [:mak]]

or we should just find an alternative to notify completed downloads without the need to add the arrow to the button... maybe just a "glow" like the one we have on app-tabs.
I quite like the current tiny and clean downloads button, fwiw.

Comment 20

[Mike Conley (:mconley) (:⚙️)]

Stephen:

How do you feel about that?

-Mike

Comment 21

[u428464]

FWIW on the latest Australis mockups I saw the button seems to be larger in normal state with the arrow on the right. In this case the animation should happen into the button without any button resizing. That could be a solution.

Comment 22

[Marco Bonardo [:mak]]

I don't see us taking another visual design overhaul of the button at this point, we should rather think of a solution to make the current button notify finished downloads in bug 812813. un-blocking (but adding bug 812813 to the list of blockers for now).