Simplify comment action menu for most common actions.

[JmillsExpensify]

Problem

As we increasingly build out our chat-focused features, the amount of available comment actions has increased pretty dramatically from a couple to ten and counting. It's pretty daunting to say the least. Just as importantly, this creates a dynamic where our least common actions have equal screen real estate next to actions that are incredibly common, which introduces decide fatigue when you just want to come into New Expensify, collaborate, and generally get great stuff done.

Solution

In order to reduce decision-fatigue, free up precious real estate and help users find the most common things they'd like to do, let's simplify the comment action menu, as follows:

• Reduce one-tap emojis down to three (from four). Those emojis will be thumbs up (:+1:), heart (:heart:) and joy (:joy)
• Keep the emoji picker, thread, mark as unread and edit always visible
• Move copy message, delete and flag to a three-dot overflow menu

That looks like this for large screens.

Overflow menu selected

And it ends up looking like this for small screens.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e41d6a1dad5b7475
• Upwork Job ID: 1699665316818046976
• Last Price Increase: 2023-09-07

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e41d6a1dad5b7475

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @eVoloshchak (Internal)

[JmillsExpensify]

Marked this as internal because we'll work with an agency or C+ on this one.

[JmillsExpensify]

cc @shawnborton @dannymcclain @trjExpensify Any other comments before I move this one forward?

[JmillsExpensify]

Actually on that note: One doubt I still have is that I currently have three quick emoji actions mocked up for large screens, but because of how we have a dedicated row for small screens, there's just a lot more space for four plus the add emoji icon. Maybe that's ok even though it's technically "inconsistent"?

[trjExpensify]

there's just a lot more space for four plus the add emoji icon. Maybe that's ok even though it's technically "inconsistent"?

Hm, I'm not sure about that inconsistency to be honest. Is one more emoji to stay consistent really that egregious? Especially as you can also right-click on desktop to see the same menu as mobile, so there can be a visible diff on the same screen as well.

[shawnborton]

Hmm it's a fair point. How did we decide only three emojis on desktop and not four?

Either way though I don't think it's a huge deal, but let's just be clear about our decision as I can already anticipate the bug reports coming in.

[dannymcclain]

I also don't think it's a big deal and don't really see it as an "inconsistency" as much as just adapting the UI to the viewport it's being display on. Like if we didn't show emojis on one but did on the other, I would call that an inconsistency.

But I don't have super duper strong feelings either way to be honest. I did want to echo what Shawn said—we should be sure we document the decision to avoid unnecessary bug reports 🐛.

[trjExpensify]

Yeah, I just can't see a super clear reason for it. For example, if the extra emoji on desktop/web causes the menu items to overlap reactions or messages to the left, that would make sense. But I don't think they do, so I would just keep the number of them consistent across all platforms personally.

[JmillsExpensify]

We're going to add a join thread option to the comment menu, so if we keep 4 emoji and then add that, then we're back to the current amount of options in the main comment action menu. At that point, I kind of question why we should even add an three dot overflow menu. Unless we're saying that that'll automatically go into the overflow menu?

[trjExpensify]

Why wouldn't we put join thread in the overflow menu?

[JmillsExpensify]

Just speaking for myself, I use that one a bunch.

[trjExpensify]

Same, but I think it's a power user thing. I've never been frustrated with where it is in Slack either, so I think it's fine in the overflow menu.

[JmillsExpensify]

Ok cool. Down with that approach then.

[JmillsExpensify]

We still need to get to this, though admittedly it doesn't feel like a priority right now.

[JmillsExpensify]

Still feels like low priority.

[JmillsExpensify]

Same as above. We'll come back to this later.

[JmillsExpensify]

Not a priority

[JmillsExpensify]

@dubielzyk-expensify This might be a good issue for you to lead given that you're doing quite a bit of polish and cleaning up designs through out the app. No worries though if you have a lot going on!

[dubielzyk-expensify]

Happy to take it on. I think we should stick with 3 emojis in both cases personally. Having looked through the different states etc it looks to me like this is the list of actions:

(Emoji’s)
Thumbs up
Heart
Joy
(Action)
Add emoji reaction
Reply in thread
Edit (Your comment only)
Download (Attachment only)
(Overflow)
Mark as unread
Subscribe to thread
Copy to clipboard
Report
Delete comment

With the above it'll be [Emoji 1, Emoji 2, Emoji 3, Add emoji, Action 1, Action 2, overflow]. Whatever don't fit goes in the overflow.

I also took the liberty to clean up the pixels a bit from what we have today to make it less overwhelming and make the tap targets a bit bigger. This also eliminates the space between the actions:

Putting it all together we get:

Also suggest we add a new Mark as unread icon to make it clearer. Here's my take:

Would love takes from @Expensify/design on this too

[shawnborton]

No hot takes from me, I love all of this and I agree where you landed with your exploration. Nice job!

[quinthar]

Hm, I use "mark unread" all the time, easily 10x more often than the sum of everything else. Can we please not put that behind an overflow?

[quinthar]

"Subscribe to thread" can definitely go (I didn't even know it existed).

[quinthar]

Copy link also seems like a kind of poweruser thing that happens very rarely

[quinthar]

I sorta think we could move "open thread" behind the overflow as well, and just make pressing the chat itself open the thread.

[JmillsExpensify]

I use "subscribe to thread" and "open thread" pretty much all the time, less so "mark as unread". That said, I could live with "subscribe to thread going behind the three dot overflow menu. I think the issue we're going to face is that we all use products differently.

[JmillsExpensify]

All in all, I think Jon nailed it!

[dannymcclain]

Love what you've done Jon!

I think both of your updated mark as unread icons are good, but I have a slight preference for the chat bubble one. Would be totally happy with either though!

[JmillsExpensify]

Are we good to move forward with this one? Not exactly a priority but I still think it's nice polish for the chat experience.

[dubielzyk-expensify]

✅ This is ready:

• New icon added to Figma
• Mocks polished and ready for eng

---

Specced up and ready here:

Your comment (with and without attachment)

Comment from someone (with and without attachment)

---

New "Reply in thread" icon

I do think we'll need a new "Reply in thread" icon. I'll do that work as a separate ticket and implementation, but I suggest something like this:

I've started a thread in Slack for this.

[JmillsExpensify]

Great call on Reply in thread. This is looking super great!

[dubielzyk-expensify]

Not overdue. Think this is ready though

[JmillsExpensify]

Yes, I think we're aligned on this point. Would you mind posting a summary in #product in Slack as a final confirmation? Then we can get this assigned out.

[dubielzyk-expensify]

Done and done. Slack link

[JmillsExpensify]

Looks like you have lots of support in the Slack thread!

[JmillsExpensify]

@quinthar Should we close this issue? I saw you created a separate one: #33573.

[JmillsExpensify]

Closing since we have a duplicate issue now.