Skip to content

Styling of the Left hand Nav + Nav item interaction states #2426

@ShreyasGit51283

Description

@ShreyasGit51283

Here is a proposal for updating the left hand nav.
https://www.figma.com/file/VvabDMuRKIdb3sSczCjUVR/Marquez?node-id=112%3A364&t=O97rZZ6JlTEhrpmu-1

The Problem
Labels of the navigation menu items only appear when the menu item is hovered over. This increases interaction cost, and for new users, decreases the ability to quickly recognise these items, based on the icons alone. Having the labels always displayed encourages recognition over recall. Useful for new users to quickly understand the UI.

Solution
The teal color is used as a visual indicator of a click target, with labels always shown below the icons.

Desktop - 1
Desktop - 2
Desktop - 3

Notes

  • Icons used are indicative.
  • I've also taken a crack at updating the UI but please treat that as a proposal.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    No status

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions