Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make navigation header behave more consistently #3287

Closed
seancolsen opened this issue Nov 2, 2023 · 5 comments · Fixed by #4072
Closed

Make navigation header behave more consistently #3287

seancolsen opened this issue Nov 2, 2023 · 5 comments · Fixed by #4072
Assignees
Labels
affects: ux Related to user experience beta: approved Temporary label to mark issues that are approved ready Ready for implementation restricted: maintainers Only maintainers can resolve this issue type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory

Comments

@seancolsen
Copy link
Contributor

seancolsen commented Nov 2, 2023

Problem

Good

I like how the navigation header has these "selectors". This is an example of a good page because it has selectors everywhere in the breadcrumb that it possibly can:

image

Bad

But some of our pages omit breadcrumb selectors where they could otherwise be included. For example:

image

image

image

image

From a usability perspective I find this behavior to be really frustrating because I want to rely on the breadcrumb for navigation. If it doesn't work everywhere that it should work, then I can't rely on it, so I don't build my behavior around it. Our current design steers me away from using the selector feature — even on pages where it exists — simply because I end up developing other habits.

Proposed solution

The breadcrumb selectors should be present wherever possible.

Specifically, the selectors should be present in the red circles within my screenshots above.

See spec:
Navigation Consistency Updates

Additional context

When we implemented the breadcrumb navigation, I made a case for using exactly the behavior I'm now proposing. However @pavish and @ghislaineguerin wanted the breadcrumb to be simpler so we ended up omitted the selectors in some cases.

Now that I've been using Mathesar more, I want to revisit our design and advocate more strongly for including the selectors everywhere. For me, the selectors make Mathesar easier to use so I would like to use them wherever we can.

Related

@seancolsen seancolsen added affects: ux Related to user experience restricted: maintainers Only maintainers can resolve this issue status: draft type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory labels Nov 2, 2023
@seancolsen seancolsen added this to the Backlog milestone Nov 2, 2023
@zaidmstrr
Copy link

can i work on it.

@seancolsen
Copy link
Contributor Author

@zaidmstrr This issue is not eligible for community contribution. Please see our Contributor Guide which states:

❌ Issues are not appropriate if they meet any of the following criteria:

  • already assigned to someone
  • labeled with a restricted: ... label
  • labeled with any status: ... label other than status: ready

@seancolsen
Copy link
Contributor Author

We discussed this during today's product approval meeting. Everyone agrees that we should move forward with this.

This ticket requires the following UX work before we can move forward:

  • Specify how the content within the dropdowns will incorporate links to "Import", and "Data Explorer".

    Note: Be sure to specify that those links are rendered in an active state when on those pages, just as we do for schemas and tables

@pavish
Copy link
Member

pavish commented Dec 6, 2023

I would like to add a point I mentioned in the meeting, which the UX work needs to account for.

  • Make sure we differentiate the current active page in the breadcrumb.
    • Since the proposed solution adds an arrow mark dropdown at the end, we need to make it extra clear that the current open page is not within the last item, but is the last item..
    • For eg., The breadcrumb would show: Mathesar > mathesar_tables > Library > when in the Library schema. We need to differentiate the color of Library in the breadcrumb to denote that it is the current active page.

@ghislaineguerin ghislaineguerin self-assigned this Dec 11, 2023
@ghislaineguerin ghislaineguerin added ready Ready for implementation and removed needs: ux design labels Mar 27, 2024
@kgodey kgodey added the beta: approved Temporary label to mark issues that are approved label Dec 11, 2024
@seancolsen
Copy link
Contributor Author

Ghislaine and I discussed this in a call on 2024-12-09.

  • We agreed that we'd also like to remove the Shortcuts menu (and I have Remove "Shortcuts" menu #4048) to track that explicitly.
  • We agreed that, for the sake of simplicity and implementation time, we will not attempt to move the "shortcuts" items into the breadcrumb separator dropdown menus.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
affects: ux Related to user experience beta: approved Temporary label to mark issues that are approved ready Ready for implementation restricted: maintainers Only maintainers can resolve this issue type: enhancement New feature or request work: frontend Related to frontend code in the mathesar_ui directory
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

5 participants