Search CL court designs

[flooie]

With the forthcoming integration of courts-db our normal UI for choosing courts may need an overhaul.

We thought it would be helpful to open this issue to house suggestions and design ideas and mockups.

[flooie]

I mocked up a patten for UI picking.

I show a drop down menu with options for all of the courts and groupings.

It was an okay first pass, but integrating the other courts looks somewhat challenging. Next mockup will attempt a vertical tab like structure.

[brianwc]

You might consider identifying some common user journeys and ensuring that the experience (especially # of clicks) is comparable or better. Examples:

1. I want to search a single federal Circuit. Currently I click "Clear All", click the Circuit, click "Apply". (3 clicks)
2. I want to search federal Circuits only. Currently I click "Clear All", click "Check Current Tab", click "Apply". (3 clicks) (Same count will apply to any journey that wants the entirety of a current tab).
3. I want to search just my state's courts. Currently I click "Clear All", click "State" tab, click the three California checkboxes, scroll down,* click "Apply". (6 clicks)

• Not having an "Apply" button at the top and requiring this scroll has always made me nuts. Even better would be if a tab's contents would normally fit within a laptop's screen dimensions.

I also have long thought the proposed "Groups" options were likely representative of some of these common journeys and could save people time, so I like exploring that as a new feature.

I'm doubtful that "Military" and "Tribal" warrant their own tabs. A more comprehensive "Other" tab is probably more reflective of usage.

Saving one's preferences also sounds like an excellent new feature. Perhaps people should even be able to define more than one preference. I might name mine "Federal", "California", "Tax" etc.

All this needs to work well on mobile too. Sigh...

[flooie]

@brianwc Thanks for the feedback - my goal is to minimize the number of clicks needed, so I appreciate your click counts. In general I want it to be two clicks max. I think the apply button wouldn't be necessary in a new format, if we give feedback to the user in badges or other UI.

I have attached a sidebar navigation pattern (rough) after discussion with @mlissner

I think the badge counts would provide feedback on selection count - and I want to keep the default home court list to have the groups.

[brianwc]

I love the idea of eliminating the Apply step and giving people a count of selected courts that updates-on-click, letting them know their selection(s) have already been applied. That would be a huge improvement.

Maybe I don't understand the sidebar, but this feels like a step backwards in some respects.

• I don't think State and Federal should be grouped together. I think most legal research is more narrowly focused on a federal issue or a state issue and people want it to be easy to select just their focus.
• I also know that I often want to find precedents at the Circuit level and not be bothered with district court decisions, and I don't see how I'd do that.
• If I just want to search a special jurisdiction, Court of Claims, for instance, where did all those go?

I also don't understand several of the other components. 1) There's a small search box over "All Courts". 2) There's what looks like it might be a larger search box running across the top of the picker. 3) There's a Blue Search button on the right (why not just hit enter?) 4) I don't know what the Courts dropdown at the top-right would do, because I thought the side-bar was controlling the listing of the courts in the main panel.

CL has a tough audience range. We want a UI that's dead simple for a pro se litigant that's never done legal research and a UI that's capable enough for a seasoned litigator or academic that is a power user-researcher, but we want those to be the same UI. (!!!!)

[flooie]

This is a much delayed response. I wanted to quickly address a couple of your comments @brianwc.

I wanted to clarify my goals and expectations, because the I think I left it unclear with the previous comment and picture. Most of the choices, state and federal (etc) were just placeholders in service to a sidebar design. So here is what I (and Mike) am/are thinking.

The first tab you see - home/(state/fed)/all etc should be able to let you select the court you want with one click. This means that you may in some cases select more than one but you get your court.

Generally, this home tab provides quick access - if for example I select All Bankruptcy -

It shows - the number or courts Ive selected or (ALL) in the sidebar. Selected the tab for bankruptcy shows me the dialed in courts.

(small edit: I realized after the fact that the image above is confusing. I was hovering over the home tab when I screen shot the page - which is why home has a blue indicator)

The same feedback loop will apply for all of the courts. If I select Alabama, it will select all of the Alabama courts in the State tab etc.

Of course - if I want just the specific State court, I now know I can tab to the State tab and select just the Alabama Court of Criminal Appeals

Also you brought up three good points in your comment.

1. I agree there shouldn't be a combined state and federal tab.

2. I also know that I often want to find precedents at the Circuit level and not be bothered with district court decisions, and I don't see how I'd do that.

I think we could include a button in the home tab in the circuit list that says, search district court cases or - include non-precedential material in a settings section. Not sure exactly where but I think that could filter on and off nicely.

3. I think a special or non-jurisdictional tab would be last on the page.

I hope that clarifies my confusing post before and look forward to your feedback on the update design and goals.

