| Summary: | Raised buttons don't look or feel buttonlike enough | ||
|---|---|---|---|
| Product: | [Plasma] Breeze | Reporter: | Karl Ove Hufthammer <karl> |
| Component: | QStyle | Assignee: | Plasma Bugs List <plasma-bugs-null> |
| Status: | REPORTED --- | ||
| Severity: | normal | CC: | nate, noahadvs, uhhadd |
| Priority: | NOR | Keywords: | usability |
| Version First Reported In: | 5.27.7 | ||
| Target Milestone: | --- | ||
| Platform: | Other | ||
| OS: | Linux | ||
| Latest Commit: | Version Fixed/Implemented In: | ||
| Sentry Crash Report: | |||
| Attachments: |
Video showing how the buttons look when you hover over them
How it looks with Breeze Light color scheme Video showing button selection using the keyboard |
||
|
Description
Karl Ove Hufthammer
2023-07-27 08:40:13 UTC
Created attachment 160559 [details]
Video showing how the buttons look when you hover over them
Created attachment 160595 [details]
How it looks with Breeze Light color scheme
These buttons are using the standard Breeze button style; not sure there's anything else we could or should do. The only real differences they have from other buttons is that they're larger and have more content in them.
I think part of the problem is that your color scheme that doesn't use a different button color; the default Breeze Light color scheme does use a different background color for buttons. See the attachment which shows how the buttons look to me. I find them quite buttonlike, and the blue outline hover effect (which is shared with all other buttons) looks pretty visible to me.
If Welcome Center had looked for you like how it does in the screenshot I attached, do you think you would have still felt like there was a problem and submitted this bug report? If not, then maybe the problem is with your color scheme. Is it Breeze Classic with a pink accent color? (In reply to Nate Graham from comment #3) > If Welcome Center had looked for you like how it does in the screenshot I > attached, do you think you would have still felt like there was a problem > and submitted this bug report? > > If not, then maybe the problem is with your color scheme. Is it Breeze > Classic with a pink accent color? Yes, I use Breeze Classic. I thought that was the default theme … :/ I use a purple highlight colour (one of the default colours). So I don‘t think I use a very unusual theme / colour scheme. The ‘buttons’ do look better with the other Breeze themes. They still don’t look *very* clickable to me, though. I think the problem is that with the new, flat look of buttons, it’s mostly their size and placement that makes them look and feel like buttons. And that’s OK. But these areas have a completely different size and placement, so they don’t (to me) feel like clickable buttons. IMO, they need something more to feel clickable, at least when hovering, e.g., a subtle highlight, a shadow, expansion, a tooltip. BTW, I just *now* noticed that the small icons on the following page (Krita, Blender, VLC &c.) are clickable! They look even less like buttons … But they (and the big Discover icon) at least change the mouse pointer to a hand icon when hovering, and they have tooltips, so that helps. They feel very clickable once you actually hover the pointer over them. Just noticed that the similar buttons in Discover have: – A subtle shadow effect – A ‘coloured background’ effect on hover This makes them feel much more like buttons. The buttons in Discover and the buttons in Welcome Center are using the same QQC2.Button primitive with the same styling. I think you see the shadow in Discover more easily because the button is on a white background, so the gray shadow has better contrast there. They also have the same edge highlight on hover. I don't think there's a bug to solve in Welcome Center. If anything could be done, it would be in the Breeze QStyle, to make a global change to all buttons. But if we do that, it would apply to all buttons and we'd start to accumulate complaints that buttons feel too heavy. So I don't think there's a change we can make here, sorry. (In reply to Nate Graham from comment #6) > The buttons in Discover and the buttons in Welcome Center are using the same > QQC2.Button primitive with the same styling. I think you see the shadow in > Discover more easily because the button is on a white background, so the > gray shadow has better contrast there. They also have the same edge > highlight on hover. Just for the record, I was talking about the buttons on the *main* and *category* pages in Discover, the ones showing the icon, name and description of an application. They have a shadow and a nice hover effect (coloured background based on the current highlight colour). At least for me, it makes them look and feel clickable. I think you’re talking about the other, similarly shaped, buttons on the *application details* page in Discover. Yes, they look like the ones in the welcome center. And to me, they don’t look or feely especially clickable. (The button text is the only thing that really indicates they’re meant to be clicked.) Other KDE examples of ‘buttons’ with hover effect to indicate clickability: application buttons on the task bar (the background colour is changed to the highlight colour and the icons are made slightly brighter), other buttons on the task bar (the icons are made slightly brighter), and the application buttons on https://apps.kde.org/ (they rise from the page when you hover, and they also have a shadow effect to lift them from the page). Ah, on Discover's home and list pages, those aren't technically buttons, they're "Cards". I'll admit that they do look fairly buttonlike, though. If the take-home here is that raised Breeze-themed raised buttons don't look and feel buttonlike and clickable enough, let's make that a Breeze style issue. Created attachment 160713 [details]
Video showing button selection using the keyboard
This bug was originally only about the very big rectangle card buttons in the welcome center not looking clickable enough, partly due to a too subtle hover effect. But I now think this applies to ordinary (small) buttons too. The effect when hovering a button or selecting it with the keyboard is just too subtle.
As evidence, I’ve attached a new video. I’m using the default Breeze style, with Breeze Light as the colour palette, and one of the default 10 highlight colours (purple). So nothing very special there.
In the video, you’ll see me 1) navigating through four buttons using the keyboard, 2) navigating through some checkboxes, 3) navigating back through the buttons and finally 4) navigating through some toolbar buttons.
For the checkboxes and toolbar buttons, it’s very easy to see which element is currently selected. But for the four buttons, there’s only a very subtle change, namely the colour of the thin outline. I think I have pretty good eyesight, but the effect is too subtle for me. It will be much worse for people with poor eyesight, so I think this is a accessibility issue.
|