Design improvements for CourtListener docket page

[johnhawkinson]

There is no question that CL docket pages are prettier than IA docket pages. But unfortunately in that prettiness, there are some functional regressions with respect to design.

The biggest one, for me, is that it is much much harder to quickly see which documents are available in the cache.

Example, from the end of Rombot v. Souza (formerly Rombot v. Moniz).

IA page http://ia601500.us.archive.org/35/items/gov.uscourts.mad.191474/gov.uscourts.mad.191474.docket.html:

Document 52 has a blue hyperlink and 50 and 51 do not, so it is clear to the viewer at a quick glance that 52 is available. It's not pretty, and it's verbose, but it is quick.

CL page https://www.courtlistener.com/docket/6159413/rombot-v-souza/:

Everything has a big blue box, both available documents and unavailable ones. Because a little experience with the page design encourages looking to the right, it is easy to miss the fact that:

On the left, "Main Document" becomes a hyperlink. It's not a terribly desirable hyperlink to follow (because it takes you to a text version of documents that generally don't render well in that form), and it is hard to notice, but it is there.

---

I am not sure what kind of design changes should happen. We should think about some mock-ups and carefully talk about them, let's not just implement something and then take comment. Doing that means commenters are biased in favor of supporting the proposed implementation because they don't want to waste work.

• But I would suggest removing the blue box from the "Buy on PACER" button. (Does anyone ever use that button? I know I never do.) It could be another color (hopefully far less saturated, like a gray)

• I am uncomfortable with how the CL reports shows subdocuments in hierarchy rather than as peers with their parent document. I need to illustrate this and will do so in a subsequent comment.

• The upload time is hidden behind a hover/mouseover element. This is not discoverable and also slow and also hard to use for comparisons or screenshots. I do not like green eggs and ham.

It might be good to try to flesh out this list a little more completely before iterating on design mock-ups.

[mlissner]

Good suggestions. It's pretty easy to do white buttons with our framework. That's a super simple change we could put in place for the "Buy on PACER" buttons.

[mlissner]

What's your reaction to the new white links, @johnhawkinson ?

I need to illustrate this and will do so in a subsequent comment.

I'd love to see this. Could be very helpful.

[johnhawkinson]

What's your reaction to the new white links, @johnhawkinson ?

Yes, this is much much better:

I need to illustrate this and will do so in a subsequent comment.

I'd love to see this. Could be very helpful.

Yeah, gotta do it.

[mlissner]

Yes, this is much much better

One iteration at a time, baby. Inch by inch.

[johnhawkinson]

We should think about some mock-ups and carefully talk about them, le

One of the law-hanging fruit is navigation. A relatively common pattern for me is I know I want to see some numbered document (where there are several hundred), and I want to page through documents.

E.g., suppose I want to see the docket report surrounding doc. 351 in Waymo v. Uber. I have the docket page bookmarked, so I go there. Here's what I see at the top:

1. If I'm willing to think about it, I could "calculate" (if we call it that) that I want page 4. (1: 1-100; 2: 101-200; 3: 201-300; 4: 301-400). That's not super-friendly, but even if I knew that, there's no direct page navigation available. ⇒ Add direct page navigation box at top.

