zubhub
zubhub copied to clipboard
unstructuredstudio
Make side navigation menu sticky
Description
The main functionality of zubhub is to create and share projects. To create a project we have to go to the sidenav. But since the sidenav goes away when we scroll up, there is no other way the user can create a project when they have scrolled all the way down to the projects.
Solution:
- We either have a separate CTA button to create projects which is visible at all times. (This will require a lot of redesign, is not feasible as an immediate measure).
- We fix the sidenav to the viewport. I have raised a PR for this in #849
I would love a designer's perspective on this. But I prefer the second option for now.
Hello @aqsaaqeel. I noticed this too and would like to implement the design of it. The side nav ought to remain in view when scrolling. And since we've been instructed that we can carry out contribution without awaiting assignment, I have started implementing the design.
Please, @aqsaaqeel, if it will not be a bother, can you point me to the correct Figma file that contains this page/section with the yellow gradient fill background? I cannot seem to find it in the Figma links I see on the platform. Thanks in advance.
Please, @aqsaaqeel, if it will not be a bother, can you point me to the correct Figma file that contains this page/section with the yellow gradient fill background? I cannot seem to find it in the Figma links I see on the platform. Thanks in advance.
@d-arkangel you can get the colours here; https://www.figma.com/file/XDBvtWuBK3CXV0vCJ5AeXy/UX-Ideas-for-ZubHub?type=design&node-id=0%3A1&mode=design&t=ISgXFD8XrC3QJMzB-1
Hello @aqsaaqeel. I noticed this too and would like to implement the design of it. The side nav ought to remain in view when scrolling. And since we've been instructed that we can carry out contribution without awaiting assignment, I have started implementing the design.
Let me know when you come up with a design @d-arkangel and we can work together on improving it
Please, @aqsaaqeel, if it will not be a bother, can you point me to the correct Figma file that contains this page/section with the yellow gradient fill background? I cannot seem to find it in the Figma links I see on the platform. Thanks in advance.
@d-arkangel you can get the colours here; https://www.figma.com/file/XDBvtWuBK3CXV0vCJ5AeXy/UX-Ideas-for-ZubHub?type=design&node-id=0%3A1&mode=design&t=ISgXFD8XrC3QJMzB-1
@Temabo I would like to proposed a design , can i go ahead and create a new figma file for this design
Hello @aqsaaqeel. I noticed this too and would like to implement the design of it. The side nav ought to remain in view when scrolling. And since we've been instructed that we can carry out contribution without awaiting assignment, I have started implementing the design.
Let me know when you come up with a design @d-arkangel and we can work together on improving it
Surely. I'll share with you what I have soon.
I propose we add a stable "add project" icon just above the "back" icon
When the user tabs on the add project icon ,the button comes up . With this users will be able to add project from any part of the page which is the main functionality as @aqsaaqeel said. @srish @tuxology
Hello @aqsaaqeel. So here's what I came up with as regards the Side Nav:
https://www.figma.com/file/BRl1ufvNi0meHeUb6U0ENj/ZubHub-(Copy)?type=design&node-id=2714%3A5185&mode=design&t=s6cT56NAf3PsD1eu-1.
I thought it'd be best to make the Side Nav always visible irrespective of how you scroll.
And here's the prototype play out: https://www.figma.com/proto/BRl1ufvNi0meHeUb6U0ENj/ZubHub-(Copy)?page-id=0%3A1&type=design&node-id=2714-5185&viewport=-1301%2C-7668%2C0.32&t=17wDWyg5jhZcqY6o-1&scaling=scale-down&starting-point-node-id=144%3A2388&show-proto-sidebar=1&mode=design.
Hopefully, this could be a solution that can be implemented on all pages that will have the Side Nav in it.
Is this fine @srish, @tuxology?
Arigato gozaimasu!
I propose we add a stable "add project" icon just above the "back" icon
When the user tabs on the add project icon ,the button comes up . With this users will be able to add project from any part of the page which is the main functionality as @aqsaaqeel said. @srish @tuxology
This is also a fine one. I think it could be added to it for easy accessibility.
@d-arkangel I think making the side nav retain its scroll position is a better solution. FAB's are always dicey especially when used on web apps (This is for your second solution).
Another thing to consider is that these pages are kinda content-heavy so it is easy for a user to miss the Floating action button in the second solution. And it is not very accessible. We want to make the process very easy for our users.
Just my thoughts.
@d-arkangel I think making the side nav retain its scroll position is a better solution. FAB's are always dicey especially when used on web apps (This is for your second solution).
Another thing to consider is that these pages are kinda content-heavy so it is easy for a user to miss the Floating action button in the second solution. And it is not very accessible. We want to make the process very easy for our users.
Just my thoughts.
I totally agree with you, the nav bar should remain on the side in the web view for easy access. The only adjustment I feel it needs would be to stay sticky and not scroll with the page.
@d-arkangel I think making the side nav retain its scroll position is a better solution. FAB's are always dicey especially when used on web apps (This is for your second solution).
Another thing to consider is that these pages are kinda content-heavy so it is easy for a user to miss the Floating action button in the second solution. And it is not very accessible. We want to make the process very easy for our users.
Just my thoughts.
I agree with this too.
Hello @aqsaaqeel. So here's what I came up with as regards the Side Nav:
https://www.figma.com/file/BRl1ufvNi0meHeUb6U0ENj/ZubHub-(Copy)?type=design&node-id=2714%3A5185&mode=design&t=s6cT56NAf3PsD1eu-1.
I thought it'd be best to make the Side Nav always visible irrespective of how you scroll.
And here's the prototype play out: https://www.figma.com/proto/BRl1ufvNi0meHeUb6U0ENj/ZubHub-(Copy)?page-id=0%3A1&type=design&node-id=2714-5185&viewport=-1301%2C-7668%2C0.32&t=17wDWyg5jhZcqY6o-1&scaling=scale-down&starting-point-node-id=144%3A2388&show-proto-sidebar=1&mode=design.
Hopefully, this could be a solution that can be implemented on all pages that will have the Side Nav in it.
Is this fine @srish, @tuxology?
Arigato gozaimasu!
Here's the screen record of the SIDE NAV in a fixed position:
https://github.com/unstructuredstudio/zubhub/assets/146884658/bb509e2f-5aa1-4a71-b052-3b1cd8e3b7fb
@aqsaaqeel @srish @tuxology, what are your thoughts? If this is fine, can a developer work with it?
Thanks for creating this @aqsaaqeel for a developer taking this up can we implement it so it exactly appear as shown in @d-arkangel's video?
Thanks for creating this @aqsaaqeel for a developer taking this up can we implement it so it exactly appear as shown in @d-arkangel's video?
@srish kindly review my PR please
Thank you,
Thanks for creating this @aqsaaqeel for a developer taking this up can we implement it so it exactly appear as shown in @d-arkangel's video?
Thank you, @srish and @aqsaaqeel. Any developer in the house so that we can liase?
Thank you,
Thanks for creating this @aqsaaqeel for a developer taking this up can we implement it so it exactly appear as shown in @d-arkangel's video?
Thank you, @srish and @aqsaaqeel. Any developer in the house so that we can liase?
@aqsaaqeel, you're one, right?
Thank you,
Thanks for creating this @aqsaaqeel for a developer taking this up can we implement it so it exactly appear as shown in @d-arkangel's video?
Thank you, @srish and @aqsaaqeel. Any developer in the house so that we can liase?
@aqsaaqeel, you're one, right?
yes I’ll get started on this!
Actually, I had worked on this a while back but my PR was closed #849 so I thought I could do the changes quickly and raise the PR again. But it's alright if you have already worked on it now. Thanks @yokwejuste
Actually, I had worked on this a while back but my PR was closed #849 so I thought I could do the changes quickly and raise the PR again. But it's alright if you have already worked on it now. Thanks @yokwejuste
Ohh, I didn't see any linked PR to it, the reason why I opened one. But we can coauthor this.
@yokwejuste I think we should be cognizant of the work others are doing and avoid double work. The most efficient way of writing code is not to write code at all. I have noticed a couple of incidents of similar oversight which has resulted in the same work being done twice. Let's avoid this.
@aqsaaqeel We should always mention the issue that's been worked on in the PR. This will help a developer know if there's already a PR in place.
@srish @tuxology Why don't we assign issues to avoid this kind of mix-up and double work? It's a pretty standard practice.
@yokwejuste I think we should be cognizant of the work others are doing and avoid double work. The most efficient way of writing code is not to write code at all. I have noticed a couple of incidents of similar oversight which has resulted in the same work being done twice. Let's avoid this.
@aqsaaqeel We should always mention the issue that's been worked on in the PR. This will help a developer know if there's already a PR in place.
@srish @tuxology Why don't we assign issues to avoid this kind of mix-up and double work? It's a pretty standard practice.
Exactly, assigning the issues will be better. But the PR was actually closed.
So on opening one I did not see any change made. I always do a check before working on an issue.
@d-arkangel I think making the side nav retain its scroll position is a better solution. FAB's are always dicey especially when used on web apps (This is for your second solution). Another thing to consider is that these pages are kinda content-heavy so it is easy for a user to miss the Floating action button in the second solution. And it is not very accessible. We want to make the process very easy for our users. Just my thoughts.
I totally agree with you, the nav bar should remain on the side in the web view for easy access. The only adjustment I feel it needs would be to stay sticky and not scroll with the page.
this is very true, it shouldnt be hidden or users having to look around for it whenever they want to refer back to it
