Bug 336326 - Pin and wrench icons on Plasmoids too small
Summary: Pin and wrench icons on Plasmoids too small
Status: RESOLVED FIXED
Alias: None
Product: plasmashell
Classification: Plasma
Component: general (show other bugs)
Version: master
Platform: Kubuntu Linux
: NOR normal
Target Milestone: 1.0
Assignee: Sebastian Kügler
URL: http://wstaw.org/w/2LC0/
Keywords:
Depends on:
Blocks:
 
Reported: 2014-06-16 18:47 UTC by Thomas Pfeiffer
Modified: 2015-02-16 18:43 UTC (History)
5 users (show)

See Also:
Latest Commit:
Version Fixed In:
thomas.pfeiffer: VisualDesign+


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Thomas Pfeiffer 2014-06-16 18:47:49 UTC
The pin and wrench icons in the upper-right corner of Plasmoids are way too small, they can hardly even be clicked (usability problem). Plus, they look very strange among the other much bigger controls on Plasmoids (see link).
They could be made a little smaller than normal buttons, but definitely not that small.

Reproducible: Always
Comment 1 Bhushan Shah 2014-06-17 04:14:31 UTC
Wrench icon is removed in this icon but still valid for pin icon.

https://projects.kde.org/projects/kde/workspace/plasma-workspace/repository/revisions/5010e854f3f62e73c2525d013c35cc059ef25eeb
Comment 2 Bhushan Shah 2014-06-17 04:14:59 UTC
s/this icon/this commit
Comment 3 David Edmundson 2014-06-17 14:12:15 UTC
Git commit 1f4e72e618b5fe12d2a1cbcaf3d7e2df3adf9838 by David Edmundson.
Committed on 17/06/2014 at 14:12.
Pushed by davidedmundson into branch 'master'.

Use standard icon sizes

iconSize.small/2 is really wrong. If we randomly scale things what's the
point of having an iconSize property in the first place.

M  +1    -1    applets/systemtray/package/contents/ui/ExpandedRepresentation.qml

http://commits.kde.org/plasma-workspace/1f4e72e618b5fe12d2a1cbcaf3d7e2df3adf9838
Comment 4 Marco Martin 2014-06-17 14:38:11 UTC
eww, it looks really bad now, that pin icon makes sense when is small enough to not alter the whole balance of the window.
now the first thing the eye is drawn to, is that control of secondary secondary importance that screams look at me :/
(also, it has no right/top margins that should have, and would take even more space)

iconSize.small/2 *does* make sense there, maybe the mousearea around can be bigger to make it easy to hit, but right now it ruins the whole dialog
Comment 5 David Edmundson 2014-06-17 14:50:53 UTC
Then we should make an iconSize.extraSmall.

Taking a constant and scaling it by a random factor, defeats the entire point of the constants.
Comment 6 Marco Martin 2014-06-17 14:54:01 UTC
it's a ratio of a constant, correctly follows dpi and such
Comment 7 Thomas Pfeiffer 2014-06-17 15:03:25 UTC
If iconSize.small is too large, maybe an iconSize.tiny (which is something between small and small/ in size) is needed?
I'd expect the icon to be the same size as the icons in the window decoration icons, because it has a very similar function.
Let our designers decide on the exact size. What counts for me is mostly that you don't need to be a surgeon to click the button.
Comment 8 Sebastian Kügler 2014-06-17 15:08:42 UTC
The interactive area of the icon can be as big as we want, it doesn't have to be the same size as the icon.
Comment 9 Thomas Pfeiffer 2014-06-17 15:10:48 UTC
I meant between small and small/2, of course.

From an HIG perspective, using ratios of constants is a bad idea. For consistency, it makes sense that developers only use the constants, then if the VDG decides that a class of icons should have a different size, we can ask you to change the constant while being sure that everything remains consistent.
If people start multiplying/dividing the constant during implementation as they see fit, that consistency is lost.

