Closed Bug 878545 Opened 11 years ago Closed 11 years ago

Widget buttons styling when dragged isn't very nice visually

Categories

(Firefox :: Toolbars and Customization, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
Firefox 28

People

(Reporter: u428464, Assigned: mikedeboer)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [Australis:M9][Australis:P3])

Attachments

(1 file, 1 obsolete file)

Currently the dragged widget isn't very visually nice in customization mode. The borders are cut and the item stays in place when moved around (two items at the time). This mockup show a much better behavior : https://people.mozilla.com/~bwinton/australis/customization/mac/
Whiteboard: [Australis:M?]
Another detail : for consistency the pointer should be the "hand" grabbing the item all the time. Currently it changes from the hand to the arrow/rectangle when moving the item.
Summary: Widget styling when dragged isn't very visually nice → Widget buttons styling when dragged isn't very nice visually
(In reply to Guillaume C. [:ge3k0s] from comment #1)
> Another detail : for consistency the pointer should be the "hand" grabbing
> the item all the time. Currently it changes from the hand to the
> arrow/rectangle when moving the item.

This is bug 876875.
Whiteboard: [Australis:M?] → [Australis:M?] [Australis:P3]
Whiteboard: [Australis:M?] [Australis:P3] → [Australis:M?][Australis:P3]
Sometimes changes don't need to be big to make it beautiful.

The cut-off borders of the toolbarpaletteitems in the palette (and possibly other places) while dragging an item was displeasing to my eye as well, so I decided to experiment with the value passed to scale().
Turned out that .97 hits the sweet spot (IMHO) when hitting a toolbaritem and giving the sense you're really grabbing onto something. Now I'm even convinced that 1.1 (grow) wasn't ideal, UX wise.

Give it a whirl, you'll see!
Assignee: nobody → mdeboer
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Attachment #807720 - Flags: review?(jaws)
Attachment #807720 - Flags: review?(gijskruitbosch+bugs)
Comment on attachment 807720 [details] [diff] [review]
Patch v1: adjust scaling of toolbar items when dragged

I've never really noticed anything wrong here, so I'm not the best person to review this.
Attachment #807720 - Flags: review?(gijskruitbosch+bugs) → review?(bmcbride)
Does it also make the dragged widget disappears from its original emplacement ? It would clearly be better since for now the widget can appear two places at the time which may be a bit confusing to some users.
(In reply to :Gijs Kruitbosch from comment #4)
> Comment on attachment 807720 [details] [diff] [review]
> Patch v1: adjust scaling of toolbar items when dragged
> 
> I've never really noticed anything wrong here, so I'm not the best person to
> review this.

Unless... I'm guessing that as a side-effect, this fixes bug 872463?


(In reply to Guillaume C. [:ge3k0s] from comment #5)
> Does it also make the dragged widget disappears from its original
> emplacement ? It would clearly be better since for now the widget can appear
> two places at the time which may be a bit confusing to some users.

No, and I'm not sure it should... when you drop it, there'll only be one. If you are dragging the mouse, I don't see how you can possibly not realize which of the two you're dragging and which is static (can just move the mouse to find out, really). And if we removed it, if you were dragging for a bit, you would no longer know where it used to sit (and what would happen if you let go somewhere nondescript, not moving the item).
(In reply to :Gijs Kruitbosch from comment #6)
> (In reply to Guillaume C. [:ge3k0s] from comment #5)
> > Does it also make the dragged widget disappears from its original
> > emplacement ? It would clearly be better since for now the widget can appear
> > two places at the time which may be a bit confusing to some users.
> 
> No, and I'm not sure it should... when you drop it, there'll only be one. If
> you are dragging the mouse, I don't see how you can possibly not realize
> which of the two you're dragging and which is static (can just move the
> mouse to find out, really). And if we removed it, if you were dragging for a
> bit, you would no longer know where it used to sit (and what would happen if
> you let go somewhere nondescript, not moving the item).

One solution (showed in the original mockup) would be to leave a blank space where it used to be.
Ah, this would indeed fix bug 872463 too.
Comment on attachment 807720 [details] [diff] [review]
Patch v1: adjust scaling of toolbar items when dragged

Review of attachment 807720 [details] [diff] [review]:
-----------------------------------------------------------------

The code change looks fine to me. Stephen or Blake, are you OK with this change? Here is a screencast of the proposed change: http://screencast.com/t/UcqxHwtMa
Attachment #807720 - Flags: ui-review?(shorlander)
Attachment #807720 - Flags: review?(jaws)
Attachment #807720 - Flags: review?(bmcbride)
Attachment #807720 - Flags: review+
Attachment #807720 - Flags: ui-review?(shorlander) → ui-review?(bwinton)
Comment on attachment 807720 [details] [diff] [review]
Patch v1: adjust scaling of toolbar items when dragged

Bugzilla hates me...
Attachment #807720 - Flags: review?(shorlander)
Comment on attachment 807720 [details] [diff] [review]
Patch v1: adjust scaling of toolbar items when dragged

Unfortunately, unless it's a Thunderbird change, I can't really ui-review it.  But here are my comments anyways in case they help Stephen.  ;)

The idea behind the scaling in the prototype was to make it look like you lifted the button up off the page, which is why it got bigger.  When I keep that in mind, having it shrink seems a little odd, and I don't think adds much over just making it transparent.  (If you weren't looking at it, it would be a bit of movement to draw your eye, but if it's something you're hovering the cursor over and clicking, I feel like it's probably already got your attention.  ;)

Also, scaling the text down makes it look not so great, imo.  (And to be fair, scaling the text up probably also makes it not look so great.)

What do you think about just scaling up the icon?  Might that fix the cut borders?

Thanks,
Blake.
Attachment #807720 - Flags: ui-review?(bwinton)
Blake, thanks for the suggestion! I'm going to try your suggestions now.
I made a screencast of what it looks like when I scale up the icons only (HD, so you should be able to see it pretty well):

https://vimeo.com/75314525
Blake, Jared, could you take a look at the screencast I made? It's just 1:12, so I promise it won't bore you much.
Flags: needinfo?(jaws)
Flags: needinfo?(bwinton)
Sorry for not getting to this sooner, Mike, but I spent all yesterday laying on my couch with the flu…  :(

Anyways, that looks like what I was thinking of, so you get an f+ from me.  :)

Thanks,
Blake.
Flags: needinfo?(bwinton)
Patch that implements what's shown in the screencast.
Attachment #807720 - Attachment is obsolete: true
Attachment #807720 - Flags: review?(shorlander)
Attachment #809836 - Flags: review?(jaws)
Flags: needinfo?(jaws)
Comment on attachment 809836 [details] [diff] [review]
Patch v1.1: adjust scaling of toolbar items when dragged

Review of attachment 809836 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good, but I think we could use a higher scaling factor for the icon.

Let's land this (since it fixes other issues) and then see what people on the UX team think about using a larger scaling factor.
Attachment #809836 - Flags: review?(jaws) → review+
https://hg.mozilla.org/projects/ux/rev/814c3eb60842
Whiteboard: [Australis:M?][Australis:P3] → [Australis:M9][Australis:P3][fixed-in-ux]
https://hg.mozilla.org/mozilla-central/rev/814c3eb60842
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Whiteboard: [Australis:M9][Australis:P3][fixed-in-ux] → [Australis:M9][Australis:P3]
Target Milestone: --- → Firefox 28
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: