TPAC: Not clear to patron how to deselect a facet

[Dan Pearl]

Evergreen 2.3, OpenSRF any, PG any, Linux any

It is unclear to patrons how to de-select a currently selected facet.

When a facet is selected, the item is shaded. Some patrons have not realized that clicking on the facet term again will unselect it. This opportunity for UI improvement (as proposed) simply puts a gray "X" to the left of the selected facet. The "X" has come to mean "delete" or "dismiss" in the collection of frequently-seen UI idioms.

[ This enhancement request was excised from a previous item ]

[Mark Cooper (markchristophercooper)]

Here's a simple implementation of this:

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=29964e6065a71fd168c6bb255079bd1f71cd0f7c

[Dan Pearl (dpearl)]

The UI is not quite like I envisioned when submitting the issue. In my crack at the problem the code:
* indented the facet so that the "X" was visible -- it was hanging on the left.
* Multi-line facets were indented as well, so they didn't extend into the left margin
* The X was an active with the same link as the facet text. This is important, I think.
* (minor) I chose to use ✕ instead of X for distinction (and I styled it gray, with a hover effect to make it bold black to confirm "aim")

-----Original Message-----
From: <email address hidden> [mailto:<email address hidden>] On Behalf Of Mark Cooper
Sent: Wednesday, December 05, 2012 3:15 PM
To: <email address hidden>
Subject: [Bug 1086550] Re: TPAC: Not clear to patron how to deselect a facet

Here's a simple implementation of this:

http://git.evergreen-
ils.org/?p=working/Evergreen.git;a=commit;h=29964e6065a71fd168c6bb255079bd1f71cd0f7c

** Tags added: pullrequest

--
You received this bug notification because you are subscribed to the bug report.
https://bugs.launchpad.net/bugs/1086550

Title:
  TPAC: Not clear to patron how to deselect a facet

Status in Evergreen - Open ILS:
  New

Bug description:
  Evergreen 2.3, OpenSRF any, PG any, Linux any

  It is unclear to patrons how to de-select a currently selected facet.

  When a facet is selected, the item is shaded. Some patrons have not
  realized that clicking on the facet term again will unselect it. This
  opportunity for UI improvement (as proposed) simply puts a gray "X" to
  the left of the selected facet. The "X" has come to mean "delete" or
  "dismiss" in the collection of frequently-seen UI idioms.

  [ This enhancement request was excised from a previous item ]

To manage notifications about this bug go to:
https://bugs.launchpad.net/evergreen/+bug/1086550/+subscriptions

[Mark Cooper (markchristophercooper)]

Cool. Do you have a branch to look at? I don't think I saw one.

Few responses:

* indented the facet so that the "X" was visible -- it was hanging on the left.
Can't quite picture what you mean by that description. More space between the "X" on the left and the facet?

* Multi-line facets were indented as well, so they didn't extend into the left margin
Personally, I think it looks fine unindented on multi-lines (assuming by left margin you just mean the space below the "X"), but ultimately wouldn't have strong feelings about it either way unless longer facets create "too many" lines when indented (which was my concern).

* The X was an active with the same link as the facet text. This is important, I think.
Agree, that would be better.

* (minor) I chose to use &#x2715; instead of X for distinction (and I styled it gray, with a hover effect to make it bold black to confirm "aim")
Styles by css, just add appropriate classes.

[Dan Pearl (dpearl)]

Hi, Mark.
I'm a beginner at this stuff, so I'm trodding carefully. I was having trouble with the CSS so I went to a table implementation, but the CSS has been modified, so I'll recast my code to work with the change, and put up a branch when it is working.
Dan

-----Original Message-----
From: <email address hidden> [mailto:<email address hidden>] On Behalf Of Mark Cooper
Sent: Wednesday, December 05, 2012 4:34 PM
To: <email address hidden>
Subject: [Bug 1086550] Re: TPAC: Not clear to patron how to deselect a facet

Cool. Do you have a branch to look at? I don't think I saw one.

Few responses:

* indented the facet so that the "X" was visible -- it was hanging on the left.
Can't quite picture what you mean by that description. More space between the "X" on the left and the facet?

* Multi-line facets were indented as well, so they didn't extend into the left margin Personally, I think it looks fine unindented on multi-lines (assuming by left margin you just mean the space below the "X"), but ultimately wouldn't have strong feelings about it either way unless longer facets create "too many" lines when indented (which was my concern).

* The X was an active with the same link as the facet text. This is important, I think.
Agree, that would be better.

* (minor) I chose to use &#x2715; instead of X for distinction (and I styled it gray, with a hover effect to make it bold black to confirm "aim") Styles by css, just add appropriate classes.

--
You received this bug notification because you are subscribed to the bug report.
https://bugs.launchpad.net/bugs/1086550

