Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How should we handle searching? #17

Open
melchoyce opened this issue Sep 4, 2019 · 4 comments

Comments

@melchoyce
Copy link
Collaborator

commented Sep 4, 2019

How should we handle searching sections of the block directory?

I have a couple ideas...

Search in Tabs

image

Pros

Cons

  • Since we'd be opening a new page, you potentially lose the context of your search.
  • Some sections might not need recommendations, like Manage and Reusable, so those pages would end up being empty.
  • Not every page has a filter bar.

Search in Header

image

Pros

  • Matches the upload flow I'm currently envisioning for the Block Directory, where pressing "search" would toggle open a search form that shows up at the top of the page content.
  • Will be in the same spot on every page.

Cons

  • The header could start to feel busy, especially on the Reusable Blocks page.
  • If searching doesn't open a new page, then we can't show any sort of recommendations.

Inline Search

image

Pros

  • Matches the current list table search experience.
  • Directly inline with your current context.
  • Search would filter list table results immediately.

Cons

  • There isn't always a space to add the search, so the layout could end up feeling awkward with search floating above the list table.
  • If searching doesn't open a new page, then we can't show any sort of recommendations.
  • Since search would filter the list table results, you might not notice anything has changed.
  • Not every page has a list table, so the search bar would be in a different position on those pages.
@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 6, 2019

One more idea that came up in this week's design chat:

Inline in the Tab Bar

image

Pros

  • Always visible
  • Natural placement

Cons

  • Not all pages have a filter bar
  • The filter bars that do exist are quickly filling up
@mapk

This comment has been minimized.

Copy link

commented Sep 6, 2019

While it may not look especially beautiful, I'm preferable to the "Inline in the Tab Bar" approach. It provides the quick functionality that I'd like as a user. And it also provides a fairly consistent placement of the search that wouldn't change from page to page. As @enriquesanchez commented, would the search, in this placement search across all tabs, or just the tab selected?

Maybe the search input doesn't need to be so wide?

My second preference is the "Inline Search" above the table. I would assume this search field would search within the selected tab's table only. I do like how it aligns with the bulk actions too! But this placement wouldn't work as well on the browse pages.

@melchoyce

This comment has been minimized.

Copy link
Collaborator Author

commented Sep 6, 2019

Okay, explored the header & search bar within the tab bar options more:

Header

blockdirectory-search-header

  1. Click on "Search" to toggle open a search bar in the body of the page you're currently on.
  2. Type a search term and press enter to search.
  3. Search results open in a new page, with the search bar at the top.

Tab Bar

blockdirectory-search-tabbar

  1. Search bar lives inside the tab bar, which will now appear on every page except for the "About Blocks" overview landing page.
  2. Type a search term and press enter/click the button to search.
  3. Search results open in a new page.
@kjellr

This comment has been minimized.

Copy link

commented Sep 9, 2019

The Header option actually feels odd to me now that I'm seeing it there. A couple things stand out:

  • It seems weird to have the actual search bar appear so far away from the button that's been pressed.
  • The persistent active state makes it seem like those buttons up there are functioning like a second, higher-level tab bar. I'd thought of those as just one-off click buttons, so that seems a little unexpected.

That may all be irrelevant though, because the tab bar option feels really natural to me. 😄 It appears in an expected location, and I like having the search field visible by default. My only suggestion would be to see if we can get a non-attached button working. The drop shadow seems a little odd next to the text field that has no drop shadow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.