Search Page: Redesign "Sort" options UI

internetarchive / openlibrary

One webpage for every book ever published!

https://openlibrary.org

GNU Affero General Public License v3.0

4.99k stars 1.25k forks source link

Search Page: Redesign "Sort" options UI #8829

Open mekarpeles opened 4 months ago

mekarpeles commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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:

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.
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 commented 4 months ago

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

Figma Mockups

mheiman commented 4 months ago

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 commented 4 months ago

@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 commented 3 months ago

@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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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 commented 1 month ago

@aarasawa, resent to your gmail! :)