inventaire / inventaire-client

webapp coupled to the inventaire server :books:
https://inventaire.io
47 stars 16 forks source link

Consistent header for all works/editions lists #477

Open nclm opened 5 months ago

nclm commented 5 months ago

There are a lot of book lists in Inventaire, whether they are editions or works: they are on your profile, on a series page, on an author page, etc.

But they all have very different headers and options. I often find myself missing the options of one in the list of another, it’s a little confusing, and the reorder and slightly different layout of each is weird. I believe that having a consistent UI would be great here. This is sort of a continuation of the ideas in #427.

Currently we have…

On profiles

One bar with:

And NO sorting options or number of books for instance.

On series

First bar with:

Second bar with:

On authors First bar with:

Second bar with:

A suggestion

For instance what we could have is:

One main bar with:

A second optional filter bar that appears when clicking on “Filters” with:

This would be consistent across profiles, authors, series, collections, publishers, etc. I also suggest it could be use for friends and groups (which for now have a completely different interface). And importantly, it could also be used on work pages for listing editions! This would mean slightly reorganising that page so that the edition lists is not in the upper right corner but actually full width, swapped with the inventory/transaction section.

I believe that this would improve the usability everywhere: only one way to list books, with all the same options where they make sense. Of course there might be some local differences in the lists themselves, such as displaying inventory-specific elements on profiles, but the main wrapper would be the same.

nclm commented 5 months ago

And a small mockup for illustrating the idea:

Screen Shot 2024-02-10 at 20 07 38

Naively put together copy pasting bits of existing UI in dev tools, so not an exact design to follow :)

First the list title to make it clear what these books are. It can be “Works” on an author or series page, it can be “Editions” on a work page. On profiles it might say “Inventory” or “Books in this shelf”, on groups “Books in the group”, below a map ”Books nearby”. And a number of items to have an idea of the list extend.

Then there is the search bar. Wider and prominent, unmissable (unlike now where it comes after filters), so that it’s comes in handy when needed (presumably often).

Just next to it, there is the filter switch, complementing the search. Here it has been selected already, and we can see that there is one filter on.

(Follows an hypothetical batch edit button, out of this scope)

Finally, sorting (Alphabetically, Popularity, Publication year… to which we would add “Date added” for profiles and groups. There could also be “Random” for chance discovery! And there is the ”Number of items in your network” that is currently used on editions listings) and display (List/Table could be merged unless Table is really made into a table using columns for comparison, or made into Large List and Compact List to cover current use cases, as well as Grid and Cascade that are similar but a little different, and they could be either merged into the best of each, or kept different).

And the idea is that would be it as a default view! One bar with the essentials. But of course, if you click the filter switch you get… the filter bar.

On the bar, all the relevant filters depending on what data is available: author (co-author on author pages), other types of authors when relevant, genre, subject, publication year (if relevant when there is a date sort as well), language (for listing editions on works, but would also be a great addition on profiles, groups and maps! and when listing works, could be turned into “original language”).

Filters are present if there are 2 or more different values for one of these variables across the list. We could also imagine in the future a way to add and remove filters by selecting them in a list among a large selection of available properties. But I think this would be a second stage.

Let me know what you think :)