Filterable list pages

cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.

https://cfpb.github.io/design-manual/

Creative Commons Zero v1.0 Universal

98 stars 71 forks source link

Filterable list pages #420

Closed ajbush closed 8 years ago

ajbush commented 8 years ago

What is it?

V1 is looking to add its atomic element documentation to the DM for the use of other teams. This documentation includes page templates as well.

This specific page will live in the "global elements" section of the updated DM.

nataliafitzgerald commented 8 years ago

@ajbush @duelj The design looks good! Just a few copy edits:

In this sentence, add a comma after "documents": Filterable list page types are used to house searchable lists of articles, documents, or other resources and publications.
Change to sentence case: "Sublanding page with Filterable List" to "Sublanding page with filterable list"
We are inconsistent in how we refer to certain terms: "sub-landing" or "sublanding"
In this sentence we should use consistent casing: "Required elements: filter control panel, list of items (displayed as post preview items) and pagination."

marteki commented 8 years ago

Reviewing this for UX in @schaferjh's stead. I'm focusing on usability, minor content tweaks, and ease of explanation.

Suggestions:

Add a link or explanation in the intro paragraph for what a "document detail" page is.
The second bullet point under "When to use" feels like less of a bullet point phrase, and doesn't answer the question of when this should be used. It should maybe be its own paragraph after the bullet point list.
Move list of page components to be included out of the skinny sidebar. It's harder to read than if it was in the main content flow under "When to use".
The second bullet point of the "Content guidelines" section is confusing, and possibly needs grammar work? I can't understand what it is describing.

As I've said elsewhere and communicated in different design working sessions: I really like the visualization of the major breakpoints, and that y'all included a listing of the possible page components. 😄

schaferjh commented 8 years ago

@ajbush Two tweaks needed:

Change the intro paragraph to add a paragraph break and change the final sentence:

Filterable list page types are used to house searchable lists of articles, documents, or other resources and publications.

Most filterable list pages use the browse page template layout, though in rare cases they can be housed on a sublanding page template layout. The filterable list itself is composed of post preview components that link to individual document detail pages.

The link in the style paragraph doesn't currently lead anywhere.

ajbush commented 8 years ago

Updated!

schaferjh commented 8 years ago

@ajbush great, ready to publish!