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

Add navigation buttons below messages #30405

Open
alya opened this issue Jun 12, 2024 · 1 comment · May be fixed by #32091
Open

Add navigation buttons below messages #30405

alya opened this issue Jun 12, 2024 · 1 comment · May be fixed by #32091
Labels
area: message feed (UI) Buttons/UI directly in the message feed (not popovers, etc.) priority: high UI experiment Design direction to be evaluated

Comments

@alya
Copy link
Contributor

alya commented Jun 12, 2024

design discussion: CZO Link

We want to add navigation buttons below the bottom message in the view. They should make it more convenient to perform common navigation actions, and remove the need for banners to mark messages as read.

Design reference

image

End, the "Scroll to bottom" button, and any other ways to jump to the bottom of the view should select this new navigation bar rather than the last message.

All the bottom of message feed banners with a "Mark as read" button should be removed as part of this issue.

The initial goal is to get to a testable prototype, as we expect to need to iterate on the UX once we can play with it. It's fine to leave any tricky implementation details for later if they don't seem critical (with notes on the PR).

Which buttons, when and where

  • We can start by making these all be medium-attention grey buttons (don't have to 100% match the design; whatever is easy to prototype).

Home view

  • Label: Home view
  • Placement: Left
  • When to show: In all message views, unless you are already in your home view.
  • What it does: Goes to your selected home view
  • Tooltip:
    If Esc goes to home view:

Go to your home view Esc
Otherwise:
Go to your home view +[

Mark as read

  • Label: Mark as read
  • What it does: Marks all messages in the current view as read.
  • Placement: Center
  • When to show: Replacing all the situations when we’d show a banner with this button; note that there's more than one type of banner.
  • Tooltip:
    1st line:

Mark as read
2nd line, if the banner was due to the setting (Never or Only in conversation views):
Messages are not automatically marked as read according to your settings.
2nd line, otherwise (same as the corresponding banner):
To preserve your reading state, this view does not mark messages as read.

Next unread conversation

Note that neither button is shown in other types of message views (search views, global feed).

This will resolve #18728.

DMs

  • Label: Next unread conversation
  • Placement: Right
  • When to show: In DM conversations and the DM feed when there are unread DM conversations.
  • What it does: P
  • Tooltip:

Go to next unread DM conversation [P]

Channel feed and topic views

  • Label: Next unread conversation
  • Placement: Right
  • When to show: In topic conversation views, /near views and channel feeds.
  • What it does: N
  • Tooltip:

Go to next unread topic [N]

Keyboard navigation behavior

Initially, the user will generally navigate to this bar as a whole (selected with the blue box). From there:

  • In a conversation view, pressing Enter should start a reply to the current conversation, as it would on a message. In non-conversation views, we can prototype with it doing nothing.
  • Pressing Tab or the right arrow should select a button in the navigation bar. We should probably remove the selection ring on the row as a whole at that point, but we'll have to test.
    • If "Mark as read" button is there, select that one.
    • Otherwise, pick between "Home view" and "Next unread conversation" depending on which one was used more recently, if both are present.
  • Once one of the buttons is selected, right/left arrows and Tab/Shift+Tab should work to move between them, without cycling. (Maybe left from the leftmost and/or right from the rightmost would select the whole row again?)

Questions and follow-ups

  • Should we add any other actions, e.g., "Next unread followed topic"?
@alya alya added the area: message feed (UI) Buttons/UI directly in the message feed (not popovers, etc.) label Jun 12, 2024
@alya alya self-assigned this Jun 12, 2024
@alya alya removed their assignment Sep 3, 2024
@alya alya added priority: high UI experiment Design direction to be evaluated labels Sep 3, 2024
@zulipbot
Copy link
Member

zulipbot commented Sep 3, 2024

Hello @zulip/design members, this issue was labeled with the "UI experiment" label, so you may want to check it out!

@alya alya changed the title [WIP] Add navigation buttons below messages Add navigation buttons below messages Sep 9, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 18, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 18, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 19, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 20, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 20, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 20, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 22, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Sep 23, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Oct 22, 2024
@amanagr amanagr linked a pull request Oct 22, 2024 that will close this issue
amanagr added a commit to amanagr/zulip that referenced this issue Oct 22, 2024
timabbott pushed a commit to timabbott/zulip that referenced this issue Oct 22, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Oct 24, 2024
timabbott pushed a commit to timabbott/zulip that referenced this issue Oct 24, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Nov 10, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Nov 10, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Nov 15, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Nov 27, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Dec 5, 2024
timabbott pushed a commit to timabbott/zulip that referenced this issue Dec 11, 2024
timabbott pushed a commit to amanagr/zulip that referenced this issue Dec 11, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Dec 12, 2024
timabbott pushed a commit to timabbott/zulip that referenced this issue Dec 13, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Dec 16, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Dec 16, 2024
amanagr added a commit to amanagr/zulip that referenced this issue Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: message feed (UI) Buttons/UI directly in the message feed (not popovers, etc.) priority: high UI experiment Design direction to be evaluated
Projects
Status: No status
2 participants