ps: Ideally, I would like to select the archive (recap/opinions/audio) from the search input bar as well as a second dropdown, but that is for another PR. @mlissner

[flooie]

Wanted to keep a record of changes as we continue to build this out.

1. We've updated the css for the tab bar.
2. Provided feedback from shortcuts in the tabs themselves as you select cases
3. Added more grouping to bankruptcy
4. Removed checkboxes as a method to select everything in a group in a tab panel
5. Added a checkbox in a tab to select the entire panel.

See new design and improved CSS for shortcuts page. Every tab now has an all|none option on the shortcut and in the tabs themselves. And feedback is smooth and easy to interpret.

TODO

Add check for including related federal content when selecting state cases (and related js) Fix css missing gray line at bottom left of tab panel Make select all checkboxes in tabs darker.
Fix Courts dropdown icon when dropdown open

[flooie]

@mlissner

After reflecting a bit on @johnhawkinson feedback - I think this design tweak makes a lot of sense.

Instead of a big toggle button an input box - when selected triggers the dropdown and then we can add search directly into the process.

Thoughts?

[flooie]

Here is another round of screenshots.

The search actually works quite well. Instant feedback delayed by 100 ms from typing to keep it from running sluggishly.

I still need to think through how exactly to keep checked results and not override them with a second search.

Feedback as always welcome @mlissner @brianwc @johnhawkinson

[mlissner]

That's an interesting direction. I worry that having two search inputs next to each other like this isn't a common design pattern, but maybe it's OK. I might have to feel it to know, but my first reaction is that it might be a bit confusing because the two input boxes have different purposes: One works on the page (via JS) and one works on the server (get HTTP GET).

Is it also too weird to have an input box that opens a huge drop down when you click in it? That defies some expectations. Like, if you were on the page and you wanted court checkboxes, would you think to click inside the input box? Probably not?

---

My thought was that if we want to do this before beta (which I don't actually think we do, but maybe it's really not that hard), then it should go inside the drop down somewhere. Either inside the shortcuts box, or above or below the tabs. Kind of like you had in an earlier revision?

What's this look like when the drop down is closed? What's the argument for having it so prominent?

---

Thinking outside the box (boy this is going to be a nasty pun for reasons you'll soon see; I'm sorry).....what if this worked like Google Docs when you want to change the title of a document? The way that works is that when you hover on the title of a document, a light gray box goes around it. When you click the title, the box becomes an input box populated with the title of the document. You change it, press enter, and the input box magically becomes the new title again.

Translating that metaphor to here, what you could do is:

• On page load: It looks like it did prior to this revision. A big bar across the screen containing the main search input box joined to a button that says Courts ▼, joined to the "Search" button.
• When you click the Courts drop down button, it opens the drop down and becomes the input box you see above.
• When you click off of it, it saves whatever little query you put in there, and it becomes the Courts drop down button again.

It's probably too hard to implement nicely, but I'm thinking outside the box here (sorry, not sorry, again, for the pun).

[mlissner]

One other thought here. One of the comments that @johnhawkinson made was to make the drop down scrollable instead of actual tabs. If we do that, we'll have a single page with all 700 checkboxes on it (plus the shortcuts at the top). Now imagine that there's a search input box at the top of that page, and that you start typing. As you do, courts could get checked and only filtered courts could be shown. So if you type "Alabama" the only courts that are checked or shown are the ones with that word in them.

[johnhawkinson]

I agree that the idea of having 2 adjacent text boxes is problematic. The input box pair remains, I think, too small from a Fitt's Law perspective, even if there's a way to get there without clicking. And the fact that there are 2 of them does not help.

One of the comments that @johnhawkinson made was to make the drop down scrollable instead of actual tabs.

Note that this suggestion had a second part, which was to not eliminate the tabs, but instead turn them into buttons that cause the scroll region to warp.

A related concern is that the window is now too big -- I cannot see the D.C. District when I try to type enough to select it. And because there's no large-scale dimming of other courts as I type, there's no cue that I need to look outside my visible scrolled region.

