Better UI

[ghost]

I tried out searx cuase duckduckgo isn't open source and I only wanna use open source software,but the problem is that searx's ui doesn't look good,I tried all the themes,but it looks like an ancient search engine.

[ghost]

If you compare Penguin at Duckduckgo and Penguin at Searx,then you see a couple of things that in my opinion look better in Duckduckgo,here are the things from "general" I want:
1.You can enable/disable safe search at the top.
2.You can select from which country you search at the top. (I know you can do it in searx too,but not it's not at the same location as duckduckgo)
3.You can select the time the websites are listed from at the top. (you can't select a custom date in searx for that and it isn't at the same location as duckduckgo)
4.The search bar at the top is rounder and longer like all other boxes.
5.The wikipedia article is listed in a big round box at the top and is longer and rounder and it has a wikipedia photo (I actually like it more if the wikipedia article is at the right,but it would be cool if it supports the image)
6.The Url boxes are bigger and the fonts are nicer and the fonts are bigger and there is th logo of the site left of the url.
7.Being able to set a different order,I would like "General>Images>Videos>Audio>News>Maps>Files>Science>Social Media",but it would be cool to set for yourself what you want in the settings.
8.Being able to set that images of the site will be displayed at the right.
9.Being able to search for topics for the things you searched. (Why the hack are there results for "Penguin" under the "military" topic? lol) and the if you click on the topic,it scrolls to the box and if you click on the box it will search for that search term in the box.

Now that is all I would like for "general" in Searx,now the images things I like more in Duckduckgo,here is how it looks in duckduckgo and here how it looks in Searx.
Here the features from DuckduckGO I want in Searx:
1.That there are only images not black boxes with text.
2.That they don't have this tiny little black border.
3.That the photos fill the whole page and that they are bigger and that there is the name of the site in a beautiful font under the pictures.
4.color search.
5.Being able to search for specific resolution (Duckduckgo doesn't have that either but that would make Searx very cool)
6.Being able to search for types.
7.Being able to enable safe search at the top.
8.If you click on a image then you get similar photos and it should have the little description and site name like in the screenshot and it should get bigger if you click on the image (that feature is from google and not duckduckgo)
9.Similar topics for the thing you search. (this feature is from google too)
10.Reverse image search support for the images you clicked on (no browser I know has that,but it would make Searx really futuristic,but I don't know any good foss reverse image search)

"Video" for Duckduckgo and Searx:
1.That the thumbnails will be showed
2.That the thumbnails will be showed in a 16:9 box cause no video uses 4:3 thumbnails.
3.That all the videos fill the whole screen
4.That all the videos don't have their big own boxes normally,but only if you click once on them,then it opens a bigger manu (similar to the images menu,with all the info and a bigger thumbnail and similar videos).
5.That it shows the platform name with icon and the title in the "little mode" (I mean if you not clicked on them)
6.That all videos are in round nice looking boxes.
7.That you can open the thumbnail in the high resolution (no browser I know has this feature,but it would be cool).

Now,how "news" look like for Duckduckgo and Searx.
What I want is all the things I said for "general".

For "Maps", Duckduckgo and Searx.
What I would like,would be that this function will be completely redesigned,so that you can select a maps and earth service and look at the map/earth with them and being able to switch between them.

Now that are all the features I want from Duckduckgo and Google to Searx,but I also have some ui features from Searx that could be enhanced:

For "files",all the things I want from "general" would be cool there too (so things like bigger boxes etc.)

For "Science",all the things from "general".

For "Social Media",I don't know,I can't say something about that,I just get that error if I search for a youtuber or something.

For "Music",in Searx,it looks like this:
1.That the thumbnail isn't dark,but there is the actual thumbnail and if it doesn't work then no thumbnail will be showed.
2.That it fills the whole page and looks similar to the things I described in "Images" and "Videos".

So now that's all I would consider to look like a futuristic ui.

[seniorm0ment]

I would be +1 to a theme option based around how DuckDuckGo looks.

I also have suggested in the past user side appearance customization similar to how DuckDuckGo has. Font, font size, page width, center alignment, background color/background image, header behavior, header color, results colors, favicons, page break numbers, page break lines. The ability to add spaces between the tabs (General. files, images, etc)

I think the ability for the user to customize in detail to their liking, without relying on the instance host to do so can create a personalized experience for them. I don't feel just having themes is enough.

I do think some attempts at improving responsiveness would help immensely. Buttons feel flat and hovering over them feels doesn't feel like it. Maybe some highlighting when hovering over them. Some light animations.

And the ability to store whatever can be in a way that makes it easy to copy to other instances, like thr search url.

[mattcoxonline]

I think this thread topic is perfectly valid. However, describing exactly how to improve something aesthetic is pretty tough sometimes, but I think an easy way to do this is to create a simple design framework for your theme.

This is basically a set of font styles, font sizes, colour values, font weights, open source icon library etc. And also turning various elements into repeatable components with considered padding, margins, etc. Ensuring things match accessibility requirements.

I just spent 30 mins drawing up something new, with a layout based on the existing oscar theme, and whilst it still needs a lot of work, I think it's closer to what @Toadfield and @grravity are looking for.

Desktop view

Mobile View

You should definitely find a designer (or multiple) that is willing to contribute to the project; to create a style guide for searx and prototypes of how new and existing features could work.

[unixfox]

@mattcoxonline Nice mockup! I wish we had some web designers working voluntarily for the project but those are hard to find, just like developers. If anyone knows one we would gladly accept a revamp of the oscar theme.

[seniorm0ment]

What about allowing users to customize via css? As in just offer a css box for customization in preferences.

[dalf]

Related to #226

[return42]

@unixfox what do you think, should we better move this issue into discussions? I mean here are mentioned many things worth to consider, but not a real issue which can be fixed.

[unixfox]

Well it's a good feature request and from my point of view I still want to revamp of the Searx interface one day. So I would like to keep it as an issue.

[BurlyMynah]

I would also like to suggest my version of the redesign. Made it based on two themes, probably more on the basis of a simple theme.
I think in the end we should keep just one theme with the ability to customize some elements. If we want to get new users, we need to keep it simple. But first, improve ui/ux.

I have made it more similar to popular search engines to not scare new users and be more user friendly. But also kept all the features. The only thing I removed was the advance settings button from the main page. It duplicates buttons and tabs from the results page and to my mind only confuses users.
I used the same open source icons as @mattcoxonline :)

You can check out interactive prototypes here (you can click and drag):
For desktop https://www.figma.com/proto/AhiYjWXBXMSTunOrVr1Zrk/SearX-redesign?node-id=2%3A433&scaling=min-zoom
For mobile https://www.figma.com/proto/AhiYjWXBXMSTunOrVr1Zrk/SearX-redesign?node-id=69%3A1&scaling=min-zoom

It still needs work, but even this will solve many problems.
I can voluntarily help developers with a major redesign!

Update: I've added some new pages and edited a few things.
Also actually like @grravity idea of keeping the "legacy" theme

Mobile light theme

Mobile dark theme

Desktop light theme

Desktop dark theme

[seniorm0ment]

Looks nice, I personally still like how DuckDuckGo does things where they give the end user a massive amount of customization options, while also offering them premade themes.

I would like to add no matter which direction SearX takes though, I do hope we still maintain an option for a "legacy" theme.

[ghost]

@BurlyMynah How does the image and video page look like with your theme?
And also,what's the name of it?
Cause I wanna use it.

[BurlyMynah]

@Toadfield This is a concept, if developers want to implement it, I would be happy to do the rest of the pages.

[LeslyeCream]

How about a design like that? It's the one I'm currently using

[asciimoo]

Great suggestions! I personally prefer the mockup by @mattcoxonline, it is clean, minimal and well structured. I'd love to see an up-to-date the UI, but I am really untalented in UI/aesthetic topics, so I'd appreciate any help in the implementation. How should we proceed? What about a poll with the different mockups to see which one is preferred by the community?

[seniorm0ment]

Could they not just be added as themes?

[aleex5]

Great suggestions! I personally prefer the mockup by @mattcoxonline, it is clean, minimal and well structured. I'd love to see an up-to-date the UI, but I am really untalented in UI/aesthetic topics, so I'd appreciate any help in the implementation. How should we proceed? What about a poll with the different mockups to see which one is preferred by the community?

more concepts should be presented, the 2 shown are good, but not optimal.

[fredster33]

Favicon support for search results would be awesome to improve the UI :)

[mtimofiiv]

Favicon support for search results would be awesome to improve the UI :)

I'd like to volunteer Icon Horse for this, I built it for this very purpose.

[fredster33]

Hmm. I know one of the major criticisms of DuckDuckGo was how they retrieved favicons, (querying a server, potentially bad for privacy).

[seniorm0ment]

Yandex does their image search page beautifully imo, the way the images pop out, and are organized are very nice, as is their menus when clicked on.

I feel SearX could also use some light, smooth but fast animations options too.
As previously mentioned, Yandex's image area has some pop out animations which are very nice imo.
This could obviously be toggleable.

As far as themes in general, maybe we can get a community tab added to searx's main site where users can submit their themes, and users can browse and grab the source for their instance or something.