Group Navigation
Role - Product Designer
Tools - Balsamiq, Sketch, HTML/CSS
The Problem
The platform only had one way of displaying the group navigation by default: a vertical list. This layout only really worked in asides or skinny columns and was a bit dated. At some point the client services team had started to implement a custom 3rd party javascript library to change the list into a horizontal priority+ navigation menu and began adding it to customer sites. The issue, however, was that the library being used would sometimes conflict with platform javascript and cause fatal errors. Our support team routinely would get tickets for these errors and spend time trying to fix them only to, again, find that it was the 3rd party code being used. In addition to causing errors the priority+ navigation was not accessible to screen readers or keyboard accessibly.
User Story
As a community admin I need a responsive horizontal group navigation so that I have more flexibility over community layouts without having to worry about accessibility issues or if the navigation will work on mobile devices.
The Solution
We created a new horizontal layout for the group navigation. By adding a separate layout configuration we were able to avoid breaking existing client configurations and provide an opt-in solution. I presented several options to the product team and stakeholders and we decided to go with a overflow scroll menu. Interacting with the menu on mobile was intuitive enough but we found that users were having issues while on desktop. By adding the click to scroll interaction buttons desktop user were able to more easily understand the new navigation pattern.
Layout and creation of new Admin Panel configuration section allowing clients to change the basic colors of the horizontal navigation without resorting to custom CSS.
This wireframe shows that when the navigation menu was too large for the column in which it currently resides the links overflow outside of the container and the scroll indication button appears.
When clicking to scroll or swiping through the navigation the indicators change to show which way the links are overflowing. In this case the user has reached the end of the navigation so the only overflow is to the left.
Design Process
• Research potential layout options for responsive horizontal navigation.
• Explore potential functionality requirements and white board ideas with Product owner.
• Clean up white board sketches into lo-fi wireframes to show general user flow and expected functionality.
• Present potential workflow, functionality, and layout to stakeholders from development, client services, and sales. Discuss changes to functionality based off platform or logistic limitations or revised goals and needs from stakeholders.
• Revise and update lo-fi wireframes from design presentation feedback and submit mockups to ticket for backlog grooming.
Front End Process
• Research accessible inline SVG icons for use in click to scroll buttons and present to development team.
• Once the development team has built out the backend logic and tied it in to the generation of the appropriate DOM, provide base css styling for the new module to work and function at all screen sizes.
• Submit ticket for QA.