This supports the idea that as you type there should be some popup immediately below the typing region that gives you an indication of how it is narrowing, perhaps both in a scalar sense ("Narrowing from 500 courts to 50, keep typing, buddy!") or listing the possible courts that you might be intending (it's ok if the list is incomplete or occludes visibility of buttons beneath it, as long as the list is long), etc.

When I design things, I find it very easy to fall into the trap of picking something and iterating over it, but I think the better practice is to propose a bunch of alternatives and improve all of them and then pick the best one at the end of the process.

But I am good at suggesting time-wasting activities near the end of a process.

[flooie]

I'm going to post a longer write up later this afternoon of changes with screenshots and thought process.

Right now I wanted to get a (mostly) working version to test and get feedback. I say mostly, because the js should scroll the dropdown to the top of the page and freeze scrolling to help users. As that JS was buggy in the transfer to one page I've disabled the automatic scrolling and the freezing scroll, but see no issue in the docker image.

example.zip

@mlissner

[brianwc]

All those terminated courts in Federal Appellate are just going to confuse folks. If I click Fed. Appellate I expect to get 11 numbered circuits, the D.C. and Fed. Circuit, and SCOTUS, for a total of 14 courts, and if I get 115 as in this example, a normal person will just think the site is broken. Maybe an entire new section after "Special" should be added for "Historical/Inactive".

Somewhat similarly for State, if I click that now I get 254 courts. You're a victim of the breadth of your coverage. A normal researcher is expecting 50-100 courts from clicking that. It could help to give people a "Courts of Last Resort Only" option or even "COLR + Intermediate Appellate Only" but Industrial Commissions and Juvenile Courts are not what most people are expecting. I suppose you could also solve for that by weighting all these special courts/commissions less in search results, so that the courts of last resort and intermediate appellate courts are always going to rank higher and then it doesn't matter to the user so much that all this other stuff is there if they keep clicking Next. I just tend more towards thinking that material is specialty material that shouldn't be in any defaults. People that know they are looking for juvenile court stuff should go to a Special tab and select it (and if we add the ability to save one's favorite combos, then they only have to do it once.)

Maybe the "Shortcuts" should be repurposed to provide this smaller set of active primary courts and if you want AG Opinions then you have to scroll down to add them.

I don't think the Include Federal Content slider shortcut works yet. I clicked on Alabama, got 11 courts, then clicked on Include Federal and nothing changed.

The gray "Courts^" clicker that expands and contracts all this: I think "Advanced" might be better, but am not sure. Every other search engine uses that word, so I think that's what's familiar to people.