2. If I was willing to restrict viewing, I could punch in 301–400 in the Documents fields (except I can't enter "301-400" in the first, I actually have to hit "301" TAB "400,") which is annoying. ⇒ Add range parsing support to id_entry_gte field

3. But I don't want to restrict viewing -- because after I get to doc 351, I read it and find

ORDER of USCA as to 213 Notice of Appeal to the Federal Circuit, filed by Anthony Levandowski (alsS, COURT STAFF) (Filed on 4/25/2017) (Entered: 05/04/2017)

4. By the way, in PACER the 213 would be a link, and it'd even have a cool [R] RECAP logo if it was available. ⇒ Document links should be rendered as links inside CL docket pages. There's some reasonable question about where it should go (to the docket page centered on that item? to the document page? to the pdf? Discuss!)

5. But next, of course I want to page back to docket 213 to see what it is. But if I have limited the view to 301-400, I have no page navigation.

So scratch 2. What I want to do is navigate page by page, because while it may not be the most efficient, it's dead simple. But the page navigation is at the bottom of the page, a hundred entries later. Like this:

I want to use it at the top. ⇒ Give page navigation choices at the top of the page, not just the bottom.

6. Also the page navigation doesn't really meet modern standards. Ideally there would be one of these dealios:

but I'm not a web developer, I don't know who has the best or easiest one. Seems odd that doesn't have a direct input box to type in the page number, either…

⇒ Some kind of better pagination navigation widget

7. But hey, really, when I'm looking at 351, I don't actually want to scroll all the way to the top or the bottom. But actually, given my screen real estate, there's a great available option. Here's how the page actually looks in my browser, note the gray bars on the sides:

So the obvious thing is to take those, which I've marked visually here:

and ⇒ make the grey bars huge buttons for PAGE-BACK and PAGE-FORWARD.

You could style them so they look like buttons, but it doesn't matter. It could be a cool trick only for those-in-the-know. Of course, you can't depend on people having enough screen real estate to get those bars, but when they do have it, make them useful! And Holy Fitt's Law, Batman!.

OK, I think I finally made it to the document I wanted to read. This concludes this (fairly narrow) usability test exercise.

[johnhawkinson]

Today I ran a Gedankinexperiment focus group and learned that one of the reasons the PACER docket report page looks better than the CL page is it uses a serifed font.

[johnhawkinson]

Yet another observation (I'll just keep collecting them). In the IA page, it's easy to answer the question of "What documents were uploaded yesterday?" Just search for yesterday's date in the docket page or the parent directory.

But in CL, not so much. I can find things filed yesterday, but not what was uploaded yesterday. Yes, I suppose I could write a js bookmarklet. Maybe I should be more facile at doing so — if I could do it under 60 seconds I guess that would be worth it?

[johnhawkinson]

Yet another observation (I'll just keep collecting them).

Design review should include a review of peer designs pacermonitor/pacerpro/plainsite/justia/whatever. For instance compare

https://www.pacermonitor.com/public/case/23282996/Keeper_Security,_Incv_Goodin_et_al https://www.courtlistener.com/docket/6244750/keeper-security-incv-goodin/

&c.

[mlissner]

PacerPro is where those modals came from, I think! But setting that aside, thanks for this thread. I may not say much here, but everything you write will certainly be weighed (and discussed) when the time comes.

[johnhawkinson]

This issue doesn't mention modal dialogs.

[johnhawkinson]

CL pages split the date across two lines for dates after the 9th of the month. This is bogus. It should be 1 line all the time. Example:

[johnhawkinson]

It is the norm that docket entries display "Unknown document description" because this information is only available from "attachment pages" (and RSS?), and many document don't have attachment pages.

I would suggest it makes no sense to display "Unknown document description" in those cases -- it just adds clutter and nobody benefits from it. Sure, display it if it's available, but most of the time it won't be.

There is a similar argument to be made about "Main Document" but I will reserve on that at this time and consider making it in the future.

[johnhawkinson]

The IA RECAP pages use ordinary text anchor links to documents. That means we get the full-feature of browser link handling, including color changes for links that are already downloaded:

But CL tries to be fancy and uses the blue buttons. Browser link coloring features therefore don't work.

Using the color of a link as a document management system isn't great, but it is sure helpful for saying "Hrmm, have I probably read this document yet?" and there isn't a similarly lightweight solution that "just works" for everyone without doing special setup and constant management maintenance.

This suggests that CL should maybe drop the snazzy blue button, or in the alternative offer a plain text href anchor too.

Also mumble mumble css, stylish mumble mumble.

[mlissner]

Note that this intersects with: https://github.com/freelawproject/courtlistener/issues/1368