FEA-32-navigation-bar

Description

Vertical navigation bar should be revisited and redesigned to make it easier to use, more user-friendly and informative.

SFIA skills should be separated into different categories.
Every category should be displayed in the vertical navigation bar.
Navigation bar should highlight the skill category the user is currently viewing.
User should be able to click on each category in the navigation bar to seamlessly scroll to and focus on that specific category within the skill selection view.
Navigation bar should be located on the left side on the screen.
Navigation bar should include the "Submit" button so that the user could quickly navigate to it.

The navigation bar should incorporate the assigned categories from the SFIA database for each skill.


Use Case # 2 User Access and Interaction with the service	The end user gains access to the service and interacts with it by selecting the skills.
Use Case # 3 Skill Survey and Response Storage	The end user uses the skill selection view to respond to the survey.

#30 US002 - As an end user, I want the submit button to be easily accessible so that I can conveniently complete tasks on the service.
#34 US006 - As an end user, I want to be able to use the touchpad and arrow keys to navigate the website because that aligns with my typical laptop usage and browsing behavior.
#35 US007 - As an end user, I want the vertical navigation bar to be on the left side as it is more intuitive.

Navigation mockup

Test case	Test source	Responsible
TC-32-001 - Navigation menu	FEA-32-navigation-bar	Alena Galysheva

Acceptance Criteria	Notes
All primary navigation items are present and accurately represent the main sections or categories of the website.
The navigation items are displayed in a logical and intuitive order.
The navigation items are clearly labeled and easy to read.
The active navigation item is visually distinguished to indicate the user's current location.
The navigation bar is responsive and adapts to different screen sizes and orientations.
On smaller screens, the navigation menu collapses or transforms into a small-screen friendly format (e.g., hamburger menu).
The collapsed or mobile navigation menu is accessible and easy to expand or collapse.
Clicking on a navigation item takes the user to the appropriate section or page.
On hover or focus, the navigation items provide visual feedback (e.g., highlighting, color change) to indicate interactivity.
The navigation bar is keyboard accessible, allowing users to navigate using keyboard keys (e.g., Tab, Enter, Arrow keys).
Assistive technologies, such as screen readers, can properly interpret and navigate the navigation bar.
If a navigation item or link is broken or leads to an unavailable page, appropriate error handling is implemented (e.g., displaying an error message, providing alternative navigation options).