#1079 - [New site] - header - Disroot/Disroot-Project - Disroot Forgejo: Brace yourself, merge conflicts ahead.

avg_joe commented

2024-12-28 16:04:56 +01:00

Member

basic ideas:

streamline header
quicker access to services from everywhere via drawer from disroot icon
use symbols wherever possible (mobile friendly)

basic ideas: - streamline header - quicker access to services from everywhere via drawer from disroot icon - use symbols wherever possible (mobile friendly)

2538047d-4716-491d-970a-dd3246c8f859.jpg

155 KiB

avg_joe added the

Discussion

Website

labels

2024-12-28 16:04:56 +01:00

antilopa was assigned by avg_joe

2024-12-28 16:06:13 +01:00

avg_joe self-assigned this

2024-12-28 16:06:13 +01:00

fede was assigned by avg_joe

2024-12-28 16:06:13 +01:00

meaz was assigned by avg_joe

2024-12-28 16:06:13 +01:00

muppeth was assigned by avg_joe

2024-12-28 16:06:13 +01:00

Shadowstreik commented

2024-12-28 18:10:14 +01:00

Member

I really like the idea. Maybe an inconspicuous arrow-like indicator to indicate there's a droptown on that object.

muppeth commented

2024-12-29 08:25:04 +01:00

Owner

I like the dropdown but I would not add secondary one (like I mentioned in the chat before). A button leading to the service page where you have all the information including button on top leading to howto, logn/service, onion, signup is much better and simplier solution. Plus it works better for mobile.
But I would not leave just icons. We can't assume everyone knowns what the icons are and so under each there should be a name similar to how we do it on searx.

I like the dropdown but I would not add secondary one (like I mentioned in the chat before). A button leading to the service page where you have all the information including button on top leading to howto, logn/service, onion, signup is much better and simplier solution. Plus it works better for mobile. But I would not leave just icons. We can't assume everyone knowns what the icons are and so under each there should be a name similar to how we do it on searx.

antilopa commented

2024-12-30 08:56:00 +01:00

Owner

I have few question to think about:

Will this replace the 'service' drop-down menu on desktop or be used as an additional route to services?
Is this actually intuitive enough? I think most people are accustomed to having a logo at the top of the page directing back to Home page from whatever page they are on on the site.
The logo in not visible now on mobile, we only have a hamburger menu, selecting services from the menu brings you to the service overview section. Do we also implement this on mobile and how?

I'm also wondering how easy it will be to do, as the D logo, is a header object outside the site menu. So we will need to create another menu originating from the logo or something like that..

I have few question to think about: 1. Will this replace the 'service' drop-down menu on desktop or be used as an additional route to services? 2. Is this actually intuitive enough? I think most people are accustomed to having a logo at the top of the page directing back to Home page from whatever page they are on on the site. 3. The logo in not visible now on mobile, we only have a hamburger menu, selecting services from the menu brings you to the service overview section. Do we also implement this on mobile and how? I'm also wondering how easy it will be to do, as the D logo, is a header object outside the site menu. So we will need to create another menu originating from the logo or something like that..

avg_joe commented

2024-12-30 10:26:41 +01:00

Author

Member

my idea is to have new route to service page via a info icon from drawer
as shodowstrike mention an arrow or something would be a good idea
i had some initial thoughts on that as well. two dropdown is a bad imo. so either the header is down to few points so it can remain on mobile as well, or another idea is to maybe move other points from header into drawer as well when switching to mobile view.

1. my idea is to have new route to service page via a info icon from drawer 2. as shodowstrike mention an arrow or something would be a good idea 3. i had some initial thoughts on that as well. two dropdown is a bad imo. so either the header is down to few points so it can remain on mobile as well, or another idea is to maybe move other points from header into drawer as well when switching to mobile view.

muppeth commented

2024-12-30 10:36:04 +01:00

Owner

Thinking about it some more I find it more and more confusing form user perspective and general usability.

Current way it works is IMO rather self explanatory. Dropdown in the menu, leads to specific service page that has all possible infomration needed to get you going. In mobile view since doing multilevel dropdown is bad idea, selecting Services in the menu moves you to Service section on the main page, which provides an overview of services you can select. As antilopa mentioned, logo on top does indeed indicate Home in most if not all websites. Plus on mobile you are expected to have hamburger menu instead without logo/home.

I don't see much of an added value in all that. Maybe changing formatting to three column list with icon and name under would be an improvement. However, after clicking around, I start to think that removing that dropdown completely would be the way to go. Rather then the ever growing dropdown (its already long, and if we add more services, it will keep on growing), I would just replicate the mobile and move to the Service section on the main page. I think we could control better the way services are presented. I would rather invest time in imrpoving the way services section is formated. It could server as a nice overview.