Title:
  TPAC: Not clear to patron how to deselect a facet

Status in Evergreen - Open ILS:
  Confirmed

Bug description:
  Evergreen 2.3, OpenSRF any, PG any, Linux any

  It is unclear to patrons how to de-select a currently selected facet.

  When a facet is selected, the item is shaded. Some patrons have not
  realized that clicking on the facet term again will unselect it. This
  opportunity for UI improvement (as proposed) simply puts a gray "X" to
  the left of the selected facet. The "X" has come to mean "delete" or
  "dismiss" in the collection of frequently-seen UI idioms.

  [ This enhancement request was excised from a previous item ]

To manage notifications about this bug go to:
https://bugs.launchpad.net/evergreen/+bug/1086550/+subscriptions

[Mark Cooper (markchristophercooper)]

New version based on your recommendations, which do work well. Only makes small changes to the original code. Hangs an 'X' icon to the left of selected facets. We're going to stick with this version until this or another solution is officially accepted. Tested on Windows/Mac with IE, Firefox, Chrome and Safari. I'll add a pullrequest after some more testing, unless you want to upload your own branch in which case I'll check your version out for comparison.

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=c7fc42bf5829668090702f54cedde47d88a866ee

[Dan Pearl (dpearl)]

Thanks!

I'm going to upload my version today, if I can figure out how to do it!
Dan

[Dan Pearl (dpearl)]

I support your code changes. It does the job quite nicely.

Thanks!
Dan

[Jason Stephenson (jstephenson)]

Dan,

I know you are new to the community, so I think I should ask:

Do you know how to use git and sign-off on other's commits? If not, I'd be happy to help you in IRC. I believe you have been granted access to the working repository already.

Jason

[Dan Pearl (dpearl)]

Hi, Jason,
I am indeed new to EG and to git.

All I saw in http://www.open-ils.org/dokuwiki/doku.php?id=dev:git was info on the author signing off on a submission. Is it that random interested people can sign-off, or is the submitter of the bug special in this regard?

