Invitation for Task Force for New Catalog Record Search UI

[campmlc]

Hi all, we are in the process of forming a task force to develop recommendations for the new Catalog Record Search interface. If you are interested in participating, please fill out this When2Meet poll so we can set up a time: https://www.when2meet.com/?17892746-dRDRH. I know everyone has a lot going on, but these are major changes to an essential tool, so ideally we should meet up at least once before the holidays so that we can get @dustymc the feedback he needs to develop this page for all our user communities.

[Jegelewicz]

From today's meeting

• [ ] Team to update category sheet
• [ ] Dusty to add the categories to the interface
• [ ] Let the critique begin (Dusty don’t DO anything until the team has worked through conflicting requests)
• [ ] Meet again next week and with address comments or whatever we are able to do given progress to that date

[dustymc]

I think the 'basic' category needs to go from the spreadsheet - those will just be integrated in with the rest of the identifiers-or-whatever.

I think 'default' (basic, whatever) makes a good subcategory for the initial/public view, and serves the purpose in a categorized form.

One (simple, I hope) item that hasn't yet been discussed is the name/url of the page. That will need solidified before this page becomes the default, and I assume we don't want to reuse the currentSpecimen... terms. I suppose I'll stick with /cat_records.cfm or let my password manager choose (&fcevZmA#63C&0j11t5D@TkGz9ZA1m9Hw1oTG5TI5gCkA$3Ifl.cfm is nice) or something of the sort if nobody has clever ideas before whenever I need them....

[Jegelewicz]

One (simple, I hope) item that hasn't yet been discussed is the name/url of the page.

search

[dustymc]

I just rebuilt the page with basically no regard for the spreadsheet....

https://arctos-test.tacc.utexas.edu/cat_records.cfm

EDIT: these are now functional, everything should be in one of them

categories are

identifier identification catalog_record parts usage event locality spatial

which maybe seems about right?? Easy enough to shuffle things, but I would like to get this somewhat solidified ASAP, and hopefully whatever I did helps the conversation move.

If that seems somewhat reasonable and the form is closer to what's desired, I'll work on making the layout a little less East Berlin (so many gray squares...).

This does two things, which are really different sides of the same coin:

• The form isn't as user-customizable as it was a few minutes ago. A user who doesn't give a crap about (whatever) still has to scroll by the giant empty

  WHATEVER

  section, and

• The form is more predictable/controllable - we could do more than variable-width grid and devolving tables with this, although that might be in 'hire a CSS person' territory.

[dustymc]

I've sort of spiraled in on what I think is a nice balance of ease of use (turn on all category or category-->subcategory items with a click or two) and fully customizable (turn one of the bundled items off).

The search form now has sections, and each of them has a customize button.

Clicking it will take you to that category, where you can

• turn everything on or off
• turn subcategories on or off
• turn individual items on or off

Please let me know as soon as possible if that approach isn't workable for some reason.

Items attributed to a category should be in that pane, but that's hard-coded so please let me know (or update the category) if you find a misplaced item.

The form will initialize (for public users, users who haven't yet customized, or users who've just turned everything off) with all subcategory='basic' items on. A category can have any number (including zero) of 'basic' items.

The order of the categories in the spreadsheet should match the form, and the default_order column has been updated to match the form (and that loaded to test).

Category order can be changed, but it'll need coordinated with code.

Major TODOs:

• Subcategory classification and order can be cleaned up.
• Display can be cleaned up.

[dustymc]

Unless there's some immediate objection, I think I'll merge 'usage' into 'catalog_record' - I can't quite see where the border is, which suggests there is not one.

[ebraker]

Is this test link for the new basic search or the new customize search form? If it is for the new customize form, then great.

If it is for the new basic search, I think we need to focus on expanding and collapsing the fields vs. adding and removing fields. Adding and Removing takes work to scroll through the giant lists of options and it is a major step back from the functionality we currently have (scroll through a giant list, select what you want, then fill in values, and maybe do that a few more times over if you want to add fields from different categories). I think it is critical that we be able to view each category with a few basic fields visible, and then have an "expand"/"see more options" action to view ALL of the existing fields that are currently present on the classic search page. Adding fields is completely overwhelming, especially to someone new to Arctos who doesn't even know what the options are.

