Footer is becoming too cluttered. How to keep clean? #362
-
|
We have a bunch of redundant information in the current footer. I would aim to keep it as clean as possible. What do we really need there? Thoughts? Details like x icon and " ..(en)" breaks the consistency as well. Badges will be added soon as well: |
Beta Was this translation helpful? Give feedback.
Replies: 14 comments 30 replies
-
|
@github-throwaway is the light mode/dark mode enabled yet? or am I missing some context? |
Beta Was this translation helpful? Give feedback.
-
|
That's already implemented and not the issue here. Dark Mode:
|
Beta Was this translation helpful? Give feedback.
-
|
I mean we currently use the default dark mode only. Users can't actually avail the Light mode for now |
Beta Was this translation helpful? Give feedback.
-
You would have to change your device's theme in order to change the OFF theme, you can't change it directly |
Beta Was this translation helpful? Give feedback.
-
|
The footer looks too big for a mobile user(takes much of page). It would be better to collapse/simplify the footer making it smaller in size. This will probably create a better UX |
Beta Was this translation helpful? Give feedback.
-
|
@github-throwaway As for the X logo, originally it was the twitter's old bird icon which worked perfectly fine in the light theme as well, I think the one who changed it, must have forgot to set it according to the light theme I think the footer in desktop view is perfect (have the right amount of data), and for the mobile view, I think we can remove some sections Removing the "discover the project" section would make it look something like this Or if you want to remove some specific buttons and links, not a whole section, then you can just let me know |
Beta Was this translation helpful? Give feedback.
-
But removing links which might be required for some users won't be a great option. |
Beta Was this translation helpful? Give feedback.
-
|
I think removing a section or part of it is the best option to decrease the footer's height as I also have a PR open on badges which would further increase the footer's height |
Beta Was this translation helpful? Give feedback.
-
Not this way, I will shortly provide a demo of it making necessary changes in the class. |
Beta Was this translation helpful? Give feedback.
-
Yeh that's the only problem, but we have to come to a solution |
Beta Was this translation helpful? Give feedback.
-
This is neither what I meant, I just gave a small demo, just to prove that in my POV, decreasing the gap wouldn't help much, but yeh I'm looking forward to your demo |
Beta Was this translation helpful? Give feedback.
-
|
@github-throwaway this is what it will be looking like after removing the ones that were repeating "Open food facts for producers" and "Subscribe to our newsletter" as mentioned in your initial message btw what does the yellow marks mean in your initial message as those are two different things? |
Beta Was this translation helpful? Give feedback.
-
|
What's in the yellow marks sounded very similar to me. So that was supposed to indicate a possible duplicate |
Beta Was this translation helpful? Give feedback.
-
|
I think it is worth thinking about what information we want to display in the footer before jumping to design decisions. What information MUST we show (legally) and what information do we WANT to show. MUSTI'm not a lawyer (so I don't know for sure) but I would guess, we must show:
But maybe we could bundle it into one point? WANTIn my opinion, there are three different user categories:
Each category of user is interested in slightly different information. Let's list what we currently have and cluster it a bit differently: Community & Support
About Open Food Facts
Resources & Tools
Producers & Partners
Legal & Policies
I think most of the stuff is actually not interesting for a majority of the people. The footer is one example where OFF tries to do everything and accommodate everyone but as a consequence introduces a lot of friction. So what might be an alternative? AlternativeDownload mobile App:
Join the community:
Professionals:
About Open Food Facts
Legal & Policies Thoughts? |
Beta Was this translation helpful? Give feedback.
-
@github-throwaway you forgot to write legal & policies here |
Beta Was this translation helpful? Give feedback.
-
|
That was on purpose actually. I would bundle the three points into one. :) |
Beta Was this translation helpful? Give feedback.
-
|
User personas: Pierre's Mockup: |
Beta Was this translation helpful? Give feedback.
-
|
@github-throwaway how should we proceed now? |
Beta Was this translation helpful? Give feedback.
-
|
Just an idea: I think we should be keeping two versions of the footer. We will show one of the footers based on certain criteria. Like maybe for smaller screen and when the user is logged in, we can keep footer minimal and for the other cases we should keep all the links. As an example, GitHub also keeps two versions of the footer. First the expanded one, which is shown when user is not logged in, and the other minimal one, is shown when user is logged in. GitHub footer when user is not logged in: GitHub footer with user logged in: |
Beta Was this translation helpful? Give feedback.
-
|
Good idea but it still won't solve the problem for mobile users. Around 70% site visits are done by mobile users mostly in daily basis. |
Beta Was this translation helpful? Give feedback.
-
|
Where did you get that data (“70% mobile site visits)” from? Wouldn’t most people use the app if they are on mobile? |
Beta Was this translation helpful? Give feedback.
-
|
I remember somewhere @teolemon specified it ig, I might be wrong too |
Beta Was this translation helpful? Give feedback.
-
|
Here's an idea of the proportions |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @teolemon for the confirmation |
Beta Was this translation helpful? Give feedback.
-
|
@github-throwaway it's written in the project idea's outcome |
Beta Was this translation helpful? Give feedback.
-
|
Moreover I don't think so we should rely on if user is logged in or not, It is different in case of Github, But as a open source community, we would want more and more people to join the community, so showing all the buttons should be priority even if the user is not logged in. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
@abrahamvg that's a good one |
Beta Was this translation helpful? Give feedback.
-
|
No, it's just a placeholder kind thing. I was lazy to type in the rest of the blocks. :P |
Beta Was this translation helpful? Give feedback.
-
|
ohkk 😅
because this doesn't make it look clustered as before, it's quite neat |
Beta Was this translation helpful? Give feedback.
-
|
Hello @github-throwaway, do you have any updates on the implementation of the footer design? |
Beta Was this translation helpful? Give feedback.
-
|
@abrahamvg can you update the mockup with my suggestion from slack? |
Beta Was this translation helpful? Give feedback.
-
|
@abrahamvg made a mockup: https://www.figma.com/design/6ozGLSwQ6IeUocTqfdXqUR/Current-Website-design--Copy-?node-id=2879-4345&t=ENS1mUuBQ8PItoKC-1 |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
Yes, should have been down only, missed it. |
Beta Was this translation helpful? Give feedback.
-
|
just a small question, shouldn't we include the mobile badges in the design, as that's also part of the footer |
Beta Was this translation helpful? Give feedback.
-
|
Idk tbh. I would forward user to the app if they have it installed. If they don't have that installed then it would make sense to nudge user to the install the app. The footer badges could be one way. Depends how aggressive we want to be with pushing to the app (if at all). Maybe a banner with app available could be a second option? I think I would start iteratively. |
Beta Was this translation helpful? Give feedback.
-
But we can't just say app available, we need to redirect the user as well and for that we'll end up again from where we started, we'd need 4 different badges/btn (google play, app store, apk, droid) |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that's true. 😅 Maybe we just need to create some mockups and throw some analytics behind these buttons! Cause if nobody clicks them, then we can also take them back out again. |
Beta Was this translation helpful? Give feedback.
-
|
@github-throwaway I just noticed that we have a separate page as well for OFF.org to install the app, I think so we can consider this, as you said here
we can display a banner and if the user will click on that banner then we can redirect him to that page which will have all the links to app and apk's. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Please use threads. |
Beta Was this translation helpful? Give feedback.
@abrahamvg made a mockup: https://www.figma.com/design/6ozGLSwQ6IeUocTqfdXqUR/Current-Website-design--Copy-?node-id=2879-4345&t=ENS1mUuBQ8PItoKC-1