I will need my ssh credentials updated for access to the working repo, as I have mislaid my passphrase. (I have submitted my request to the appropriate gitadmin email.

I'll be monitoring IRC for any guidance you can provide.

Thanks,
Dan

-----Original Message-----
From: <email address hidden> [mailto:<email address hidden>] On Behalf Of Jason Stephenson
Sent: Thursday, December 06, 2012 3:15 PM
To: <email address hidden>
Subject: [Bug 1086550] Re: TPAC: Not clear to patron how to deselect a facet

Dan,

I know you are new to the community, so I think I should ask:

Do you know how to use git and sign-off on other's commits? If not, I'd be happy to help you in IRC. I believe you have been granted access to the working repository already.

Jason

--
You received this bug notification because you are subscribed to the bug report.
https://bugs.launchpad.net/bugs/1086550

Title:
  TPAC: Not clear to patron how to deselect a facet

Status in Evergreen - Open ILS:
  Confirmed

Bug description:
  Evergreen 2.3, OpenSRF any, PG any, Linux any

  It is unclear to patrons how to de-select a currently selected facet.

  When a facet is selected, the item is shaded. Some patrons have not
  realized that clicking on the facet term again will unselect it. This
  opportunity for UI improvement (as proposed) simply puts a gray "X" to
  the left of the selected facet. The "X" has come to mean "delete" or
  "dismiss" in the collection of frequently-seen UI idioms.

  [ This enhancement request was excised from a previous item ]

To manage notifications about this bug go to:
https://bugs.launchpad.net/evergreen/+bug/1086550/+subscriptions

[Mark Cooper (markchristophercooper)]

Alrighty then, here it is:

To <email address hidden>:working/Evergreen.git
 + c7fc42b...59266b5 lp1086550_X_facet_remove2 -> user/mcooper/lp1086550_X_facet_remove2 (forced update)

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=59266b5965724051cee536e66ce71c6db18d1900

[Jason Stephenson (jstephenson)]

I've had a look at the branch and I wonder if a CSS-styled single character would not be better than a graphic for the X?

[Dan Pearl (dpearl)]

In a version of the solution, I tried the &#x2715; character. It was styled as follows:

.facet_X a {
    font-size: 8pt;
    font-weight: 900;
    color:#ff6666;
    text-decoration: none;
}

.facet_X a:hover {
    color: black;
}

-----Original Message-----
From: <email address hidden> [mailto:<email address hidden>] On Behalf Of Jason Stephenson
Sent: Wednesday, December 19, 2012 3:03 PM
To: <email address hidden>
Subject: [Bug 1086550] Re: TPAC: Not clear to patron how to deselect a facet

I've had a look at the branch and I wonder if a CSS-styled single character would not be better than a graphic for the X?

--
You received this bug notification because you are subscribed to the bug report.
https://bugs.launchpad.net/bugs/1086550

Title:
  TPAC: Not clear to patron how to deselect a facet

Status in Evergreen - Open ILS:
  Confirmed

Bug description:
  Evergreen 2.3, OpenSRF any, PG any, Linux any

  It is unclear to patrons how to de-select a currently selected facet.

  When a facet is selected, the item is shaded. Some patrons have not
  realized that clicking on the facet term again will unselect it. This
  opportunity for UI improvement (as proposed) simply puts a gray "X" to
  the left of the selected facet. The "X" has come to mean "delete" or
  "dismiss" in the collection of frequently-seen UI idioms.

  [ This enhancement request was excised from a previous item ]

To manage notifications about this bug go to:
https://bugs.launchpad.net/evergreen/+bug/1086550/+subscriptions

[Ben Shum (bshum)]

Removing pullrequest tag till we sort out the final branch to be tested for this bug.

[Pasi Kallinen (paxed)]

Perhaps this could reuse the "remove search row" image (/images/adv_row_close_btn.png) that advanced and expert searches use.

[Mike Rylander (mrylander)]

Thinking along the line of thought that Jason suggested, perhaps we just need a CSS class applied to the in-use facets (if that's not already done), and use the ::before pseudo element selector. Assuming facetInUse as the class:

.facetInUse {
  font-weight: bold;
}

.facetInUse::before {
  content: "&#x2715"';
  color: red;
}

Or for an image:

.facetInUse::before {
  content: url('/images/adv_row_close_btn.png');
}

[Dan Scott (denials)]

Ah, IE: http://msdn.microsoft.com/en-us/library/ie/cc304078%28v=vs.85%29.aspx says "In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before.

Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::before pseudo-element".

[Dan Scott (denials)]

So maybe:

.facetInUse::before, .facetInUse:before { /* stuff */ }

Knowing IE, that will probably end up doubling up the prepended element :)

[Remington Steed (rjs7)]

I've tested Mike's idea a bit, but the red "X" is not part of the link. I agree with Dan P. and Mark that it would be better if clicking the "X" removed the facet also. Not sure if there's a simple way to accomplish that.

[Terran McCanna (tmccanna)]

Noting that this interface is a bit more user friendly in the bootstrap opac and includes a hover-over tip. It might still be worth adding the visual "x" though.

[Terran McCanna (tmccanna)]

The Bootstrap OPAC is already more user-friendly for this than the TPAC was, but a little X would add an additional visual clue for deselecting facets:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1086550_deselect_search_facets_clue

[Christine Morgan (cmorgan-z)]

This works as expected. I think it is clear what needs to be done to remove a facet. Thanks Terran! This is a nice enhancement.

I have tested this code and consent to signing off on it with my name,
Christine Morgan and my email address,
<email address hidden>.

[Jane Sandberg (sandbergja)]

Thanks, Terran and Christine! It looks nice! I would suggest some changes to the aria-label:
* it is quite verbose, perhaps it could be simplified to something like "remove filter" -- less time spent listening to a screen reader, and less speaking required for voice control.
* it is repeated verbatim if multiple facets are selected. So if somebody is navigating the page by a list of links, they will see several links called "Expand to also show results not matching this term", and not be able to know immediately which term they are removing. I've attached a screenshot of the rotor in voiceover, showing several links with this text, as well as several links with facet values intermingled.
* ...or perhaps the "x" and the facet text could live within a single <a> tag, since they go to the same place?

[Terran McCanna (tmccanna)]

Jane, I'm not able to open your screenshot, could you please re-attach?

I agree the text is verbose - I'm not sure what the thinking was behind that originally.

Originally I tried putting the X inside the single A tag, but it caused ugly wrapping. In reading more about aria, it sounds like it would make more sense to hide the x from both aria and also from tabbing so that it is really only usable for keyboard navigation. See https://ux.stackexchange.com/questions/145088/hiding-duplicate-links-with-aria-hidden

Updated branch coming soon...

[Jane Sandberg (sandbergja)]

Re-attempting sending the screenshot of the voiceover rotor as described above. Fingers crossed that it works this time!

[Terran McCanna (tmccanna)]

Second commit pushed to same branch that hides the X div with aria-hidden and also skips over the X when tabbing (since that also created a redundant/unnecessary click). Also changed the verbose text to "Remove filter."

[Stephanie Leary (stephanieleary)]

This sounds pretty good to me in NVDA. I've squashed it and added my signoff: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp1086550_deselect_search_facets_clue-signoff

[Blake GH (bmagic)]

Committed to main during the "Monday code review" with, your host, Jane!