Thinking about it some more I find it more and more confusing form user perspective and general usability. Current way it works is IMO rather self explanatory. Dropdown in the menu, leads to specific service page that has all possible infomration needed to get you going. In mobile view since doing multilevel dropdown is bad idea, selecting Services in the menu moves you to Service section on the main page, which provides an overview of services you can select. As antilopa mentioned, logo on top does indeed indicate Home in most if not all websites. Plus on mobile you are expected to have hamburger menu instead without logo/home. I don't see much of an added value in all that. Maybe changing formatting to three column list with icon and name under would be an improvement. However, after clicking around, I start to think that removing that dropdown completely would be the way to go. Rather then the ever growing dropdown (its already long, and if we add more services, it will keep on growing), I would just replicate the mobile and move to the Service section on the main page. I think we could control better the way services are presented. I would rather invest time in imrpoving the way services section is formated. It could server as a nice overview.

avg_joe commented

2024-12-30 13:34:34 +01:00

Author

Member

there are probably other ways to achieve better access to services as well. I like the ux of our searx theme.

nonetheless, i think our header is overloaded right now.
we could think about if we can merge some topics.
eg:
about + community
donate + perk
home + disroot logo + services
tutorials + faq

there are probably other ways to achieve better access to services as well. I like the ux of our searx theme. nonetheless, i think our header is overloaded right now. we could think about if we can merge some topics. eg: about + community donate + perk home + disroot logo + services tutorials + faq

👍 1

antilopa commented

2024-12-30 14:27:40 +01:00

Owner

Interesting suggestion.
In a way, I was trying to do the exact opposite with the redesign, and reduce information on each of the pages so the pages are not so overwhelmingly full.

Interesting suggestion. In a way, I was trying to do the exact opposite with the redesign, and reduce information on each of the pages so the pages are not so overwhelmingly full.

avg_joe commented

2024-12-30 19:25:52 +01:00

Author

Member

in general i think most website have hamburger in mobile and desktop view, or to put in other words, most designs are mobile first. what i tend to see more and more often is a fullpage drawer like nextcloud.com has it. but i'm not sure i like it. a design that i saw and thought that it could work for disroot is https://demo.graphthemes.com/lawyers-blog/
mainly talking about the concept of a header with symbols and anything else in a hamburger menu.

in general i think most website have hamburger in mobile and desktop view, or to put in other words, most designs are mobile first. what i tend to see more and more often is a fullpage drawer like nextcloud.com has it. but i'm not sure i like it. a design that i saw and thought that it could work for disroot is https://demo.graphthemes.com/lawyers-blog/ mainly talking about the concept of a header with symbols and anything else in a hamburger menu.

avg_joe commented

2024-12-30 19:40:04 +01:00

Author

Member

https://explodingtopics.com/blog/mobile-internet-traffic

tldr: 60% internet traffic is via mobile

https://explodingtopics.com/blog/mobile-internet-traffic tldr: 60% internet traffic is via mobile

avg_joe commented

2024-12-30 20:12:12 +01:00

Author

Member

this concept is nice as well imo: https://demo.getgrav.org/striped-skeleton/

tergven commented

2026-02-02 14:20:44 +01:00

Hey, I just wanted to chime in here because I really like the Disroot eco system, but I find it confusing that each instance doesn't have a link back to the website or to the services page (or something described in the first post). Especially clicking the "apps" icon and coming to a "dead end" searx instance. It's not very user friendly and it doesn't encourage users to stay within the eco system. So I really encourage some kind of connection between each site, so I can jump directly from this git instance to another Disroot website, or atleast to the main page.

Keep up the good work!

Hey, I just wanted to chime in here because I really like the Disroot eco system, but I find it confusing that each instance doesn't have a link back to the website or to the services page (or something described in the first post). Especially clicking the "apps" icon and coming to a "dead end" searx instance. It's not very user friendly and it doesn't encourage users to stay within the eco system. So I really encourage some kind of connection between each site, so I can jump directly from this git instance to another Disroot website, or atleast to the main page. Keep up the good work!

muppeth commented

2026-02-02 18:34:17 +01:00

Owner

@tergven thanks for the feedback. It's something we need to improve across the board. One thing is theming all services to look similar but also creating routes for users to move between apps is something important as well. We used to have a dashboard with links to all the services on the search.disroot.org but due to problems of keeping the fork up to date we have moved back to the default theme. That said I have an idea on how to fix it and been planning to put in writting on git. Just created this ticket as a placeholder #1333

❤️ 1

Rows
Columns

[New site] - header #1079