Closed Bug 614373 Opened 10 years ago Closed 8 years ago

Quick filter's "filter messages by" buttons: checked vs. unchecked status not easy to tell apart

Categories

(Thunderbird :: Theme, defect)

defect
Not set
minor

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 26.0

People

(Reporter: evaned, Assigned: jsbruner)

Details

Attachments

(7 files, 3 obsolete files)

User-Agent:       Mozilla/5.0 (X11; Linux i686 on x86_64; rv:2.0b6) Gecko/20100101 Firefox/4.0b6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.2.12) Gecko/20101027 Thunderbird/3.1.6

Maybe I'm just dumb or something, but I have a hard time figuring out whether the filter options that are distinguished from the rest of the bar (i.e. dark, on mine) mean that option is enabled or disabled. Those are pretty non-standard UI elements in my opinion.

I generally have to guess ("well, 'subject' is checked and I doubt I'd uncheck that, so I'll consider the look of that button as 'on'") or just try toggling the button and seeing if that gets me what I want.

Reproducible: Always

Steps to Reproduce:
1. Put something in the quick filter box
2. Want to allow searching in, say, the body
3. Get confused as to whether the button is already set to what you want or not



A clearer indication of on/off would be much appreciated, e.g. a "light" that either toggles between red/green or on/off, or a standard checkbox.
Attached image The buttons I find confusing β€”
I honestly have a very hard time telling whether a button configuration such as the one pictured means "filter by sender and recipients only" or "filter by subject and body only".
This image is a very very quick suggestion of (one way) to improve this to make it less confusing.

(BTW, the comment with my previous attachment gave the wrong button descriptions because I picked the wrong file, but my point that I have a hard time knowing what's 'on' and what's 'off' remains.)
Evan, can you post screenshot of qfb buttons on current version TB12 on Linux?

attachment 492768 [details] of comment 2 doesn't help, because it's hard to tell if the green lights belong to right or left button.

Personally, I don't have problem with design of these buttons.
I think it's easy to see which are *not* pressed because they are flat and same color with toolbar background.
I admit *pressed* status is perhaps not ideal in design, but I wouldn't know how to improve it.
Attachment #492768 - Flags: feedback-
Looks like a theme issue.

Evan (reporter), can you respond to comment 3?
Component: Search → Theme
OS: Linux → All
Hardware: x86_64 → All
Summary: Quick filter's "filter messages by" buttons hard to understand → Quick filter's "filter messages by" buttons: checked vs. unchecked status not easy to tell apart
Comment on attachment 492768 [details]
My suggestion for a better UI

Thomas, please don't leave review feedback when none is requested.

Thanks.

I believe though this bug could be better fixed by using the common "display button background on hover" here.
Attachment #492768 - Flags: feedback-
Assignee: nobody → josiah
Confirming as well.
Status: UNCONFIRMED → NEW
Ever confirmed: true
I agree this can be confusing. Which is why addons like https://addons.mozilla.org/en-US/thunderbird/addon/quickfiltertoolbar/ try to do it better.  I've used this addon for quite some time.

Can you attach a screen shot or is there area of our UI that uses "display button background on hover"?
Severity: trivial → minor
Flags: needinfo?
Here's a video of a very quickly constructed OS X version of what I'm talking about. (Not making it a patch yet because the Linux version will take a little more work)

Richard, is this a fine approach? feedback flag is for getting a UI-opinion on the idea, not the implementation seen in the video, as it currently doesn't look too nice or even work 100% correctly.
Attachment #801785 - Flags: feedback?(richard.marti)
Flags: needinfo?
Comment on attachment 801785 [details]
Video demonstrating a more ideal UI

The "display button background on hover" is a OS X only problem. On Windows and Linux this already works. But for OS X I think this okay to implement it like your proposal.
Attachment #801785 - Flags: feedback?(richard.marti) → feedback+
Evan wants something like a LED or a checkmark to show when a button is pressed/active. He wrote also the button's checked state isn't a standard UI element. When I'm looking at some other programs on Linux, like Ubuntu's File manager or TortoiseHG, where are buttons with the same functionality with a pressed state and no checkmark.

On the first QFB-toolbar an additional active indicator isn't doable as where are already icons to show the different filter options. Maybe on the second toolbar with the Sender, Recipients, Subject and Body filter buttons we could add such a LED or checkmark.
(In reply to Richard Marti [:Paenglab] from comment #10)
> Evan wants something like a LED or a checkmark to show when a button is
> pressed/active. He wrote also the button's checked state isn't a standard UI
> element. When I'm looking at some other programs on Linux, like Ubuntu's
> File manager or TortoiseHG, where are buttons with the same functionality
> with a pressed state and no checkmark.
> 
> On the first QFB-toolbar an additional active indicator isn't doable as
> where are already icons to show the different filter options. Maybe on the
> second toolbar with the Sender, Recipients, Subject and Body filter buttons
> we could add such a LED or checkmark.

I don't know about that. Lacking an indicator on the first toolbar and having one on the second seem inconsistent and confusing, making it seem like they are essentially different UI elements. We need some kind of way to indicate the current state and that it's possible of changing that state, except across platforms.

Personally what I showed in the video is exactly what you would use according to the OS X Human Guidelines, however I don't know if Windows or Linux has something similar.

Does it?

In the meantime I'll do the OSX-only change.
(In reply to Josiah Bruner [:JosiahOne] from comment #11)
> 
> I don't know about that. Lacking an indicator on the first toolbar and
> having one on the second seem inconsistent and confusing, making it seem
> like they are essentially different UI elements.

Agreed, I forgot to write this :).

> We need some kind of way to indicate the current state and that it's
> possible of changing that state, except across platforms.
> 
> Personally what I showed in the video is exactly what you would use
> according to the OS X Human Guidelines, however I don't know if Windows or
> Linux has something similar.
> 
> Does it?

Yes, the hover state is shown on Linux and Windows.
Hi, so I forgot about this bug until I got emails about it the last couple of days. Sorry about that. :-)

