Open Bug 801832 Opened 7 years ago Updated 2 years ago

New "expanding" download button.

Categories

(Firefox :: Downloads Panel, defect)

defect
Not set

Tracking

()

People

(Reporter: mak, Unassigned)

References

Details

Attachments

(2 files)

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

The button grows to include the progressbar and time.
Assigned to come up with final mockup, please Paolo report issues with the current iteration here.
Assignee: nobody → shorlander
Flags: needinfo?(paolo.mozmail)
Duplicate of this bug: 785703
Paolo please see comment 1
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?
(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.
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.
Flags: needinfo?(paolo.mozmail)
(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?
Flags: needinfo?(shorlander)
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?
(In reply to Marco Bonardo [:mak] from comment #8)
> Do we feel like these cases are worth blocking?

I quote you on all items.
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?
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?
Attached image State illustration
Here's how I'm interpreting the states of this expando-button...
(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.
(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.
Depends on: 812813
Attached patch Demo patchSplinter Review
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.
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/mconley@mozilla.com-0da642bcba2d/try-macosx64/firefox-19.0a1.en-US.mac.dmg

Windows installer: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/mconley@mozilla.com-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/mconley@mozilla.com-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?
(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.
(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.
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.
Stephen:

How do you feel about that?

-Mike
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.
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).
No longer blocks: ReleaseDownloadsPane
Flags: needinfo?(shorlander)
Assignee: shorlander → nobody
You need to log in before you can comment on or make changes to this bug.