NEX-FS03 Menus and Nav
The Peerplays NEX application functional requirements specification for the menus and navigation functions.

1. Purpose

The purpose of this functional specification (FS) document is to detail functional requirements for the Peerplays NEX application (the “app”) relating to the menus and navigation functions from a business and user perspective.

2. Document Tracking

2.1. Parent Document

This document is a child document of the NEX Requirements Specification (NEX-RS).

2.2. Categorization

This document relates to the following tags.
App Component
Page Fragment

3. Scope

This FS will describe the requirements and basic design for the app’s menus and navigation functions.

3.1. Components

Specific components and features covered in this FS include:
  • App Header
    • Notification Bell Menu
    • Profile Icon Menu
    • Kebab Nav Menu
  • Page Navigation

4. Document Conventions

For the purpose of traceability, the following code(s) will be used in this functional specification:
Code
Meaning
NEX-FS03-#
NEX App Requirement - Menus and Nav
The keyword shall indicates a requirement statement.
The keywords may, could, and should are not requirements but rather indicate items related to requirements that are worthy of consideration.

5. Context

The app’s navigation menus should provide a logical flow. They allow users to discover all the possible functions within the app and provide an easy means to access them. Navigation should also be made available within the app pages as a convenience to users. For example, links to the login page should be presented when a user tries to access a function that requires authentication. After the authentication, the user should be returned to what they were doing.

6. Design Wire-frames

Designs for the NEX app menus and navigation functions are available here:
Specific to menus and navigation, see screens:

7. Requirements

Requirements specific to the items listed in this FS are as follows.

7.1. App Header

The app header:
NEX-FS03-1: shall display the Peerplays logo as per design guidelines.
NEX-FS03-2: shall, for unauthenticated users, provide the kebab nav menu with the following navigation links:
  • Login
  • Create Account
  • Dashboard
  • Market
  • Blocks
NEX-FS03-3: shall, for authenticated users, provide the notification bell menu with the following navigation links and items:
  • Show only unread (toggle)
  • Recent notification items (See NEX-FS04 Notifications for details)
  • See all account activity (link)
NEX-FS03-4: shall, for authenticated users, provide the profile icon menu with the following navigation links and items:
  • Username initial as an avatar icon
  • Welcome message
  • Username
  • Graphical status display (See NEX-FS11 API Functions for details)
  • See all account activity (link)
  • Settings
  • Logout
NEX-FS03-5: shall, for authenticated users, provide the kebab nav menu with the following navigation links and items:
  • Dashboard
  • Market
  • Blocks
  • Wallet
  • Settings
  • Advanced Settings (toggle)
  • Voting (visible with Advanced Settings)
  • Logout
NEX-FS03-6: shall display menu contents while hovering on the menu icon.
NEX-FS03-7: shall indicate to the user which menu item is hovered and/or focused using typical design techniques such as subtle animations, highlighting content, applying drop shadows or other styling.
NEX-FS03-8: shall use tab index and other universal design features to enable the use of keyboard navigation of the app menus and page fields. (See NEX-RS Requirements Specification about the use of Universal Design Principles in the app)
NEX-FS03-9: navigational menu items when activated by the user, shall load the related page within the app.
NEX-FS03-10: shall, when the Peerplays logo is clicked or otherwise activated by the user, load the app’s root homepage.

7.2. Notification Bell Menu

NEX-FS03-11: shall display a bell icon as the menu icon.
NEX-FS03-12: shall, if new notifications exist, display a notification bubble or badge on the bell icon.
NEX-FS03-13: shall display notifications as menu items as per NEX-FS04 Notifications specifies.
NEX-FS03-14: shall display only new notifications to the user if the “Show only unread” toggle is enabled. New notifications are notifications which have not yet been displayed in the menu to the user before.
NEX-FS03-15: shall display relevant icons for notification menu items.

7.3. Profile Icon Menu

NEX-FS03-16: shall, for unauthenticated users, display a generic avatar icon as the menu icon.
NEX-FS03-17: shall, for authenticated users, display the user’s username initial as an avatar icon as the menu icon.
NEX-FS03-18: shall display relevant icons for the settings (gear) and logout (power symbol) menu items.

7.4. Kebab Nav Menu

NEX-FS03-19: shall display a kebab (three vertical dots) icon as the menu icon.
NEX-FS03-20: shall display relevant icons for the following menu items:
  • Dashboard (grid or mosaic)
  • Market (chart)
  • Wallet (wallet, currency, coins, etc.)
  • Settings (gear)
  • Advanced settings (toggle switch)
  • Blocks (stacked shapes, chain links, boxes, etc.)
  • Voting (ballot box)
  • Logout (power symbol)

7.5. Page Navigation

NEX-FS03-21: shall, when an app feature or function requires a user to log in, temporarily redirect the user to the login page.
NEX-FS03-22: When finished with logging in, the app shall return the user to the page that initiated the login redirect.
NEX-FS03-23: Furthermore, if the user must create an account from this redirect, the app shall return the user to the page which initiated the redirect after the user creates an account.
NEX-FS03-24: shall load the login page when the user logs out.

8. Appendix A: Glossary

Term
Meaning
RS
Requirements Specification
FS
Functional Specification
UI
User Interface