Search Page: Redesign "Sort" options UI

[mekarpeles]

The objective of this issue is to take the long list of sort options in the screenshot (a) below and organize them in a details dropdown styled according to the designs in (b):

(a) See the highlighted area:

(b) Proposed designs:

Description, Patron Story

Feedback Questions

Decisions

Stakeholders

[Hitro147]

Hey there! I'm excited about contributing to open source and am pretty new here, I would love to help out with the search page changes. Could you kindly provide a little more detail on what changes you need? Thanks!

[mheiman]

@Hitro147 this needs some design proposals before any coding can be done. If you would like to review the current sorting interface and mock up a suggestion for how to make them clearer, more compact, and easily extendable in the future, please do!

[Hitro147]

When considering design improvements for the sort options UI on the "Search Books" page. Here are a few suggestions I came up for design improvements:

1. Dropdown Menu for Sort Options:

• Consolidate the sort options into a dropdown menu to save space and reduce visual clutter. A dropdown can also make it easier to add more sorting methods in the future without impacting the overall design.

2. Icons for Sort Types:

• Use intuitive icons next to each sort option to visually distinguish them. For example, a clock for "Most Recent" or a star for "Top Rated." This can make the interface more user-friendly, especially for quick visual scanning.
• Also, we could use this to have the most commonly used sorting options and the less commonly used ones can be in a separate dropdown.

Let me know if these design options align with Openlibrary's design aesthetic and which of these you prefer and I'll start on the mockup :)

[kylie-kiaying]

Hi @mheiman I came up with some possible design mockups for this sort option. Would appreciate any feedback on the design!

Figma Mockups

[mheiman]

Thanks, @kylie-kiaying ! Those are nice redesigns of the current interface elements, but we need to do a deeper restructuring.

Some of the issues to consider:

• Most Recent and First Published are different direction sorts of the same data (which the naming obscures), but we don't provide a way to reverse the other sorts.
• We currently have a Work Title sort in beta, and we will probably want to add other sorts in the future, so any interface needs to grow elegantly.
• The Reading Log sort currently pops up a secondary menu (as you would have discovered if you tested the existing interface) which is more than a little weird. Any new solution needs to handle that better.

[mekarpeles]

@kylie-kiaying way to go, thank you for putting so much effort into these figma mockups. They looks great.

P.S. to respect your time, also sending you an optional slack invitation to our design channel where we can discuss further, should you wish to participate there!

@mheiman I do think, in the interest of making decisions and pushing forward, that we should try to converge on overall design -- especially since this issue is flagged as Design Feedback.

OCLC does something like this:
https://files.slack.com/files-pri/T03ST9K7K-F06M7N9A469/image.png

I personally think this design is a great place to start and something we can move forward with, even if additional thought may need be required for structuring the contents in the dropdown.

[mekarpeles]

@kylie-kiaying did you want to take the lead on implementing these designs? Or would you like us to find someone to do the engineering/implementation portion?

[aarasawa]

I would like to try implementing the design that @kylie-kiaying provided. If they would also like to work on it together that is cool too.

[mekarpeles]

@aarasawa I'd love your help implementing these designs if you're open to it, thank you!

I've also sent you an invite to slack where we can hopefully help answer any other questions you have!

[aarasawa]

Hi @mekarpeles thank you for assigning this to me, I am excited to contribute what I can.

Also, I seem to still be missing the slack invite in my inbox, do you think you could send another email?

[mekarpeles]

@aarasawa, resent to your gmail! :)