(Please ignore this comment if https://arctos-test.tacc.utexas.edu/cat_records.cfm is the new customize form - if it is, I think it is much more legible than the previous customize version)

Unless there's some immediate objection, I think I'll merge 'usage' into 'catalog_record' - I can't quite see where the border is, which suggests there is not one.

I agree that it makes sense to combine if this is for the customize form. If this is the basic form, i would err on breaking up in categories into more palatable chunks (combining makes 94 fields to select from under the catalog record category).

[dustymc]

Yes that's the correct link.

work to scroll through the giant lists

Screenshot? There should be no/minimal scrolling necessary: add/remove, all/none, save, done.

able to view each category with a few basic fields visible,

Set subcategory to 'basic' and this happens.

view ALL of the existing fields that are currently present on the classic search page

I still think this is not palatable. Very few users could possibly have any interest in accession agency, 'genus' is not what most users will think, etc.

[dustymc]

94 fields to select from under the catalog record category

Maybe we need to (somehow) do more with subcategories, somehow? Eg a couple of those fields are broken-out attributes for https://github.com/ArctosDB/arctos/issues/5341, I think they need to land with the 'normal' attribute stuff (currently catalog_record) but they're also specialist terms which most users probably don't care about/want to see. That sort of thing might happen with a couple hundred more attributes. I suppose I could add some sort of subcategory shortcut but that could get out of control too.

[dustymc]

Here, I hope, is what I failed to say in the two above comments.

1. Let's add enough to 'basic' that most users won't need to customize (but not so much that everyone has to scroll, either)
2. Can we do more with profiles? We've got to create them before we can go very far with this, but I have the recipe for two so there's a start. Maybe some sort of profile selector somewhere on the page. I have active requests for uam_eh and uam_art, but rather than specific collections those could include 'tissue-centric mammal search' or WHATEVER.

[campmlc]

Would profiles be found with the "filter for tissues" or "filter for art collections" or "filter for earth sciences"? table we discussed?

[ebraker]

This is only about 1/4 of what I have to scroll through when clicking "add/remove" for catalog record:

I think we decided this is what we want for basic but using the categories that we came up with:

Then you click 'expand' and you get all the fields currently under "view more options" that are on our classic search page. If you want even more options, you click the "customize" button and it takes you to some version of the mock-up that you currently have. I really don't think our basic and advanced search (collapsed and expanded) should have any building involved. It's too overwhelming and not intuitive. And profiles are great, but we need to offer a search page for first time users that has the same level of functionality and ease as the current version.

[dustymc]

have to scroll through

But you don't: click "All" and "Save." Can we somehow address that in the UI, while letting users know that there are finer-scaled options (by showing them the subcategories)?

[ebraker]

Ok, I see. That is better. I strongly think we need to use an expand button in lieu of Add/Remove that defaults to presenting the equivalent of clicking "All" and "Save" - no customize options on this particular form. There should not be any actions required of users beyond hitting 'expand' to see all the fields -otherwise it is a lot of actions if someone wants to open up every category, plus, they will very likely be intimidated by initially seeing that giant green table or having to read instructions on how to query.

I still think pulling media and pubs into the catalog record category makes this category too big, but you could use subcategory headings to at least make these groupings more clear if you keep them here, e.g. "media" "transactions" since there is so much going on:

This might be best answered by @AJLinn but, "culture of origin" and "culture of use" may be better placed under Identification(?)

[dustymc]

intimidated

I'm thinking most users should not need to customize (and maybe something clever with profiles ups "most"), but EVERYONE will be intimidated by seeing everything. IDK, playing with more buttons now....

"culture of origin" and "culture of use" may be better placed under Identification(?)

They're record attributes, I can't imagine how scattering one thing across multiple categories isn't confusing??

[dustymc]

equivalent of clicking

AHA, thanks! Ghost-clicking implemented.

Turning everything on might still be intimidating, but the not-quite-button that giveth can also taketh so ....

[ewommack]

For the result table, is there a way to add columns there? Thinking back to when we add fields to search by, it would be great to be able to sort by some of those columns when we get the results. Or like I'd like to add sex to as a column so I can sort by and see grouped together all of the males, and then all of the females. I can search on attribute -> sex -> but then I have to enter a value to search that attribute.

I like the colored boxes. Should we think about branding, and use different shades of Arctos blue?

When I click the customize button, all of the boxes are checked, instead of just starting with the ones I had previously. Now I have to go back and uncheck a bunch of things. I can hit uncheck all, but then I have to remember what I need to have checked for a basic search, or what I had checked before.

[dustymc]

result table, is there a way to add columns there?

sort by

click headers

search on attribute -> sex -> but then I have to enter a value to search that attribute.

Different Issue, this is just reusing all back-end stuff. See also https://github.com/ArctosDB/arctos/issues/5341, that's probably a good candidate for a dedicated search as well.

use different shades of Arctos blue?

I've literally been using random color pickers, except then they keep spitting out purple and I have @lkvoong pick a random color (which is inevitably a shade of green...). Yes some sort of color palette would be fabulous, and deserving of its own issue. See also https://github.com/ArctosDB/arctos/issues/4874

When I click the customize button, all of the boxes are checked

I need screenshots or something. You should be seeing...

... which lets you check and uncheck whatever you want, starting with whereever you left off, and for each section....

... which does what it says it'll do and is hopefully intuitive??

[ewommack]

It reset itself after I backed out of everything and restarted the page, but for a while any time I clicked any of the customize buttons this is what I saw right when the window opened. I can try and recreate the error if you want?

I'm not logged in and I can't find the Customize Results tab:

[ewommack]

@mkoo -> where are we storing those Arctos branded colors? From that nifty letterhead you created...

[dustymc]

t reset itself

I'm changing things, you probably got caught up in that.

not logged in and I can't find the Customize Results

It's not available without login, maybe-yet.

[ewommack]

It's not available without login, maybe-yet.

Sadness.

[ebraker]

A couple of formatting suggestions:

1. Remove all the boxes with dashed outlines for legibility, e.g., first image is current layout vs second image is desired layoyt: vs. (preferred)
2. If the box outlines are removed, then the tables should be left-aligned (e.g. Identification and Taxon Term)
3. Change background colors to either two shades of light grey, or two shades of light grey-blue. The letterhead blues are very saturated and not compatible with dark text - so here's a subtle version (though I also think greys are fine), with Arctos bear-colored navy text:

[dustymc]

https://arctos-test.tacc.utexas.edu/cat_records.cfm (and probably hard-reload, some stuff will be sticky-cached).

[ebraker]

Well that was speedy!

Looks a bit more branded to me and eliminating the bounding boxes cleans it up a bit. I'd change the black text and outlines to #113D6 (navy).

I'm on the fence with the baby blues but I think they are an improvement over the arbitrary green, so we can chat tomorrow at our meeting on what people think would be best. Here's a couple of other options:

(though if we go grey I think we need to inject blue on the top banner or do what MCZbase has done and surround the query page with a blue bounding box).

[dustymc]

I'd change the black text and outlines to #113D6 (navy).

I don't think it's a hill I'm willing to die on, but by default links are blue and visited links are dark blue and anything that approaches those colors without the accompanying functionality will be confusing to some extent.

The "workaround" would be writing some sort of documentation for those things and making them into helplinks (which hopefully is "approaching" enough to not be considered evil!). IDK if "just pick one!" as documentation is useful or annoying....

Other grey/grey stuff (but of course not all of it) in Arctos is #E7E7E7/#D3D3D3.

Other than trying to not confuse people by reusing "default" colors I don't think I much care, but I'd love to have a "when ... thou shalt..." color directive/palette. Along with making Arctos more consistent, that would also make things like updating the UI or swapping in your own CSS much more approachable.

top banner

One way or another, that thing has a very short future.

[dustymc]

search

Can't say I'm terribly thrilled, lots of other things can be searched and maybe someday we'll have some sort of elastic "global search" and etc., but I'm not hearing any better idea so here we go...

[ewommack]

I think the grays could work, and then all of your default and visited link colors can be seen well. I do like the use of the blues though. It does make it more consistent with the Arctos colors

[dustymc]

couple of other options the grays could work

Not sure if this is the right grays but I'm not sure about the blues either, and it's (obviously, I hope) easy enough to swap things around in this architecture, so...

[ewommack]

Oooh, I like how that looks. It is easy to see the different rows and groups.

[ewommack]

Ok basic question -> what is the difference between the two search customization save columns? Even when not logged in I can click save in either column, but I'm not sure what difference it does?

[dustymc]

first columns is "category" so you can turn all part-stuff on with a click.

second is 'subcategory' so you can turn on all "part-part" and no "part-container" on with a click.

So basically just shortcuts.

[dustymc]

meeting todo

• find a stopping place before the CT meeting, preview for release on friday during downtime

done

• add section at top, repeat buttons from bottom plus number of records
• margin around search page
• try to break age (pushed off to https://github.com/ArctosDB/arctos/issues/5354)
• temporary link back to classic form
• change Everything On to "Show All Options"
• map - add clear polygon button
  • omg that was painful, but starting to draw a polygon should now flush previous polygons. FYI the former behavior was using the last-drawn polygon, so perhaps not quite as broken as I though.
• in customize - "Check/Uncheck All Options"
  • reject: clashes with necessarily-brief all/none inline buttons
• relabel 'scroll to category' and 'scroll to ..' (category, unless @mkoo comes up with a better term)
• locality-->"place"
• scroll to category:subcategory widget on customize page
• make sure relationships is coming on
• add media type to basic
• spatial-->map
• geog shape name goes to place/basic

[ewommack]

first columns is "category" so you can turn all part-stuff on with a click.

second is 'subcategory' so you can turn on all "part-part" and no "part-container" on with a click.

Ok, that definitely needs a help button or something. I'm not sure I'd ever figure that, so maybe add it to the new text to the Customize?

[ebraker]

Here's some padding- white border around query block with an outline. I think it brings some of the old feel back!

[mkoo]

Emily and I worked up some mockups and palette hex values based on our meeting yesterday but I am unsure the best way to share the pptx and other info. @ebraker I think I will download the office365 file and post as a gslideshow (it will count against my allocation then, and I will only share the first half of the pres) -- ok?

@dustymc we have also ahve another doc with the suggested colors for specific CSS classes.... so more soon

[ebraker]

@mkoo that works for me! Folks can then add comments suggestions in the notes section of each slide. If it somehow has wonky formatting in google slides I would just convert to pdf.

[mkoo]

ok here's the whole slide deck-- feel free to add notes @ebraker. @dusty I will still add a set of class and proposed hexcodes soon, but you can see some of our thinking here

all, nothing is set here and we can explain more of our alternate options -- I also have some new thoughts on the main menu bar: I do think we have to return to grays/ neutral palette now that I've checked out a few more guid pages.

[dustymc]

main menu bar... have to return to grays/ neutral palette now that I've checked out a few more guid pages.

Not sure I'm fully understanding and what I think it going to happen is subject to change, but see https://github.com/ArctosDB/arctos/issues/5333 and https://github.com/ArctosDB/internal/issues/211: my intention is that the header/navbar/menu-thingee will be relatively small (eg small logo and one row of links), at the very top of the page, and WILL NOT be changed on GUID pages (or anywhere else). The current practice of cramming data in the header, and carrying around a huge header so that there's space to jam things in (except when there's not, which is increasingly common), is - uhh, let's call it "suboptimal." The header/navbar should be something that can be safely ignored unless the user is wanting to go somewhere else - not something that contains the most critical data! ANYWAY - some neutral color which isn't going to be too clashy with whatever gaudy color the next collection might bring to Arctos seems like an outstanding idea.

[ebraker]

People at Code Table Committee seemed to converge on something like this @mkoo and others, what do you think? Thoughts soon since UI change happens tomorrow. @dustymc what and where are other buttons in Arctos? Once I have the list I'll add hex codes to the repo (@mkoo can you remind me where that is?)

[Jegelewicz]

button save: #FBD29B button search: #CCCC99 button link: #99CCFF button clear: #FFCC00 button insert: #99CCCC button pic: #CCCC99 button delete: #FF9966 button quit: #FFFF00 button control: #99CCFF

[dustymc]

https://github.com/ArctosDB/PG/blob/master/includes/style.css#L1784

[ewommack]

And we can add more buttons to the header later? Just thinking of when we get the acknowledgement accepted (https://github.com/ArctosDB/internal/issues/176)

[ebraker]

@mkoo I just emailed you a bunch of hex codes and a mock ups See if you like them and if you do, add them to our repo (couldn't remember where we put it). It's slide #10 if you want to dynamically play with palette.

[campmlc]

I like this. While we are at it,should we change " My Stuff " to "My Profile" to be more professional and use the same term as all other websites?

On Thu, Dec 15, 2022, 4:19 PM Emily Braker @.***> wrote:

• [EXTERNAL]*

People at Code Table Committee seemed to converge on something like this @mkoo https://github.com/mkoo and others, what do you think? Thoughts soon since UI change happens tomorrow. Dusty, what and where are other buttons in Arctos? Once I have the list I'll add hex codes to the repo ( @mkoo https://github.com/mkoo can you remind me where that is?) [image: image] https://user-images.githubusercontent.com/11336485/207986933-e98ee9e8-07e3-4635-a349-e266c06cff05.png

— Reply to this email directly, view it on GitHub https://github.com/ArctosDB/arctos/issues/5324#issuecomment-1353838346, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADQ7JBEVR4LU3PI3KW2CV3TWNORRDANCNFSM6AAAAAASRJPDSY . You are receiving this because you were assigned.Message ID: @.***>

[ebraker]

@dustymc Is there any way to hide/bypass the brief flashing of the customize table when selecting "everything on" as the ghost clicking occurs? I know it is not a bug, but it looks buggy to me and not as smooth a transition as we have in the classic form with "show more options" (plus, even a brief flash of the giant customize table is scarrry to uninitiated users IMO...).

[ebraker]

Ok last iteration. @dustymc , @mkoo (I aslo listed these in the internal wiki css colors):

fonts: #113d64 navbar: #113d64 (gets white text)

links: #116AC4 visited links: #6B9FB1 hover links: #116AC4 (standard internet blue) button search [submit query?]: #82B8EA button login: #82B8EA button all: #F5C03D button customize: #C9D2DC button none: #C9D2DC button save: #E9B2C1 button clear: #F99F67 button link: # button insert: # button pic: #F99F67 button delete: #6B9FB1 button quit: # button control: #

not sure of locations of these other buttons, but here are color variants for buttons: CCD7E9 (turquoise/greenish), EDF1F9 (lightest blue), 82B8EA (blue), C9D2DC (slate blue), F5C03D (yellow), F99F67 (orange)

correct logo to use:

[dustymc]

``

button search [submit query?]: #82B8EA button login: #82B8EA button all: #F5C03D button customize: #CCD7E9 button none: #EDF1F9 button save: #E9B2C1 button clear: #F99F67 button link: # button insert: # button pic: #F99F67 button delete: #6B9FB1 button quit: # button control: # ``

I don't know what those are, I don't use them, they're not valid names. I'll clean them up, the buttons I use start at https://github.com/ArctosDB/PG/blob/master/includes/style.css#L1784 / https://github.com/ArctosDB/arctos/issues/5324#issuecomment-1353842649

/* BEGIN purpose-coded buttons */

    /* save changes */
    input.savBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#FBD29B;
        border:1px solid;
        border-color:#666666;
         margin:0.4em;
    }

    /* customize something */
        input.cstmBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#E7EBDA;
        border:1px solid;
        border-color:#666666;
         margin:0.4em;
    }

    /* link; go somewhere not terribly scary */
    input.lnkBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#99CCFF;
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

    /* search button: finds something */
    input.schBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#CCCC99;
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

    /* clears or resets a form */
    input.clrBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#FFCC00;
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

    /* insert: makes something new */
    input.insBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#99CCCC;
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

    /* opens a pick list */
    input.picBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#CCCC99;
        border-color: #666666;
        border:1px solid;
         margin:0.4em;
    }

    /* delete: something dies with clicky */
    input.delBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#FF9966;
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

    /* quit: go somewhere else without saving any changes */

    input.qutBtn {
        color:#666666;
        font-size:10pt;
        font-weight:bold;
        background-color:#F1948A; /***#FFFF00***/
        border-color:#666666;
        border:1px solid;
         margin:0.4em;
    }

[ebraker]

Ok, in that case: input.savBtn color:#89b2c1 input.cstmBtn color:#C9D2DC input.schBtn color:#82B8EA input.clrBtn color:#f99f67 input.picBtn color:#f99f67

links: #116AC4 visited links: #6B9FB1 hover links: #116AC4 (standard internet blue) fonts: #113d64 navbar: #113d64 (gets white text)

I still don't know where this buttons are in arctos (what forms?): input.lnkBtn - does this mean hypertext color? input.qutBtn input.delBtn input.insBtn

but this slide communicates all visible buttons on the new search UI:

[dustymc]

@ebraker @mkoo can we split the color/css/style discussions off into a dedicated thread? I'm not sure who all might find it down here.

I think you're proposing some new classes of buttons (for eg check all/none), which is fine, just please provide some sort of definition/intended use (and a 3-ish-letter class name if you wish). I'm not sure where the limit/balance it is, but at some point a few meaningfully-styled buttons tend to become so numerous that nobody can keep up and might as well just be default gray. I don't know where we are on the spectrum, I think some new classes are OK, but there's definitely a point of overload and additions should be carefully considered.

The definitions (however weak) are comments in the code I pasted above, eg

/* link; go somewhere not terribly scary */
    input.lnkBtn {

I'm sure I overuse that one and the scary red delete too, but see above re: overload....

Do feel free to beef up the definitions (you can edit the css or provide a snippet or just let me know) - "use this when ....." and I will endeavor to comply.

does this mean hypertext color?

I'm not sure (is that even consistent across environments?), but it's https://www.htmlcsscolor.com/hex/99CCFF

where this buttons are in arctos (what forms?):

Everywhere. lnkBtn for example:

585 matches across 140 files

navbar

That needs pushed off to https://github.com/ArctosDB/internal/issues/211 (if it means what I think it means) - basically nothing in the code of the current header has a future.