Then maybe this is not a use case to optimize for, but if I want the 9th Circuit, the N.D. Cal, the Cal. Supreme Court and the Cal Courts of Appeal (although I'd really rather get just the First District Court of Appeal), I can get there, but I have to do a lot of scrolling and clicking to create that (to me) natural combination. On the current site, the horizontal layout kept most of the text on the screen and each new tab, when clicked, could almost fit without scrolling. That's nice. I really hate scrolling.

On Mon, Apr 27, 2020 at 8:42 AM William Palin [email protected] wrote:

I'm going to post a longer write up later this afternoon of changes with screenshots and thought process.

Right now I wanted to get a (mostly) working version to test and get feedback. I say mostly, because the js should scroll the dropdown to the top of the page and freeze scrolling to help users. As that JS was buggy in the transfer to one page I've disabled the automatic scrolling and the freezing scroll, but see no issue in the docker image.

example.zip https://github.com/freelawproject/courtlistener/files/4540614/example.zip

@mlissner https://github.com/mlissner

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freelawproject/courtlistener/issues/1243#issuecomment-620066519, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACPKOPHKHDPPQW47UZTNKTROWRXTANCNFSM4LUNTEJA .

[johnhawkinson]

On the search box:

• It's really nice that the cursor focuses in it automatically so I can just start typing
• But even though I expected there to be such a box, my first reaction was to be upset that it wasn't there, because I could not find it. I'm not so sure about the wisdom of moving it to the bottom, I'd rather it stay at the top. And also be bigger and brighter so it's more prominent and Fittsy. [Fitted-out?]
• The behavior is unexpected if I type in "Mass" and then click Federal District. I expect it would show me everything (And I could see what's checked), not require me to manually clear the search box with DEL. Also, I expect one of the buttons (Clear all?) to cancel out the search, and that doesn't happen.

[brianwc]

I'm afraid I have to confirm John's comment. I didn't even notice the search box at the bottom until reading his comments here! Yikes!

Also, now that I've used it, if I type "Calif" and start getting all the Cali options, there's a heading "Ninth Circuit" but I can't actually click those words to add the Ninth Circuit. It'd be really helpful if we could add the Circuit a state is in after typing part of the state's name. Especially when you're like, "Which Circuit is ___ in? I think it's the 8th Circuit..."

On Mon, Apr 27, 2020 at 11:15 AM John Hawkinson [email protected] wrote:

On the search box:

• It's really nice that the cursor focuses in it automatically so I can just start typing
• But even though I expected there to be such a box, my first reaction was to be upset that it wasn't there, because I could not find it. I'm not so sure about the wisdom of moving it to the bottom, I'd rather it stay at the top. And also be bigger and brighter so it's more prominent and Fittsy. [Fitted-out?]
• The behavior is unexpected if I type in "Mass" and then click Federal District. I expect it would show me everything (And I could see what's checked), not require me to manually clear the search box with DEL. Also, I expect one of the buttons (Clear all?) to cancel out the search, and that doesn't happen.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freelawproject/courtlistener/issues/1243#issuecomment-620148902, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACPKOI5YAXE4DZXIPDNV33ROXDUXANCNFSM4LUNTEJA .

[mlissner]

Re the search box, I see what you guys mean. It sort of blends into what's behind. Maybe the background color needs to be bumped significantly. Red? Blue? I did notice though, and this is a bug regardless, @flooie:

• [x] The shadow for the popup ends before the find footer

The reason for the shadow is to make the court picker stand out against the background, so this could be part of the problem.

[mlissner]

Related:

• [x] Let's remove the 1px red line on the left when in mobile view:

[flooie]

Update.

The speed and ui changes are quite numerous. Attached is a zip of homepage. But changes have been made to the search results page as well.

1. First we've dove into blue;
2. Fixed search on the desktop;
3. Added a quick tip section at the bottom of the dropdown;

4. Added to the shortcuts is an "Include Federal" toggle that links state shortcuts to the federal circuits.
   

5. We've added a empty state screen when search provides no results.

6. Streamlined the look on mobile or small desktop.
   

7. Added more spacing for better touch points and removed search for mobile (for now).

8. Updated the search results by expanding the search bar to full width. And moved the icon on search button to the right side.

9. Finally and somewhat unrelated I changed the donation element and made it sticky while scrolling on the search page.

And as promised, Ive uploaded a zip of the current homepage for review and poking. example.zip

[mlissner]

@anseljh I wanted to highlight for you that there's a zip of the court picker in the issue above, but we've got some good solutions to the big problems that'll be ready fairly soon, so you might want to wait on it until then (assuming this was on your weekend list, right? :) )

[flooie]

@anseljh @mlissner

An update. Please see attached zip file testers and thank you again in advance.

Major changes:

1. Search,bottom nav bar dropped.
2. Filter/search added to nabber.
3. Federal appellate now hides historical courts by default
4. Fed. App revamped for collapsing

Minor Changes

1. Sidebar checkbox icons improved with css tweaks.
2. Navbar no longer jumps to special during searches.
3. Badges and all-none now sans serif
4. placeholder content changed for filtering input
5. Shortcuts now has a checkbox to check uncheck everything

Many other changes not addressed here.

example 3.zip

[anseljh]

Nice work, @flooie! Some comments:

1. I noticed that there aren't termination years for some courts that no longer exist. Example: "D. California" is now four districts.
2. The little state pictures are really nifty, but I'm not sure if they add value or distract. Worth some user testing?
3. Autocomplete by court name/abbreviation is coming along really nicely, but I think it's too sensitive to spaces, and possibly periods. For exmaple n.d.cal does not work, but n.d. cal does.
4. The fact that some courts are terminated does not really stand out to me. I suggest graying them out slightly or something. Perhaps also add a tooltip for when you hover a mouse cursor over them? Also I did not see any explanation that the year in parentheses means the court is terminated.
5. I think it would be good to use a slightly heaver font-weight for the state/territory/whatever names with courts under them. For example, this gets pretty squirrely to scan; it would be a lot easier with a slightly heavier font for the parent category names.

[mlissner]

We'll fix everything but number two, thanks @anseljh, but I'm judging all of these as non-blockers for release, so expect them in a phase two, after it's live.

[flooie]

Blockers

• [ ] Migrations
  • [ ] Update migration files for new courts- need more details
  • [ ] Add migration file for new courts - (ie shifting some FS to military category)
  • [ ] Add migration for errors in court table
  • [ ] Add migration to add termination dates to all needed courts
    • [ ] Move terminated courts to the end of court groupings
• [x] Update UI for missing tribal courts so they disappear properly from panel and sidebar
• [ ] Archive switcher:
  • [x] Trigger search results change by changing DB
  • [ ] Show proper archive when loading RECAP/OA/Opinion/etc db
• [ ] Tiny tweaks
  • [ ] Change placeholder text for input box
  • [ ] Remove serif from include federal
• [x] Add padding to bottom of main scroll page so sidebar works properly
• [x] Verify: Fix dropdown in search results page so sidebar shows properly
• [ ] Search query affects search results page outside dropdown. Limit scope.

Non-blockers

• [ ] Fix large margin in search bar
• [ ] Adjust size of buttons in mobile - not enough spacing when on mobile for actual search query
  • Solution: Hide search button, use "university" or "landmark" icon for courts
• [ ] Make court filter less sensitive to spaces
• [ ] Gray or tooltip terminated courts to demote them further
• [ ] Bigger font for state names in panel

[mlissner]

See also #1271