#184 Improving Side Navigation Design
Closed: complete by jflory7. Opened by janyu99.

Summary

A redesign of the side navigation is necessary since at the moment, it isn't able to properly display all links.

Background

With recent merges, the side navigation appears to have become a bit cluttered, especially after logging in. A redesign is necessary since after logging in, the links towards the bottom are cut off, and the user is not able to access them/might even forget that such a functionality exists.

Details

The next step should be to discuss how we should change the side navigation so all links are available to the user in a intuitive and clean design.

Outcome

The site should have a less cluttered side navigation.


For reference, here is a picture of the site after logging in:
after_login.png
Notice how "Happiness Archive" is cut off at the bottom, and "Search the Archive" is completely out of view! :fearful:

phoenixabhishek commented

Hi @janyu99 ,
Thank you for pointing this out.

This issue is being worked on, and currently I am working on a new design mockup for the same.
You can refer here to see updates.

Once designs are finalized, we can then move on towards development of the same.

@jflory7 , thoughts on this

@phoenixabhishek Thank you for sharing the thread, I'll definitely look out for the new designs! And from now on, I'll make sure to report any sort of issues with the current design on that thread, if I find any :thumbsup:

phoenixabhishek commented

@janyu99 Actually, till the new designs are made/approved/implemented, I think you can make a quick fix for this issue.

You'll have to make changes in the assets\css\custom.css file.

If you can come up with a fix for this, please feel free to update here and then open a PR for the same :smile: :smile: :smile: :smile: :smile:

@phoenixabhishek I saw that you opened a pull request for fixing the footer styling, perhaps I can take up that issue instead of this one, if you don't mind? I think this issue requires more discussion about how we can redesign the navigation. I think we can move discussion of redesigning the side navigation to your thread :blush:

@jflory7 If you think moving redesign discussions to #139 is best, you can close this PR :smile:

phoenixabhishek commented

@janyu99 Yes, Issue #188 is a simple one.
Okk, you can start with that.

@jflory7 will assign the issue to you.

Just comment on the issue that you are working on it :smile: :smile: :smile: :smile: :smile:

Metadata Update from @jflory7:
- Issue priority set to: waiting on assignee (was: awaiting triage)
- Issue tagged with: PASSED, good first issue, improvement, type - frontend, type - summer coding

@jflory7 If you think moving redesign discussions to #139 is best, you can close this PR ๐Ÿ˜„

@janyu99 I prefer smaller tickets with clear completion criteria โ€“ it makes it easier to see what things people are working on currently and also allows room for more people to get involved.

The next step should be to discuss how we should change the side navigation so all links are available to the user in a intuitive and clean design.

I agree. It might be useful to explore using some sort of menu or collapsible menu in the sidebar navigation. Before someone starts working on this, it would be helpful to see a wireframe (digital or sketched) of what this could look like.

Metadata Update from @jflory7:
- Issue tagged with: difficulty - medium, help wanted

@jflory7 To get some ideas rolling, this is something I had in mind that may be a possibility. My idea involves a downward arrow button next to the username, indicating that there are more links available that are user specific. Once the user clicks on the arrow, the user links will fade in and replace the main navigation links (kind of like a new 'page', but no refreshing). The arrow will turn into an upward arrow to indicate you can 'close' the user links, and the user can return to the general side navigation links. Below is a link to the prototype where you can test out the interaction.

Here is the prototype, you can click on the down arrow near the username and the user links should fade in.

Though, I do think that the downward arrow can be seen as ambiguous, so we'll have to brainstorm more about what the best signal is for the user to see. A link/button with text stating 'My Account' (or something to that effect) that shows the user functions when clicked on may also be a viable option.

Any other ideas would be great to hear! :grin:

My idea involves a downward arrow button next to the username, indicating that there are more links available that are user specific. Once the user clicks on the arrow, the user links will fade in and replace the main navigation links (kind of like a new 'page', but no refreshing). The arrow will turn into an upward arrow to indicate you can 'close' the user links, and the user can return to the general side navigation links.

I think grouping things together into a new sub-menu makes sense. :thumbsup:

Here is the prototype, you can click on the down arrow near the username and the user links should fade in.

This looks great! My only thought is the Send some happiness! button should be featured on the main menu because it is our most important call-to-action. Some users may only look for that one function so we should keep it as obvious as possible.

Though, I do think that the downward arrow can be seen as ambiguous, so we'll have to brainstorm more about what the best signal is for the user to see. A link/button with text stating 'My Account' (or something to that effect) that shows the user functions when clicked on may also be a viable option.

Maybe we could experiment with something in Font Awesome for something to indicate messages sent/received.

@jflory7 Great! I actually saw on #139 some redesign ideas by @phoenixabhishek, which are quite solid designs :thumbsup:, and was wondering when the design is finalized, would this ticket be able to be assigned to someone?

@jflory7 Great! I actually saw on #139 some redesign ideas by @phoenixabhishek, which are quite solid designs ๐Ÿ‘, and was wondering when the design is finalized, would this ticket be able to be assigned to someone?

I agree, this ticket looks related to some of the ideas in #139. I believe @phoenixabhishek is working on this already. I suggest choosing a different task to work on for now.

Metadata Update from @jflory7:
- Custom field Requirement # adjusted to 25

Metadata Update from @alishapapun:
- Issue assigned to alishapapun

Hey, @jflory7 I read some blogs regarding the navigation and came with a better solution. Here it is : I have thought to change the order of different elements of navigation -
Instead of the current sequence, we should incorporate something of this order
FAS Username -> Send some Happiness! -> Happiness Archive -> Get Inspired -> About -> FAQ
- Since the main aim of the Navigation bar is to navigate, rather showing static messages I think shifting the "The total happiness Spread:0 to landing page should be a better idea. What do you think @jflory7?
- Renaming "What are Happiness Packets ?" to "About" makes more sense and the title becomes more generic. It also makes the navigation bar less cluttered and clumsy. What do you think?
- Instead of having a different page for searching the archive, it would be better if we add it in the same archive page.

Metadata Update from @jflory7:
- Issue untagged with: help wanted
- Issue set to the milestone: Summer Coding 2019: phase 1

Thanks for outlining your approach here first @alishapapun. Your suggestions sound like the right steps to me! :thumbsup: You can go ahead with your approach. Let's aim to have a PR ready for review by the end of this week for Outreachy Phase 1 (8 June).

Once this ticket is complete, I want to avoid spending more time on the sidebar navigation since it got a lot of focus during the community bonding period. If anyone else has feedback on the sidebar navigation, please get it in now. :)

Thanks for outlining your approach here first @alishapapun. Your suggestions sound like the right steps to me! ๐Ÿ‘ You can go ahead with your approach. Let's aim to have a PR ready for review by the end of this week for Outreachy Phase 1 (8 June).
Once this ticket is complete, I want to avoid spending more time on the sidebar navigation since it got a lot of focus during the community bonding period. If anyone else has feedback on the sidebar navigation, please get it in now. :)

Sure! Will try my best to send a PR before June 8. :wine_glass:

Hi @alishapapun @jflory7! I just checked the discussion here. I think tackling issue #47 here for navigation should also be completed as that is an essential component for responsive design.

245 solves this issue.

245 was merged! Nice work @alishapapun. :smile: Closing as complete. :clapper:

Metadata Update from @jflory7:
- Issue close_status updated to: complete
- Issue status updated to: Closed (was: Open)

Metadata