Anyway, I just wanted to add some more thoughts. I don't really remember running into this confusion for a while, so it's possible that I eventually internalized how it works. (Or maybe I just haven't needed to adjust that setting for a while.)

But I also think that maybe I can better explain my objection, because I just checked on Thunderbird 17.0.8 on Windows and it looks subtly but perhaps importantly different from the screenshot I posted above. I don't actually have a handy Linux box at the moment, so I can't check whether it is a platform or version difference. But what I see now looks a lot more like *buttons*, whereas my original screenshot looks a lot more like *tabs*. Obviously there's nothing to be tabbed, but the "buttons" themselves look like tab widgets and maybe internally that was leading to some of my confusion.

Possibly just making it look more like buttons -- which may already be done -- would be enough to satisfy me. I'll attach an image in case it is clarifying...
Okay, so here's what I think this bug needs to cover, anybody is welcome to suggest additions/subtractions.

1. OS X buttons need a "hover" state.

2. Windows needs a marign at the bottom of each button.

3. Linux needs a marign at the bottom of each button.

I think that should suffice.
I think the bottom margin isn't needed as you can see on Windows and Linux. The green line below the bar on Linux is the tree border to indicate where are matches.
Attached patch OS X QFB button improvement. (obsolete) β€” β€” Splinter Review
Although the margin is there, it personally seems odd to me that the "visual" margin on the top is larger than the "visual" margin at the bottom. I personally would prefer an equal margin, but that's just a nit. It can be handled in another bug if needed.

In the meantime, this patch makes those qfb-buttons in both toolbars look like the native 'inline' Cocoa UI button.
Attachment #803678 - Flags: ui-review?(richard.marti)
Attachment #803678 - Flags: review?(richard.marti)
Josiah, please can you say me where I can find such a Cocoa UI button?
Flags: needinfo?(josiah)
Richard,

I couldn't think of a built-in application that uses it (though I'm sure there is one). Safari actually uses the same kind of button for their bookmarks, but not as a toggle.

Therefore I created this example application that uses only the Cocoa and dependent APIs in order to demonstrate the inline buttons used as a toggle.
Flags: needinfo?(josiah)
Okay, turns out you can also see them by searching for something in the Finder search bar they will appear as filtering buttons.

Actually, almost exactly like what we are doing here.
Attached patch Patch. (obsolete) β€” β€” Splinter Review
Switched to a more OSX-consistent theme.
Attachment #803678 - Attachment is obsolete: true
Attachment #803678 - Flags: ui-review?(richard.marti)
Attachment #803678 - Flags: review?(richard.marti)
Attachment #804456 - Flags: ui-review?(richard.marti)
Attachment #804456 - Flags: review?(richard.marti)
Comment on attachment 804456 [details] [diff] [review]
Patch.

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

ui-r+ and r+ with the comments below addressed.
If you have a good reason to leave it like it is, it's okay.

::: mail/themes/osx/mail/quickFilterBar.css
@@ +89,5 @@
>    border: 0;
>  }
>  
> +#quick-filter-bar toolbarbutton:not([checked="true"]):hover {
> +  opacity: .8;

Is this needed? Couldn't you remove this and use background-image: linear-gradient(#BBBBBB, #B5B5B5); for a lighter background? Maybe you have to change my proposed colors to be correct.

@@ +97,5 @@
> +}
> +
> +#quick-filter-bar toolbarbutton:not([checked="true"]):active,
> +#quick-filter-bar toolbarbutton[checked="true"]:active {
> +  opacity: 1;

Not needed when the opacity: .8 on hover rule is removed.

@@ +108,2 @@
>  #quick-filter-bar toolbarbutton[checked="true"] {
> +  opacity: 1;

Not needed also when the hover opacity is set. Please remove it.
Attachment #804456 - Flags: ui-review?(richard.marti)
Attachment #804456 - Flags: ui-review+
Attachment #804456 - Flags: review?(richard.marti)
Attachment #804456 - Flags: review+
Attached patch Patch. (obsolete) β€” β€” Splinter Review
Sounds good to me. Applied suggestions and carrying review flags.
Attachment #804456 - Attachment is obsolete: true
Attachment #804595 - Flags: ui-review+
Attachment #804595 - Flags: review+
Clearing checkin-needed because of a potential flaw.
Keywords: checkin-needed
Attached patch Patch. β€” β€” Splinter Review
There we go. Carrying review flags...

(The gradient colors were swapped)
Attachment #804595 - Attachment is obsolete: true
Attachment #804784 - Flags: ui-review+
Attachment #804784 - Flags: review+
https://hg.mozilla.org/comm-central/rev/0d27534ecbcf
Status: NEW → RESOLVED
Closed: 8 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 26.0
You need to log in before you can comment on or make changes to this bug.