Therefore I am for introducing another size, smaller than "small", and let the VDG decide what size that is.
Comment 10 Thomas Pfeiffer 2014-06-17 15:32:29 UTC
(In reply to comment #8)
> The interactive area of the icon can be as big as we want, it doesn't have
> to be the same size as the icon.

Unless the interactive area is visible, users would still try to click the actual icon, so while a bigger interactive area would make missing it less likely, it would not make the aiming less difficult.

The only source on minimum sizes for clickable elements for mouse-oriented UIs I could find is the Microsoft UX Guide, which says "Make click targets at least 16x16 pixels so that they can be easily clicked by any input device"
Comment 11 Sebastian Kügler 2014-06-18 00:54:04 UTC
I think was quite happy with the look and feel and interaction so far, with the smaller icons. It doesn't feel tedious for me.

The buttons do actually have visual feedback when the interactive area is entered, there's a subtle animation improving contrast for of the icon. I'm not sure the interactive area is big enough yet, though. Perhaps we can pronounce that animation a bit more to make it more discoverable? How well that animation is visible also depends a bit on the contrast and quality of the display.

I don't think the Microsoft UX guideline is very useful here, to be honest. Input devices are too different to use one size for "any input device", and 16x16 is definitely too small on a reasonable DPI display to be usable with a touchscreen. Expressing it in pixel dimensions is wrong to begin with.
Comment 12 Thomas Pfeiffer 2014-06-18 08:50:27 UTC
(In reply to comment #11)
> I think was quite happy with the look and feel and interaction so far, with
> the smaller icons. It doesn't feel tedious for me.

On my screen (see the linked screenshot) it just looked really weird because everything was quite large and the pin was really tiny.

> The buttons do actually have visual feedback when the interactive area is
> entered, there's a subtle animation improving contrast for of the icon. I'm
> not sure the interactive area is big enough yet, though. Perhaps we can
> pronounce that animation a bit more to make it more discoverable? How well
> that animation is visible also depends a bit on the contrast and quality of
> the display.

To be honest, I haven't tried the animation out yet. Will report back after trying another Neon 5 ISO.

> I don't think the Microsoft UX guideline is very useful here, to be honest.
> Input devices are too different to use one size for "any input device", and
> 16x16 is definitely too small on a reasonable DPI display to be usable with
> a touchscreen. Expressing it in pixel dimensions is wrong to begin with.

I deliberately only copied the bit about pointer-based interaction because we're talking about Plasma Desktop. For touch, "recommended minimum control size is 23x23 pixels (13x13 DLUs). " (with DLUs being a DPI-independent measure).
Comment 13 Marco Martin 2014-06-18 09:04:18 UTC
"The buttons do actually have visual feedback when the interactive area is entered, there's a subtle animation improving contrast for of the icon. I'm not sure the interactive area is big enough yet, though. Perhaps we can pronounce that animation a bit more to make it more discoverable? How well that animation is visible also depends a bit on the contrast and quality of the display."
About the hover animation, to be more obvious when i made some improvements on the CSS support i had an idea, that is still on hold..
It would be now possible (after adding some api to Svg tough) to animate the monochrome icons from black to highlight color (so the blue-ish) and that would be in general for mouseover of svg based icons
it may probably look bad tough, i'm not sure
Comment 14 Martin Klapetek 2014-07-16 09:40:16 UTC
> It would be now possible to animate the monochrome icons from black to highlight color

Let's try it? Fwiw, given how small the icon is, the current animation is barely noticeable for me. Alternatively it could be scaled when hovered but _that_ might look bad.
Comment 15 Thomas Pfeiffer 2014-09-23 09:24:11 UTC
I just tried it out, but the color change from black to blue in such a tiny icon is barely noticeable, I'm afraid. Can't we e.g. darken the whole mouse area a bit when hovering over it? that way it would be consistent with buttons and much more visible.
Comment 16 Kai Uwe Broulik 2014-10-16 09:00:17 UTC
Indeed, I always find myself clicking multiple times because the transition from gray to blue takes quite some time.
Comment 17 Kai Uwe Broulik 2015-02-16 18:43:04 UTC
The icon is now using small icon size with a proper ToolButton, ie. it gets proper hover/press feedback and a larger hit area than the icon