Search bar styling - Githubissues

jonashaag commented 3 years ago

Just installed paperless-ng using the Docker method. It works fine, however, search seems to only apply to the document title? If I type something into the "Filter by" search bar it finds 0 results even though the word I've typed in is one of the documents' "Content" tab.

jonashaag commented 3 years ago

kevintde commented 3 years ago

Hi jonashaag, the Full-Text-Search is a bit hidden. There is a Full-Text-Search on the top of the page . full-search

In my example i searched for electronics.

jonashaag commented 3 years ago

Oh... didn't see that at all. Ignored it because it looked like it's part of the page header.

Maybe a simple color change can make it more visible.

jonaswinkler commented 3 years ago

hm, it even says "Search for documents" when nothing is typed in there.

jonashaag commented 3 years ago

That's how it shows for me. Must be the most subtle search bar I've ever seen, for a tool that's supposed to be search centered.

jonaswinkler commented 3 years ago

Do you have any advice on how to make it more visible?

jonashaag commented 3 years ago

I'm a terrible designer. How about something like that?

Search icon (used tag icon for this example)
Grayish border
Lighter background (0.1 -> 0.2)
More text

jonaswinkler commented 3 years ago

I'm a terrible designer.

Me too. That's why this is an issue in the first place :)

@shamoon, whats your take on this?

jonashaag commented 3 years ago

I think the main reason I didn't find the search bar is because it's a very unusual position: sort-of left aligned and covering almost the entire width of screen. Usually search bars are right-aligned, much smaller, and have different color than the header

ghaberek commented 3 years ago

I'm a terrible designer. How about something like that?
* Search icon (used tag icon for this example)
* Grayish border
* Lighter background (`0.1` -> `0.2`)
* More text

I think this is good, and I'd also recommend:

Add rounded corners so it looks the same as other fields and buttons.
Update the icon to be a magnifying glass (the de facto "search" icon).
Update the placeholder text to say Search for documents instead of Search or Find documents.
Reduce the margins in a bit more to make a better distinction between the field background and the header background.
Make it the same height as the Filter by field as well? On my screen this is 38px for Search and 31px for Filter by.
Show the current user on the right of the header to bring in the right margin of Search field from the edge of the page.
Make the current user display a menu and move Admin and Logout links here.

shamoon commented 3 years ago

I suppose I didn’t have as much trouble as others but I agree it’s subtle. I think there are actually two issues here:

Current search bar design is subtle
The other thing is that because the 'filter bar' doesnt include searching text it might throw people off, I think that's what happened to OP.

The first one is straightforward, I ageee with much of the suggestions here, I think there are many ways to improve this. The second one is a bit more of a discussion and would also require reworking some of the app. I think it would be reasonable to just tackle the first for now, though it probably would be useful to be able to filter search results (and vice versa so presumably unify them).

As you know by now @jonaswinkler I'd enjoy working on any / all of this once we're decided.

jonaswinkler commented 3 years ago

though it probably would be useful to be able to filter search results (and vice versa so presumably unify them).

Not going to happen anytime soon. When I added the full text search a couple months ago I actually tried this and came to the following conclusions.

Both systems use a completely different approach internally to retrieve documents.
Search results are always sorted by score, so the other sorting options won't have any effect here.
Filtering works differently.
Search results provide different data that's not available when querying the database.
Pagination works differently.

This would be a huge undertaking, since all this implies that we can't really use all the handy tools that django rest framework is offering.

As you know by now @jonaswinkler I'd enjoy working on any / all of this once we're decided.

Go ahead, make it beautiful. I'm glad you're around to fix up my messy css stuff.

shamoon commented 3 years ago

I figured merging them was much bigger than it might seem. Great, will work on the search bar and get back to the group.

shamoon commented 3 years ago

One question I wanted to ask the group about. The size of the search will definitely shrink in width to make it more visible, which potentially makes the entire top bar much less useful. Distilling other suggestions / logical choices:

We can just drop the right half of the top navbar completely and move the main document area up by those ~50px. This would mean moving the search perhaps to the sidebar.
We can add other stuff to the navbar to keep it useful. The most obvious stuff to go here, as someone suggested, is a user menu under which we can put "Logout" and / or Settings and / or Admin.

There are pros / cons to either but I think the second option makes the most sense, in particular I think the paradigm of "user dropdown in the top right corner" is so well-known to people it will feel familiar. You good with that @jonaswinkler ?

jonaswinkler commented 3 years ago

Actually, I think both solutions sound promsing.

shamoon commented 3 years ago

This is where Im at currently, #.2 from above seems to work best, otherwise sidebar gets cramped.

Nothing crazy here, I think its just about simplifying some visual elements e.g. dark background on brand, adding more space, highlighting the search but not making it distracting. Mobile works great, I debated hiding search under the dropdown but left it like this because I think its actually the easiest way to get to docs on a mobile device.

Welcome any / all feedback, of course

jonashaag commented 3 years ago

That's SO MUCH better, thanks! <3

The only criticism I have is that on desktop the left-hand border of the search bar is not aligned with any of the other visual lines (eg. the sidebar right-hand border or the Dashboard "D")

shamoon commented 3 years ago

Heh I noticed that too and fixed but was too lazy to take new screenshots. Sharp eyes! 👀

ghaberek commented 3 years ago

Welcome any / all feedback, of course

That looks fantastic! Only thing I would add maybe is the user name next to the icon for the menu.

shamoon commented 3 years ago

Thanks!

Yea I debated that but in the end felt it was clutter and putting it inside the actual dropdown. There is room to show it on desktop (and hide on mobile) but I couldn’t really justify why it would actually be important to see at the top level... Unless people feel strongly?

ghaberek commented 3 years ago

There is room to show it on desktop (and hide on mobile) but I couldn’t really justify why it would actually be important to see at the top level... Unless people feel strongly?

Personally when designing user interfaces I try to use labels as often as possible to avoid confusion and ambiguity.

https://uxdesign.cc/when-should-i-be-using-icons-63e7448202c4

"When in doubt, always remember this: the best icon is a text label."

shamoon commented 3 years ago

Certainly true but this is such a convention that I wasnt sure its necessary. I certainly dont feel strongly about it so Im happy to change, but ya know:

Github:

Gmail:

Yelp:

Etsy:

I realize there are many sites that do, seems like a toss-up!

shamoon commented 3 years ago

So:

jonashaag commented 3 years ago

Thanks everyone ❤️

jonaswinkler / paperless-ng

Search bar styling #217