Skip to content

Feature Request: Create a visual guide / annotated UI map for website features #7242

@lavjeetrai

Description

@lavjeetrai

Description

I am suggesting the creation of a comprehensive visual guide or annotated UI map for the website. The goal is to provide a quick, visual way for new users to understand what each interface element does, what features are available, and how the core workflows operate without having to read through extensive text documentation.

Current Behavior

Currently, navigating the interface and discovering features relies heavily on trial and error or searching through text-based documentation. For new users, it can be difficult to immediately understand what certain buttons, panels, or tools do just by looking at the interface.

Expected Behavior

There should be an easily accessible visual guide—such as labeled screenshots, an interactive overlay, or a dedicated "getting started" diagram—that maps out the UI. It should clearly point out key features, provide a brief explanation of what they do, and visually demonstrate how they connect to one another.

Screenshots

Proposed Approach (Optional)

A few ways this could be implemented:

  1. An Annotated Map: A static page in the documentation featuring high-quality screenshots with numbered arrows pointing to features, paired with a legend explaining each one.
  2. Interactive Tooltips: A "Tour" or "Help" mode that users can toggle on the website, which grays out the background and highlights specific UI elements with pop-up explanations.
  3. Cheatsheet: A downloadable or printable PDF visual cheatsheet mapping out the interface and shortcuts.

Environment

  • Operating System: [e.g., Windows, macOS, Linux]
  • Browser (if applicable): [e.g., Chrome, Firefox, Safari]
  • Version of Software/Project: [e.g., v1.0.0]

Checklist

  • I have read and followed the project's code of conduct.
  • I have searched for similar issues before creating this one.
  • I have provided enough information to understand the issue.
  • I am willing to contribute to the resolution of this issue.

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions