Open flooie opened 4 years ago
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.
You might consider identifying some common user journeys and ensuring that the experience (especially # of clicks) is comparable or better. Examples:
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...
@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.
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 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. (!!!!)
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
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
@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?
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
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:
Courts ▼
, joined to the "Search" button. Courts
drop down button, it opens the drop down and becomes the input box you see above. 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).
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.
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.
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.
@mlissner
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 notifications@github.com 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 .
On the search box:
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 notifications@github.com 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 .
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:
The reason for the shadow is to make the court picker stand out against the background, so this could be part of the problem.
Related:
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.
Added to the shortcuts is an "Include Federal" toggle that links state shortcuts to the federal circuits.
We've added a empty state screen when search provides no results.
Streamlined the look on mobile or small desktop.
Added more spacing for better touch points and removed search for mobile (for now).
Updated the search results by expanding the search bar to full width. And moved the icon on search button to the right side.
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
@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? :) )
@anseljh @mlissner
An update. Please see attached zip file testers and thank you again in advance.
Major changes:
Minor Changes
Many other changes not addressed here.
Nice work, @flooie! Some comments:
n.d.cal
does not work, but n.d. cal
does.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.
Blockers
Non-blockers
See also #1271
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.