Skip to content

[discussion][ux] add guidelines for a consistent ui/ux #776

@dominikg

Description

@dominikg

Currently lots of features get added quickly where many of them look coherent in themselves but joined together they create an experience that is not the same.

As a starting point some of my thoughts when going through the UI

  • spacing vs border vs (background-)color
  • vertical and horizontal alignment, also on text baseline
  • icon positioning (prefix or postfix, currently its a mix without a recognizable pattern)
  • tooltips on numeric fields ( eg explain what xx / yy means on dependencies)
  • link to internal routes where it makes sense (dependencies in ui and package.json instead only npm-graph)
  • no hidden interactive ui (that only becomes visible on hover like the copy button on npm install box)
  • prefer full words over abbreviations when space is available (DEPS -> Dependencies, VULNS -> Vulnerabilities)
  • no surprises/consistency with user inputs. (eg typing on the homepage search box adds the first char as search query to history)
  • when to use animations/transitions
  • semantic html and a11y requirements

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions